React Data Table with Filters — shadcn/ui + TanStack Table

What is data-table-filters?

data-table-filters is an open-source React data table system built on TanStack Table and shadcn/ui. It provides faceted filters (checkbox, input, slider, time range), sorting, infinite scroll, virtualization, and server-side rendering out of the box.

How is this different from other React data table libraries?

Unlike libraries like AG Grid or MUI DataGrid, data-table-filters is not a library — it's a set of copy-paste patterns. You install components via the shadcn CLI and own the code. No vendor lock-in, no bundle bloat, full customization.

Does it support server-side filtering and sorting?

Yes. data-table-filters supports both client-side and server-side filtering with URL-based state management via nuqs. It includes a Drizzle ORM integration for type-safe server-side queries with automatic filter-to-SQL translation.

What state management options are available?

You can choose between nuqs (URL-based state, shareable links, SSR-compatible) or zustand (client-side, fast, no URL clutter). Both are fully supported with the same filter API.

Can AI agents build data tables with this?

Yes. data-table-filters ships with an AI agent skill that understands the full project structure and can scaffold, configure, and extend data tables end-to-end. Because every component is installed via the shadcn CLI, agents know exactly how to add and compose pieces without custom tooling. It also includes an MCP server that lets AI assistants query and filter your actual table data directly.