LAYOUT / COMPONENTS
Table
Compare structured information.
About table
Tables make repeated records easier to compare. Give each column a clear purpose, preserve relationships between parent and child records, and make selection and validation visible without relying on color alone.
Use sorting to answer a question within the data. Keep related child records with their parent when the order changes, and expose additional details only when they help the comparison.
Anatomy
Shared parts, named consistently.
Status | |||
|---|---|---|---|
Button | 1.0 | Ready | |
Text field | 1.0 | In review | |
Menu | 1.0 | Ready |
- 1Table Header RowRequired
The tables’ header
- 2Table Header CellRequired
A cell of the header
- 3Table RowRequired
The table’s body row
- 4Table Body CellRequired
A cell of the body row
Try the default
A working example with the shared V1 visual language.
Status | |||
|---|---|---|---|
Button | 1.0 | Ready | |
Text field | 1.0 | In review | |
Menu | 1.0 | Ready |
When to use
Use for genuinely tabular data. Name columns, communicate sorting, preserve row relationships, and contain horizontal scrolling.
Tab reaches sort and selection controls. The scroll region is keyboard reachable. Native table headers retain relationships.