Mat Sort header does not sort data

Question

I have exhausted all examples, documentation and so on. I've used angular tables for three years now and even within the app I have this issue, I have other tables that have no issue working with sort. I kept comparing them but I can't figure out what the difference between the two are.

  dataSource: MatTableDataSource<IOrder>;
  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild('mainTable', { static: false }) table: MatTable<IOrder>;

then, when the data arrives from store/http call and so on:

          this.dataSource = new MatTableDataSource(orders);
          this.dataSource.sort = this.sort;
          this.ref.detectChanges();
          this.table.renderRows();

On the frontend:

<table
        matSort
        class="table"
        mat-table
        multiTemplateDataRows
        [dataSource]="dataSource"
        #mainTable
      >

and the definitions:

        <tr mat-header-row *matHeaderRowDef="activeColumns; sticky: true"></tr>
        <tr
          mat-row
          *matRowDef="let row; columns: activeColumns; let i = index"
        ></tr>

and then an example of actual row:

<ng-container matColumnDef="UPRN">
          <th
            class="table-header"
            mat-header-cell
            *matHeaderCellDef
            mat-sort-header="UPRN"
          >
            UPRN
          </th>
          <td class="table-cell" mat-cell *matCellDef="let row">
            {{ row.site.UPRN }}
          </td>
        </ng-container>

I've had one for createdAt as well which is identical.

Everything seems to be defined properly and there's no errors anywhere.

If I log on the console the mat sort, I can see all the right rows/columns in the 'Entries'.

Can you create `stackblitz` – Abhishek Dec 19 '19 at 15:47 — Abhishek, Dec 19 '19 at 15:47

score 0 · Answer 1 · answered Dec 19 '19 at 16:15

0

If everything imported right, I think it isn't working because it is looking for row.UPRN instead of row.site.UPRN because you defined mat-sort-header="UPRN" Please try to do custom sort logic something like this

https://stackblitz.com/edit/angular-1urgk9

I hope this helps you solve the problem

answered Dec 19 '19 at 16:15

Ashot Aleqsanyan

4,252
1
15
27

1

Thanks, do you happen to know if this just breaks the whole app or sorting won't work for that? I have for example sort.status where the value is a string and the sort doesn't seem to work on any of those straightforward properties. Will give this a shot though! – SebastianG Dec 19 '19 at 16:26
@MichaelB I think it doesn't break the app, just the sort will not work. – Ashot Aleqsanyan Dec 19 '19 at 16:30
@MichaelB can you check the imports? Please make sure you are imported the `MatSortModule` into that module where your component imported and declared into `declarations` – Ashot Aleqsanyan Dec 19 '19 at 16:57
the Angular Material models are all imported via a shared module into all modules and it works in another module that just shared the data like that. – SebastianG Dec 19 '19 at 17:04

score 0 · Accepted Answer · answered Jan 29 '20 at 15:13

What actually worked was provindg a function with a switchcase as the value for dataSource.sortingDataAccessor property, like this:

          this.dataSource.sortingDataAccessor = (item, property) => {
            switch (property) {
              case 'UPRN':
                return item.site.UPRN;
              case 'Status':
                return item.status;

              case 'Updated at': {
                return item.updatedAt;
              }
              case 'Updated By': {
                return item.updatedByFriendly;
              }
              case 'Created by': {
                return item.createdByFriendly;
              }
              default: {
                return item[property];
              }
            }
          };

Intellisense helps out with available properties as well. The case strings must be identical to what you've provided as column definitions.

Mat Sort header does not sort data

2 Answers2