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?

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?

• javascript
• angular
• angular-material
• mat-table

1 Answer 1

You can write a little helper function to pute 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