Angular Material table drag and drop columns with sorting not wroking

4
votes

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.

1
javascripthtmlangulartypescriptangular-material
Drag and drop isn't working on the stackblitz. I think your stackblitz needs a theme (e.g. add @import '@angular/material/prebuilt-themes/deeppurple-amber.css'; to styles.css) and hammerjs (import 'hammerjs'; in app.component.ts) – Andrew Allen
I've updated the stackblitz with your recommendations. Also if you drag the column header then it drags the whole column, there is no dragging on the cells. – sunalive
You're the man btw. Haven't found a sorting for the column yet and your stackblitz worked straight away. If you mind I posted it on their github as a reference. github.com/angular/components/issues/13776 – Swoox

1 Answers

4
votes

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>