/data-table-filters
Install and extend data-table-filters — a React data table system with faceted filters (checkbox, input, slider, timerange), sorting, infinite scroll, virtualization, and BYOS state management. Delivered as 13 shadcn registry blocks installable via `npx shadcn@latest add`. Use
$ npx -y skills add openstatushq/data-table-filters --skill data-table-filters --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/data-table-filters
Context preview
The summary Claude sees to decide when to auto-load this skill.
Install and extend data-table-filters — a React data table system with faceted filters (checkbox, input, slider, timerange), sorting, infinite scroll, virtualization, and BYOS state management. Delivered as 13 shadcn registry blocks installable via `npx shadcn@latest add`. Use
SKILL.md
data-table-filters.SKILL.mdname: data-table-filters
description: >
Install and extend data-table-filters — a React data table system with faceted filters
(checkbox, input, slider, timerange), sorting, infinite scroll, virtualization, and BYOS
state management. Delivered as 13 shadcn registry blocks installable via
`npx shadcn@latest add`. Use when: (1) installing data-table-filters from the shadcn
registry, (2) adding extension blocks (command palette, AI filters, cell renderers, sheet panel,
store adapters, schema system, Drizzle helpers, query layer), (3) configuring store
adapters (nuqs/zustand/memory), (4) generating table schemas from a data model,
(5) wiring up server-side filtering with Drizzle ORM, (6) connecting the React Query
fetch layer, (7) auto-inferring schemas from raw JSON data with DataTableAuto / inferSchemaFromJSON,
(8) adding AI-powered natural language filtering, (9) exposing tables as MCP endpoints for AI agents,
(10) troubleshooting integration issues.
Triggers on mentions of "data-table-filters", "data-table.openstatus.dev", filterable data
tables with shadcn, DataTableAuto, auto-infer, AI filters, MCP server, or any of the registry block names.
Data Table Filters
A shadcn registry for building filterable, sortable data tables with infinite scroll and virtualization. Start with the core block, then extend with optional blocks for command palette, cell renderers, sheet panels, store adapters, schema generation, Drizzle ORM helpers, and React Query integration.
> **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.
Registry Blocks
Install any block via `npx shadcn@latest add <url>`. The CLI handles dependencies, path rewriting, and CSS variable injection.
| Block | Install URL | What it adds | | -------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | **data-table** | `https://data-table.openstatus.dev/r/data-table.json` | Core: table engine, store, 4 filter types, memory adapter (58 files) | | **data-table-filter-command** | `.../r/data-table-filter-command.json` | Command palette with history + keyboard shortcuts | | **data-table-cell** | `.../r/data-table-cell.json` | 12 cell renderers (text, code, number, bar, heatmap, gauge, badge, boolean, star, status-code, level-indicator, timestamp) | | **data-table-sheet** | `.../r/data-table-sheet.json` | Row detail side panel (auto-installs cells) | | **data-table-nuqs** | `.../r/data-table-nuqs.json` | nuqs URL state adapter | | **data-table-zustand** | `.../r/data-table-zustand.json` | zustand state adapter | | **data-table-schema** | `.../r/data-table-schema.json` | Declarative schema system with `col.*` factories | | **data-table-drizzle** | `.../r/data-table-drizzle.json` | Drizzle ORM server-side helpers (auto-installs schema) | | **data-table-query** | `.../r/data-table-query.json` | React Query infinite query integration | | **data-table-filter-command-ai** | `.../r/data-table-filter-command-ai.json` | AI-powered natural language → filter inference (provider-agnostic) | | **data-table-mcp** | `.../r/data-table-mcp.json` | MCP server endpoint for AI agents (stateless, serverless-compatible) | | **data-table-actions** | `.../r/data-table-actions.json` | Row and bulk actions rendered from server metadata (requires drizzle) | | **data-table-remote** | `.../r/data-table-remote.json` | Headless table driven by an endpoint's manifest — schema, capabilities, row identity |
All URLs use base `https://data-table.openstatus.dev`.
Quick Start
1. Run `scripts/detect-stack.sh` to detect the user's project setup. If it prints a `BLOCKING` line, the project is on Base UI: stop, show the user the fix it prints, and do not install. If it prints `shadcn/ui: not initialized`, initialize with `npx shadcn@latest init -b radix -p nova` first (never `init -d`), then continue. 2. Install core + schema: `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table.json https://data-table.openstatus.dev/r/data-table-schema.json` 3. Scaffold a minimal working table (see below), or render `<DataTableAuto data={rows} />` when the data shape is unknown 4. Extend with additional blocks as needed
> **Next.js?** Use the [data-table-filters repo](https://github.com/openstatushq/data-table-filt
Read more
name: data-table-filters description: > Install and extend data-table-filters — a React data table system with faceted filters (checkbox, input, slider, timerange), sorting, infinite scroll, virtualization, and BYOS state management. Delivered as 13 shadcn registry blocks installable via `npx shadcn@latest add`. Use when: (1) installing data-table-filters from the shadcn registry, (2) adding extension blocks (command palette, AI filters, cell renderers, sheet panel, store adapters, schema system, Drizzle helpers, query layer), (3) configuring store adapters (nuqs/zustand/memory), (4) generating table schemas from a data model, (5) wiring up server-side filtering with Drizzle ORM, (6) connecting the React Query fetch layer, (7) auto-inferring schemas from raw JSON data with DataTableAuto / inferSchemaFromJSON, (8) adding AI-powered natural language filtering, (9) exposing tables as MCP endpoints for AI agents, (10) troubleshooting integration issues. Triggers on mentions of "data-table-filters", "data-table.openstatus.dev", filterable data tables with shadcn, DataTableAuto, auto-infer, AI filters, MCP server, or any of the registry block names.
Data Table Filters
A shadcn registry for building filterable, sortable data tables with infinite scroll and virtualization. Start with the core block, then extend with optional blocks for command palette, cell renderers, sheet panels, store adapters, schema generation, Drizzle ORM helpers, and React Query integration.
> **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.
Registry Blocks
Install any block via `npx shadcn@latest add <url>`. The CLI handles dependencies, path rewriting, and CSS variable injection.
| Block | Install URL | What it adds | | -------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | **data-table** | `https://data-table.openstatus.dev/r/data-table.json` | Core: table engine, store, 4 filter types, memory adapter (58 files) | | **data-table-filter-command** | `.../r/data-table-filter-command.json` | Command palette with history + keyboard shortcuts | | **data-table-cell** | `.../r/data-table-cell.json` | 12 cell renderers (text, code, number, bar, heatmap, gauge, badge, boolean, star, status-code, level-indicator, timestamp) | | **data-table-sheet** | `.../r/data-table-sheet.json` | Row detail side panel (auto-installs cells) | | **data-table-nuqs** | `.../r/data-table-nuqs.json` | nuqs URL state adapter | | **data-table-zustand** | `.../r/data-table-zustand.json` | zustand state adapter | | **data-table-schema** | `.../r/data-table-schema.json` | Declarative schema system with `col.*` factories | | **data-table-drizzle** | `.../r/data-table-drizzle.json` | Drizzle ORM server-side helpers (auto-installs schema) | | **data-table-query** | `.../r/data-table-query.json` | React Query infinite query integration | | **data-table-filter-command-ai** | `.../r/data-table-filter-command-ai.json` | AI-powered natural language → filter inference (provider-agnostic) | | **data-table-mcp** | `.../r/data-table-mcp.json` | MCP server endpoint for AI agents (stateless, serverless-compatible) | | **data-table-actions** | `.../r/data-table-actions.json` | Row and bulk actions rendered from server metadata (requires drizzle) | | **data-table-remote** | `.../r/data-table-remote.json` | Headless table driven by an endpoint's manifest — schema, capabilities, row identity |
All URLs use base `https://data-table.openstatus.dev`.
Quick Start
1. Run `scripts/detect-stack.sh` to detect the user's project setup. If it prints a `BLOCKING` line, the project is on Base UI: stop, show the user the fix it prints, and do not install. If it prints `shadcn/ui: not initialized`, initialize with `npx shadcn@latest init -b radix -p nova` first (never `init -d`), then continue. 2. Install core + schema: `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table.json https://data-table.openstatus.dev/r/data-table-schema.json` 3. Scaffold a minimal working table (see below), or render `<DataTableAuto data={rows} />` when the data shape is unknown 4. Extend with additional blocks as needed
> **Next.js?** Use the [data-table-filters repo](https://github.com/openstatushq/data-table-filt
React data tables for shadcn/ui: faceted filters, sorting, infinite scroll. Filtering, faceted counts and cursor pagination can run in SQL with Drizzle.
Repo: openstatushq/data-table-filters