data-table-filters
A collection of 11 shadcn registry blocks to implement advanced, faceted data table interfaces in React applications.
Install
mkdir -p .claude/skills/data-table-filters && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10921" && unzip -o skill.zip -d .claude/skills/data-table-filters && rm skill.zipInstalls to .claude/skills/data-table-filters
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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 11 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-filters.com", filterable data tables with shadcn, DataTableAuto, auto-infer, AI filters, MCP server, or any of the registry block names.Key capabilities
- →Install data table blocks
- →Generate table schemas from JSON
- →Wire server-side filtering with Drizzle
- →Add AI-powered natural language filters
How it works
It provides a registry of modular React blocks that can be installed via CLI to build filterable, sortable data tables.
Inputs & outputs
When to use data-table-filters
- →Implementing faceted filters in a data grid
- →Auto-generating table schemas from JSON
- →Wiring server-side filtering with Drizzle ORM
- →Adding command palettes to tables
About data-table-filters
Provides modular blocks for creating complex data tables. Includes support for faceted filters, schema inference from JSON, Drizzle ORM integration, and AI-powered filtering.
>
When not to use it
- →When the project does not use React or shadcn
- →When simple HTML tables suffice
Prerequisites
Limitations
- →Requires specific setup for nuqs and Suspense
- →Tailwind v4 class syntax differs from v3
How it compares
It offers a complete, modular system for data tables rather than a single monolithic component.
Compared to similar skills
data-table-filters side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| data-table-filters (this skill) | 0 | 4mo | Review | Intermediate |
| dashboard-ui | 0 | 2mo | No flags | Intermediate |
| posthog-analytics | 3 | 4mo | Review | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
dashboard-ui
Akshat685
Next.js App Router page (`src/app/page.tsx`) renders `Dashboard.tsx`, which composes every panel and owns filter state.
posthog-analytics
alinaqi
PostHog analytics, event tracking, feature flags, dashboards
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.