How do I install data-table-filters?

Run these in Claude Code: . Then prompt normally.

Does data-table-filters auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Is data-table-filters free?

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

data-table-filters

Faceted filters, sorting & infinite scroll for React data tables - shadcn/ui + TanStack Table

FLOW.md

openstatushq@openstatushq

GitHub

Plugin Signal73/100Solid

maintained100

capable23

documented100

adopted71

Stats

TypeScript React Next.js shadcn/ui Bash

+6 tags

PostgreSQL Drizzle Vercel GitHub Anthropic MCP

2,178

Stars

128

Forks

Active

Maintenance

TypeScript

Language

MIT

License

1d ago

Last commit

1y ago

Created

Repo: openstatushq/data-table-filters

In this plugin

2 MCP

- data-table-infinite
- data-table-drizzle

See everything inside

What's inside

MCP

data-table-infinitehttp data-table-drizzlehttp

README

Read on GitHub

About The Project

A Table Schema builder, BYOS (Bring Your Own Store) state management, and a set of pre-built components for building powerful, filterable data-tables with React.

Data Table with Infinite Scroll

Visit data-table.openstatus.dev to learn more. Read the Docs for full documentation.

Install

Install blocks via the shadcn registry:

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

Block	Install URL	What it adds
`data-table`	`.../r/data-table.json`	Core: table engine, store, 4 filter types, memory adapter
`data-table-filter-command`	`.../r/data-table-filter-command.json`	Command palette with history + keyboard shortcuts
`data-table-cell`	`.../r/data-table-cell.json`	8 cell renderers (text, code, badge, boolean, number, status-code, level-indicator, timestamp)
`data-table-sheet`	`.../r/data-table-sheet.json`	Row detail side panel
`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
`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
`data-table-mcp`	`.../r/data-table-mcp.json`	MCP server endpoint for AI agents

All URLs use base https://data-table.openstatus.dev.

Agent Skill

Install the agent skill to let Claude Code (or any compatible AI coding tool) set up data-table-filters in your project:

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

Then just say "add a filterable data table" — the skill detects your stack, installs the right blocks, generates a schema, and wires everything up.

Table Schema

Define your entire table — columns, filters, display, sorting, row details — in one place with createTableSchema and col.* factories.

import {
  col,
  createTableSchema,
  type InferTableType,
} from "@/lib/table-schema";

const LEVELS = ["error", "warn", "info", "debug"] as const;

export const tableSchema = createTableSchema({
  level: col.presets.logLevel(LEVELS),
  date: col.presets.timestamp().label("Date").size(200).sheet(),
  latency: col.presets
    .duration("ms")
    .label("Latency")
    .sortable()
    .size(110)
    .sheet(),
  status: col.presets.httpStatus().label("Status").size(60),
  host: col.string().label("Host").size(125).sheet(),
});

export type ColumnSchema = InferTableType<typeof tableSchema.definition>;

Generators produce everything the table components need from a single schema:

const columns = generateColumns<ColumnSchema>(tableSchema.definition);
const filterFields = generateFilterFields<ColumnSchema>(tableSchema.definition);
const sheetFields = generateSheetFields<ColumnSchema>(tableSchema.definition);

Presets cover common patterns: logLevel, httpStatus, httpMethod, duration, timestamp, traceId, pathname.

Examples

/default — client-side pagination (nuqs or zustand)
/infinite — infinite scroll with server-side filtering, live mode, row details
/drizzle — Drizzle ORM + Supabase PostgreSQL with cursor-based pagination, faceted search, and live data via Vercel cron
/light — OpenStatus Light Viewer (UI for vercel-edge-ping)
/builder — interactive schema builder (paste JSON/CSV, live table preview, export TS)

BYOS (Bring Your Own Store)

A pluggable adapter pattern for filter state management. Three built-in adapters:

nuqs — URL-based state (shareable URLs, browser history)
zustand — client-side state (existing store integration)
memory — ephemeral in-memory state (embedded tables, builder)

Or implement the StoreAdapter interface for a custom solution. See the Docs for details.

Built With

Getting Started

No environment variable required for the default examples. For the Drizzle example, set DATABASE_URL to a PostgreSQL connection string.

pnpm install
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Want more?

If you are looking for specific use-cases or like what we are building and want to hire us, feel free write us to hire@openstatus.dev or book a call via cal.com.

Credits

sadmann17 for the dope <Sortable /> component around @dnd-kit (see sortable.sadmn.com)
shelwin_ for the draggable chart inspiration (see zoom-chart-demo.vercel.app)

File tree

661

openstatushq/data-table-filtersView on GitHub

.agents/
  skills/
    emil-design-eng/
      SKILL.md
    frontend-design/
      LICENSE.txt
      SKILL.md
    game-changing-features/
      README.md
      SKILL.md
    grill-me/
      SKILL.md
    improve/
    improve-codebase-architecture/
      REFERENCE.md
      SKILL.md
      references/
        audit-playbook.md
        closing-the-loop.md
        plan-template.md
      SKILL.md
    mcp-builder/
      LICENSE.txt
      reference/
        evaluation.md
        mcp_best_practices.md
        node_mcp_server.md
        python_mcp_server.md
      scripts/
        connections.py
        evaluation.py
        example_evaluation.xml
        requirements.txt
      SKILL.md
    next-best-practices/
      async-patterns.md
      bundling.md
      data-patterns.md
      debug-tricks.md
      directives.md
      error-handling.md
      file-conventions.md
      font.md
      functions.md
      hydration-error.md
      image.md
      metadata.md
      parallel-routes.md
      route-handlers.md
      rsc-boundaries.md
      runtime-selection.md
      scripts.md
      self-hosting.md
      SKILL.md
      suspense-boundaries.md
    shadcn/
      agents/
        openai.yml
      assets/
        shadcn-small.png
        shadcn.png
      cli.md
      customization.md
      evals/
        evals.json
      mcp.md
      rules/
        base-vs-radix.md
        composition.md
        forms.md
        icons.md
        styling.md
      SKILL.md
    skill-creator/
      LICENSE.txt
      references/
        output-patterns.md
        workflows.md
      scripts/
        init_skill.py
        package_skill.py
        quick_validate.py
      SKILL.md
    tdd/
      deep-modules.md
      interface-design.md
      mocking.md
      refactoring.md
      SKILL.md
      tests.md
    vercel-composition-patterns/
      AGENTS.md
      README.md
      rules/
        architecture-avoid-boolean-props.md
        architecture-compound-components.md
        patterns-children-over-render-props.md
        patterns-explicit-variants.md
        react19-no-forwardref.md
        state-context-interface.md
        state-decouple-implementation.md
        state-lift-state.md
      SKILL.md
    vercel-react-best-practices/
      AGENTS.md
      README.md
      rules/
        advanced-event-handler-refs.md
        advanced-init-once.md
        advanced-use-latest.md
        async-api-routes.md
        async-defer-await.md
        async-dependencies.md
        async-parallel.md
        async-suspense-boundaries.md
        bundle-barrel-imports.md
        bundle-conditional.md
        bundle-defer-third-party.md
        bundle-dynamic-imports.md
        bundle-preload.md
        client-event-listeners.md
        client-localstorage-schema.md
        client-passive-event-listeners.md
        client-swr-dedup.md
        js-batch-dom-css.md
        js-cache-function-results.md
        js-cache-property-access.md
        js-cache-storage.md
        js-combine-iterations.md
        js-early-exit.md
        js-hoist-regexp.md
        js-index-maps.md
        js-length-check-first.md
        js-min-max-loop.md
        js-set-map-lookups.md
        js-tosorted-immutable.md
        rendering-activity.md
        rendering-animate-svg-wrapper.md
        rendering-conditional-render.md
        rendering-content-visibility.md
        rendering-hoist-jsx.md
        rendering-hydration-no-flicker.md
        rendering-hydration-suppress-warning.md
        rendering-svg-precision.md
        rendering-usetransition-loading.md
        rerender-defer-reads.md
        rerender-dependencies.md
        rerender-derived-state-no-effect.md
        rerender-derived-state.md
        rerender-functional-setstate.md
        rerender-lazy-state-init.md
        rerender-memo-with-default-value.md
        rerender-memo.md
        rerender-move-effect-to-event.md
        rerender-simple-expression-in-memo.md
        rerender-transitions.md
        rerender-use-ref-transient-values.md
        server-after-nonblocking.md
        server-auth-actions.md
        server-cache-lru.md
        server-cache-react.md
        server-dedup-props.md
        server-parallel-fetching.md
        server-serialization.md
      SKILL.md
    web-design-guidelines/
      SKILL.md
.claude/
  hooks/
    ghostty-notify.sh
    pre-commit-checks.sh
    registry-rebuild-check.sh
  settings.json
  skills/
    emil-design-eng
    frontend-design
    game-changing-features
    grill-me
    improve
    improve-codebase-architecture
    mcp-builder
    next-best-practices
    shadcn
    skill-creator
    tdd
    vercel-composition-patterns
    vercel-react-best-practices
    web-design-guidelines
.eslintrc.json
.github/
  FUNDING.yml
  pull_request_template.md
  workflows/
    ci.yml
    claude-code-review.yml
    claude.yml
.gitignore
.mcp.json
.prettierrc
apps/
  web/
    .env.example
    components.json
    eslint.config.mjs
    next.config.mjs
    package.json
    postcss.config.mjs
    public/
      assets/
        data-table-infinite.png
        data-table.png
        docs/
          data-table-sheet.dark.png
          data-table-sheet.png
          data-table.dark.png
          data-table.png
      logos/
        OpenStatus_square.png
        OpenStatus.png
        OpenStatus.svg
      next.svg
      pokemon.csv
      vercel.svg
    scripts/
      copy-registry.mjs
    src/
      app/
        (home)/
          hero-ai-input.tsx
          layout.tsx
          page.tsx
        api/
          builder/
            cache.test.ts
            cache.ts
            data/
              helpers.test.ts
              helpers.ts
              integration.test.ts
              route.test.ts
              route.ts
            generate/
              route.ts
            route.test.ts
            route.ts
          cron/
            seed-logs/
              route.ts
        auto/
          bookmarks.json
          layout.tsx
          lock-body-scroll.tsx
          page.tsx
        builder/
          builder-client.tsx
          builder-table.tsx
          datasets/
            cocktails.ts
            http-logs.ts
            index.ts
            issues.ts
            movies.ts
            orders.ts
            pokemon.ts
            relative-dates.test.ts
            relative-dates.ts
            rpg-characters.ts
            space-missions.ts
          page.tsx
          query-options.ts
        default/
          api/
            route.ts
          client.tsx
          columns.tsx
          constants.tsx
          data-table.tsx
          data.ts
          layout.tsx
          loading.tsx
          page.tsx
          query-options.ts
          schema.ts
          search-params.ts
          skeleton.tsx
          store.ts
          types.ts
        docs/
          [slug]/
            page.tsx
          api/
            search/
              route.ts
          layout.tsx
        drizzle/
          api/
            ai/
              route.ts
            mcp/
              route.ts
            route.ts
          client.tsx
          column-mapping.ts
          layout.tsx
          page.tsx
          query-options.ts
          schema.ts
          search-params.ts
          table-schema.tsx
        favicon.ico
        infinite/
          _components/
            README.md
          api/
            ai/
              route.ts
            helpers.test.ts
            helpers.ts
            mcp/
              route.ts
            mock.ts
            route.ts
          client.tsx
          filter-schema.ts
          layout.tsx
          page.tsx
          query-options.ts
          schema.ts
          search-params.ts
          store.ts
          table-schema.tsx
        layout.tsx
        light/
          api/
            route.ts
          client.tsx
          columns.tsx
          constants.tsx
          layout.tsx
          page.tsx
          query-options.ts
          schema.ts
          search-params.ts
        not-found.tsx
        robots.ts
        sitemap.ts
      components/
        custom/
          accordion.tsx
          copy-to-clipboard-container.tsx
          kv-table.tsx
          kv-tabs.tsx
          link.tsx
        data-table/
          data-table-column/
            data-table-column-latency.tsx
            data-table-column-level-indicator.tsx
            data-table-column-region.tsx
            data-table-column-status-code.tsx
            data-table-column-timestamp.tsx
            README.md
          data-table-infinite/
            key-value-table.tsx
            live-button.tsx
            live-row.tsx
            popover-percentile.tsx
            refresh-button.tsx
            sheet-timing-phases.tsx
            skeleton.tsx
            socials-footer.tsx
            timeline-chart.tsx
            timing-phases-column.tsx
          data-table-pagination.tsx
          data-table-skeleton.tsx
        icons/
          bluesky.tsx
          github.tsx
          x.tsx
        layout/
          data-table-layout.tsx
          footer.tsx
          header.tsx
          top-banner.tsx
        theme/
          theme-provider.tsx
          toggle-mode.tsx
        ui/
          accordion.tsx
          alert-dialog.tsx
          alert.tsx
          aspect-ratio.tsx
          avatar.tsx
          badge.tsx
          breadcrumb.tsx
          button-group.tsx
          button.tsx
          calendar.tsx
          card.tsx
          chart.tsx
          checkbox.tsx
... 404 more

FAQ

data-table-filters is a Claude Code plugin with hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is data-table-filters?: Faceted filters, sorting & infinite scroll for React data tables - shadcn/ui + TanStack Table
How do I install data-table-filters?: Run these in Claude Code: . Then prompt normally.
Does data-table-filters auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is data-table-filters free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.