Linear · Data Table

React Data Table: Linear-style

Part of Better Design's React component library. Dense, dark, keyboard-first data table for dev-tool apps: built on TanStack Table v8, ships as a shadcn-compatible registry item. Pairs with Linear-style Sidebar + Command Palette for a complete admin shell.

Install

npx shadcn@latest add https://better-design.com/registry/linear/data-table.json

Lands in components/ui/data-table.tsx. Fully editable source, no SDK lock-in.

Live preview

Open the full Linear showcase

Why this data table

•TanStack Table v8 engine: sorting, filtering, pagination, column visibility
•Dense rows, 8px radius, dark surface: Linear's signature density
•Pairs with Linear Sidebar + Command for full admin-shell consistency
•Drops into any shadcn/ui project unchanged: `npx shadcn@latest add`

Usage

import { DataTable } from "@/components/ui/data-table";
import { columns } from "./columns";

export function IssuesTable({ issues }) {
  return <DataTable columns={columns} data={issues} />;
}

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 re-skins it for the Linear aesthetic.

Best use case?

Issue trackers, project dashboards, any dense engineering admin where keyboard nav + scanning matter more than visual softness.

Server-side sorting?

Yes: pass `manualSorting` + `manualPagination` and wire your fetcher. Same TanStack Table API.

Is it free?

Yes. MIT-licensed shadcn-compatible registry item.

Related component pages

React Data Table (all variants)

/components/data-table

Linear-style Sidebar

/components/linear-sidebar

Linear-style Command Palette

/components/linear-command