I have a case table constructed with angular.material and I need to add sorting by date. But my date is a string type, and so sorting incorrectly. How to overriding default mat-sort-header behavior. And it's possible?
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" matSort>
<!-- Reg Date Column -->
<ng-container matColumnDef="regDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Reg Date </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.regDate}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
And on TS side:
sort: MatSort;
@ViewChild(MatSort)
set appBacon(sort : MatSort) {
this.sort = sort;
this.dataSource.sort = this.sort;
}
dataSource = new MatTableDataSource([]);
Here is the solution:- Pass Date object in sortingDataAccessor function which will make sure date objects will get sorted correctly.
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'fromDate': return new Date(item.fromDate);
default: return item[property];
}
};
MatTableDataSource has sortingDataAccessor which we can customize as per our need.
I'm expanding on Sagar Kharche answer. You need to override the sortingDataAccessor on MatTableDataSource.
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'fromDate': return new Date(item.fromDate);
default: return item[property];
}
};
'item' is the object ObjectName in 'dataSource: MatTableDataSource< ObjectName>'
'property' is the matColumnDef="startDate" attribute coming in.
So for example you might have an object as follows:
export interface IPersonInfo {
name: string,
position: string,
startDate: string,
salary: string
}
Your date table element would look like this:
<ng-container matColumnDef="startDate">
<th mat-header-cell *matHeaderCellDef> Start Date </th>
<td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
</ng-container>
So when you click on the header to sort 'Start Date', all the objects under the startDate column get passed in one by one into the 'item' value, while the 'startDate' in matColumnDef="startDate" is passed in as the 'property' value in the sortingDataAccessor function.
So with the sortingDataAccessor function you could override every single column.
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'name': return item.name;
case 'position': return item.position;
case 'startDate': return item.startDate;
case 'salary': return item.salary;
default: return item[property];
}
};
Yes, you can.
You need to provide a a function to MatTableDataSource.sortData field.
You can find the signature and default implementation here
For e.g:
customSortData(data: T[], sort: MatSort): T[] {
// sort.active will tell you if sort is active and for which headerid
// sort.direction will tell u if sort is 'asc' or not
return data.sort((a, b) => {// Ur implementation});
}
It is always recommended to use a type for a table, rather than using array of any type. You can define your interface for the same.
Hope it helps. :)