Data Table
Overview
Usage
Examples
API
A data table renders records from a columns config with sensible defaults for sorting and pagination, plus a cellTemplate escape hatch for custom cells. It auto-detects its mode from data: a plain array runs client-side; a DataSource runs server-side.
Example
Title | Author | Views |
|---|---|---|
| Designing a token-first component library | Ada Lovelace | 12840 |
| Signals vs. observables in practice | Grace Hopper | 9532 |
| A field guide to Material 3 theming | Alan Turing | 0 |
| Server-driven tables without the pain | Katherine Johnson | 0 |
When to use
- Present a set of records with column headers — sortable, paginated, with custom cell rendering.
- When you need both client-side convenience and a server-driven path behind one API — start with an array, graduate to a
DataSourcewithout changing the template shape.
When not to use
- For a short, non-tabular list, prefer plain list markup or Cards — a table's chrome is overkill.
- For the key/value detail of a single record, use a description list, not a one-row table.
- For choosing one option, use a Select or Radio Group.
Related components
- Pagination — the standalone paginator for non-table lists.
- Empty State — the empty block this table projects.
- Overflow Menu — per-row actions, as in the examples below.
Was this page helpful?