shadcn-impl-data-table

name	shadcn-impl-data-table
description	Use when building any sortable, filterable, paginated, selectable, or column-toggleable table in shadcn ui : the official shadcn DataTable is NOT a primitive component but a documented recipe that composes TanStack Table v8 (@tanstack/react-table) with the shadcn Table primitive. Use this skill any time the task involves columns of data, row selection with bulk actions, pagination of a list, server-side data loading with sorting or filtering, column-visibility toggles, or resizable columns. Prevents the recurring bugs : forgetting getCoreRowModel and getting zero rows, mixing client-side and server-side state so sorting fires twice, missing getRowId so row-selection keys collide, setting manualPagination without pageCount so pagination breaks, forgetting 'use client' on the DataTable component, defining a ColumnDef without accessorKey or accessorFn so cells render undefined, and importing TanStack helpers from the wrong package. Covers the ColumnDef typing pattern, the useReactTable hook composition, the six feature row models (core, sorted, filtered, paginated, with row selection, with column visibility), the optional column-resizing setup, the server-side data contract (manualSorting plus manualFiltering plus manualPagination plus pageCount or rowCount), the reusable DataTable component composition with shadcn Table primitives, flexRender for dynamic cell content, and the 'use client' boundary rule. Keywords: shadcn data table, TanStack Table v8, @tanstack/react-table, ColumnDef, useReactTable, flexRender, sortable table, filterable table, paginated table, row selection, column visibility, column resizing, server-side data table, manualSorting, manualFiltering, manualPagination, pageCount, rowCount, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, accessorKey, accessorFn, SortingState, ColumnFiltersState, VisibilityState, getRowId, enableRowSelection, 'use client' DataTable, how do I make a sortable table, how do I add pagination to a table, how do I select rows in a table, table is empty no rows showing, sorting fires twice, page count infinite, my checkboxes select the wrong row, cells are undefined, DataTable recipe, bulk actions table, why are my rows not rendering.
license	MIT
compatibility	Designed for Claude Code. Requires shadcn ui evergreen-2026 with TanStack Table v8 (@tanstack/react-table).
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

shadcn ui : DataTable Recipe (TanStack Table v8)

Deterministic mental model for the shadcn DataTable. There is NO DataTable primitive in shadcn. The official recipe (https://ui.shadcn.com/docs/components/radix/data-table) composes @tanstack/react-table v8 with the shadcn Table primitive. ALWAYS treat DataTable as a recipe-skill, not a primitive-skill : you write a reusable components/ui/data-table.tsx file in user space.

Quick Reference

One mental model

A DataTable is three concerns wired together :

1. Schema : a ColumnDef<TData, TValue>[] array describes columns (accessor + header + cell).
2. Headless engine : useReactTable({ data, columns, getCoreRowModel, ... }) returns a table instance.
3. Markup : a <DataTable /> component renders the shadcn <Table> primitive driven by table.getHeaderGroups() and table.getRowModel().rows.

ALWAYS pass getCoreRowModel: getCoreRowModel() or the table renders ZERO rows. ALWAYS mark the DataTable component file "use client" ; the headless engine uses React hooks and breaks under server-rendering.

Install

npx shadcn@latest add table
npm install @tanstack/react-table

ALWAYS install the table primitive first ; the recipe imports Table, TableBody, TableCell, TableHead, TableHeader, TableRow from @/components/ui/table.

Six features, six row-model functions

Feature	Row model fn	State key	Setter prop
Render rows	getCoreRowModel()	:	:
Sort	getSortedRowModel()	sorting: SortingState	onSortingChange
Filter