Angular Material 2 DataTable Sorting with nested objects
AngularAngular Material2Angular Problem Overview
I have a normal Angular Material 2 DataTable with sort headers. All sort are headers work fine. Except for the one with an object as value. These doesn't sort at all.
For example:
<!-- Project Column - This should sort!-->
<ng-container matColumnDef="project.name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Project Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.project.name}} </mat-cell>
</ng-container>
note the element.project.name
Here's the displayColumn config:
displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];
Changing 'project.name'
to 'project'
doesn't work nor "project['name']"
What am I missing? Is this even possible?
Here's a Stackblitz: Angular Material2 DataTable sort objects
Edit: Thanks for all your answers. I've already got it working with dynamic data. So I don't have to add a switch statement for every new nested property.
Here's my solution: (Creating a new DataSource which extends MatTableDataSource is not necessary)
export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> {
sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) => string | number) =
(data: WorkingHours, sortHeaderId: string): string | number => {
let value = null;
if (sortHeaderId.indexOf('.') !== -1) {
const ids = sortHeaderId.split('.');
value = data[ids[0]][ids[1]];
} else {
value = data[sortHeaderId];
}
return _isNumberValue(value) ? Number(value) : value;
}
constructor() {
super();
}
}
Angular Solutions
Solution 1 - Angular
It was hard to find documentation on this, but it is possible by using sortingDataAccessor
and a switch statement. For example:
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.dataSource = new MatTableDataSource(yourData);
this.dataSource.sortingDataAccessor = (item, property) => {
switch(property) {
case 'project.name': return item.project.name;
default: return item[property];
}
};
this.dataSource.sort = sort;
}
Solution 2 - Angular
You can write a function in component to get deeply property from object. Then use it in dataSource.sortingDataAccessor
like below
getProperty = (obj, path) => (
path.split('.').reduce((o, p) => o && o[p], obj)
)
ngOnInit() {
this.dataSource = new MatTableDataSource(yourData);
this.dataSource.sortingDataAccessor = (obj, property) => this.getProperty(obj, property);
this.dataSource.sort = sort;
}
columnDefs = [
{name: 'project.name', title: 'Project Name'},
{name: 'position', title: 'Position'},
{name: 'name', title: 'Name'},
{name: 'test', title: 'Test'},
{name: 'symbol', title: 'Symbol'}
];
And in html
<ng-container *ngFor="let col of columnDefs" [matColumnDef]="col.name">
<mat-header-cell *matHeaderCellDef>{{ col.title }}</mat-header-cell>
<mat-cell *matCellDef="let row">
{{ getProperty(row, col.name) }}
</mat-cell>
</ng-container>
Solution 3 - Angular
The answer as given can even be shortened, no switch required, as long as you use the dot notation for the fields.
ngOnInit() {
this.dataSource = new MatTableDataSource(yourData);
this.dataSource.sortingDataAccessor = (item, property) => {
if (property.includes('.')) return property.split('.').reduce((o,i)=>o[i], item)
return item[property];
};
this.dataSource.sort = sort;
}
Solution 4 - Angular
I use a generic method which allows you to use a dot.seperated.path with mat-sort-header
or matColumnDef
. This fails silently returning undefined if it cannot find the property dictated by the path.
function pathDataAccessor(item: any, path: string): any {
return path.split('.')
.reduce((accumulator: any, key: string) => {
return accumulator ? accumulator[key] : undefined;
}, item);
}
You just need to set the data accessor
this.dataSource.sortingDataAccessor = pathDataAccessor;
Solution 5 - Angular
I like @Hieu_Nguyen solutions. I'll just add that if you use lodash in you project as I do then the solution translates to this:
import * as _ from 'lodash';
this.dataSource.sortingDataAccessor = _.get;
No need to reinvent the deep property access.
Solution 6 - Angular
I customized for multiple nested object level.
this.dataSource.sortingDataAccessor =
(data: any, sortHeaderId: string): string | number => {
let value = null;
if (sortHeaderId.includes('.')) {
const ids = sortHeaderId.split('.');
value = data;
ids.forEach(function (x) {
value = value? value[x]: null;
});
} else {
value = data[sortHeaderId];
}
return _isNumberValue(value) ? Number(value) : value;
};
Solution 7 - Angular
Another alternative, that no one threw out here, flatten the column first...
yourData.map((d) =>
d.flattenedName = d.project && d.project.name ?
d.project.name :
'Not Specified');
this.dataSource = new MatTableDataSource(yourData);
Just another alternative, pros and cons for each!
Solution 8 - Angular
Just add this to your data source and you will be able to access the nested object
this.dataSource.sortingDataAccessor = (item, property) => {
// Split '.' to allow accessing property of nested object
if (property.includes('.')) {
const accessor = property.split('.');
let value: any = item;
accessor.forEach((a) => {
value = value[a];
});
return value;
}
// Access as normal
return item[property];
};
Solution 9 - Angular
If you want to have an Angular material table with some extended features, like sorting for nested objects have a look at https://github.com/mikelgo/ngx-mat-table-extensions/blob/master/libs/ngx-mat-table/README.md .
I created this lib because I was missing some features of mat-table out of the box.
The advanced sorting is similar to @Hieu Nguyen suggested answer but a bit extended to also have proper sorting by upper and smaller case letters.
Solution 10 - Angular
It's trying to sort by element['project.name']. Obviously element doesn't have such a property.
It should be easy to create a custom datasource that extends MatTableDatasource and supports sorting by nested object properties. Check out the examples in material.angular.io docs on using a custom source.
Solution 11 - Angular
I had the same issue, by testing the first proposition I had some errors, I could fixe it by adding "switch (property)"
this.dataSource.sortingDataAccessor =(item, property) => {
switch (property) {
case 'project.name': return item.project.name;
default: return item[property];
}
};
Solution 12 - Angular
Use MatTableDataSource Check complete MatSort issue solution
in HTML
<ng-container matColumnDef="createdDate" @bounceInLeft>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="date"> Created date
</th>
<td mat-cell *matCellDef="let element" class="date"> {{element.createdDate
| date :'mediumDate'}} </td>
</ng-container>
<ng-container matColumnDef="group.name">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="type"> Group </th>
<td mat-cell *matCellDef="let element" class="type"> {{element.group.name}} </td>
</ng-container>
@ViewChild(MatSort, { static: true }) sort: MatSort;
ngOnInit() {
this.dataSource = new MatTableDataSource(yourData);
this.dataSource.sortingDataAccessor = (item, property) => {
switch(property) {
case 'project.name': return item.project.name;
default: return item[property];
}
};
this.dataSource.sort = sort;
}
Solution 13 - Angular
My table columns were not ordering correctly, so I modified one of the answers to work with my data.
function pathDataAccessor(item: any, path: string): any {
return (item: any, path: string): any => {
return path.split(".").reduce((accumulator: any, key: string) => {
let returnValue;
if (accumulator) {
returnValue = accumulator[key];
} else {
returnValue = undefined;
}
if (typeof returnValue === "string") {
returnValue = returnValue.trim().toLocaleLowerCase();
}
return returnValue;
}, item);
};
}