Data Table
Presentation for a TanStack Table instance: sorting, column visibility and pagination.
- Data
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add data-tablenpm packages installed: @tanstack/react-table.
import { DataTable } from "@/components/ui/data-table";Default
Empty
With Status Slot
<DataTable>
| Prop | Type | Default |
|---|---|---|
table (required) | TanstackTable<TFeatures, TData> | — |
emptyShown in place of rows when there are none. | ReactNode | — |
Plus every attribute of <table> except children.
<DataTableColumnHeader>
| Prop | Type | Default |
|---|---|---|
column (required) | SortableColumn | — |
title (required) | string | — |
Plus every attribute of <div>.
<DataTableViewOptions>
| Prop | Type | Default |
|---|---|---|
table (required) | HideableTable | — |
label | string | "Columns" |
<DataTablePagination>
| Prop | Type | Default |
|---|---|---|
table (required) | PaginatedTable | — |
pageSizes | number[] | [10, 20, 50, 100] |
statusReplaces the page position on the left. A slot rather than a | ReactNode | — |
Sortable headers carry aria-sort, so the current sort is announced rather than being conveyed by an arrow icon alone, and each sort button has visually hidden text stating the column and its direction. The pagination status is a polite live region, because paging swaps the rows in place with no other signal. A column that cannot be sorted renders as text, not as a button that does nothing.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes