Data Table Filters

About The Project

A Table Schema builder, BYOS (Bring Your Own Store) state management, and a set of pre-built components for building powerful, filterable data-tables with React.

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

Install

Install blocks via the shadcn registry:

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

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

Agent Skill

Install the agent skill to let Claude Code (or any compatible AI coding tool) set up data-table-filters in your project:

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.

Table Schema

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.

Examples

• /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)

BYOS (Bring Your Own Store)

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.

Built With

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

Getting Started

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.

Want more?

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

Credits

• 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)