Data Table
TanStack Table shell with toolbar, pagination, sortable headers, and column visibility.
Books
| Actions | ||||||
|---|---|---|---|---|---|---|
| The Left Hand of Darkness | Ursula K. Le Guin | published | Yes | May 12, 2025 | ||
| Dune | Frank Herbert | published | Yes | May 10, 2025 | ||
| The Dispossessed | Ursula K. Le Guin | draft | No | Apr 28, 2025 | ||
| Neuromancer | William Gibson | published | Yes | Apr 20, 2025 | ||
| The Three-Body Problem | Liu Cixin | archived | No | Mar 18, 2025 | ||
| Foundation | Isaac Asimov | published | Yes | Mar 1, 2025 | ||
| Snow Crash | Neal Stephenson | draft | No | Feb 14, 2025 | ||
| The Broken Earth | N.K. Jemisin | published | Yes | Jan 30, 2025 |
Page 1 of 1
Rows
Installation
npx shadcn@latest add https://ui.uptoolkit.com/r/data-table.jsonUsage
Composable TanStack Table primitives for CRUD admin UIs.
import { DataTable } from "@/components/ui/data-table";
import { DataTableToolbar } from "@/components/ui/data-table-toolbar";
import { DataTablePagination } from "@/components/ui/data-table-pagination";
import { useCrudDataTable } from "@/hooks/use-crud-data-table";
const { table } = useCrudDataTable({ columns, data });
<>
<DataTableToolbar table={table} />
<DataTable table={table} />
<DataTablePagination table={table} />
</>;DataTableToolbar includes global search, per-column filters, and a column
visibility menu. DataTableColumnHeader adds sort and hide controls to each
sortable column.
Install @tanstack/react-table in your app:
npm install @tanstack/react-table