Table

Overview

Table is a thin, styled layer over the native table elements: the container is the surface (a surface-container-lowest card hugged by an outline-variant hairline) and owns the horizontal scroll, so a wide table never pushes the page. Headers sit on type-label in on-surface-variant, cells on type-body in on-surface, and rows tint on hover — gated to devices that can actually hover — with a primary-container wash for the selected state.

Data Table

The Table component is intentionally unopinionated: it renders markup, it does not manage state. For sorting, filtering, pagination or selection, pair it with TanStack Table, which is headless and leaves the rendering to the kit.

npm install @tanstack/react-table

The examples below all use the same Payment shape:

export type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

Basic

Define your columns with ColumnDef, build the instance with useReactTable + getCoreRowModel, and render the header groups and rows with flexRender.

Cell formatting

Cells are just React — format the value and style the wrapper. Money is right-aligned on both the header and the cell (so the column reads as one rail) and set in tabular-nums, so digits line up across rows.

Row actions

Add a trailing column with an IconButton trigger opening the kit's DropdownMenu. The row's data is available as row.original, and the destructive entry uses DropdownMenuItem variant="destructive".

Pagination

Pass getPaginationRowModel and drive the page with table.previousPage() / table.nextPage(); getCanPreviousPage() and getCanNextPage() disable the buttons at the ends.

Sorting

Hold SortingState, pass getSortedRowModel, and turn the header into a text Button that calls column.toggleSorting() — the arrow glyph follows column.getIsSorted().

Filtering

Hold ColumnFiltersState, pass getFilteredRowModel, and wire an InputGroup to table.getColumn("email")?.setFilterValue(). When nothing matches, render an empty row spanning every column instead of a blank body.

Column visibility

Hold VisibilityState and let a DropdownMenu of DropdownMenuCheckboxItems call column.toggleVisibility(). Columns opt out of hiding with enableHiding: false.

Row selection

Add a leading select column with the kit's Checkbox. The header checkbox takes the real mixed state — indeterminate is a separate prop, not a fake glyph — and the selected row is marked with data-state="selected", which the TableRow styles as a primary-container wash.

Reusable components

Everything above, composed: a filter + column-toggle toolbar, a ColumnHeader that folds sorting and hiding into one menu, row selection, row actions, and a Pagination bar with a page-size Select and first/prev/next/last controls. Lift these three pieces (ColumnHeader, ColumnToggle, Pagination) out once and every data table in your app can reuse them.

Installation

npx shadcn@latest add table

API Reference

The other parts (TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption) take the props of the native element they render — thead, tbody, tfoot, tr, th, td, caption.

Accessibility

• Renders real table semantics (table / thead / tbody / th / td), so screen readers announce row and column context.
• Use TableCaption to name the table; it stays visible under the surface.
• Action-only columns should carry an sr-only header label, and each row's trigger needs an aria-label that names the row it acts on.
• Selection checkboxes need an aria-label too (Select all rows, Select ken99@example.com) — the checkbox has no visible text.