Table
Tableau de donnees responsive avec scroll horizontal automatique. Compose de sous-composants semantiques pour une structure claire et accessible. Inclut des styles pour hover, selection et en-tetes fixes.
Preview
Tableau de solves avec temps, moyennes, scrambles et penalites. Le meilleur temps (PB) est mis en vert.
| # | Temps | Ao5 | Statut |
|---|---|---|---|
| 1 | 10.78s | 11.92s | PB |
| 2 | 12.45s | 12.10s | |
| 3 | 11.89s | 12.23s | |
| 4 | 15.02s | 12.56s | +2 |
| 5 | DNF | DNF | DNF |
| 6 | 12.34s | 12.89s |
Props
Tous les sous-composants acceptent les props standard de leur element HTML natif ainsi qu'un className pour des styles additionnels.
| Prop | Type | Default | Description |
|---|---|---|---|
| Table | HTMLTableElement | — | Conteneur principal. Enveloppe dans un div avec overflow-x-auto pour le scroll horizontal. |
| TableHeader | HTMLTableSectionElement (thead) | — | En-tete du tableau. Les lignes enfants ont une bordure basse. |
| TableBody | HTMLTableSectionElement (tbody) | — | Corps du tableau. La derniere ligne n'a pas de bordure basse. |
| TableFooter | HTMLTableSectionElement (tfoot) | — | Pied du tableau. Fond muted/50 avec bordure haute. |
| TableRow | HTMLTableRowElement (tr) | — | Ligne de tableau. Hover bg-muted/50. Support data-[state=selected] pour la selection. |
| TableHead | HTMLTableCellElement (th) | — | Cellule d'en-tete. h-10, font-medium, text-foreground, whitespace-nowrap. |
| TableCell | HTMLTableCellElement (td) | — | Cellule de donnees. p-2, align-middle, whitespace-nowrap. |
| TableCaption | HTMLTableCaptionElement (caption) | — | Legende du tableau. text-sm text-muted-foreground, affichee en bas. |