Datatable

Bibliothèque Angular de composant tableau de données avec pagination, tri, recherche et sélection.

Installation

npm install @ebrin-kanga/ng-datatable primeicons
# ou
pnpm add @ebrin-kanga/ng-datatable primeicons

Dépendances peer

• @angular/animations ^18.0.0
• @angular/common ^18.0.0
• @angular/core ^18.0.0
• @angular/forms ^18.0.0
• primeicons ^7.0.0 (pour les icônes de tri et pagination)

Note: Le template utilise des classes Tailwind CSS. Assurez-vous que votre projet a Tailwind configuré.

Utilisation

Import dans votre composant

import { DatatableComponent, DataTableColumn } from '@ebrin-kanga/ng-datatable';

@Component({
  standalone: true,
  imports: [DatatableComponent],
  template: `
    <lib-datatable
      [columns]="columns"
      [data]="data"
      title="Ma liste"
      [pagination]="true"
      (action)="onAction($event)"
    ></lib-datatable>
  `
})
export class MyComponent {
  columns: DataTableColumn[] = [
    { key: 'id', label: 'ID', sortable: true },
    { key: 'name', label: 'Nom', sortable: true },
    { key: 'amount', label: 'Montant', format: 'currency', islastLine: true }
  ];
  data = [
    { id: 1, name: 'Item 1', amount: 1000 },
    { id: 2, name: 'Item 2', amount: 2500 }
  ];

  onAction(event: { type: string; row: any }) {
    console.log(event);
  }
}

Configuration des colonnes

| Propriété | Type | Description | |-----------|------|-------------| | key | string | Clé de la donnée (supporte user.name pour les chemins imbriqués) | | label | string | Libellé de l'en-tête | | sortable | boolean | Active le tri sur la colonne | | format | string | 'number', 'number:2', 'currency', 'date', 'datetime', 'percentage' | | islastLine | boolean | Affiche une ligne de total/somme en bas | | lastLineValue | (data) => string | number | Fonction personnalisée pour la ligne de total | | minWidth | string | Largeur minimale (ex: '100px') | | maxWidth | string | Largeur maximale |

Slots de contenu

<lib-datatable [columns]="columns" [data]="data">
  <!-- Actions au-dessus du tableau -->
  <div data-table-actions-sup>
    <button>Action supérieure</button>
  </div>
  <!-- Actions à côté de la recherche -->
  <div data-table-actions>
    <button>Filtre</button>
  </div>
  <!-- Indicateur de chargement personnalisé (nécessite DataTableLoadingDirective) -->
  <div data-table-loading>
    <app-loading></app-loading>
  </div>
</lib-datatable>

Pagination côté serveur

serverSidePagination = true;
totalElements = 100;
currentPage = 1;
currentPageSize = 10;

// Écouter les événements
onPageChange(page: number) { /* ... */ }
onPageSizeChange(size: number) { /* ... */ }
onSearchChange(term: string) { /* ... */ }
onSortChange(event: { key: string; direction: 'asc' | 'desc' }) { /* ... */ }

Build

ng build datatable

Les artifacts sont dans dist/datatable.

Tests

ng test datatable