Angular Data table sorting works only on 1 column?

Question

Sorting works on column Id but it doesn't work on the second column, why so?

<mat-table #detailsTable #detailsSort="matSort" [dataSource]="details" matSort>

<ng-container matColumnDef="id">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
  <mat-cell *matCellDef="let detail"> {{detail.id}} </mat-cell>
</ng-container>

<ng-container matColumnDef="invoiceCurrencyNetValue">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Net value </mat-header-cell>
  <mat-cell *matCellDef="let detail"> {{detail.attributes.invoiceCurrencyNetValue}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="this.detailsColumns; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: this.detailsColumns;" matRipple class="element-row"></mat-row>
  </mat-table>

And this is how I set the data and sort in .ts file:

details = new MatTableDataSource(details.data);
details.sort = this.detailsSort;

And this is columns declaration:

detailsColumns = [
    'id', 'invoiceCurrencyNetValue'
];

how does your `detailsColumns` look like? It should use the same id as `invoiceCurrencyNetValue` I guess. — John, Dec 12 '18 at 13:15
Have a look at [official document](https://material.angular.io/components/sort/overview) — Prashant Pimpale, Dec 12 '18 at 13:28

n1kkou · Answer 1 · 2018-12-12T13:36:13.810

Most probably because your attributes is an object, and the sorting is expecting an actual value.

e.g. detail.id can be sorted by id value, but detail.attributes.invoiceCurrencyNetValue cannot be sorted, as it is an object, not an actual value.

You can start from here: Angular Material 2 DataTable Sorting with nested objects

As a reference, you can extend your sort functionality by using "sortingDataAccessor"

Angular Data table sorting works only on 1 column?

1 Answers1