DS

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.

#TempsAo5Statut
110.78s11.92s
PB
212.45s12.10s
311.89s12.23s
415.02s12.56s
+2
5DNFDNF
DNF
612.34s12.89s

Props

Tous les sous-composants acceptent les props standard de leur element HTML natif ainsi qu'un className pour des styles additionnels.

PropTypeDefaultDescription
TableHTMLTableElementConteneur principal. Enveloppe dans un div avec overflow-x-auto pour le scroll horizontal.
TableHeaderHTMLTableSectionElement (thead)En-tete du tableau. Les lignes enfants ont une bordure basse.
TableBodyHTMLTableSectionElement (tbody)Corps du tableau. La derniere ligne n'a pas de bordure basse.
TableFooterHTMLTableSectionElement (tfoot)Pied du tableau. Fond muted/50 avec bordure haute.
TableRowHTMLTableRowElement (tr)Ligne de tableau. Hover bg-muted/50. Support data-[state=selected] pour la selection.
TableHeadHTMLTableCellElement (th)Cellule d'en-tete. h-10, font-medium, text-foreground, whitespace-nowrap.
TableCellHTMLTableCellElement (td)Cellule de donnees. p-2, align-middle, whitespace-nowrap.
TableCaptionHTMLTableCaptionElement (caption)Legende du tableau. text-sm text-muted-foreground, affichee en bas.