# data-table-filters > 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. - Stack: React 19+, TanStack Table v8, Tailwind CSS v4, shadcn/ui. Next.js App Router is first-class; the blocks work in any React app. - Install with `npx shadcn@latest add `. The shadcn CLI resolves block dependencies, rewrites `@/` import paths to match components.json, and injects the required CSS variables. - Built for large tables: filtering, faceted counts, sorting, and cursor pagination all execute in SQL, and rows are virtualized, so table size is bounded by the database rather than the browser. - One `createTableSchema` definition drives the columns, the filter controls, the row detail sheet, the server-side query handler, the natural-language filter parser, and the MCP tool schema. ## Recipes Install the blocks for the goal, in the order listed. ### 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 , 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. ## Registry blocks - [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. **Use when:** 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. **Use when:** 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. **Use when:** 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. **Use when:** 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. **Use when:** 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. **Use when:** 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. **Use when:** 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. **Use when:** 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. **Use when:** 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. **Use when:** 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. **Use when:** The table should be queryable by AI agents over MCP, using the same schema the UI uses. ## Docs - [Introduction](https://data-table.openstatus.dev/docs/introduction.md): Overview of the data-table system architecture and layers - [Quick Start](https://data-table.openstatus.dev/docs/quick-start.md): Get a filterable data table running in your project with one install command - [Table Schema](https://data-table.openstatus.dev/docs/table-schema.md): Type-safe builder for defining your entire table in one place - [State Management](https://data-table.openstatus.dev/docs/state-management.md): Pluggable adapter pattern for filter state — nuqs (URL), Zustand, memory, or custom - [UI Components](https://data-table.openstatus.dev/docs/ui-components.md): Pre-built filter controls, command palette, infinite scroll table, and row detail drawer - [Data Fetching](https://data-table.openstatus.dev/docs/data-fetching.md): TanStack React Query integration with useInfiniteQuery, query options factory, and server prefetching - [Data Layer](https://data-table.openstatus.dev/docs/data-layer.md): Server-side concepts for filtering, faceted search, cursor pagination, and chart data - [Drizzle ORM](https://data-table.openstatus.dev/docs/drizzle-orm.md): Step-by-step walkthrough for building a server-side data table with Drizzle ORM and PostgreSQL - [Features](https://data-table.openstatus.dev/docs/features.md): Timeline chart, live mode, and keyboard shortcuts - [AI Filters](https://data-table.openstatus.dev/docs/ai-filters.md): Translate natural language queries into structured table filters using any LLM - [Builder](https://data-table.openstatus.dev/docs/builder.md): Visually build a table schema from JSON data or CSV - [Full Example](https://data-table.openstatus.dev/docs/full-example.md): Complete end-to-end example combining table schema, state management, and components - [Debugging](https://data-table.openstatus.dev/docs/debugging.md): Performance debugging with react-scan and TanStack Query devtools - [MCP Server](https://data-table.openstatus.dev/docs/mcp.md): Expose your data table as a queryable MCP endpoint for AI agents - [For AI Agents](https://data-table.openstatus.dev/docs/agents.md): Machine-readable docs, install recipes, and agent rules for building data tables with Claude Code, Cursor, and other coding agents ## Optional - [MCP server](https://data-table.openstatus.dev/api/mcp): these docs as tools — `search_docs`, `get_doc`, `list_blocks`, `get_install_plan`. Streamable HTTP, no auth - [llms-full.txt](https://data-table.openstatus.dev/llms-full.txt): every documentation page inlined in one file - [Registry index](https://data-table.openstatus.dev/r/index.md): block catalog with install commands and dependencies - [Registry manifest](https://data-table.openstatus.dev/r/registry.json): machine-readable shadcn registry - [Claude Code plugin](https://github.com/openstatushq/data-table-filters): `/plugin marketplace add openstatushq/data-table-filters` then `/plugin install data-table-filters@openstatus` - [Agent skill](https://github.com/openstatushq/data-table-filters): `npx skills add https://github.com/openstatushq/data-table-filters --skill data-table-filters`