DataTable
Markdown for agentsConfig-driven table: one component plus a columns config that owns shape, sorting, pagination, and row interaction.
npx slipstream-ui@latest add data-tableSortable + paginated
| Status | |||
|---|---|---|---|
| MCP manifest sync | live | 42 | 2026-10-28 |
| RAG citations demo | archived | 17 | 2026-10-21 |
| Streaming edge cases | live | 96 | 2026-10-30 |
| PromptInput attachments | failed | 8 | 2026-10-12 |
1–4 of 7
Clicked row: none yet — click headers to sort, or Tab to a row and press Enter.
Empty state + no sort
| Status | |||
|---|---|---|---|
| No failed runs in this window. | |||
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | DataTableColumn<T>[] | required | Column config: key, header, optional cell renderer, sortable, align, className. |
| data | T[] | required | Row data. |
| rowId | (row: T) => string | required | Stable id per row (React key + test hooks). |
| caption | string | — | Accessible table caption. |
| defaultSort | { key: string; dir: "asc" | "desc" } | null | — | Initial sort when uncontrolled. |
| sortKey / sortDir | string | null / "asc" | "desc" | — | Controlled sort (pair with onSortChange for server-side ordering). |
| onSortChange | (key: string, dir: "asc" | "desc") => void | — | Fires when a sortable header is toggled. |
| pageSize | number | — | Rows per page; enables pagination and the result count. |
| page / onPageChange | number / (page: number) => void | — | Controlled pagination when pageSize is set. |
| onRowClick | (row: T) => void | — | Makes rows keyboard-focusable (Enter/Space) with a visible ring. |
| emptyMessage | string | 'No results.' | Shown when data is empty. |
Accessibility
- Sortable headers expose aria-sort (ascending/descending/none) and toggle via a real button.
- Native <caption> names the table; headers are th[scope=col].
- With onRowClick rows are tabIndex=0 and activate on Enter/Space — still provide an in-cell link as the primary path.
- The result count is aria-live=polite; pagination reuses Pagination (aria-current=page).
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.
- Table markup and sorting are baseline; no newer CSS is required.