---
name: "@data-table-filters"
slug: "data-table-filters"
description: "Data tables for React and shadcn/ui: faceted filters, sorting, infinite scroll, row detail sheet, and server-side filtering with Drizzle. Built on TanStack Table. Powered by openstatus."
category: "AI/chat UI"
tags: ["ai", "charts", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "openstatusHQ"
website: "https://data-table.openstatus.dev"
github: "https://github.com/openstatusHQ/data-table-filters"
registry: "https://data-table.openstatus.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 2253
component_count: 15
generated_at: "2026-09-21T01:50:16.753Z"
---

# @data-table-filters

Data tables for React and shadcn/ui: faceted filters, sorting, infinite scroll, row detail sheet, and server-side filtering with Drizzle. Built on TanStack Table. Powered by openstatus.

## Links

- Website: https://data-table.openstatus.dev
- GitHub: https://github.com/openstatusHQ/data-table-filters
- Registry JSON: https://data-table.openstatus.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/data-table-filters
- This file: https://sh4dcn.vercel.app/md/data-table-filters.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://data-table.openstatus.dev/r/registry.json
pnpm dlx shadcn@latest add https://data-table.openstatus.dev/r/registry.json
bunx shadcn@latest add https://data-table.openstatus.dev/r/registry.json
# clone the source repo
git clone https://github.com/openstatusHQ/data-table-filters.git
# fetch the raw registry index
curl -s https://data-table.openstatus.dev/r/registry.json
```

## Components (15)

| name | type | description | install |
| --- | --- | --- | --- |
| data-table | registry:block | Data table with search, checkbox, slider, date range filters, sorting, infinite scroll, virtualization, and in-memory state management. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table.json` |
| data-table-filter-command | registry:block | Command palette for power-user filter input with history and keyboard shortcuts. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-filter-command.json` |
| data-table-cell | registry:block | Cell renderer system with 12 types: text, code, badge, boolean, star, number, status-code, level-indicator, timestamp, heatmap, bar, and gauge. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-cell.json` |
| data-table-sheet | registry:block | Row detail side panel with cell renderers, keyboard navigation, and copy-to-clipboard. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-sheet.json` |
| data-table-nuqs | registry:block | URL-based state management adapter using nuqs for shareable, bookmarkable filter state. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-nuqs.json` |
| data-table-zustand | registry:block | Client-side state management adapter using zustand for app-level filter persistence. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-zustand.json` |
| data-table-schema | registry:block | Declarative table definitions with col.* factories, presets, and generators for columns, filters, and sheet fields. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-schema.json` |
| data-table-drizzle | registry:block | Server-side filtering, faceted search, cursor pagination, and sorting helpers for Drizzle ORM. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-drizzle.json` |
| data-table-query | registry:block | React Query infinite query integration with a pluggable transport (base URL, headers, credentials, response parsing), cursor and offset pagination strategies, … | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-query.json` |
| data-table-filter-command-ai | registry:block | AI-powered command palette that translates natural language queries into structured table filters. Provider-agnostic — works with any LLM via Vercel AI SDK. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-filter-command-ai.json` |
| data-table-mcp | registry:block | Expose your data table as an MCP endpoint for AI agents. Auto-generates tool schema from BYOS field definitions. Stateless, serverless-compatible. | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-mcp.json` |
| data-table-actions | registry:block | Row, bulk, and filter-scoped actions declared next to their Drizzle handlers and rendered from JSON: the list endpoint advertises what can be done to each row,… | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-actions.json` |
| data-table-remote | registry:block | A headless data table that renders from an API endpoint: point it at a table manifest and a list endpoint and it derives columns, filters, sheet fields, row id… | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-remote.json` |
| data-table-chart | registry:block | Stacked timeline bar chart above the table: one bar per time bucket, one series per level, drag to select a range and zoom the table's time filter to it. Ships… | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-chart.json` |
| data-table-example-infinite | registry:block | A complete /example route to see the table running before wiring your own data: a table schema, a mock API that filters, computes facets and cursor-paginates i… | `npx shadcn@latest add https://data-table.openstatus.dev/r/data-table-example-infinite.json` |

## For AI agents

```text
You are adding components from @data-table-filters to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/data-table-filters.md) for the component list.
2. Fetch the machine-readable index: https://data-table.openstatus.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: data-table-filters).
```