# Automation Library block

> Workflow automation library data grid with status tabs and a multi-field filter popover

Automation library table with counted status tabs (Live, Needs approval, Draft, Paused) and a Filters popover for search, owner team, delivery mode and last updated. ReUI DataGrid, Frame, Filters, Rating, Badge; shadcn Tabs, Switch, DropdownMenu.

- Type: Pro block
- Category: [Filtering](https://web.dev.reui.io/blocks/data-grid/filtering.md)
- Page: https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-2
- 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
- MCP: `get_block("data-grid-filtering-2")`
- Built with: Alert Dialog, Avatar, Badge, Button, Data Grid, Dropdown Menu, Filters, Frame, Item, Rating, Separator, Switch, Tabs
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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

## Agent notes

- `AUTOMATIONS` is the demo library held in `useState`; the enable switch and Archive change that local copy only, so persist them through your API
- `showAutomationToast` backs the Edit and View Details menu items, so connect `onAction` to your workflow editor and detail route
- The New workflow button has no `onClick`; add your create flow

## When not to use

- Rows that expand to reveal nested sub-tasks inline: use [Sub-Task Tracker](https://web.dev.reui.io/blocks/data-grid/expansion/data-grid-expansion-1.md) (`get_block("data-grid-expansion-1")`)
- Member rows with avatars, role tabs and actions that show on hover: use [Team Members](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-6.md) (`get_block("data-grid-base-6")`)

## 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)
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/data-grid-filtering-2
```

## About Filtering blocks

### 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

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.