shadcn data table on TanStack Table v9: sorting, filters, row selection and server pagination

shadcn's data table guide now builds on TanStack Table v9, so most v8 snippets you'll find (useReactTable, getCoreRowModel) no longer compile against the current package. This page builds the same kind of table in the Next.js App Router with the v9 API: typed columns, sorting, a filter box, column visibility, row selection and a row actions menu, then a second version that pages on the server through searchParams. At the end, the ⌘K dashboard that can sit around it, and what that piece does not do.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

The ⌘K jump around your table, with Command-K Dashboard

app/dashboard/dashboard.tsx

"use client";
import { useRouter } from "next/navigation";
import { CommandDashboard } from "@/components/CommandDashboard";
import type { Command } from "@/components/engine";

// The dashboard's own four pages, plus one command that leaves it for your TanStack table.
const commands: Command[] = [
  { id: "overview", label: "Overview", group: "Go to", page: "overview", hint: "G O" },
  { id: "invoices", label: "Invoices", group: "Go to", page: "invoices", hint: "G I" },
  { id: "team", label: "Team", group: "Go to", page: "team", hint: "G T" },
  { id: "revenue", label: "Revenue", group: "Go to", page: "revenue", spark: true },
  { id: "invoice-table", label: "All invoices (sort, filter, select)", group: "Actions", hint: "T" },
  { id: "invoice-pages", label: "All invoices, paged on the server", group: "Actions" },
];

export default function Dashboard() {
  const router = useRouter();
  return (
    <CommandDashboard
      commands={commands}
      hotkey="mod+k"
      onCommand={(id) => {
        // Commands without a page land here. Send them to the real table.
        if (id === "invoice-table") router.push("/invoices");
        if (id === "invoice-pages") router.push("/invoices/server?page=1");
      }}
    />
  );
}

components/data-table/features.ts

import {
  columnFilteringFeature,
  columnVisibilityFeature,
  createFilteredRowModel,
  createPaginatedRowModel,
  createSortedRowModel,
  filterFn_includesString,
  rowPaginationFeature,
  rowSelectionFeature,
  rowSortingFeature,
  sortFn_alphanumeric,
  sortFn_basic,
  tableFeatures,
} from "@tanstack/react-table";

// TanStack Table v9: list what this table can do. Anything not listed stays out of the bundle,
// and the core row model is always on, so there is no getCoreRowModel any more.
export const features = tableFeatures({
  columnFilteringFeature,
  columnVisibilityFeature,
  rowPaginationFeature,
  rowSelectionFeature,
  rowSortingFeature,
  filteredRowModel: createFilteredRowModel(),
  sortedRowModel: createSortedRowModel(),
  paginatedRowModel: createPaginatedRowModel(),
  filterFns: { includesString: filterFn_includesString },
  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic },
});

// Pass this as the first type argument to ColumnDef, Row, Table and createColumnHelper.
export type DataTableFeatures = typeof features;

app/invoices/columns.tsx

"use client";
import { createColumnHelper } from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { DataTableFeatures } from "@/components/data-table/features";
import type { Invoice } from "@/lib/invoices";

const col = createColumnHelper<DataTableFeatures, Invoice>();
const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });

export const columns = col.columns([
  col.display({
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all rows on this page"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label={`Select ${row.original.id}`}
      />
    ),
    enableSorting: false,
    enableHiding: false,
  }),
  col.accessor("id", { header: "Invoice" }),
  col.accessor("customer", {
    header: ({ column }) => (
      <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
        Customer {column.getIsSorted() === "asc" ? "↑" : column.getIsSorted() === "desc" ? "↓" : ""}
      </Button>
    ),
    sortFn: "alphanumeric",
    filterFn: "includesString",
  }),
  col.accessor("status", {
    header: "Status",
    cell: ({ row }) => <span className="capitalize">{row.original.status}</span>,
  }),
  col.accessor("amount", {
    header: ({ column }) => (
      <Button variant="ghost" className="ml-auto" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
        Amount
      </Button>
    ),
    cell: ({ row }) => <div className="text-right tabular-nums">{money.format(row.original.amount / 100)}</div>,
    sortFn: "basic",
  }),
  col.display({
    id: "actions",
    enableHiding: false,
    cell: ({ row }) => (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="icon" aria-label={`Actions for ${row.original.id}`}>
            ...
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuLabel>Actions</DropdownMenuLabel>
          <DropdownMenuItem onSelect={() => navigator.clipboard.writeText(row.original.id)}>Copy invoice ID</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem asChild>
            <a href={`/invoices/${row.original.id}`}>Open invoice</a>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    ),
  }),
]);

components/data-table/data-table.tsx

"use client";
import * as React from "react";
import {
  useTable,
  type ColumnDef,
  type ColumnFiltersState,
  type ColumnVisibilityState,
  type RowData,
  type RowSelectionState,
  type SortingState,
} from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { features, type DataTableFeatures } from "./features";

// Rows need a string id: selection is keyed by it, so it stays on the right rows after sorting and paging.
// (A getRowId function can't be a prop here: a Server Component can't pass functions to a Client Component.)
type Props<TData extends RowData & { id: string }> = {
  columns: ColumnDef<DataTableFeatures, TData>[];
  data: TData[];
  filterColumn: string; // the column the search box filters
};

export function DataTable<TData extends RowData & { id: string }>({ columns, data, filterColumn }: Props<TData>) {
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
  const [columnVisibility, setColumnVisibility] = React.useState<ColumnVisibilityState>({});
  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});

  const table = useTable({
    features,
    data,
    columns,
    getRowId: (row) => row.id,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: { sorting, columnFilters, columnVisibility, rowSelection },
    initialState: { pagination: { pageIndex: 0, pageSize: 10 } },
  });

  const filter = table.getColumn(filterColumn);

  return (
    <div className="w-full">
      <div className="flex items-center gap-2 py-4">
        <Input
          placeholder="Filter..."
          aria-label="Filter rows"
          value={(filter?.getFilterValue() as string) ?? ""}
          onChange={(e) => filter?.setFilterValue(e.target.value)}
          className="max-w-sm"
        />
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="ml-auto">Columns</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            {table
              .getAllColumns()
              .filter((column) => column.getCanHide())
              .map((column) => (
                <DropdownMenuCheckboxItem
                  key={column.id}
                  className="capitalize"
                  checked={column.getIsVisible()}
                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
                >
                  {column.id}
                </DropdownMenuCheckboxItem>
              ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      <div className="overflow-hidden rounded-md border border-white/10">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id}>{header.isPlaceholder ? null : <table.FlexRender header={header} />}</TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow key={row.id} data-state={row.getIsSelected() ? "selected" : undefined}>
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      <table.FlexRender cell={cell} />
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center gap-2 py-4">
        <p className="flex-1 text-sm opacity-70">
          {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
        </p>
        <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
          Previous
        </Button>
        <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
          Next
        </Button>
      </div>
    </div>
  );
}

app/invoices/page.tsx

import { DataTable } from "@/components/data-table/data-table";
import { getAllInvoices } from "@/lib/invoices";
import { columns } from "./columns";

// A Server Component: it fetches, the client table sorts, filters, selects and pages in the browser.
export default async function InvoicesPage() {
  const invoices = await getAllInvoices();
  return (
    <main className="mx-auto max-w-5xl p-6">
      <h1 className="text-xl font-semibold">Invoices</h1>
      <DataTable columns={columns} data={invoices} filterColumn="customer" />
    </main>
  );
}

lib/invoices.ts

export type Invoice = {
  id: string;
  customer: string;
  email: string;
  amount: number; // cents
  status: "pending" | "paid" | "overdue";
  due: string; // YYYY-MM-DD
};

const customers = ["Halcyon Health", "Brightline", "Orbital Foods", "Kestrel Labs", "Northbeam", "Pinecrest"];
const statuses: Invoice["status"][] = ["pending", "paid", "paid", "overdue"];

// Stand-in for your database: 57 rows, so the pager has something to do.
const ALL: Invoice[] = Array.from({ length: 57 }, (_, i) => {
  const customer = customers[i % customers.length];
  return {
    id: `INV-${2041 + i}`,
    customer,
    email: `billing@${customer.toLowerCase().replace(/\s+/g, "")}.example`,
    amount: 50_000 + ((i * 7919) % 900_000),
    status: statuses[i % statuses.length],
    due: `2026-${String((i % 12) + 1).padStart(2, "0")}-${String((i % 27) + 1).padStart(2, "0")}`,
  };
});

export async function getAllInvoices(): Promise<Invoice[]> {
  return ALL;
}

// One page from the "database". In a real app this is LIMIT/OFFSET (or a cursor) plus a COUNT.
export async function getInvoicePage(opts: { page: number; pageSize: number; q?: string }) {
  const q = opts.q?.toLowerCase() ?? "";
  const matching = q ? ALL.filter((r) => r.customer.toLowerCase().includes(q) || r.id.toLowerCase().includes(q)) : ALL;
  const start = opts.page * opts.pageSize;
  return { rows: matching.slice(start, start + opts.pageSize), rowCount: matching.length };
}

app/invoices/server/page.tsx (server-side pagination)

import { getInvoicePage } from "@/lib/invoices";
import { ServerTable } from "./server-table";

const PAGE_SIZE = 20;

// Next.js 15 and 16: searchParams is a Promise in a page.
export default async function ServerInvoicesPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string; q?: string }>;
}) {
  const { page = "1", q = "" } = await searchParams;
  const pageIndex = Math.max(0, (Number.parseInt(page, 10) || 1) - 1);
  const { rows, rowCount } = await getInvoicePage({ page: pageIndex, pageSize: PAGE_SIZE, q });

  return (
    <main className="mx-auto max-w-5xl p-6">
      <h1 className="text-xl font-semibold">Invoices</h1>
      <ServerTable data={rows} rowCount={rowCount} pageIndex={pageIndex} pageSize={PAGE_SIZE} />
    </main>
  );
}

app/invoices/server/server-table.tsx

"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { createColumnHelper, rowPaginationFeature, tableFeatures, useTable, type PaginationState, type Updater } from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import type { Invoice } from "@/lib/invoices";

// Only pagination here, and no paginated row model: the server already sent just this page.
// No columnVisibilityFeature either, so rows have getAllCells() but not getVisibleCells().
const features = tableFeatures({ rowPaginationFeature });
const col = createColumnHelper<typeof features, Invoice>();
const columns = col.columns([
  col.accessor("id", { header: "Invoice" }),
  col.accessor("customer", { header: "Customer" }),
  col.accessor("status", { header: "Status" }),
]);

type Props = { data: Invoice[]; rowCount: number; pageIndex: number; pageSize: number };

export function ServerTable({ data, rowCount, pageIndex, pageSize }: Props) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const pagination: PaginationState = { pageIndex, pageSize };

  // The URL is the state: a page change becomes ?page=N and the Server Component fetches that page.
  const onPaginationChange = (updater: Updater<PaginationState>) => {
    const next = typeof updater === "function" ? updater(pagination) : updater;
    const params = new URLSearchParams(searchParams.toString());
    params.set("page", String(next.pageIndex + 1));
    router.push(`${pathname}?${params.toString()}`);
  };

  const table = useTable({
    features,
    data,
    columns,
    getRowId: (row) => row.id,
    manualPagination: true,
    rowCount,
    state: { pagination },
    onPaginationChange,
  });

  return (
    <div>
      <div className="overflow-hidden rounded-md border border-white/10">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((hg) => (
              <TableRow key={hg.id}>
                {hg.headers.map((h) => (
                  <TableHead key={h.id}>
                    <table.FlexRender header={h} />
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows.map((row) => (
              <TableRow key={row.id}>
                {row.getAllCells().map((cell) => (
                  <TableCell key={cell.id}>
                    <table.FlexRender cell={cell} />
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center gap-2 py-4">
        <p className="flex-1 text-sm opacity-70">
          Page {pageIndex + 1} of {Math.max(1, table.getPageCount())}
        </p>
        <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
          Previous
        </Button>
        <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
          Next
        </Button>
      </div>
    </div>
  );
}

app/dashboard/page.tsx

import Dashboard from "./dashboard";

export default function DashboardPage() {
  return <Dashboard />;
}

Good to know

The table is free. features.ts, columns.tsx, data-table.tsx, lib/invoices.ts and both invoice pages are plain TanStack Table v9 plus shadcn's table, button, checkbox, input and dropdown-menu components (npx shadcn@latest add table button checkbox input dropdown-menu). None of it needs anything from us.
v9 makes you list features. Sorting, filtering, column visibility, row selection and pagination each work only because features.ts names them in tableFeatures(). The core row model is always on, so getCoreRowModel is gone, and the sorted, filtered and paginated row models are created once there with createSortedRowModel(), createFilteredRowModel() and createPaginatedRowModel().
Built-in sort and filter functions are opt-in too. A column can only use sortFn: "alphanumeric" or filterFn: "includesString" because features.ts registers them under sortFns and filterFns. Asking for one you didn't register is a type error, not a silent fallback.
Selection is keyed by row id. data-table.tsx sets getRowId to row.id, so a ticked invoice stays ticked after you sort or change page. With the default index ids, selection follows the position instead of the invoice.
The row actions menu is a display column with enableHiding: false, so the Columns menu can't hide it. The Columns menu lists only columns where getCanHide() is true.
The client version gets every row from the Server Component and does the sorting, filtering and paging in the browser. That's fine for hundreds of rows. For thousands, use the server version, which only ever sends one page.
The server version's state lives in the URL. Previous and Next call onPaginationChange, which pushes ?page=N; the Server Component reads it from searchParams (a Promise in Next.js 15 and 16), fetches that page and passes rowCount so TanStack knows how many pages exist. It sets manualPagination, so TanStack doesn't slice the rows again.
What we ran: next build and next start on the scratch app. /invoices rendered 10 of 57 rows with "0 of 57 row(s) selected", /invoices/server?page=2 rendered 20 rows and "Page 2 of 3", and ?q=halcyon narrowed it to 10 rows on 1 page. We didn't click through sorting, selection or the menus in a browser, and we didn't test a real database or a screen reader.
Every file on this page passes tsc --noEmit and next build with Next.js 15.5, React 19.1, TypeScript 5.9.3 and @tanstack/react-table 9.3.1. The shadcn components in our scratch app were small local versions with the same export names on radix-ui 1.8.1, so the shadcn files the CLI writes for you will look different inside.

The free route: shadcn's data table, on TanStack Table v9

If all you need is a data table, everything above the dashboard is the whole answer and it's free. shadcn doesn't ship a data table component. Its docs describe it as a guide: you add the table primitives with the CLI and write the TanStack Table part yourself, which is what columns.tsx and data-table.tsx are.
We read shadcn's data table page on October 26, 2026. It now uses TanStack Table v9: a tableFeatures() object, createColumnHelper with that object as the first type argument, the useTable hook, and table.FlexRender for headers and cells. The page says "TanStack Table v9 is feature-based" and that anything you don't list "is tree-shaken out of your bundle." The code here follows the same shape with an invoices table instead of payments.
@tanstack/react-table 9.3.1 was the latest version on npm that day (v9.0.0 went stable on August 4, 2026), and npm counted 15,200,564 downloads for October 16 to 22. Its peer dependency is react >=18.

Coming from TanStack Table v8 (useReactTable and getCoreRowModel)

Most data table tutorials, and most code an AI assistant writes for you, still use the v8 API. Against 9.3.1, import { useReactTable, getCoreRowModel } from "@tanstack/react-table" fails to compile: TypeScript says the package has no exported member named useReactTable or getCoreRowModel.
The swaps we made: useReactTable becomes useTable with a features option. getCoreRowModel goes away, since the core row model is always on. getSortedRowModel(), getFilteredRowModel() and getPaginationRowModel() become sortedRowModel: createSortedRowModel(), filteredRowModel: createFilteredRowModel() and paginatedRowModel: createPaginatedRowModel() inside tableFeatures(). ColumnDef<TData, TValue> becomes ColumnDef<typeof features, TData>, and createColumnHelper<TData>() becomes createColumnHelper<typeof features, TData>(). Sort and filter functions you use by name must be registered under sortFns and filterFns.
manualPagination, rowCount, pageCount, onPaginationChange, getRowId, enableSorting and enableHiding kept their names. flexRender still works, and shadcn's page notes it; we used table.FlexRender.
Row methods depend on features. getVisibleCells() comes with columnVisibilityFeature, so the server table, which doesn't register it, uses getAllCells() instead. Calling getVisibleCells() there is a type error.
The package also has a @tanstack/react-table/legacy entry with useLegacyTable and the old get*RowModel functions, each marked deprecated in its types in favour of the new useTable. We didn't type-check code against the legacy entry, so treat it as a stopgap for a big v8 codebase, not something this page tested.

Server-side pagination with searchParams

app/invoices/server/page.tsx is a Server Component. It awaits searchParams, turns ?page= into a zero-based pageIndex, and asks lib/invoices.ts for one page plus the total count. In a real app that's your LIMIT and OFFSET (or a cursor) and a COUNT. It then renders the client table with that page's rows and rowCount.
server-table.tsx registers only rowPaginationFeature and no paginated row model, because the rows it gets are already one page. It sets manualPagination: true, passes rowCount, and controls state.pagination from the props. onPaginationChange works out the next page and pushes it into the URL with router.push, which re-runs the Server Component. The back button and shared links work because the page number is in the URL.
The same pattern covers server-side sorting and filtering: v9 still has manualSorting and manualFiltering, and you'd keep those states in searchParams too. Our server example only pages, plus a ?q= search read from the URL, so test sorting and filtering against your own query before you ship them.
One thing that passed tsc but failed next build: we first passed getRowId={(row) => row.id} from the Server Component page into the client DataTable. The build stopped with "Functions cannot be passed directly to Client Components". data-table.tsx now sets getRowId itself and asks for rows with a string id.

What Command-K Dashboard does around a table, and what it doesn't

Command-K Dashboard is one React component: a sidebar, four pages (Overview, Invoices, Team, Revenue) and its own ⌘K palette, animated with framer-motion. Its Invoices page is a table, but it is not built on TanStack Table and it isn't a data table engine. It has no sorting, no filtering, no column visibility, no row selection and no row actions. It shows invoice, customer, due date, amount and status, 10 rows per page with Previous and Next buttons.
The Pending to Paid flip is an animation. Every row in data.invoices starts as Pending and flips to Paid as the page plays, each amount flies into the total, and it plays each time you open the page. It doesn't read a status from your data, so don't feed it real unpaid invoices as if it were your ledger. Rows in data.pastInvoices always show Paid.
Where it fits: the animated invoices view for a product demo, a landing page or an onboarding screen, and the ⌘K palette as the way into your real screens. Palette commands without a page call onCommand with their id, so dashboard.tsx sends two of them to the TanStack tables above. Commands with a page switch the dashboard's own page and call onNavigate.
Some honest limits: you can't put the TanStack table inside the dashboard's Invoices page, because the component has no slot for it. Its palette is its own code, not shadcn's Command, and it brings its own dark theme with CSS variables on :root, so read the scoping notes on the Command-K Dashboard guide before you drop it into a shadcn app.

Command-K Dashboard guide: shadcn Command, scoping and Tailwind v4

Install

Copy from the zipPut react/src/components + react/src/data into src/, then npm i @tanstack/react-table framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

commands: palette entries; one without a page calls onCommand with its id
onCommand: where dashboard.tsx routes to your TanStack table
onNavigate: called when a command switches the dashboard's own page
data: NorthwindData; invoices animate Pending to Paid, pastInvoices show Paid
hotkey: "mod+k" (⌘K on Mac, Ctrl+K elsewhere) or "none"

How qodesign compares

qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.
qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

From the blog: overscroll-behavior contain: Stop Scroll Stealing in React

Questions

Does shadcn's data table use TanStack Table v8 or v9?

v9, as of October 26, 2026. shadcn's guide uses useTable, tableFeatures and createColumnHelper from @tanstack/react-table, whose latest version that day was 9.3.1. v8 code with useReactTable and getCoreRowModel doesn't compile against it without changes.

How do I do server-side pagination with a shadcn data table in Next.js?

Read the page from searchParams in a Server Component, fetch only that page and the total count, and pass both to a client table that sets manualPagination: true and rowCount. In onPaginationChange, push the new page into the URL so the Server Component fetches it. The server version on this page does exactly that and builds with Next.js 15.5.

Why does my TanStack column say sortFn "text" is not assignable?

In v9 the built-in sort and filter functions are tree-shaken, so a column can only name the ones you registered under sortFns or filterFns in tableFeatures(). Register sortFn_text, or use one you did register.

Is Command-K Dashboard's invoices table a TanStack data table?

No. It's its own React table with a Previous and Next pager, 10 rows per page, and an animated Pending to Paid flip. It has no sorting, filtering, row selection or column visibility. Use it for the animated view and the ⌘K palette, and build the working table with TanStack.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.