Angular : datatable

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en Programmation par contrainte (IA)
Ingénieur en Génie logiciel

elmouelhi.achref@gmail.com

22 mars 2018, m2i - Aix en Provence 1 / 12

 Datatable

Pour utiliser datatable sous Angular

3 étapes à suivre :
Installation
Importation dans le module principal
Utilisation

22 mars 2018, m2i - Aix en Provence 2 / 12

 Datatable

Installation
npm install --save @angular/animations,
npm install --save @angular/material et
npm install --save @angular/cdk
Vérifier que les dépendances ont bien été rajoutés dans
package.json

22 mars 2018, m2i - Aix en Provence 3 / 12

 Datatable
Importation dans le module principal app.module.ts
import { BrowserModule } from ’@angular/platform-browser’;
import { NgModule } from ’@angular/core’;
import { BrowserAnimationsModule } from ’@angular/platform-browser/
animations’;
import { MatTableModule, MatSortModule } from ’@angular/material’;
import { AppComponent } from ’./app.component’;
import { DatatableComponent } from ’./datatable/datatable.component’;

@NgModule({
declarations: [
AppComponent,
DatatableComponent
],
imports: [
BrowserModule,
MatTableModule,
MatSortModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
22 mars 2018, m2i - Aix en Provence 4 / 12
 Datatable
Dans le composant datatable.component.ts
import { Component, OnInit } from ’@angular/core’;
import { PersonneService } from ’../../services/personne.service’;
import { MatSort, MatSortable, MatTableDataSource } from ’@angular/
material’;

@Component({
selector: ’app-datatable’,
templateUrl: ’./datatable.component.html’,
styleUrls: [’./datatable.component.css’]
})

export class DatatableComponent implements OnInit {

personnes;
mesColonnes =[’id’, ’nom’, ’prenom’];

constructor(private personneService: PersonneService) {

this.personneService.getPersonnes().subscribe(res => this.personnes
= new MatTableDataSource(res));
}

ngOnInit() { }
}

22 mars 2018, m2i - Aix en Provence 5 / 12

 Datatable
Dans le composant datatable.component.html
<div>
<mat-table [dataSource]= ’personnes’>
<ng-container matColumnDef=’id’>
<mat-header-cell *matHeaderCellDef>Id</mat-header-cell>
<mat-cell *matCellDef= "let personne">{{ personne.id }}</mat-cell
>
</ng-container>
<ng-container matColumnDef=’nom’>
<mat-header-cell *matHeaderCellDef>Nom</mat-header-cell>
<mat-cell *matCellDef="let personne">{{ personne.nom }}</mat-cell
>
</ng-container>
<ng-container matColumnDef=’prenom’>
<mat-header-cell *matHeaderCellDef>Prenom</mat-header-cell>
<mat-cell *matCellDef="let personne">{{ personne.prenom }}</mat-
cell>
</ng-container>
<mat-header-row *matHeaderRowDef=’mesColonnes’></mat-header-row>
<mat-row *matRowDef=’let row; columns:mesColonnes’></mat-row>
</mat-table>
</div>

22 mars 2018, m2i - Aix en Provence 6 / 12

 Datatable

Comment trier le résultat ?

22 mars 2018, m2i - Aix en Provence 7 / 12

 Datatable
Dans le composant datatable.component.ts
import { Component, OnInit, ViewChild } from ’@angular/core’;
import { PersonneService } from ’../../services/personne.service’;
import { MatSort, MatSortable, MatTableDataSource } from ’@angular/
material’;
@Component({
selector: ’app-datatable’,
templateUrl: ’./datatable.component.html’,
styleUrls: [’./datatable.component.css’]
})
export class DatatableComponent implements OnInit {
@ViewChild(MatSort)
sort : MatSort;
personnes;
mesColonnes =[’id’, ’nom’, ’prenom’];

constructor(private personneService: PersonneService) {

this.personneService.getPersonnes().subscribe(res => this.personnes
= new MatTableDataSource(res));
this.personnes.sort = this.sort;
}
ngOnInit() { }
}

22 mars 2018, m2i - Aix en Provence 8 / 12

 Datatable
Dans le composant datatable.component.html
<div>
<mat-table [dataSource]= ’personnes’ matSort>
<ng-container matColumnDef=’id’>
<mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header
-cell>
<mat-cell *matCellDef= "let personne">{{ personne.id }}</mat-cell
>
</ng-container>
<ng-container matColumnDef=’nom’>
<mat-header-cell *matHeaderCellDef>Nom</mat-header-cell>
<mat-cell *matCellDef="let personne">{{ personne.nom }}</mat-cell
>
</ng-container>
<ng-container matColumnDef=’prenom’>
<mat-header-cell *matHeaderCellDef>Prenom</mat-header-cell>
<mat-cell *matCellDef="let personne">{{ personne.prenom }}</mat-
cell>
</ng-container>
<mat-header-row *matHeaderRowDef=’mesColonnes’></mat-header-row>
<mat-row *matRowDef=’let row; columns:mesColonnes’></mat-row>
</mat-table>
</div>

22 mars 2018, m2i - Aix en Provence 9 / 12

 Datatable

Comment afficher une colonne qui n’est pas dans mon tableau
d’origine ? (par exemple, des boutons pour éditer chaque ligne)

22 mars 2018, m2i - Aix en Provence 10 / 12

 Datatable
Dans le composant datatable.component.ts, il faut modifier le
tableau mesColonnes
mesColonnes =[’id’, ’nom’, ’prenom’, ’option’];

Dans le composant datatable.component.html, il faut ajouter :

<ng-container matColumnDef=’option’>
<mat-header-cell *matHeaderCellDef><button mat-fab
> Add </button></mat-header-cell>
<mat-cell *matCellDef="let comment">
<button> Edit </button>
<button> Delete </button>
<button> Show </button>
</mat-cell>
</ng-container>

22 mars 2018, m2i - Aix en Provence 11 / 12

 Datatable

Plus d’informations sur datatable et material

https://material.angular.io/components/table/overview

22 mars 2018, m2i - Aix en Provence 12 / 12