openstatusHQ/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 Guide for full documentation.

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
/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 Guide for details.

Built With

Getting Started

No environment variable required.

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 hire@openstatus.dev 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)