Data display
Data grid
Table plus search, sorting, column visibility, paging and loading and empty states. This is what operational lists need.
Not documented yet
This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columnsrequired | ColumnDef<TData, unknown>[] | — | — |
datarequired | TData[] | — | — |
loading | boolean | undefined | — | Render skeleton rows instead of data (Figma "Loading" state). |
emptyText | string | undefined | "No results." | Message for the empty state. |
searchPlaceholder | string | undefined | "Search…" | Placeholder for the global search box. |
hideToolbar | boolean | undefined | — | Hide the toolbar (search + column visibility). |
pageSize | number | undefined | 10 | Rows per page. |
className | string | undefined | — | — |