---
title: useDataTableFilter
description: Headless filter state and actions for building faceted DataTable filter bars.
icon: funnel
---

### Installation

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

`useDataTableFilter` is the headless state engine behind the [Data Table Filter](/docs/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

```tsx showLineNumbers
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/data-table-filter) docs for options, the returned `filters`/`actions`, and controlled-mode props.

## Related

- [Data Table Filter](/docs/data-table-filter) — the UI built on this hook.
- [Data Table](/docs/data-table) — the table these filters drive.