Trier, filtrer des données dans un material DataTable
Trier,filtrer des données dans un ‘material DataTable’
-
Objectifs
- Etre capable de trier un angular ‘material DataTable’
-
Présentation
- Dans le tutoriel précédent, Récupérer des données dans un Angular DataTable, nous avons récupéré des données provenant d’une base de données MySQL dans un ‘material DataRable
- Dans ce tutoriel ,nous allons ajouter la fonctionnalité de tri à notre table, et à cet effet, nous allons utiliser la directive
matSortsur la balise table . De plus, nous devons placer la directivemat-sort-headerpour chaque cellule d’en-tête qui déclenchera le tri. -
Réalisation
- Comme nous avons annoncé, nous prenons le travail réalisé dans le tutoriel Récupérer des données dans un Angular DataTable,comme départ.
-
Modifier le fichier module.ts
- Pour prendre en charge le tri dans notre tableau, nous devons importer
MatSortModuledans le module d’application. - Ajoutons
MatSortModuleauximportsmétadonnées du@NgModule. -
Modifier le fichier component.html
- La modification de la balise ma-table tag va être notre première tâche:
- Ensuite, nous allons ajouter la directive
mat-sort-headerau colonnes -
Modifier le fichier component.ts
- Pour que la fonctionnalité de tri soit opérationnelle, nous devons également modifier le fichier component.ts:
- Informez la source de données de votre tri : Votre MatTableDataSource ne connaît pas le tri par défaut. Obtenez une instance de ViewChild à trier dans votre code:
-
Modification de l’ordre de tri
- Par défaut, un en-tête de tri commence son tri à ascendant puis descendant. Déclencher l’en-tête de tri après descendant supprimera le tri.
- Pour inverser l’ordre de tri pour tous les en- têtes, définissez la
matSortStartàdescde la directivematSort. Pour inverser l’ordre uniquement pour un en-tête spécifique, définissezstartplutôt l’ entrée uniquement sur l’en-tête. - Pour empêcher l’utilisateur d’effacer l’état de tri d’une colonne déjà triée, définissez
matSortDisableClearsurtruesurmatSortpour affecter tous les en-têtes oudisableClearsurtruesur un en-tête spécifique. -
Résultat
-
Filtrage Mat-Table
- Dans ce vidéo, je vais vous montrer comment filtrer votre mat-table.
import { MatSortModule } from '@angular/material/sort' ;
@NgModule({
declarations: [
AppComponent
],
imports: [
...............
MatSortModule
],<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="prenom">
<mat-header-cell *matHeaderCellDef mat-sort-header> prenom </mat-header-cell>
<mat-cell *matCellDef="let post"> {{post.prenom}} </mat-cell>
</ng-container>@ViewChild(MatSort) sort: MatSort;
constructor(private repoService: RepositoryService) { }
ngOnInit() {
this.getAllOwners();
this.dataSource.sort = this.sort;
}
