Q: How is a data table different from a plain Table?

Plain Table is HTML chrome — ` `, ` `, ` `, ` `, ` ` styled by shadcn. You write the rendering loop yourself, you sort and filter manually. Data Table layers TanStack Table on top: column definitions describe how each column sorts/filters/renders, row state lives in TanStack hooks, and bulk actions, pagination, and selection wire up through the same hooks. Plain Table for static reports; Data Table for dashboard tables users actually interact with.

Question 1

What is a shadcn data table?

Accepted Answer

A shadcn data table is a sortable, filterable, paginated table built on TanStack Table v8 (the React-friendly headless table primitive) with shadcn/ui's Table styling on top. It's the pattern Linear, Vercel, and Stripe ship for showing tabular data — column sorting, multi-column filters, row selection with bulk actions, server-side or client-side pagination, column visibility toggles, sticky headers. Each example in this gallery is a single self-contained TSX file you can drop into your dashboard.

Question 2

Are these data table examples free?

Accepted Answer

Yes, every data table example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating. TanStack Table itself is MIT-licensed too.

Question 3

How is a data table different from a plain Table?

Accepted Answer

Plain Table is HTML chrome — ``, ``, ``, ``, `

` styled by shadcn. You write the rendering loop yourself, you sort and filter manually. Data Table layers TanStack Table on top: column definitions describe how each column sorts/filters/renders, row state lives in TanStack hooks, and bulk actions, pagination, and selection wire up through the same hooks. Plain Table for static reports; Data Table for dashboard tables users actually interact with.

Question 4

When should I use a data table versus an infinite scroll list?

Accepted Answer

Data table for structured data with discrete columns where users compare values across rows — orders, users, payments, projects. Infinite scroll for feed-style content where each row is mostly self-contained — posts, messages, activity events. The cognitive load of scanning columns favors paginated tables; the engagement of "keep scrolling" favors infinite lists.

Question 5

How do I add column-level filtering?

Accepted Answer

TanStack Table's column filters work via `columnFilters` state. For text columns, render an Input above the table that updates `setColumnFilters([{ id: 'email', value: query }])`. For enum columns (status: "Active" / "Pending"), render a faceted filter with a Combobox of selected values. The advanced variant in this gallery shows multi-column filters with the standard "Active filters as removable chips" pattern.

Question 6

How do I implement row selection with bulk actions?

Accepted Answer

Add a Checkbox column with id `"select"` — TanStack Table includes built-in `getIsSelected` / `toggleSelected` helpers per row plus `getIsAllRowsSelected` for the header checkbox. Track `rowSelection` in state. When `Object.keys(rowSelection).length > 0`, render a sticky bulk action bar above the table with operations that take the selected row IDs ("Archive 5", "Delete 5", "Export 5").

Question 7

Should pagination be client-side or server-side?

Accepted Answer

Client-side for tables under ~1000 rows — load everything once, paginate in memory via `getPaginationRowModel`. Server-side for larger datasets — pass the current page + page size to your fetcher, render only the visible rows, set `pageCount` so TanStack knows the total. The advanced variant in this gallery shows server-side pagination with a controlled `pagination` state that triggers refetch on change.

Question 8

How do I install a data table example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/data-table/…`, plus the shadcn/ui Table primitive, Checkbox, DropdownMenu, Input, and Badge. TanStack Table is added as a peer dependency; install it with `npm install @tanstack/react-table` if it's not already in your project.

Question 9

How do I add a column visibility toggle?

Accepted Answer

Render a DropdownMenu with a CheckboxItem per column. Wire each toggle to TanStack's `column.toggleVisibility()`. Persist the visibility state to localStorage so users' column preferences survive reloads. For multi-tenant apps, persist per-user via your backend instead so the same user's preferences carry across devices.

Question 10

How do I export the table data to CSV?

Accepted Answer

Walk the visible rows via `table.getFilteredRowModel().rows` (which respects the current filters, sort, and pagination), serialize each row's column values to CSV, and trigger a download via Blob + `URL.createObjectURL`. For server-side data tables, point the export action at a backend endpoint that streams the full filtered dataset — the client-side export only sees the current page.

Question 11

Which libraries do data table examples depend on?

Accepted Answer

TanStack Table v8 (the headless table engine — sorting, filtering, pagination, selection, column visibility), shadcn/ui Table + Checkbox + DropdownMenu + Input + Badge (styled wrappers generated into your project by the CLI), Tailwind CSS, and Lucide React (icons for sort indicators, kebab menus). React 19 baseline.

Question 12

Are data table examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The underlying `` semantics give screen readers proper row / column / header announcements. Sort buttons are real `

Question 13

Can I use these data table examples with React Server Components?

Accepted Answer

TanStack Table is a client library (it manages sorting, filtering, selection, pagination state). The table itself needs `"use client"`. But the data fetching can stay server-side: a Server Component fetches the rows and passes them as props into the client-boundary table. For server-paginated tables, lift the `pagination` state into a parent client component that triggers a refetch via React Query / SWR / your data layer.

React Data Table Examples for shadcn/ui

Browse every data table example

Frequently Asked Questions