I have the following table
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation">
<!-- Name Column -->
<ng-container matColumnDef="employee.name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let employeeWrapper">{{employeeWrapper.employee.name}}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let employeeWrapper">{{employeeWrapper.id}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
</table>
From this answer, matColumnDef
and the object property must have the same name.
I got it right for employeeWrapper.id
and the sort is working.
But for employeeWrapper.employee.name
, it's a second level property. Setting the matColumnDef
to employee.name
or name
does not work. I've tried both.
Is there a solution/workaround for this problem?
You can write a little helper function to compute the value of a nested property given its path, and use it to override the default sortingDataAccessor
of your dataSource
, something like
getPropertyByPath(obj: Object, pathString: string){
return pathString.split('.').reduce((o, i) => o[i], obj);
}
dataSource.sortingDataAccessor = (data, sortHeaderId: string) => {
return getPropertyByPath(data, sortHeaderId);
};
You also have to set the mat-sort-header
property of the mat-header-cell
equal to your nested property string (see the demo for clarification).
Stackblitz demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With