Pattern · pages
Data table page
A titled list with its toolbar, a named table that scrolls at the keyboard, cells that say their meaning in words, and the empty state the table gives way to.
The pattern, live
Démarches en ligne · 4 pages
Les pages de l'audit
Chaque page est auditée sur les 106 critères; le verdict est celui du critère le moins bien noté.
| Page | Critères tranchés | Non conformes | Verdict |
|---|---|---|---|
| Accueil / | 106 | 12 | C Conforme |
| Recherche /recherche | 106 | 21 | NC Non conforme |
| Contact /contact | 64 | 4 | NT Non testé |
| Mentions légales /mentions | 106 | 0 | C Conforme |
How it works
- The page head is an eyebrow with the count, the heading, and one sentence of context in the prose measure.
- The toolbar holds a search field with a label and the page's one action, a primary button with a verb.
- The search filters as it is typed and the count is announced by a live region, so a screen reader user knows the table changed under them.
- The table's caption is hidden, since the heading names the list, and still names the scroll region around the table.
- The verdict cell is a StatusChip: the word from core, the drawing from the icon set, the colour last.
- The empty state replaces the table's body when nothing matches, and says what to do.
Rules a page that copies it keeps
- Numbers are right-aligned in tabular numerals; the column says so with
numeric. - A row's name is the row header, so a cell is read with its page.
- One primary action per page; the rest are secondary or in a row menu.