<tyro-ui-data-table>

Data Table

Table modulaire avec recherche, filtres par colonne, tri et pagination optionnels. Utilise la directive [tyroCol] pour les templates de cellules personnalisés via ng-content.

Aperçu - fonctionnalités complètes

[searchable] [filterable] [paginated] + cellules personnalisées
Nom
Email
Rôle
Statut
Maxime Tournier maxime@tyrolium.fr AdminActif
Alice Martin alice@tyrolium.fr ÉditeurActif
Bob Dupont bob@solidserv.fr ViewerInactif
Chloé Bernard chloe@influnias.fr ÉditeurActif
David Chen david@tyrociel.fr ViewerSuspendu
12 résultats

Inputs

Propriété
Type
Défaut
Description
[columns] ITyroUiDataTableColumn[] []Définition des colonnes (clé, label, largeur, tri, filtre…)
[data] unknown[] []Données à afficher - accepte n'importe quel tableau d'objets
[searchable] boolean falseAffiche une barre de recherche globale (filtre toutes les colonnes)
[filterable] boolean falseAffiche des filtres individuels par colonne (nécessite filterable: true sur la colonne)
[paginated] boolean falseActive la pagination avec navigation par pages
[pageSize] number 10Nombre de lignes affichées par page (ignoré si [paginated]="false")

Interface - ITyroUiDataTableColumn

Champ
Type
Description
key string Clé correspondant à la propriété de l'objet de données
label string En-tête de colonne (fr)
labelEn? string En-tête de colonne (en)
sortable? boolean Active le tri au clic sur l'en-tête
filterable? boolean Inclut cette colonne dans le panneau de filtres individuels
width? string Largeur fixe de la colonne (ex : "160px")
align? 'left' | 'center' | 'right' Alignement du texte dans la colonne

Cellules personnalisées - directive [tyroCol]

Ajoutez des <ng-template [tyroCol]="key" let-row> à l'intérieur du composant pour remplacer le rendu de n'importe quelle cellule. Accédez à la ligne complète via let-row, puis utilisez $any(row).property pour contourner le type unknown de TypeScript. 

<tyro-ui-data-table [columns]="cols" [data]="users">

  <ng-template tyroCol="status" let-row>
    <tyro-ui-chip variant="success" size="sm">
      {{ $any(row).status }}
    </tyro-ui-chip>
  </ng-template>

</tyro-ui-data-table>