Data tables display structured information in rows and columns. Essential for SaaS dashboards — inspired by Carbon’s data table.
| Variant | Use case |
|---|
| Default | Standard data display |
| Striped | Alternating row colors for readability |
| Compact | Dense data, 36px rows |
| Selectable | Checkbox column for batch actions |
| Element | Description |
|---|
| Header row | Sticky, uppercase labels, sort icons |
| Data row | Hover highlight, 48px default height |
| Pagination | Below table, centered |
| Toolbar | Optional: search, filter, bulk actions above |
- Sortable headers — click column header to sort
- Sticky header — stays visible when scrolling long tables
- Truncate + tooltip — long content truncated, full text on hover
- Empty state — show meaningful message when no data