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
matSort
sur la balise table . De plus, nous devons placer la directivemat-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. - Ajoutons
MatSortModule
auximports
mé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-header
au 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
àdesc
de la directivematSort
. Pour inverser l’ordre uniquement pour un en-tête spécifique, définissezstart
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
surtrue
surmatSort
pour affecter tous les en-têtes oudisableClear
surtrue
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.