ComponentsData
Data table
Sorting, selection, search, column visibility and paging on TanStack Table.
Theme
Motion
Sorting, selection, search, column visibility and paging on TanStack Table.
| Northwind | Business | Active | 24 | $1,280 | |
| Acme Co | Pro | Active | 9 | $640 | |
| Globex | Business | Past due | 41 | $2,115 | |
| Initech | Starter | Active | 3 | $89 | |
| Umbrella | Pro | Active | 7 | $512 |
8 rows
<DataTable
columns={columns}
data={customers}
caption="Customers"
getRowId={(row) => row.name}
pageSize={5}
enableRowSelection
enableGlobalFilter
enableColumnVisibility
/>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwind @tanstack/react-tableimport { DataTable, type ColumnDef } from "junco/data-table";
const columns: ColumnDef<Customer>[] = [
{ accessorKey: "name", header: "Customer" },
{ accessorKey: "plan", header: "Plan" },
{ accessorKey: "mrr", header: "MRR", meta: { align: "right" }, cell: ({ getValue }) => money(getValue()) },
];
<DataTable
columns={columns}
data={customers}
caption="Customers"
enableRowSelection
enableGlobalFilter
enableColumnVisibility
/>Put your own controls in the toolbar. onTableReady gives you the table instance for bulk actions.
| Northwind | Business | Active | 24 | $1,280 | |
| Acme Co | Pro | Active | 9 | $640 | |
| Globex | Business | Past due | 41 | $2,115 | |
| Initech | Starter | Active | 3 | $89 | |
| Umbrella | Pro | Active | 7 | $512 |
8 rows
No results | ||||
0 rows
DataTable#Imported from junco/data-table. Needs @tanstack/react-table (an optional peer, so the core bundle stays small).
columnsdatacaptiongetRowIdenableRowSelectionenableGlobalFilterenableColumnVisibilitypageSizepageSizeOptionsisLoading / loadingRowsmanual / pageCount / rowCountsorting, rowSelection, globalFilter, columnVisibility, paginationdefaultSortingtoolbaremptyStatedensityisStickyHeader / maxHeightonTableReadytableOptionsclassNames| Prop | Type | Default |
|---|---|---|
columnsRequired. TanStack column definitions. meta.align: "right" right-aligns numbers. | ColumnDef<TData>[] | – |
dataRequired. The rows. | TData[] | – |
captionAccessible table name (visually hidden caption). Strongly recommended. | string | – |
getRowIdStable row ids; recommended with selection. | (row, index) => string | – |
enableRowSelectionAdds a checkbox column, with a partial "select all" state. | boolean | (row) => boolean | – |
enableGlobalFilterShows a search box that filters across all columns. | boolean | – |
enableColumnVisibilityShows a Columns menu to hide and show columns. | boolean | – |
pageSizeRows per page; false shows every row. | number | false | 10 |
pageSizeOptionsChoices for the rows-per-page control. | number[] | – |
isLoading / loadingRowsSkeleton rows and aria-busy while data loads. | boolean / number | – |
manual / pageCount / rowCountServer-side mode: sort, filter and page outside, pass the totals. | boolean / number / number | – |
sorting, rowSelection, globalFilter, columnVisibility, paginationEach piece of state can be controlled. | state + on…Change | – |
defaultSortingInitial sort when uncontrolled. | SortingState | – |
toolbarExtra controls on the right of the toolbar. | ReactNode | – |
emptyStateShown when there are no rows. | ReactNode | – |
densityRow height. | "compact" | "normal" | "relaxed" | "normal" |
isStickyHeader / maxHeightKeep the header visible while the body scrolls. | boolean / string | true |
onTableReadyReceives the TanStack table instance. | (table) => void | – |
tableOptionsEscape hatch for anything else TanStack supports. | Partial<TableOptions> | – |
classNamesClass overrides: root, toolbar, container, table, headerCell, row, cell, footer. | Partial<Record<slot, string>> | – |
| Key | Action |
|---|---|
| Tab | Moves through the search box, sortable headers, row checkboxes and paging controls. |
| Enter | Sorts by the focused column header (ascending, then descending, then off). |
| Space | Toggles the focused row checkbox. |