TanStack Table vs ReUI: picking a React data grid for a shadcn app

If you build a data grid with TanStack Table in a shadcn app, most of the work is the grid UI, not the table logic. ReUI's data grid is that UI already written, on top of the same TanStack Table. So the useful question isn't which engine to use. It's how much grid UI you want to write, and how much of it you want to own.

I work on ReUI, so keep that in mind. I'll point out where plain TanStack Table is the better call.

What I checked

I compared @tanstack/react-table 9.3.1 with the ReUI data grid as the shadcn CLI served it on 3 Nov 2026. To see exactly what lands in a project, I ran npx shadcn@latest view @reui/data-grid and counted the files.

	TanStack Table	ReUI data grid
What you install	one npm package	12 files in `components/reui/data-grid`
UI included	none	table, header menus, filters, pagination, virtual table, cell selection
Extra packages	none	TanStack Virtual, dnd-kit, Base UI or Radix
Who maintains the UI	you	you, once it's installed
License	MIT	MIT, free

TanStack Table gives you state, not a table

TanStack Table describes itself as headless, with "full control over markup, styles, and behavior". You get sorting, filtering, grouping, selection and pagination as state and row models. It renders nothing.

For a sortable, paged table that's ideal. You map rows into the shadcn <Table> you already have and you're done in an afternoon.

It gets heavier when the table has to behave like a grid: a menu on each column header, resize handles, pinned columns, keyboard focus moving between cells, virtualization (a separate package, TanStack Virtual), and copy and paste across a range of cells. TanStack Table leaves all of that UI to you on purpose.

ReUI's data grid is that UI, already written

npx shadcn@latest add @reui/data-grid

That adds 12 files and a little over 11,000 lines of TSX to your project. The four biggest files:

File	Lines (about)	What it covers
`data-grid-table.tsx`	3,100	the table, sticky headers, pinning, row states
`data-grid-cell-selection.tsx`	2,600	range selection, copy, paste, fill handle
`data-grid.tsx`	1,300	the provider and shared state
`data-grid-table-virtual.tsx`	1,200	row and column virtualization

That number cuts both ways. It's a lot of grid work you skip. It's also a lot of code that now lives in your repo: you can change any line, and you also maintain every line.

One caveat on the cell selection file: a range selection you write yourself could be far smaller if you skip the edge cases (pinned columns, virtualized rows, translated labels). The count shows what a complete version covers, not what you'd have to write.

You still write the TanStack Table part. The grid renders it:

const table = useTable({ features: dataGridFeatures, data, columns, }) return ( <DataGrid table={table} recordCount={data.length}> <DataGridContainer> <DataGridTable /> </DataGridContainer> <DataGridPagination /> </DataGrid> )

Your columns, row models and state work the way they do in TanStack Table. Grid behaviour is turned on with tableLayout props instead of built by hand: headerSticky, columnsResizable, columnsPinnable, columnsDraggable, rowsPinnable, cellSelection. On top of that you get infinite scroll, tree and expandable rows, footer rows, inline editing, and one i18n prop for every built-in string.

Four of the free examples:

There are two versions, one on Base UI and one on Radix UI, so use the docs page that matches your project. What it doesn't have: pivot tables and Excel export.

Which one I'd pick

You need	Pick
A sortable, paged table	TanStack Table with the shadcn `<Table>`
Every pixel your own, and time to build it	TanStack Table
Pinning, resizing and virtualization in your own design system	ReUI data grid
Spreadsheet-style range selection and editing	ReUI data grid