Trier, filtrer des données dans un material DataTable

Trier,filtrer des données dans un ‘material DataTable’

  1. Objectifs

    • Etre capable de trier un angular ‘material DataTable’
  2. 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 matSort sur la balise table . De plus, nous devons placer la directive mat-sort-header pour chaque cellule d’en-tête qui déclenchera le tri.



  3. 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 MatSortModule dans le module d’application.
      • import { MatSortModule } from '@angular/material/sort' ;
        
      • Ajoutons MatSortModule aux imports métadonnées du @NgModule.
      • 
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            ...............
            MatSortModule
          ],
    • Modifier le fichier component.html
      • La modification de la balise ma-table tag va être notre première tâche:
      • <mat-table [dataSource]="dataSource" matSort>
        
      • Ensuite, nous allons ajouter la directive mat-sort-header au colonnes
      •  <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>
    • 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:
      • @ViewChild(MatSort) sort: MatSort;
         
          constructor(private repoService: RepositoryService) { }
         
          ngOnInit() {
            this.getAllOwners();
            this.dataSource.sort = this.sort;
          }
  4. 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 à desc de la directive matSort. Pour inverser l’ordre uniquement pour un en-tête spécifique, définissez start plutô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 matSortDisableClear sur true sur matSort pour affecter tous les en-têtes ou disableClear sur true sur un en-tête spécifique.
  5. Résultat
    • Tri des données dans un material DataTable

  6. Filtrage Mat-Table

    • Dans ce vidéo, je vais vous montrer comment filtrer votre mat-table.



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement