Quick Start

Zero Config

The fastest way to try data-table-filters — pass an array of objects, get a fully filtered table:

import { DataTableAuto } from "@/components/data-table/data-table-auto";
 
const data = [
  {
    name: "Alice",
    role: "admin",
    rating: 5,
    created_at: "2026-01-15T10:00:00Z",
  },
  { name: "Bob", role: "user", rating: 3, created_at: "2026-02-20T14:30:00Z" },
];
 
<DataTableAuto data={data} />;

Columns, filters, display types, and cell renderers are auto-inferred from your data. When you need customization, eject to the Builder or define a Table Schema.

See the /auto example for a live demo.

Agent Skill

Install the skill and let your AI agent handle the setup:

npx skills add https://github.com/openstatushq/data-table-filters --skill data-table-filters

Let the agent handle the rest:

Add a data table with filters to my project

It detects your stack, installs the right blocks, and wires them up.

Install Components

Start by installing the core data-table block — it includes the table engine, memory store adapter, and all 4 filter types:

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

Then add any extension block from the registry below.

Blocks

The following blocks can be installed via shadcn CLI.

npx shadcn@latest add https://data-table.openstatus.dev/r/<block>

Looking to add natural language filtering? The data-table-filter-command-ai block translates queries like "5xx errors last 24h" into structured filters using any LLM. See AI Filters for setup.

Next Steps

• Browse the /infinite demo to see all components in action
• Learn about the Table Schema builder for type-safe column definitions
• Explore the UI Components available out of the box