Data Tables

Data Tables

Overview

Tables are where SaaS apps live (users, invoices, logs). Build them with TanStack Table (headless logic: sorting, filtering, pagination, selection) rendered through shadcn/ui Table primitives. Separate column definitions from the table shell so every table in the app behaves consistently.

When to use

• Displaying lists of records with sort/filter/paginate.
• Bulk actions on selected rows.
• A `` is being hand-built with manual sort state.

Column definitions

import { ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";

export type Invoice = { id: string; customer: string; status: "paid" | "open" | "void"; amount: number };

export const columns: ColumnDef[] = [
  {
    id: "select",
    header: ({ table }) => (
       table.toggleAllPageRowsSelected(!!v)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
       row.toggleSelected(!!v)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
  },
  { accessorKey: "customer", header: "Customer" },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => {row.original.status},
  },
  {
    accessorKey: "amount",
    header: () => Amount,
    cell: ({ row }) => ${(row.original.amount / 100).toFixed(2)},
  },
];

The reusable shell

const table = useReactTable({
  data, columns,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  state: { sorting, rowSelection, globalFilter },
  onSortingChange: setSorting,
  onRowSelectionChange: setRowSelection,
});

Render header/body from table.getHeaderGroups() / table.getRowModel().rows. Always handle the three non-happy states:

{isLoading ? (
  
) : rows.length === 0 ? (
  No results.
) : (
  rows.map((row) => …
)}

Bulk actions

When table.getSelectedRowModel().rows.length > 0, show an action bar:

{selectedCount > 0 && (
  
    {selectedCount} selected
    Delete
  
)}

Server-side at scale

For large datasets, set manualPagination/manualSorting/manualFiltering: true and pass state to your API. Keep filter/sort/page in the URL (searchParams) so views are shareable and survive refresh.

Pitfalls

• No loading/empty/error states — the #1 omission; a blank table looks broken.
• Right-align numbers + tabular-nums — left-aligned currency is hard to scan.
• Client-paginating 50k rows — move to server-side; don't ship it all.
• Selection lost on page change unless you key it by row id.
• Non-accessible sort headers — make them `s with aria-sort`.
• Filter/sort only in component state — put it in the URL for shareable views.

Hand-off

A consistent table that pairs with empty-and-loading-states (skeletons), modals-and-dialogs (row edit/confirm), and notifications-and-toasts (bulk-action feedback).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: param087
• Source: param087/saas-ui-skills
• License: MIT

Install and usage instructions live in the source repository linked above.