Data display
Table
A data grid for administrative interfaces with head, cell and density variants.
Examples
Creators and posts| Creator | Status | Posts |
|---|
| Elena | Active | 1,240 |
|---|
| Mila | Pending | 880 |
|---|
| Nora | Paused | 312 |
|---|
Anatomy
Table anatomy| # | Part | Description | Presence |
|---|
| 1 | Caption | Visible or screen-reader only | Required |
|---|
| 2 | Header row | th scope="col" | Required |
|---|
| 3 | Row header | th scope="row" for the identifier | Optional |
|---|
| 4 | Cells | Alignment follows data type | Required |
|---|
| 5 | Wrapper | Scrollable region on small screens | Optional |
|---|
Specifications
| Density | Small · Large |
|---|
| Head variants | Alignment states |
|---|
| Cells | Variants per content type |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Tab | Reaches the scroll wrapper and any controls in cells |
|---|
| Arrow keys | Scroll the wrapper when it is focused |
|---|
Pointer and touch| Trigger | Response |
|---|
| Sort | Header button toggles ascending / descending and updates aria-sort |
|---|
| Hover | Row tint |
|---|
Accessibility
role · table
1.3.1Info and Relationships1.4.10Reflow2.1.1Keyboard
Requirements| Requirement | How Rig meets it |
|---|
| Native table | Use <table>. Not divs with grid roles unless you build a full grid. |
|---|
| Headers | scope on every th |
|---|
| Wrapper | role="region", tabindex="0" and a label, so keyboard users can scroll |
|---|
| Numbers | Right-aligned, tabular figures |
|---|
| Density | Small density keeps targets at 24px |
|---|
Read the matching WAI pattern ↗
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Right-align numbers | ✕Do not use a table for layout |
| ✓Keep the first column as the row header | ✕Do not hide columns without a way to see them |
Notes from the Figma file
- Density can switch to Small on dense analytical dashboards.