molecule · stable · since 2026-09
Table
Purpose
A table written by hand, for the cells DataTable’s columns and rows cannot express, held to the same things: a caption, the scroll region reachable at the keyboard and named by that caption, and the cell rules the base layer used to carry as tableau classes.
When to use, when not
Use it when the cells need their own markup: a status chip, a row menu, a multi-line constat. When the rows are records and the columns keys, DataTable. Never for layout.
Anatomy
- The scroll region, named by the caption.
- The table, with its caption.
- The caller’s
thead and tbody, with scope on every th.
Props
Props of Table| Name | Type | Default | What it does |
|---|
caption | string | | The table's title. Required: that is criterion 5.4, and it names the scroll region. |
|---|
captionHidden? | boolean | false | Hides the caption on screen without removing it from the accessible name. |
|---|
variant? | 'default' | 'report' | 'default' | `report` for the exported documents: spaced small capitals in the header, cells aligned at the top. |
|---|
fixed? | boolean | false | A fixed layout, with a colgroup that declares the widths; without one the columns split evenly. |
|---|
class? | string | '' | Layout classes only. |
|---|
children | Snippet | | The thead and tbody, with scope on every th. |
|---|
States
Plain, the report variant, and with the caption hidden.
captionHidden
The caption stays in the accessible name when the page already has the title above.
plain
The caption names the table and the scroll region around it; the cells are the caller's, with scope on every th.
report
The report variant: spaced small capitals in the header, cells aligned at the top.
Accessibility contract
- Role and name: a table named by its caption; the scroll region around it is a region with the same name.
- Keyboard, focus: the region takes the focus after the content before it, so a wide table scrolls at the keyboard.
- Live regions: none.
- Headers: every
th carries scope="col" or scope="row", written by the caller; the test of every story checks it.
Content rules
French. The caption says what the rows are (“Taux de conformité par page”), not “Tableau”.
Do and don’t
- Do write
scope on every th; the component cannot do it for you. - Do put numbers in
rl-table__num cells so they align. - Do not hide the caption unless the same title is right above the table.
Examples
<Table caption="Taux de conformité par page">
<thead><tr><th scope="col">Page</th><th scope="col" class="rl-table__num">Taux</th></tr></thead>
<tbody>{#each pages as p}<tr><th scope="row">{p.name}</th><td class="rl-table__num">{p.rate}</td></tr>{/each}</tbody>
</Table>
Surfaces
- App: the site’s audits, the five measures tables, the registrations, the users, the comparison; the report’s tables wait for the report document.
Related
DataTable, ScrollRegion.
Decisions
- 2026-09-24: the cell classes are
rl-table__num, rl-table__center, rl-table__clip and rl-table__line, reached through :global since the cells are the caller’s; the base layer’s tableau rules leave with their last raw use.
Criteria held by construction
- 5.4, Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
The caption is a required prop: a data table cannot be rendered without its title. - 5.6, Pour chaque tableau de données, chaque en-tête de colonnes et chaque en-tête de lignes sont-ils correctement déclarés ?
The headers are the caller's, and the doc and the test hold them to a scope on every th. - 7.3, Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage ?
The table sits in a scroll region named by its caption, so a table wider than its column can be walked at the keyboard.
Tokens it reads
- Colour:
--rl-ink, --rl-line, --rl-line-strong - Typography:
--rl-weight-bold, --rl-text-sm, --rl-text-xs, --rl-leading-row, --rl-tracking-label - Spacing:
--rl-space-2, --rl-space-3 - Layout:
--rl-border, --rl-border-strong
