CODEWITHSUNDEEP
javascriptangularangular-material
kumara
kumara

Reputation: 937

angular material table load data after sorting

I am using angular material table to display data. Currently, i want to load angular material table sorted from status. I have 3 status - complete, pending & fail. I want fail record to show last and complete and pending records should display first.

I used below sorting function to do it, but its not working.

  this.dataSource = new MatTableDataSource(results['InvoiceHeaders']);
  this.dataSource.sortingDataAccessor = (item, property) => {
    switch (property) {
      case 'status': return item.element.status;
      default: return item[property];

      //     default: return item[property];
    }
  };
  this.dataSource.sort = this.viewsort;

Can u help me to do these type of sample.

Thanks

Upvotes: 0

Views: 1638

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15041

One solution could be to create a field 'statusWeight' and assign a sortable numeric value to the 'status' column, and then use the default material sorting on that arbitary column.

  • complete to have value 1
  • pending to have value 2
  • fail to have value 3

relevant HTML:

<table mat-table [dataSource]="dataSource" matSort matSortActive="statusWeight" matSortDirection='asc' class="mat-elevation-z8">
....
</table>

working stackblitz available here

Upvotes: 1

Related Questions