data-table-filters

Automate React data-table setup with faceted filters and BYOS state adapters.

2.2k|128|Updated Aug 28, 2024
One-click install
npx skills add https://github.com/openstatusHQ/data-table-filters --skill data-table-filters
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: data-table-filters
Source: https://github.com/openstatusHQ/data-table-filters/tree/main/skills
Command: npx skills add https://github.com/openstatusHQ/data-table-filters --skill data-table-filters

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

data-table-filters provides a modular, registry-driven toolkit to rapidly assemble filterable data-tables in React, with BYOS state management and optional extensions.

Core Features & Use Cases

  • Core: data-table engine, 4 filter types, memory adapter
  • Extensions: command palette, AI-powered filters, sheet panels, schema, Drizzle/React Query integration
  • Use cases: building dashboards with large datasets, server-side filtering, AI-assisted query inference

Quick Start

Install the core data-table blocks, scaffold a minimal working table, and extend with optional extension blocks as needed.

Frequently Asked Questions about data-table-filters

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a filterable React data table with infinite scrolling?

You can add AI-powered filters to your React data table by installing the available AI filter extension blocks. These extensions enable AI-assisted query inference directly within your server-side filtering workflow.

Does this data-table toolkit work with Drizzle and React Query?

You need an existing React project with a supported framework and access to the Shadcn registry to install the core and extension blocks. This environment is required to properly scaffold and wire the data-table system.

What is the BYOS state adapter in a React data table?

By using the memory adapter provided in the core blocks, you can handle state management for your filterable table without an external server. You can then extend the table with command palettes, sheet panels, and schema blocks as needed.

What's the best way to scaffold a React data table with faceted filters?

The best way to scaffold a React data table with faceted filters is using a registry-driven toolkit. This approach rapidly assembles modular table blocks, providing a core engine with four filter types and optional extensions for dashboards.