# data-table-filters registry

> Open-source React data table with faceted filters, sorting, infinite scroll, and virtualization. Distributed as shadcn registry blocks you install into your own repo — not as an npm dependency, so there is no library to wrap and nothing to eject from.

Install any block with `npx shadcn@latest add https://data-table.openstatus.dev/r/<block>.json`. Blocks may be combined in a single command; the CLI installs each block's registry dependencies automatically, so listing a dependency explicitly is redundant but harmless.

## Blocks

| Block | Install URL | What it adds | Use when |
| --- | --- | --- | --- |
| `data-table` | `https://data-table.openstatus.dev/r/data-table.json` | Data table with search, checkbox, slider, date range filters, sorting, infinite scroll, virtualization, and in-memory state management. | Always install first. Core engine: table, the 4 filter types (input, checkbox, slider, timerange), infinite scroll, virtualization, and the in-memory store adapter. |
| `data-table-filter-command` | `https://data-table.openstatus.dev/r/data-table-filter-command.json` | Command palette for power-user filter input with history and keyboard shortcuts. | The table needs a cmd+k command palette for power-user filter input, with query history and keyboard shortcuts. |
| `data-table-cell` | `https://data-table.openstatus.dev/r/data-table-cell.json` | Cell renderer system with 12 types: text, code, badge, boolean, star, number, status-code, level-indicator, timestamp, heatmap, bar, and gauge. | Columns need formatted rendering: badges, bars, heatmaps, status codes, log levels, booleans, timestamps. |
| `data-table-sheet` | `https://data-table.openstatus.dev/r/data-table-sheet.json` | Row detail side panel with cell renderers, keyboard navigation, and copy-to-clipboard. | Clicking a row should open a detail side panel. Auto-installs the cell renderers. |
| `data-table-nuqs` | `https://data-table.openstatus.dev/r/data-table-nuqs.json` | URL-based state management adapter using nuqs for shareable, bookmarkable filter state. | Filter state must live in the URL so links are shareable and bookmarkable. The default choice for Next.js apps. |
| `data-table-zustand` | `https://data-table.openstatus.dev/r/data-table-zustand.json` | Client-side state management adapter using zustand for app-level filter persistence. | Filter state must live in client app state instead of the URL, or the app already uses zustand. |
| `data-table-schema` | `https://data-table.openstatus.dev/r/data-table-schema.json` | Declarative table definitions with col.* factories, presets, and generators for columns, filters, and sheet fields. | One declarative definition should drive columns, filters, sheet fields, and sorting. Required by the drizzle, mcp, and ai-filters blocks. |
| `data-table-drizzle` | `https://data-table.openstatus.dev/r/data-table-drizzle.json` | Server-side filtering, faceted search, cursor pagination, and sorting helpers for Drizzle ORM. | Rows live in a SQL database and must be filtered server-side. This is the block for large tables: SQL-side filtering, faceted counts, cursor pagination, and sorting. |
| `data-table-query` | `https://data-table.openstatus.dev/r/data-table-query.json` | React Query infinite query integration with SuperJSON serialization and faceted search helpers. | The table fetches pages from an API endpoint — React Query infinite-query wiring with SuperJSON and facet merging. |
| `data-table-filter-command-ai` | `https://data-table.openstatus.dev/r/data-table-filter-command-ai.json` | AI-powered command palette that translates natural language queries into structured table filters. Provider-agnostic — works with any LLM via Vercel AI SDK. | Users should be able to filter in natural language ("errors in the last hour") on top of the command palette. |
| `data-table-mcp` | `https://data-table.openstatus.dev/r/data-table-mcp.json` | Expose your data table as an MCP endpoint for AI agents. Auto-generates tool schema from BYOS field definitions. Stateless, serverless-compatible. | The table should be queryable by AI agents over MCP, using the same schema the UI uses. |

## Recipes

### Large table (server-side, 100k+ rows)

When: Rows live in Postgres/MySQL/SQLite and cannot be shipped to the client.

```bash
npx shadcn@latest add https://data-table.openstatus.dev/r/data-table.json https://data-table.openstatus.dev/r/data-table-schema.json https://data-table.openstatus.dev/r/data-table-cell.json https://data-table.openstatus.dev/r/data-table-sheet.json https://data-table.openstatus.dev/r/data-table-drizzle.json https://data-table.openstatus.dev/r/data-table-query.json https://data-table.openstatus.dev/r/data-table-nuqs.json
```

Define the table once with createTableSchema, pass it to createDrizzleHandler in a route handler, and to createDataTableQueryOptions on the client. Filtering, faceted counts, sorting, and cursor pagination all run in SQL; the client only ever holds the pages it rendered.

### Client-side table (data already in memory)

When: A few thousand rows at most, already fetched or imported.

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

Use the memory adapter via useMemoryAdapter. No API route and no schema block required.

### Zero-config table from raw JSON

When: The shape of the data is not known ahead of time.

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

Render <DataTableAuto data={json} />, or call inferSchemaFromJSON + createTableSchema.fromJSON to get columns, filters, and sheet fields inferred from the data itself.

### AI-queryable table

When: Agents or end users should query the table in natural language.

```bash
npx shadcn@latest add https://data-table.openstatus.dev/r/data-table.json https://data-table.openstatus.dev/r/data-table-schema.json https://data-table.openstatus.dev/r/data-table-filter-command.json https://data-table.openstatus.dev/r/data-table-filter-command-ai.json https://data-table.openstatus.dev/r/data-table-mcp.json
```

The schema drives all three surfaces: UI filters, the AI filter parser, and the MCP tool definition. Define columns once.

## Block dependencies

- `data-table` pulls in: no other blocks
- `data-table-filter-command` pulls in: `data-table`
- `data-table-cell` pulls in: `data-table`
- `data-table-sheet` pulls in: `data-table`, `data-table-cell`
- `data-table-nuqs` pulls in: `data-table`
- `data-table-zustand` pulls in: `data-table`
- `data-table-schema` pulls in: `data-table`, `data-table-cell`, `data-table-sheet`, `data-table-filter-command`
- `data-table-drizzle` pulls in: `data-table`, `data-table-schema`
- `data-table-query` pulls in: `data-table`
- `data-table-filter-command-ai` pulls in: `data-table`, `data-table-filter-command`, `data-table-schema`
- `data-table-mcp` pulls in: `data-table`

## More

- These docs as an MCP server: https://data-table.openstatus.dev/api/mcp
- Docs index for agents: https://data-table.openstatus.dev/llms.txt
- Full documentation in one file: https://data-table.openstatus.dev/llms-full.txt
- Any docs page as raw markdown: append `.md` (e.g. https://data-table.openstatus.dev/docs/quick-start.md)