Table
Semantic table shell for static or server-rendered data rows and columns.
Compose explicit header, body, row, and cell parts you control. Reach for DataTable when you need built-in sort, filter, row selection, pagination, or virtualization — it renders through these parts internally.
- Static or lightly interactive tabular content with full control over markup
- Small-to-medium row counts, server-rendered lists, summary/report tables
- Paginated lists and admin grids where you own sorting/filtering in app code
- Wrap everything in
Table. - Add a
TableHeaderwith oneTableRowofTableHeaderCelllabels. - Add a
TableBodywith oneTableRowper data record. - Wrap cell content in
TableCell→TableCellLayoutfor truncation.
Minimal header plus one body row—the starting point before adding pagination or row actions.
Ada | Admin |
Full compound structure with header labels, body rows, cells, and layout wrappers for admin grids.
Ada Lovelace | Admin | Active |
Grace Hopper | Editor | Active |
Multiple body rows with a single column—useful for simple ordered lists.
1 |
2 |
3 |
truncate=true ellipsizes long text in narrow columns without breaking table layout.
Long description that truncates in narrow columns |
Drag header edges to resize columns; min/max width keep columns within a usable range.
Ada Lovelace | Admin |
Header borders and row dividers inherit stroke tokens from the Orbital theme provider.
Themed row |
Three resizable columns with distinct min/max constraints for dense admin tables.
1 | 2 | 3 |