Table
La table organise des données en lignes et colonnes. Elle se compose de six sous-composants
(Header, Head, Body, Row, Cell,
Footer, Caption) et gère le défilement horizontal par défaut.
Basique
Structure minimale : twig:Table avec Table:Header, Table:Body
et des Table:Row contenant des Table:Head ou Table:Cell.
| Nom | Rôle | |
|---|---|---|
| Marie Dupont | marie@sudalys.fr | Administrateur |
| Thomas Lefèvre | thomas@sudalys.fr | Éditeur |
overflow-x-auto pour le responsive.
<thead> contenant les en-têtes de colonnes.
<tbody> contenant les lignes de données.
<tr> avec hover et support des états.
<th> cellule d'en-tête, texte en gras et aligné à gauche.
<td> cellule de donnée, whitespace-nowrap par défaut.
<twig:Table>
<twig:Table:Header>
<twig:Table:Row>
<twig:Table:Head>Nom</twig:Table:Head>
<twig:Table:Head>Email</twig:Table:Head>
<twig:Table:Head>Rôle</twig:Table:Head>
</twig:Table:Row>
</twig:Table:Header>
<twig:Table:Body>
<twig:Table:Row>
<twig:Table:Cell>Marie Dupont</twig:Table:Cell>
<twig:Table:Cell>marie@sudalys.fr</twig:Table:Cell>
<twig:Table:Cell>Administrateur</twig:Table:Cell>
</twig:Table:Row>
<twig:Table:Row>
<twig:Table:Cell>Thomas Lefèvre</twig:Table:Cell>
<twig:Table:Cell>thomas@sudalys.fr</twig:Table:Cell>
<twig:Table:Cell>Éditeur</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Body>
</twig:Table>
Avec caption
twig:Table:Caption ajoute un titre accessible au tableau.
La légende est placée sous le tableau par défaut.
| Nom | Rôle | |
|---|---|---|
| Marie Dupont | marie@sudalys.fr | Administrateur |
<twig:Table>
<twig:Table:Caption>Liste des utilisateurs actifs</twig:Table:Caption>
<twig:Table:Header>
<twig:Table:Row>
<twig:Table:Head>Nom</twig:Table:Head>
<twig:Table:Head>Email</twig:Table:Head>
<twig:Table:Head>Rôle</twig:Table:Head>
</twig:Table:Row>
</twig:Table:Header>
<twig:Table:Body>
<twig:Table:Row>
<twig:Table:Cell>Marie Dupont</twig:Table:Cell>
<twig:Table:Cell>marie@sudalys.fr</twig:Table:Cell>
<twig:Table:Cell>Administrateur</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Body>
</twig:Table>
Lignes interactives
twig:Table:Row supporte les états aria-expanded
et data-state="selected" pour les lignes cliquables ou sélectionnables.
Le hover est activé par défaut.
| Nom | Statut | |
|---|---|---|
| Marie Dupont | marie@sudalys.fr | Actif |
| Thomas Lefèvre | thomas@sudalys.fr | Actif |
| Camille Petit | camille@sudalys.fr | Inactif |
hover:bg-muted/50 automatiquement.
has-aria-expanded:bg-muted/50.
data-[state=selected]:bg-muted.
<twig:Table>
<twig:Table:Header>
<twig:Table:Row>
<twig:Table:Head>Nom</twig:Table:Head>
<twig:Table:Head>Email</twig:Table:Head>
<twig:Table:Head>Statut</twig:Table:Head>
</twig:Table:Row>
</twig:Table:Header>
<twig:Table:Body>
<twig:Table:Row aria-expanded="false">
<twig:Table:Cell>Marie Dupont</twig:Table:Cell>
<twig:Table:Cell>marie@sudalys.fr</twig:Table:Cell>
<twig:Table:Cell>Actif</twig:Table:Cell>
</twig:Table:Row>
<twig:Table:Row data-state="selected">
<twig:Table:Cell>Thomas Lefèvre</twig:Table:Cell>
<twig:Table:Cell>thomas@sudalys.fr</twig:Table:Cell>
<twig:Table:Cell>Actif</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Body>
</twig:Table>
API du composant
La table est composée de sous-composants autonomes. Chacun accepte les attributs
HTML natifs via {{ attributes }}, dont class
pour surcharger le style.
| Composant | Rôle | Balise | Classes par défaut principales |
|---|---|---|---|
twig:Table | Conteneur responsive du tableau. | <div> > <table> | relative w-full overflow-x-auto sur le div, w-full caption-bottom text-sm sur le table |
twig:Table:Caption | Légende accessible du tableau. | <caption> | text-muted-foreground mt-4 text-sm |
twig:Table:Header | Regroupe les lignes d'en-tête. | <thead> | [&_tr]:border-b |
twig:Table:Head | Cellule d'en-tête de colonne. | <th> | h-10 px-2 text-left font-medium whitespace-nowrap |
twig:Table:Body | Regroupe les lignes de données. | <tbody> | [&_tr:last-child]:border-0 |
twig:Table:Row | Ligne du tableau. | <tr> | border-b transition-colors hover:bg-muted/50 |
twig:Table:Cell | Cellule de donnée. | <td> | p-2 align-middle whitespace-nowrap |
twig:Table:Footer | Pied de tableau (total, résumé). | <tfoot> | border-t bg-muted/50 font-medium |
Do & Don't
-
Toujours utiliser
twig:Table:Headerpour les en-têtes sémantiques -
Ajouter une
twig:Table:Captionpour les tableaux autonomes -
Utiliser
data-state="selected"pour marquer la ligne active -
Associer des
twig:Badgedans les cellules pour les statuts
- Ne pas utiliser un tableau pour la mise en page (layout)
-
Ne pas fusionner des cellules (
colspan/rowspan) sans nécessité réelle -
Ne pas écrire un
<table class="ds-table">manuellement -
Ne pas supprimer
overflow-x-auto: la table doit pouvoir défiler sur mobile
Règles
Toujours utiliser <twig:Table>. Ne jamais écrire
un <table> manuellement avec des classes ds-table-*.
twig:Table:Header est obligatoire pour l'accessibilité.
Les colonnes doivent avoir un en-tête sémantique.
twig:Table:Body est obligatoire. Une table sans données
n'affiche que les en-têtes, ce qui n'a pas de sens.
Le défilement horizontal est natif via overflow-x-auto sur
le conteneur. Ne pas le désactiver sans alternative responsive.