A shadcn table with TanStack Table

Short answer: mount the shadcn Table components and hand data and columns to TanStack Table, which handles sorting, filters and pagination without generating markup. The table stays yours, the logic does not.

The columns

import {
  createSortedRowModel,
  rowSortingFeature,
  sortFns,
  tableFeatures,
} from "@tanstack/react-table";
import type { ColumnDef } from "@tanstack/react-table";

type Invoice = { id: string; total: number };

const features = tableFeatures({
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
  sortFns,
});

export const columns: Array> = [
  { accessorKey: "id", header: "Fattura" },
  {
    accessorKey: "total",
    header: "Totale",
    cell: (info) => info.getValue().toFixed(2) + " EUR",
  },
];

Features are opt-in: tableFeatures receives only what you use, so sorting, filters and pagination never enter the bundle unless declared. The core row model is always there, the others register as slots.

The table

import { useTable } from "@tanstack/react-table";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { columns, features } from "./columns";

export function InvoiceTable({ data }: { data: Array }) {
  const table = useTable({ key: "invoices", features, columns, data });

  return (
    
      
        {table.getHeaderGroups().map((group) => (
          
            {group.headers.map((header) => (
              
                {header.isPlaceholder ? null : }
              
            ))}
          
        ))}
      
      
        {table.getRowModel().rows.map((row) => (
          
            {row.getAllCells().map((cell) => (
              
                
              
            ))}
          
        ))}
      
    
  );
}

The getToggleSortingHandler method comes from the sorting feature you just registered: without that line in tableFeatures a click changes nothing. FlexRender draws the cell with the function you wrote in the column, or prints the value.

Why two layers

The gain is separation: TanStack has no idea what a tr is, shadcn has no idea what sorting is. You can change the markup without rewriting the logic, or swap the markup for a list on mobile, and both pieces keep working.

The command

npm install @tanstack/react-table@9
npx shadcn@latest add table

Live records in the catalogue

Three records show the result: the shadcn library, the table-01 block with headers and pagination, and the table blocks category. The licence sits on every page.

The limitation

The package does not virtualise: a table with a thousand rows mounts a thousand nodes, and lightening it takes TanStack Virtual, another MIT package. Client-side sorting also works on data already downloaded; with ten thousand rows pagination has to come from the server, or the cost simply moves to the network.

Where to continue

The distribution model is in what shadcn/ui is; the most common flexRender error is in TanStack Table and flexRender; the comparison between libraries is in React table libraries.