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 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:

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

Docs and every example: https://reui.io/docs/components/base/data-grid?utm_source=devto&utm_medium=social&utm_campaign=data-grid-comparison

If you've built a grid on TanStack Table, what took the longest: the column menus, virtualization, range selection, or something I didn't list?