Data tables for React and shadcn/ui: faceted filters, sorting, infinite scroll, and a row detail sheet. Installed as source with the shadcn CLI, so the code is yours to change.

One createTableSchema definition drives the columns, the filter controls, the row sheet, the Drizzle route handler, and the MCP tool schema. When the rows live in Postgres, filtering, faceted counts, and cursor pagination run in SQL. Built for the openstatus dashboard and used there in production.

Visit data-table.openstatus.dev to learn more. Read the Docs for full documentation.

— the Quick Start below is installed into a fresh Next.js app and typechecked nightly against the latest shadcn CLI.

Prerequisite. Requires a shadcn project on the Radix library (npx shadcn@latest init -b radix -p nova). The shadcn CLI default, Base UI (init -d, preset base-nova), is not supported yet — the blocks fail to typecheck on it.

One command installs the core block and the schema system:

npx shadcn@latest add https://data-table.openstatus.dev/r/data-table.json https://data-table.openstatus.dev/r/data-table-schema.json

Then render a table from any array of objects — columns, filters, and cell renderers are inferred:

import { DataTableAuto } from "@/components/data-table/data-table-auto";

const data = [
  {
    name: "Alice",
    role: "admin",
    rating: 5,
    created_at: "2026-01-15T10:00:00Z",
  },
  { name: "Bob", role: "user", rating: 3, created_at: "2026-02-20T14:30:00Z" },
];

export default function Page() {
  return <DataTableAuto data={data} />;
}

From create-next-app to a green next build this takes about 30 seconds on a clean machine. See the Quick Start for the full walkthrough, and add any block below as you need it.

All URLs use base https://data-table.openstatus.dev.

Install the plugin in Claude Code:

/plugin marketplace add openstatushq/data-table-filters
/plugin install data-table-filters@openstatus

Or install the skill with any agent that supports the skills CLI:

npx skills add https://github.com/openstatushq/data-table-filters --skill data-table-filters

Then just say "add a filterable data table" — the skill detects your stack, installs the right blocks, generates a schema, and wires everything up.

Or point any MCP client at the docs and let the agent ask them questions — search_docs, get_doc, list_blocks, get_install_plan:

claude mcp add --transport http data-table-filters https://data-table.openstatus.dev/api/mcp

Machine-readable docs, for agents without the skill:

Cursor users can copy .cursor/rules/data-table-filters.mdc into their project; AGENTS.md covers every other agent. See the For AI Agents docs page for the full rundown.

Define your entire table — columns, filters, display, sorting, row details — in one place with createTableSchema and col.* factories.

import {
  col,
  createTableSchema,
  type InferTableType,
} from "@/lib/table-schema";

const LEVELS = ["error", "warn", "info", "debug"] as const;

export const tableSchema = createTableSchema({
  level: col.presets.logLevel(LEVELS),
  date: col.presets.timestamp().label("Date").size(200).sheet(),
  latency: col.presets
    .duration("ms")
    .label("Latency")
    .sortable()
    .size(110)
    .sheet(),
  status: col.presets.httpStatus().label("Status").size(60),
  host: col.string().label("Host").size(125).sheet(),
});

export type ColumnSchema = InferTableType<typeof tableSchema.definition>;

Generators produce everything the table components need from a single schema:

const columns = generateColumns<ColumnSchema>(tableSchema.definition);
const filterFields = generateFilterFields<ColumnSchema>(tableSchema.definition);
const sheetFields = generateSheetFields<ColumnSchema>(tableSchema.definition);

Presets cover common patterns: logLevel, httpStatus, httpMethod, duration, timestamp, traceId, pathname.

• /default — client-side pagination (nuqs or zustand)
• /infinite — infinite scroll with server-side filtering, live mode, row details
• /drizzle — Drizzle ORM + Supabase PostgreSQL with cursor-based pagination, faceted search, and live data via Vercel cron
• /light — OpenStatus Light Viewer (UI for vercel-edge-ping)
• /builder — interactive schema builder (paste JSON/CSV, live table preview, export TS)

A pluggable adapter pattern for filter state management. Three built-in adapters:

• nuqs — URL-based state (shareable URLs, browser history)
• zustand — client-side state (existing store integration)
• memory — ephemeral in-memory state (embedded tables, builder)

Or implement the StoreAdapter interface for a custom solution. See the Docs for details.

• nextjs
• tanstack-query
• tanstack-table
• shadcn/ui
• cmdk
• nuqs
• zustand
• drizzle-orm
• zod
• superjson
• date-fns
• recharts
• dnd-kit

No environment variable required for the default examples. For the Drizzle example, set DATABASE_URL to a PostgreSQL connection string.

pnpm install
pnpm dev

Open http://localhost:3000 with your browser to see the result.

If you are looking for specific use-cases or like what we are building and want to hire us, feel free write us to hire@openstatus.dev or book a call via cal.com.

• sadmann17 for the dope <Sortable /> component around @dnd-kit (see sortable.sadmn.com)
• shelwin_ for the draggable chart inspiration (see zoom-chart-demo.vercel.app)