排序后的角材工作台载荷数据

Question

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

Answer 1

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