Table
À quoi il sert
Table présente des données en colonnes, dans une région défilante focalisable et nommée par sa légende.
Quand l’utiliser
- Comparer des valeurs sur plusieurs lignes et colonnes, comme une liste de jetons.
- Aligner des colonnes numériques en fin de ligne avec numeric.
Quand ne pas l’utiliser
- Pour une mise en page : utiliser une grille ou une primitive de layout.
- Pour un contenu sans colonnes de données : utiliser des paragraphes ou une liste.
Exemples
Jetons d’espacement| Jeton | Valeur (rem) |
|---|
| --pp-space-3xs | 0,25 |
|---|
| --pp-space-2xs | 0,5 |
|---|
| --pp-space-xs | 0,75 |
|---|
| --pp-space-s | 1 |
|---|
---
const columns = [
{ key: 'name', label: 'Jeton' },
{ key: 'size', label: 'Valeur (rem)', numeric: true },
];
const rows = [{ name: '--pp-space-s', size: '1' }];
---
<Table caption="Jetons d’espacement" columns={columns} rows={rows} rowHeader="name" />
Accessibilité
Clavier
- La région reçoit le focus par Tab quand elle défile.
- Le focus visible entoure la région (focus-visible).
Lecteur d’écran
- La région est annoncée avec la légende comme nom (aria-label).
- Les en-têtes de colonne sont en scope="col" ; l’en-tête de ligne en scope="row".
Garanti par le composant
- La légende est rendue en caption, et la région porte tabindex="0".
- Les colonnes numériques sont alignées en fin, en chiffres tabulaires.
- Aucun script et aucun attribut style.
À la charge de l’intégrateur
- Fournir une légende qui décrit le contenu : elle sert de nom à la région.
- Passer rowHeader quand la première colonne identifie la ligne.
- Écrire l’unité dans la valeur ou l’en-tête : le composant n’en ajoute pas.
Propriétés
Propriétés de Table| Propriété | Type | Défaut | Description |
|---|
| caption (obligatoire) | string | — | Légende visible du tableau, reprise comme nom accessible de la région. |
|---|
| columns (obligatoire) | Column[] | — | Colonnes : `{ key, label, numeric? }` ; `numeric` aligne en fin et en chiffres tabulaires. |
|---|
| rows (obligatoire) | Record<string, string>[] | — | Lignes : une valeur texte par clé de colonne. |
|---|
| rowHeader | string | — | Clé de la colonne rendue en `<th scope="row">`. |
|---|
| class | string | — | Réservé au placement du composant dans son parent. |
|---|
Jetons utilisés
--pp-color-focus--pp-color-line--pp-font-weight-bold--pp-font-weight-semibold--pp-size-focus-offset--pp-size-focus-width--pp-size-rule--pp-size-target-min--pp-space-2xs--pp-space-3xs--pp-space-xs
Preuves et décisions