Angular

Trier, filtrer des données dans un material DataTable

Un cours complet pour maîtriser Trier, filtrer des données dans un material DataTable.

0 chapitres 0 QCM Accès gratuit

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 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.
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;
  }
```
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.
Résultat
Filtrage Mat-Table
- Dans ce vidéo, je vais vous montrer comment filtrer votre mat-table.