1

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'
];
3
  • how does your detailsColumns look like? It should use the same id as invoiceCurrencyNetValue I guess. Commented Dec 12, 2018 at 13:15
  • it does, i have edited question Commented Dec 12, 2018 at 13:25
  • Have a look at official document Commented Dec 12, 2018 at 13:28

1 Answer 1

1

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"

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.