useDataTableFilter

Headless filter state and actions for building faceted DataTable filter bars.

Installation

npx shadcn@latest add @redpanda/use-data-table-filter

pnpm dlx shadcn@latest add @redpanda/use-data-table-filter

yarn dlx shadcn@latest add @redpanda/use-data-table-filter

bunx shadcn@latest add @redpanda/use-data-table-filter

nubx shadcn@latest add @redpanda/use-data-table-filter

aube dlx shadcn@latest add @redpanda/use-data-table-filter

useDataTableFilter is the headless state engine behind the Data Table Filter component. It manages active filters and the actions to add, update, and clear them from a column configuration, and supports both uncontrolled and controlled (value / onValueChange) usage for URL persistence, undo/redo, or syncing with external state.

Installing the data-table-filter component brings this hook along automatically as a dependency — install it on its own only when you’re building a fully custom filter UI on top of the same logic.

Usage

import { useDataTableFilter } from "@/hooks/use-data-table-filter";

const { filters, actions } = useDataTableFilter<Task>({
  data,
  columnsConfig,
});

API

The full options and return-type reference lives with the component that renders this state — see the useDataTableFilter<TData> section of the Data Table Filter docs for options, the returned filters/actions, and controlled-mode props.

Related

• Data Table Filter — the UI built on this hook.
• Data Table — the table these filters drive.