web-dev-qa-db-fra.com

Comment trier par chaîne de date avec mat-sort-header?

J'ai une table de cas construite avec angular.material et je dois ajouter un tri par date. Mais ma date est un type string, et donc un tri incorrect. Comment remplacer la valeur par défaut mat-sort-header comportement. Et c'est 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>

Et côté TS:

sort: MatSort;
@ViewChild(MatSort)
set appBacon(sort : MatSort) {
    this.sort = sort;
    this.dataSource.sort = this.sort;
}
dataSource = new MatTableDataSource([]);
angulartypescriptangular-material
11
Pavel

Voici la solution: - Passer l'objet Date dans la fonction sortingDataAccessor qui s'assurera que les objets date seront triés correctement.

this.dataSource.sortingDataAccessor = (item, property) => {
  switch (property) {
    case 'fromDate': return new Date(item.fromDate);
    default: return item[property];
  }
};

MatTableDataSource a sortingDataAccessor que nous pouvons personnaliser selon nos besoins.

23
Sagar Kharche

Je développe la réponse de Sagar Kharche. Vous devez remplacer le sortingDataAccessor sur MatTableDataSource.

this.dataSource.sortingDataAccessor = (item, property) => {
  switch (property) {
     case 'fromDate': return new Date(item.fromDate);
     default: return item[property];
  }
};

'item' est l'objet ObjectName dans 'dataSource: MatTableDataSource <ObjectName>'

'propriété' est l'attribut matColumnDef = "startDate" entrant.

Ainsi, par exemple, vous pourriez avoir un objet comme suit:

export interface IPersonInfo {
    name: string,
    position: string,
    startDate: string,
    salary: string
}

Votre élément de table de dates devrait ressembler à ceci:

<ng-container matColumnDef="startDate">
    <th mat-header-cell *matHeaderCellDef> Start Date </th>
    <td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
</ng-container>

Ainsi, lorsque vous cliquez sur l'en-tête pour trier 'Date de début', tous les objets sous la colonne startDate sont passés un par un dans la valeur 'item', tandis que le 'startDate' dans matColumnDef = "startDate" est passé en tant que valeur 'propriété' dans la fonction sortingDataAccessor.

Ainsi, avec la fonction sortingDataAccessor, vous pouvez remplacer chaque colonne.

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];
  }
};
5
Braden Brown

Oui, vous pouvez.

Vous devez fournir une fonction à MatTableDataSource.sortData champ.

Vous pouvez trouver la signature et l'implémentation par défaut ici

Par exemple:

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});
}

Il est toujours recommandé d'utiliser un type pour une table, plutôt que d'utiliser un tableau de n'importe quel type. Vous pouvez définir votre interface pour la même chose.

J'espère que ça aide. :)

3
Akanksha Gaur