Angular Material table drag and drop columns with sorting not wroking

Question

The angular material table with sorting doesn't work properly with drag-and-drop.

Here's what I've got so far, it kinda works where the sorting works with a specific column after being dragged and dropped. But still has weird functionality.

Stackblitz

I want to be able to use the normal sorting functionality of Material Table while being able to drag and drop columns.

Answer 1

matSort needs to be on the mat-table element

<mat-table [dataSource]="dataSource" class="mat-elevation-z8" cdkDropListGroup matSort>

rather than on the ng-container

<mat-table [dataSource]="dataSource" class="mat-elevation-z8" cdkDropListGroup>
  <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.field" matSort>