CODEWITHSUNDEEP
angularangular-material
user7832762
user7832762

Reputation:

Angular Data table sorting works only on 1 column?

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'
];

Upvotes: 1

Views: 1983

Answers (1)

n1kkou
n1kkou

Reputation: 3142

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"

Upvotes: 1

Related Questions