# At-Risk Renewals block

> Renewals risk data grid with multi-field filter builder and pinned at-risk accounts

Customer success renewals queue: filter builder (account, owner, stage, signals, alerts), pinned at-risk rows, density and column settings, health Progress bars. ReUI DataGrid, Filters, Badge, shadcn Card, Popover, DropdownMenu, HoverCard.

- 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-4
- 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-4")`
- Built with: Avatar, Badge, Button, Card, Data Grid, Dropdown Menu, Field, Filters, Hover Card, Item, Popover, Progress, Select, Separator, Skeleton, Switch
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Agent notes

- `RENEWAL_RISKS` is the demo queue and `DEFAULT_PINNED_RENEWAL_IDS` pins 2 of its rows by id; replace both with your own accounts
- Open, Save plan and Exec review reach `onAction`, which only raises toasts; the Create save plan button is a toast too
- The header totals (`totalArr`, `criticalCount`) read `RENEWAL_RISKS`, so the filter rules never change them

## When not to use

- Selected rows that take a bulk owner and stage change: use [Renewal Reassignment](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-3.md) (`get_block("data-grid-filtering-3")`)
- Contact lists scored and pinned for sales follow-up: use [Lead Scoring Contacts](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-2.md) (`get_block("data-grid-base-2")`)

## 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)
- 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-4
```

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