Data Table

Build a data table from the Table primitives and TanStack Table. Each section adds one capability on top of the previous one: formatting, row actions, pagination, sorting, filtering, column visibility, and row selection. For the batteries-included version, use TableData.

Basic Table

Column definitions plus useTable and FlexRender, rendered into the Table primitives.

Status	Email	Amount
success	ken99@example.com	316
success	abe45@example.com	242
processing	monserrat44@example.com	837
success	silas22@example.com	874
failed	carmella@example.com	721
processing	olivia@example.com	129
success	jackson@example.com	458
failed	isabella@example.com	634

Usage

Import the parts you need from the component's folder.

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table";

Cell Formatting

A cell function returns a render node, so a badge or a formatted amount can live in any cell.

Status	Email	Amount
success	ken99@example.com	$316.00
success	abe45@example.com	$242.00
processing	monserrat44@example.com	$837.00
success	silas22@example.com	$874.00
failed	carmella@example.com	$721.00
processing	olivia@example.com	$129.00
success	jackson@example.com	$458.00
failed	isabella@example.com	$634.00

Row Actions

Add a non-data column with an id and render a DropdownMenu of per-row actions.

Status	Email	Amount
success	ken99@example.com	$316.00
success	abe45@example.com	$242.00
processing	monserrat44@example.com	$837.00
success	silas22@example.com	$874.00
failed	carmella@example.com	$721.00
processing	olivia@example.com	$129.00
success	jackson@example.com	$458.00
failed	isabella@example.com	$634.00

Pagination

Add getPaginationRowModel, then drive it with previous and next buttons.

Status	Email	Amount
success	ken99@example.com	$316.00
success	abe45@example.com	$242.00
processing	monserrat44@example.com	$837.00
success	silas22@example.com	$874.00

Sorting

Add getSortedRowModel, hold the sorting state in a ref, and make the header a toggle button.

Status		Amount
success	ken99@example.com	$316.00
success	abe45@example.com	$242.00
processing	monserrat44@example.com	$837.00
success	silas22@example.com	$874.00
failed	carmella@example.com	$721.00
processing	olivia@example.com	$129.00
success	jackson@example.com	$458.00
failed	isabella@example.com	$634.00

Filtering

Add getFilteredRowModel, then bind an Input to a single column filter.

Status	Email	Amount
success	ken99@example.com	$316.00
success	abe45@example.com	$242.00
processing	monserrat44@example.com	$837.00
success	silas22@example.com	$874.00
failed	carmella@example.com	$721.00
processing	olivia@example.com	$129.00
success	jackson@example.com	$458.00
failed	isabella@example.com	$634.00

Visibility

Hold columnVisibility state and let users toggle columns from a DropdownMenu.

Status	Email	Amount
success	ken99@example.com	$316.00
success	abe45@example.com	$242.00
processing	monserrat44@example.com	$837.00
success	silas22@example.com	$874.00
failed	carmella@example.com	$721.00
processing	olivia@example.com	$129.00
success	jackson@example.com	$458.00
failed	isabella@example.com	$634.00

Row Selection

Add a select column of Checkboxes and read table.getSelectedRowModel() for the count.

Status	Email	Amount
success	ken99@example.com	$316.00
success	abe45@example.com	$242.00
processing	monserrat44@example.com	$837.00
success	silas22@example.com	$874.00
failed	carmella@example.com	$721.00
processing	olivia@example.com	$129.00
success	jackson@example.com	$458.00
failed	isabella@example.com	$634.00

0 of 8 row(s) selected.

API Reference

useTable

Prop	Type	Default	Description
`data`	`TData[]`	—	Row data. Keep the reference stable, or pass a getter.
`columns`	`ColumnDef[]`	—	Column definitions. accessorKey for data columns, id for custom ones.
`features`	`TableFeatures`	—	Required. Built with tableFeatures(); holds features, row models and filter/sort functions.
`getPaginationRowModel`	`() => RowModel`	—	Add to enable client-side pagination.
`getSortedRowModel`	`() => RowModel`	—	Add to enable client-side sorting.
`getFilteredRowModel`	`() => RowModel`	—	Add to enable client-side filtering.
`state`	`object`	—	Controlled state: sorting, columnFilters, columnVisibility, rowSelection.

FlexRender

Prop	Type	Default	Description
`render`	`ColumnDefTemplate`	—	The header or cell definition to render.
`props`	`object`	—	The context from header.getContext() or cell.getContext().

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Moves through the interactive controls in the toolbar, headers, and rows.
`Enter`	Activates the focused sort header, action, or pagination button.
`Space`	Toggles the focused row selection checkbox.

Renders a real table element, so screen readers announce row and column positions.
Sortable headers are buttons inside the th, keeping the header cell semantics intact.

Collapsible Distribution