Data Tables

Two very different answers to the same problem. TanStack Table is headless — it computes sorting, filtering, pagination and selection, and renders nothing at all, which makes it a direct fit for the Table primitives. AG Grid is the opposite: it owns the viewport, virtualises rows, and is themed rather than composed.

TanStack Table

TableHead already accepts sortable, sortDirection and onSort, which is exactly the shape a TanStack header exposes — so the two meet with no adapter in between. Everything visible is an Algorize UI component; TanStack supplies the row model and the state.

Sortable, searchable, paged

Sort by clicking a header, search across every column, five rows to a page. Badge renders the status cell and Button drives the pager — TanStack renders none of it.

Register features intableFeatures: — v9 compiles in nothing you do not name. table.state.sorting does not exist until rowSortingFeature is in that object.
sortFns: must name the comparators your columns resolve to. A string column picks text, a numeric one picks basic; leave either out and that column logs a warning and silently refuses to sort.
state: and onGlobalFilterChange go together. A change handler without the matching controlled value takes ownership of the slice and then never writes it back.
FlexRender: is a component on the table instance in v9 — <table.FlexRender header={header} />, not the standalone flexRender(...) call from v8.

Active Color

Installation

npm install @tanstack/react-table

The example renders through our table primitives, so install those too:

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Table

npx shadcn@latest add @algorize-ui/table

components/custom/blocks/TableBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Table to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

toggle-group is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/toggle-group

It also uses Badge and Button:

npx shadcn@latest add @algorize-ui/ui-badge @algorize-ui/button

Coming from v8

The v9 API is a real break, and most examples still online are v8. Three differences account for nearly every migration error:

v8	v9
`useReactTable({ getCoreRowModel: getCoreRowModel() })`	`useTable({ features })`, with row models registered as feature slots
Features always present	`tableFeatures({ rowSortingFeature, ... })` — opt in, or the state does not exist
`table.getState().pagination`	`table.state.pagination`
`flexRender(cell.column.columnDef.cell, cell.getContext())`	`<table.FlexRender cell={cell} />`

Keep features, data and columns stable across renders. A fresh array literal as a fallback (data={rows ?? []}) invalidates every data-dependent row model on every render.

AG Grid

AG Grid renders its own viewport, so the integration point moves: instead of composing our primitives, you theme the grid and drop our components into its cells.

Themed grid with a Badge cell

The same useChartTokens hook from the Charts page feeds AG Grid's Theming API, and the status column renders our Badge. Sorting, filtering, resizing and pagination are the grid's own.

CallModuleRegistry.registerModules: once at module scope. v33+ is modular — without it the grid renders empty and logs a missing-module error.
theme: replaced the CSS-file themes. There is no ag-theme-alpine import any more; themeQuartz.withParams({...}) takes the token values directly.
cellRenderer: takes an ordinary React component. { value } is the cell value, so a Badge drops straight in.
quickFilterText: is a controlled prop — the input above the grid is ours, the matching is the grid's.

Installation

npm install ag-grid-react ag-grid-community

This example also uses these Algorize UI components — install whichever your project does not already have:

npx shadcn@latest add @algorize-ui/card @algorize-ui/ui-badge @algorize-ui/button

The grid takes its colours from useChartTokens, which is not a registry item: create src/lib/chart-tokens.ts with the file in this example's Code tab — the same file the Charts page sets up, so skip this if you already have it.

Which one

	TanStack Table	AG Grid Community
Markup	Yours, entirely	The grid's
Bundle	~15 kB	~500 kB+
Row virtualisation	Add TanStack Virtual	Built in
Column resize, pinning, quick filter	Wire it up	Built in
Matching a design system	Nothing to override	Theming API
Excel export, pivoting, master detail	—	Enterprise licence

Under a few thousand rows, and where the table should look like the rest of the page, TanStack Table is less code and a far smaller bundle. Reach for AG Grid when you want a spreadsheet — virtualised rows, resizable pinned columns, and a filter UI you did not have to build.