Composant · Données

Table

Stable

Tableau HTML léger avec colonnes, caption et survol de ligne.

Quand l'utiliser

Pour afficher des données tabulaires simples sans pagination/tri intégrés.
Quand la table doit rester accessible et contrôlable via colonnes personnalisées.
Pour composer des écrans rapport ou inventaire dans un bloc propre.

Exemples

Exemple de table

Données de composants
ID	Libellé	Statut
UI-01	Navigation	Stable
UI-02	Composants	Stable
UI-03	Tokens	En évolution

Voir le code (Svelte)

<Table
  caption="Données de composants"
  columns={[{"key":"id","label":"ID"},{"key":"label","label":"Libellé"},{"key":"status","label":"Statut"}]}
  rows={[{"id":"UI-01","label":"Navigation","status":"Stable"},{"id":"UI-02","label":"Composants","status":"Stable"},{"id":"UI-03","label":"Tokens","status":"En évolution"}]}
/>

API

Prop	Type	Défaut	Description
`columns`	`TableColumn[]`	required	Définit les colonnes du tableau.
`rows`	`TableRow[]`	required	Jeu de lignes à afficher.
`caption`	`string`	optionnel	Légende sémantique du tableau.
`class`	`string`	optionnel	Classe additionnelle sur <code>table</code>.
Autres attributs	`HTMLTableAttributes`	N/A	Propagés sur l'élément <code>table</code>.

Tokens utilisés

--st-component-dataTable-rowBackground
--st-component-dataTable-border
--st-component-dataTable-radius
--st-component-dataTable-text
--st-component-dataTable-captionText
--st-component-dataTable-headerBackground
--st-component-dataTable-rowHoverBackground
--st-component-control-hoverBackground
--st-semantic-surface-default
--st-semantic-surface-subtle
--st-semantic-border-subtle
--st-semantic-text-primary
--st-semantic-text-secondary