How to sort MatTableDataSource programmatically?

4
votes

I'm trying to sort the MatTableDataSource programmatically so that I can sort the data via the use of a button rather than by the table column header when viewing the data in a specific mobile layout. However, I'm having trouble doing so.

I've followed this post's advice on how to do it but the data sort is not being reflected. The mobile layout design for using the same data as the table:

<mat-card matSort *ngFor="let item of dataSource.filteredData">

The function I'm using to try and sort the data is:

sortDataSource(id: string, start: string){
  this.dataSource.sort.sort(<MatSortable>({id: id, start: start}));
}

which is called from tapping onto a button within a mat-menu e.g.

<mat-menu #sortMenu="matMenu" yPosition="below" [overlapTrigger]="false">
            <button mat-menu-item (click)="sortDataSource('createdDate', 'asc')"><span>Creation Date</span><mat-icon>arrow_upward</mat-icon></button>

Any help on this would be greatly appreciated!

Link to StackBlitz.

Edit: Adding where I'm assigning the data to the table's dataSource which comes from an Observable array:

this.data$.subscribe(data => {
      this.dataSource.data = data;
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
}

Edit 2: Removed error image as fixed by add "matSort" to the the mat-card using *ngFor for creating the mobile layout version of the mat-table.

2
angularsortingangular-materialmat-table
Where do you define this.dataSource? You are not actually sorting anything but rather setting a sorting id and direction. – Julien Ambos
Within the ngOnInit. I'm able to sort the data fine when using the mat-table's column headers but I'm trying to sort it with the use of a button instead by using the MatTableDataSource's methods but I can't find much documentation on it. – SnakeyHips
The mat-sort directive is connected to the table and therefore sorts the data, but manually doing it is different. Please post your dataSource code – Julien Ambos
Added in edit as requested. – SnakeyHips
Managed to fix the error message as said by the edit but the sort is still not being reflected by the data. – SnakeyHips

2 Answers

1
votes

UPDATE

A bug was already reported to the Material team over at Github.com. It seems that this is currently not possible. Please use a manual approach or implement your own sorting header.

Try manually sorting the data of the datasource:

sortDataSource(id: string, start: string) {
    this.dataSource.sort.sort(<MatSortable>({ id: id, start: start }));
    this.dataSource.data.sort((a: any, b: any) => {
        if (a.createdDate < b.createdDate) {
            return -1;
        } else if (a.createdDate > b.createdDate) {
            return 1;
        } else {
            return 0;
        }
    });
}

You can easily make this more generic using the id and start parameters of your function.

1
votes

When you reassign dataSource.sort with matSort, the template gets notified on the change and represent the changes.

component.ts

@ViewChild(MatSort, { static: false }) matSort: MatSort;

  orderData(id: string, start?: 'asc' | 'desc') {
    const matSort = this.dataSource.sort;
    const toState = 'active';
    const disableClear = false;

    matSort.sort({ id: null, start, disableClear });
    matSort.sort({ id, start, disableClear });

    this.dataSource.sort = this.matSort;
  }

component.html

<button mat-raised-button
   (click)="orderData('nameOfColumn', 'asc')">ASC</button>
<button mat-raised-button
   (click)="orderData('nameOfColumn', 'desc')">DESC</button>