# Shadcn Filtering blocks

> Search, faceted filters, filter builders, and status tab toolbars.

- Type: Pro blocks (Data Grid)
- Page: https://web.dev.reui.io/blocks/data-grid/filtering
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/data-grid.md
- Blocks: 4
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- Record tables narrowed by a row of filter chips, each holding a field, an operator and a value
- A transactions ledger or a workflow catalog searched by reference, merchant, owner team or delivery mode
- Renewal queues sliced by stage, risk, owner, renewal window or signal to find the accounts at risk

## When not to use

- The table parts alone, wired to your own columns, rows and toolbar: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Customer, deal, ticket or timesheet tables with a title, toolbar and pagination: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- Only the chip row and rule builder, to narrow cards or a list you already render: use [Filters](https://web.dev.reui.io/components/filters.md) (`get_component("filters")`)

## Agent notes

- `applyFiltersToData` runs each `FilterQuery` rule over every demo row in the browser; send the query to your API once rows outgrow the client
- The operator switch behind `applyFiltersToData` is written per block; add a case for each operator a new `filterFields` type brings
- Each page.tsx wraps the grid in a `min-h-svh` main with `max-w-7xl` and an sr-only `h1`; drop the wrapper and keep one `h1` in your layout

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start), used by 4 of 4 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 4 of 4 blocks
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 1 of 4 blocks

## Blocks

- [Billing Transactions](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-1.md): Billing transactions data grid with multi-field filter bar and async skeleton loading. Best for a payments ledger that reloads behind skeleton rows when its active rules change, with merchant logos and signed amounts.
- [Automation Library](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-2.md): Workflow automation library data grid with status tabs and a multi-field filter popover. Best for a workflow library split by state tabs whose counts follow the filter rules, with star scores and an enable switch in the row menu.
- [Renewal Reassignment](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-3.md): Renewals data grid with multi-field filter builder, bulk owner and stage actions. Best for renewals whose selected rows take a new owner and stage in bulk, in an unpaged list under a sticky header with a live risk summary.
- [At-Risk Renewals](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-4.md): Renewals risk data grid with multi-field filter builder and pinned at-risk accounts. Best for an at-risk renewals queue with 2 accounts pinned on top, signal tags matched by any, all or none, and a rule count on the Filters button.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.