Component · 8+ variants
React Data Table
TanStack Table v8 under the hood. Sortable columns, filtering, pagination, column visibility: every variant. Pick the design system that matches your product.
Install (any variant)
npx shadcn@latest add https://better-design.com/registry/linear/data-table.jsonReplace linear with any design system slug. Every variant ships from the same registry.
Design system variants
Linear
Dark, dense, purple accent: dev-tool aesthetic
View design system
Airbnb
Warm light, rounded cells, coral accent
View design system
Apple
SF Pro typography, soft surfaces, pill controls
View design system
Vercel
Pure black, Geist font, 6px radius
View design system
Stripe
Sohne font, indigo, navy-purple shadows
View design system
Notion
Light minimal, system-ui, 3px radius
View design system
Supabase
Dark with green accents
View design system
Linear Quality
Multi-layer shadows, engineering aesthetic
View design system
Why this data table
- •TanStack Table v8 engine: sorting, filtering, pagination, column visibility
- •Composes with shadcn Input + Button + DropdownMenu for the toolbar: no extra deps
- •73 design-system variants: Linear, Airbnb, Apple, Vercel, Stripe, Notion, Supabase and more
- •Ships as a shadcn-compatible registry item: `npx shadcn@latest add` and the source lands in your `components/ui/` folder
- •Server-side mode supported: pass `manualSorting` + `manualPagination` and wire your fetcher
Usage
import { DataTable } from "@/components/ui/data-table";
import { columns } from "./columns";
export function DeploymentsTable({ deployments }) {
return <DataTable columns={columns} data={deployments} />;
}FAQ
What's this built on?
TanStack Table v8 for the table engine, shadcn/ui Input + Button + DropdownMenu for the toolbar. Identical primitive stack to shadcn/ui's data-table: Better Design ships visual variants on top.
Is it free?
Yes. MIT-licensed shadcn-compatible registry items. Install via `npx shadcn@latest add`: the source lands in your components/ui folder, fully editable.
Does it support server-side sorting and pagination?
Yes: TanStack Table supports both client and server modes. Pass `manualSorting` + `manualPagination` on the table options and wire your fetcher.
Which design system should I pick?
Linear if you're building a developer tool. Airbnb if you're shipping a marketplace or B2C app. Vercel/Stripe for fintech and infra products. Apple for premium consumer feel. Compare them on the variant grid below.
Related component pages
More from Better Design