How to sort MatTableDataSource programmatically?

Question

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.

Answer 1

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.

Answer 2

https://stackblitz.com/edit/angular-mat-sort-default-ytu6ch

check this out!

instead of manually sorting with the array.sort we can make use of the @ViewChild(MatSort) sort!: MatSort; and import { MatSort, Sort } from '@angular/material/sort';

to sort based on condition.

Answer 3

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>

Answer 4

Might be the shortest sort manually function for Material Table

Here is my short solution combined with JavaScript:

sortDataSource(idVal: string, startVal?: string): void {
    this.dataSource.data.sort(
        (a, b) => {
            return startVal === 'asc' ? a[idVal] - b[idVal] : (startVal === 'desc' ? b[idVal] - a[idVal] : a[idVal] - b[idVal]);
        }
    );
}

Answer 5

For this to work with nested objects inside your datasource just place following in your datasource initialization routine:

...

this.dataSource.sort = new MatSort()

this.dataSource.sortingDataAccessor = _.get

Where _.get is a lodash function (https://docs-lodash.com/v4/get/)

My sorting function that is called whenever my sorting select control changes is as follows:

private sortDataSource(sortItem: SortItem) {
        console.log('Sort:: ', sortItem)

        this.dataSource.sort.sort(<MatSortable>{
            id: 'ad.createdAt',
            start:
                sortItem.sortOrder === SortOrder.ASCENDING ? 'asc' : 'desc',
            disableClear: true,
        })
        this.dataSource.data.sort(
            (a: any, b: any) => {
                
                if (
                    a['ad']['createdAt'] <
                    b['ad']['createdAt']
                ) {
                    if (sortItem.sortOrder === -1) {
                        return -1
                    } else {
                        return 1
                    }
                } else if (
                    a['ad']['createdAt'] >
                    b['ad']['createdAt']
                ) {
                    if (sortItem.sortOrder === -1) {
                        return 1
                    } else {
                        return -1
                    }
                } else {
                    return 0
                }
            }
        )

    }

For the sake of completeness here is my SortItem interface thats used to specify sort items:

export interface SortItem {
    title: string
    adProperty: string
    sortOrder: SortOrder
}

export enum SortOrder {
    DESCENDING = -1, // 'descending',
    ASCENDING = 1, // 'ascending'
}