Tengo una tabla de casos construida con angular.material y necesito agregar la ordenación por fecha. Pero mi fecha es un tipo de string , por lo que se ordena incorrectamente. Cómo anular el comportamiento predeterminado mat-sort-header . ¿Y es posible?
<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>Y en el lado TS:
sort: MatSort; @ViewChild(MatSort) set appBacon(sort : MatSort) { this.sort = sort; this.dataSource.sort = this.sort; } dataSource = new MatTableDataSource([]);Aquí está la solución: - Pase el objeto de fecha en la función sortingDataAccessor que asegurará que los objetos de fecha se clasifiquen correctamente.
this.dataSource.sortingDataAccessor = (item, property) => { switch (property) { case 'fromDate': return new Date(item.fromDate); default: return item[property]; } };MatTableDataSource tiene sortingDataAccessor que podemos personalizar según nuestras necesidades.
Estoy ampliando la respuesta de Sagar Kharche. Debe anular sortingDataAccessor en MatTableDataSource.
this.dataSource.sortingDataAccessor = (item, property) => { switch (property) { case 'fromDate': return new Date(item.fromDate); default: return item[property]; } };'elemento' es el objeto ObjectName en 'dataSource: MatTableDataSource< ObjectName>'
'propiedad' es el atributo matColumnDef="startDate" que entra.
Entonces, por ejemplo, podría tener un objeto de la siguiente manera:
export interface IPersonInfo { name: string, position: string, startDate: string, salary: string }El elemento de su tabla de fechas se vería así:
<ng-container matColumnDef="startDate"> <th mat-header-cell *matHeaderCellDef> Start Date </th> <td mat-cell *matCellDef="let element"> {{element.startDate}} </td> </ng-container>Entonces, cuando hace clic en el encabezado para ordenar 'Fecha de inicio', todos los objetos debajo de la columna fecha de inicio pasan uno por uno al valor del 'elemento', mientras que 'fecha de inicio' en matColumnDef="fecha de inicio" se pasa como el valor de 'propiedad' en la función sortingDataAccessor.
Entonces, con la función sortingDataAccessor, puede anular cada columna.
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]; } };Sí tu puedes.
Debe proporcionar una función al campo MatTableDataSource.sortData .
Puede encontrar la firma y la implementación predeterminada aquí
Por ejemplo:
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}); }Siempre se recomienda usar un tipo para una tabla, en lugar de usar una matriz de cualquier tipo. Puede definir su interfaz para el mismo.
Espero eso ayude. :)