angular - Angular material table drag and drop columns doesn't update rows

Question

Is there a way to update an Angular Material table's datasource (rows) according to the changes that have been made by drag and drop on the columns?

I have a dropListedDrop event which updates columns:

dropListDropped(event: CdkDropList, index: number) {
  if (event) {
    moveItemInArray(this.headers, this.previousIndex, index);
    this.setDisplayedColumns();
  }
}

But the data in dataSource isn't being changed automatically after the drag and drop action completes.

Example here: StackBlitz

Answer 1

It mentioned here that Angular Material table does not update automatically in order to optimize performance. To Update the table you simply call renderRows() on the table.

You can access the table like this @ViewChild(MatTable) table: MatTable<any>; and then called table.renderRows();

Answer 2

dropListDropped(event: CdkDropList, index: number) {
  if (event) {
    moveItemInArray(this.headers, this.previousIndex, index);
    this.headers = [...this.headers];
  }
}

在线演示HERE（即使您有 Angular 管道过滤器，此解决方案也有效）