$37
A shadcn registry for building filterable, sortable data tables with infinite scroll and virtualization. Start with the core block, then extend with optional blocks for command palette, cell renderers, sheet panels, store adapters, schema generation, Drizzle ORM helpers, and React Query integration.
Install any block via npx shadcn@latest add <url>. The CLI handles dependencies, path rewriting, and CSS variable injection.
| Block | Install URL | What it adds |
|---|---|---|
| data-table | https://data-table.openstatus.dev/r/data-table.json | Core: table engine, store, 4 filter types, memory adapter (~52 files) |
| data-table-filter-command | .../r/data-table-filter-command.json | Command palette with history + keyboard shortcuts |
| data-table-cell | .../r/data-table-cell.json | 12 cell renderers (text, code, number, bar, heatmap, badge, boolean, star, status-code, level-indicator, timestamp, custom) |
| data-table-sheet | .../r/data-table-sheet.json | Row detail side panel (auto-installs cells) |
| 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 (auto-installs schema) |
| 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 (provider-agnostic) |
| data-table-mcp | .../r/data-table-mcp.json | MCP server endpoint for AI agents (stateless, serverless-compatible) |
All URLs use base https://data-table.openstatus.dev.
scripts/detect-stack.sh to detect the user's project setupnpx shadcn@latest add https://data-table.openstatus.dev/r/data-table.jsonNext.js? Use the data-table-filters repo as a reference — it's a full Next.js app with all blocks wired up.
Note:
DataTableInfiniteinternally rendersDataTableProvider, which already wraps children withControlsProviderandDataTableStoreSync. You do NOT need to add these separately. The only wrapper you need isDataTableStoreProvider(for the BYOS adapter).
"use client";
import { DataTableInfinite } from "@/components/data-table/data-table-infinite";
import type { DataTableFilterField } from "@/components/data-table/types";
import { useMemoryAdapter } from "@/lib/store/adapters/memory";
import { DataTableStoreProvider } from "@/lib/store/provider/DataTableStoreProvider";
import type { ColumnDef } from "@tanstack/react-table";
const columns: ColumnDef<YourData>[] = [
/* user's columns */
];
const filterFields: DataTableFilterField<YourData>[] = [
/* user's filters */
];
export function MyTable({ data }: { data: YourData[] }) {
const adapter = useMemoryAdapter(/* schema definition */);
return (
<DataTableStoreProvider adapter={adapter}>
<DataTableInfinite
columns={columns}
data={data}
filterFields={filterFields}
/>
</DataTableStoreProvider>
);
}
After installing a block via npx shadcn@latest add, wire it into the table.
commandSlot<DataTableInfinite
commandSlot={<DataTableFilterCommand schema={schema} tableId="my-table" />}
/>
sheetSlot<DataTableInfinite
sheetSlot={
<DataTableSheetDetails title="Details">{content}</DataTableSheetDetails>
}
/>
floatingBarSlotAdd col.select() to the schema to enable multi-row selection with checkboxes. Wrap actions in DataTableFloatingBar — it reads selection state from context (same pattern as DataTableSheetDetails for sheetSlot).
// In table-schema.tsx
export const tableSchema = createTableSchema({
select: col.select().size(37),
// ... other columns
});
// In client.tsx
import { DataTableFloatingBar } from "@/components/data-table/data-table-floating-bar";
<DataTableInfinite
floatingBarSlot={
<DataTableFloatingBar>
{({ rows }) => (
<Button variant="outline" size="sm" onClick={() => console.log(rows)}>
Export ({rows.length})
</Button>
)}
</DataTableFloatingBar>
}
/>;
import { DataTableCellBadge } from "@/components/data-table/data-table-cell";
// Use in columnDef.cell
FILTER_COMPONENTSAll 4 filter types ship with core. To add custom types:
import { FILTER_COMPONENTS } from "@/components/data-table/data-table-filter-controls";
FILTER_COMPONENTS.myCustom = MyCustomFilterComponent;
commandSlot<DataTableInfinite
commandSlot={
<DataTableFilterAICommand
schema={filterSchema.definition}
tableSchema={tableSchema.definition}
api="/api/ai-filters"
tableId="my-table"
/>
}
/>
Requires an API route that streams AI results. See references/ai-filters.md.
DataTableInfinite accepts: commandSlot, sheetSlot, toolbarActions, chartSlot, footerSlot, floatingBarSlot.
See references/component-catalog.md for full wiring details.
Install adapter block, swap in provider. See references/store-adapters.md.
Install: npx shadcn@latest add .../r/data-table-schema.json
Map data model → createTableSchema + col.*:
string → col.string().filterable("input")
number → col.number().filterable("slider", { min, max })
boolean → col.boolean().filterable("checkbox")
Date → col.timestamp().filterable("timerange")
enum → col.enum(values).filterable("checkbox")
select → col.select() (checkbox row selection, not filterable)
Presets: col.presets.logLevel(), .httpStatus(), .duration(), .timestamp(), .traceId(), .pathname(), .httpMethod().
For raw JSON data with no predefined schema, use DataTableAuto or the lower-level inferSchemaFromJSON + createTableSchema.fromJSON pipeline. This auto-generates columns, filters, sheet fields, and column visibility from the data itself.
Drop-in component — pass JSON data, get a fully functional table:
import { DataTableAuto } from "@/components/data-table/data-table-auto";
import data from "./data.json";
export default function Page() {
return <DataTableAuto data={data} />;
}
Includes command palette and sheet detail panel out of the box. See the /auto route in this repo for a working example.
import { inferSchemaFromJSON } from "@/lib/table-schema/infer";
import { createTableSchema } from "@/lib/table-schema";
const schemaJson = inferSchemaFromJSON(data);
const { definition } = createTableSchema.fromJSON(schemaJson);
See references/auto-infer.md for inference heuristics, smart enhancements, and customization.
Install: npx shadcn@latest add .../r/data-table-drizzle.json
Scaffold route handler with createDrizzleHandler({ db, table, columnMapping, cursorColumn, schema }).
For non-Drizzle ORMs: implement response shape { data, facets, totalRowCount, filterRowCount, nextCursor, prevCursor }.
Install: npx shadcn@latest add .../r/data-table-query.json
Wire createDataTableQueryOptions({ queryKeyPrefix, apiEndpoint, searchParamsSerializer }).
--color-success/warning/error/info. Check cssVars applied to CSS.@/ paths per components.json aliases.<NuqsAdapter> in root layout AND <Suspense> around the table component. See references/store-adapters.md.initialState to the nuqs adapter. See the SSR Hydration section in references/store-adapters.md.field.string() (null default), not field.string().default("").SheetField.type must match the filter type (not "readonly") to get the filter dropdown. Use generateSheetFields() to auto-derive from filter config.FILTER_COMPONENTS key.