Table
Table header cell
Section titled “Table header cell”Column header with optional select-all checkbox and sort.
Variants: 1
| Property | Type / options |
|---|---|
| Label | text |
| Checkbox | boolean (off) |
| Sortable | boolean (off) |
Table cell
Section titled “Table cell”Body cell: Text, Text + supporting, Avatar, Badge, Checkbox, Actions. Sizes sm (52) / md (72).
Variants: 12
| Property | Type / options |
|---|---|
| Text | text |
| Size | sm · md |
| Type | Text · Text + supporting · Avatar · Badge · Checkbox · Actions |
Do
- Build rows from Table cell types.
- Right-align numbers.
- Use Filter bar above and Pagination below.
Don’t
- Don’t exceed 7–8 columns on desktop.
- Don’t wrap long text — truncate with a tooltip.
- Don’t combine zebra stripes and row borders.
Filter bar
Section titled “Filter bar”Search, filters, sort and active-filter tags.
Variants: 2
| Property | Type / options |
|---|---|
| Breakpoint | Desktop · Mobile |