Question 1

What is a shadcn data table?

Accepted Answer

A table people work with, not only read: they select rows, sort, filter, hide columns and page through. These examples pair TanStack Table, which keeps that state and computes the visible rows, with shadcn.io's Table and form components, which draw it. Each example adds one feature so you can copy just the part you need.

Question 2

Are these data table examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account. TanStack Table is MIT-licensed.

Question 3

How is a data table different from a plain Table?

Accepted Answer

Table is the styled markup: you map your rows into it and it shows them. A data table adds column definitions and TanStack Table's features, so sorting, filtering, selection, visibility and pagination come from the table instead of your own loops. Use Table when the rows are only read.

Question 4

Which component library do the examples use?

Accepted Answer

Your pick of four: Base UI, React Aria, Ark UI or Radix UI. TanStack Table is the same on each; the checkboxes, menus and buttons follow the library's own API. On React Aria the table is React Aria's own, so selection, sorting and keyboard navigation between cells come from it.

Question 5

How do I add column filters?

Accepted Answer

Add `columnFilteringFeature` and `createFilteredRowModel()` to the table, give the column a `filterFn`, and connect an Input to `column.setFilterValue` and `column.getFilterValue()`. The Data Table with Filters example filters names and emails this way.

Question 6

How do I implement row selection?

Accepted Answer

Add `rowSelectionFeature` and a first column of checkboxes: one per row from `row.getIsSelected()`, and one in the header that selects the whole page. `table.getSelectedRowModel().rows` is what a bulk action works on. On React Aria, the table's own selection checkboxes do this.

Question 7

Should pagination be client-side or server-side?

Accepted Answer

Client-side while all the rows fit in memory, a few thousand at most: add `rowPaginationFeature` and `createPaginatedRowModel()` as these examples do. For more, fetch one page at a time, set `manualPagination` and `rowCount`, and fetch again when `onPaginationChange` reports a new page.

Question 8

How do I install a data table example?

Accepted Answer

Sign in with a free account and run the install command on the example's page. It adds the example's file, the components it uses, such as Table, Checkbox, Dropdown Menu and Button, and `@tanstack/react-table`.

Question 9

How do I add a column visibility toggle?

Accepted Answer

Add `columnVisibilityFeature`, then list `table.getAllColumns()` filtered by `getCanHide()` in a Dropdown Menu, with each item checked from `column.getIsVisible()` and calling `column.toggleVisibility()`. Save the visibility state if it should survive a reload.

Question 10

How do I export the table data to CSV?

Accepted Answer

Walk `table.getRowModel().rows` for the current page, or the filtered and sorted rows for all pages, write each row's values as a CSV line and download it from a Blob. With server-side pagination, export from the server, which has every row.

Question 11

Which libraries do data table examples depend on?

Accepted Answer

TanStack Table v9 (`@tanstack/react-table`), shadcn.io's Table, Checkbox, Dropdown Menu, Input and Button on Base UI, React Aria, Ark UI or Radix UI, Tailwind CSS and Lucide icons. The data table examples are React only.

Question 12

Are the data tables accessible?

Accepted Answer

They render real table markup, so screen readers announce rows, columns and headers. Every checkbox, menu button and filter input has a label, icon-only buttons have names, and the expander says whether it's open. On React Aria, the arrow keys move between cells and Space selects a row.

Question 13

Can I use these data tables with React Server Components?

Accepted Answer

The table is a client component: TanStack Table keeps its state in the browser. Fetch the rows in a Server Component and pass them to it as props, or fetch each page on the client when the pagination is server-side.

Data Table Examples

Expandable Sub-Rows

Numeric Pagination

Resizable Columns

Data Table with Actions

Basic Data Table with Checkboxes

Data Table with Column Visibility

Data Table with Filters

Paginated Data Table

More component examples

Item

Kbd

Table

Avatar

Badge

Carousel

Chart

Date Picker

Data Table examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every data table example. One prompt away.