Introduction au DataTable

• Le redimensionnement des colonnes et des lignes,le tri, la validation, le filtrage, le regroupement et les agrégations.

• Composants interactifs (tels que des puces, des boutons ou des menus)
• Éléments non interactifs (tels que les badges)
• Outils pour interroger et manipuler des données

La DataTable d’Angular Material est basée sur la CdkTable.Le principe est que vous devez définir un template pour chaque colonne que vous voulez afficher.

Dans ce template, vous pouvez définir l’aspect de 3 zones :

• L’en-tête de la colonne,
• Le contenu de chaque cellule de la colonne,
• Le pied de la colonne.

Légende:

1. Conteneur
2. Noms d’en-tête de colonne
3. Bouton Trier
4. Cases à cocher de ligne
5. Lignes

<mat-table [dataSource]="dataSource">
...........
</mat-table>

La table peut etre représenté par l’écriture suivant:

<table mat-table [dataSource]="dataSource">
......
</tble>

• Le nombre d’éléments par page (valeur par défaut de 50)
• Le nombre total d’éléments paginés
• L’index de la page actuelle est défini par défaut sur 0, mais peut être défini explicitement via pageIndex.

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Nom	La description
color: ThemePalette	Couleur du thème à utiliser pour les contrôles de formulaire sous-jacents.
disabled: boolean	Indique si le composant est désactivé.
hidePageSize: boolean	Indique si l’utilisateur doit masquer l’interface utilisateur de sélection de la taille de la page.
length: number	La longueur du nombre total d’éléments paginés. Par défaut à 0.
pageIndex: number	Index de page de base zéro de la liste d’éléments affichée. Par défaut à 0.
pageSize: number	Nombre d’éléments à afficher sur une page. Par défaut réglé sur 50.
pageSizeOptions: number[]	Ensemble d’options de taille de page fournies à afficher pour l’utilisateur.
showFirstLastButtons: boolean	Indique si l’utilisateur doit afficher le premier / dernier bouton UI.
page: EventEmitter	Événement émis lorsque le paginateur modifie la taille de la page ou l’index de la page.
initialized: Observable<void>	Flux qui émet une fois pendant ngOnInit de la directive / composant.

Nom	La description
firstPage	Passez à la première page si ce n’est déjà fait.
getNumberOfPages	Calculez le nombre de pages.
hasNextPage	S’il y a une page suivante..
hasPreviousPage	S’il y a une page précédente..
lastPage	Passez à la dernière page si ce n’est déjà fait.
nextPage	Passe à la page suivante si elle existe.
previousPage	Revenez à la page précédente si elle existe.

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let post"> {{post.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="nom">
      <th mat-header-cell *matHeaderCellDef> Nom </th>
      <td mat-cell *matCellDef="let post"> {{post.nom}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="prenom">
      <th mat-header-cell *matHeaderCellDef> Prénom </th>
      <td mat-cell *matCellDef="let post"> {{post.prenom}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let post; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

<div>
  <mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="nom">
      <mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.nom}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="prenom">
      <mat-header-cell *matHeaderCellDef> rénom </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.prenom}} </mat-cell>
    </ng-container>
   
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>