# Release Approvals block

> Release Review Data Grid with Expandable Rows Revealing a Checklist Card Rail

Release approval queue where TanStack rows expand into a rail of check cards with rating and coverage rings. Search and status filters, View Settings popover, readiness rings, approve and escalate actions. ReUI DataGrid, Badge, Rating; shadcn Card.

- Type: Pro block
- Category: [Expansion](https://web.dev.reui.io/blocks/data-grid/expansion.md)
- Page: https://web.dev.reui.io/blocks/data-grid/expansion/data-grid-expansion-3
- 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-expansion-3")`
- Built with: Avatar, Badge, Button, Card, Data Grid, Dropdown Menu, Field, Input Group, Popover, Rating, Select, Separator, Switch, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Rows that open onto a rail of up to 3 check cards with ratings and coverage rings, plus approve and escalate status changes

## Agent notes

- `RELEASE_REVIEWS` seeds the `reviews` state; approve and escalate in `handleReviewAction` only rewrite that state, so persist them to your API
- The New review button has no `onClick`, and the open action in `handleReviewAction` only shows an info toast; wire both
- Rows expand only when `showChecks` is on and `checks` is non-empty; `MAX_VISIBLE_CHECK_CARDS` shows 3 cards and the rest go in a popover

## When not to use

- A flat record list that needs a multi-field filter bar and async loading skeletons: use [Billing Transactions](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-1.md) (`get_block("data-grid-filtering-1")`)
- Flat rows with circular progress rings and status badges, with nothing to expand: use [Project Modules](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-7.md) (`get_block("data-grid-base-7")`)

## 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-expansion-3
```

## About Expansion blocks

### When to use

- Parent records that open in place to show the child rows or detail cards they hold
- Rolled up totals, such as a cash or budget line, that drill down to the items behind them
- Task and approval queues where each item carries its own sub-tasks or checklist

### When not to use

- Rows bucketed by a shared field value, or a tree nested more than one level deep: use the [Grouping blocks](https://web.dev.reui.io/blocks/data-grid/grouping.md)
- A finished page of flat records where every row stands alone, with nothing nested: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- A table you assemble from the bare parts, where no row opens to reveal more: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)

### Agent notes

- Each page.tsx centers the view in a `min-h-svh` main capped at `max-w-7xl` beside an sr-only `h1`; keep only the view inside your app shell
- `pageSize` counts parent rows only, so open children always stay on their parent's page; page your API by parent and return children with it

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.