Table

Table de données en lecture seule, lisible et accessible. Le composant le plus utilisé du système (tables de tokens). Deux formes — composant piloté par données et classe sur un <table> statique — partageant les mêmes tokens. Read-only, scannable, accessible data table. The system's most-used component (token tables). Two forms — data-driven component and a class on a static <table> — sharing the same tokens.

Aperçu — séparateurs (défaut)Preview — dividers (default)

Exemple de tokens d'espacementSpacing token example
ÉchelonStep	RôleRole	ValeurValue
`space-1`	Espacement minimalMinimal spacing	4px
`space-2`	Contrôles densesDense controls	8px
`space-3`	Padding standardStandard padding	12px
`space-4`	Espacement de contrôleControl spacing	16px

Zébrage (option)Striped (option)

Exemple de tokens d'espacementSpacing token example
ÉchelonStep	RôleRole	ValeurValue
`space-1`	Espacement minimalMinimal spacing	4px
`space-2`	Contrôles densesDense controls	8px
`space-3`	Padding standardStandard padding	12px
`space-4`	Espacement de contrôleControl spacing	16px

Règles absoluesAbsolute rules

<table> sémantique réel — jamais des <div> en grilleReal semantic <table> — never grid <div>s
scope="col" sur chaque <th> + <caption> (visible ou masqué)scope="col" on every <th> + <caption> (visible or hidden)
Valeurs numériques alignées à droiteNumeric values right-aligned
Jamais de table pour faire de la mise en pageNever a table for layout
Jamais de couleur/espacement codé en durNever hardcoded color/spacing

Tokens de composantComponent tokens

Token CSS	RéférenceReference	ValeurValue
`--agtc-component-table-default-header-background`	`semantic.color.background.subtle`	#f0f0f0
`--agtc-component-table-default-header-text`	`semantic.color.text.secondary`	#646464
`--agtc-component-table-default-cell-text`	`semantic.color.text.primary`	#202020
`--agtc-component-table-default-border`	`semantic.color.border.default`	#e8e8e8
`--agtc-component-table-default-row-hover`	`semantic.color.background.hover`	#fafafa
`--agtc-component-table-default-stripe`	`semantic.color.background.subtle`	#f0f0f0
`--agtc-component-table-default-caption-text`	`semantic.color.text.secondary`	#646464
`--agtc-component-table-default-radius`	`semantic.radius.card`	10px
`--agtc-component-table-default-font-size`	`semantic.typography.label.size`	0.875rem
`--agtc-component-table-padding-x`	`primitive.space.3`	12px
`--agtc-component-table-padding-y-compact`	`primitive.space.2`	8px
`--agtc-component-table-padding-y-comfortable`	`primitive.space.3`	12px

AccessibilitéAccessibility

Structure <table>/<thead>/<tbody> sémantique réelleReal semantic <table>/<thead>/<tbody> structure
scope="col" — association cellule↔en-têtescope="col" — cell↔header association
<caption> décrit la table (WCAG 1.3.1) — masquable via caption-hidden<caption> describes the table (WCAG 1.3.1) — hideable via caption-hidden
Conteneur de scroll focalisable au clavier, indicateur d'overflow visibleKeyboard-focusable scroll container, visible overflow indicator
Contraste 4.5:1 vérifié (texte gris.12 sur blanc/gris.3)4.5:1 contrast verified (gray.12 text on white/gray.3)

ImplémentationImplementation

<!-- Composant piloté par données -->
<agtc-table caption="Tokens du badge" caption-hidden></agtc-table>
<script>
  const t = document.querySelector('agtc-table');
  t.columns = [
    { label: 'Token CSS', align: 'start', width: '46%' },
    { label: 'Référence', align: 'start' },
    { label: 'Valeur',    align: 'end' },
  ];
  t.rows = [
    ['--agtc-badge-neutral-background', 'semantic.color.background.subtle', '#f0f0f0'],
  ];
</script>

<!-- Classe sur un table statique (light DOM, sans JS) -->
<table class="agtc-table striped">
  <caption class="visually-hidden">Tokens du badge</caption>
  <thead><tr><th scope="col">Token</th><th scope="col" class="num">Value</th></tr></thead>
  <tbody><tr><td><code>--agtc-badge-neutral-text</code></td><td class="num">#646464</td></tr></tbody>
</table>

DOs et DON'TsDOs and DON'Ts

À faireDo

Toujours une <caption> (masquée si besoin) et scopeAlways a <caption> (hidden if needed) and scope
Aligner les valeurs numériques à droite (class="num")Right-align numeric values (class="num")
1ʳᵉ colonne = identifiant lisible, colonnes ordonnées par importance1st column = readable identifier, columns ordered by importance

À éviterDon't

Des <div> simulant une table — inaccessible<div>s faking a table — inaccessible
Une table pour disposer des éléments non tabulairesA table to lay out non-tabular elements
Croire que la v1 trie/filtre — c'est en lecture seule (porte ouverte)Expecting v1 to sort/filter — it's read-only (door open)

UX Patterns Reference

Patterns approved via the ux-pattern-review workflow (ADR-036/040). Decision: T1–T10 all approved.

Pattern	Source	Applied	Justification
Semantic HTML + `scope="col"`	Smashing — Table Patterns	✅	Cell↔header association (missing from the site's original HTML)
`<caption>` describing the table	Smashing	✅	Hideable via `caption-hidden` (WCAG 1.3.1)
Text alignment left, numeric right	NN/g — Data Tables	✅	`align` per column, default `start`
Row separators (zebra striping optional)	NN/g	✅	Separators by default, `striped` optional — user choice
Row hover	NN/g	✅	`row-hover`
Sticky header	NN/g · Smashing	✅	Optional via `sticky-header`
Horizontal scroll + overflow indicator	Smashing	✅	`overflow-x` container + edge shadows (long token names)
1st column = readable identifier, order = importance	NN/g	✅	Token table convention
`compact` density by default	Dashboard Design Patterns	✅	`density="comfortable"` available
Sort / filter / pagination	NN/g	✅ (open door)	Out of v1: static docs tables; `columns`/`rows` API designed to accommodate them without breaking changes (future `column.sortable` + `@sort`)