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 <table> 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";