# Revenue by Region block

> Account revenue grouped by region with collapsible rows and ARR subtotals

Region-grouped accounts, collapsible rows, per-region ARR and weighted NRR, grand-total footer. Health filter, search, density and column toggles. ReUI DataGrid, Frame, Badge; shadcn Button, DropdownMenu, InputGroup, Popover, Select. CRM, NRR.

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

## Best for

Accounts under region rows that carry an ARR subtotal, weighted NRR and next renewal, with an All Regions total in the footer

## Agent notes

- Replace `ACCOUNTS` and `REGIONS`; `sumArr`, `weightedNrr` and `nextRenewal` roll each region row up from its accounts
- `handleAccountAction` open and plan, and `handleExport`, only raise a toast; connect them to your CRM and export
- `expandedRows` starts with only the first region open; collapse and expand all run through `handleToggleGroups`

## When not to use

- Agent runs held in collapsible status groups with attention filters: use [Agent Run Queue](https://web.dev.reui.io/blocks/solutions/agents/solution-agents-2.md) (`get_block("solution-agents-2")`)
- Group rows that carry only a task count, with no currency subtotals: use [Roadmap by Stage](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-1.md) (`get_block("data-grid-grouping-1")`)

## 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-grouping-2
```

## About Grouping blocks

### When to use

- Records bucketed under collapsible group rows by stage, region or risk band, with a count or subtotal on each
- Parent and child hierarchies of any depth, such as a bill of materials or an org chart, rolled up per level
- Stage pipelines laid out as stacked sections, each its own table that repeats the column header row

### When not to use

- Group rows built from the bare parts in your own page, with no toolbar or demo records: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- A flat record list paged at the foot, with no heading rows between records: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- Each record opening in place onto its own sub-tasks or a rail of check cards: use the [Expansion blocks](https://web.dev.reui.io/blocks/data-grid/expansion.md)

### Agent notes

- Each page.tsx wraps the view in a `min-h-svh` main under an sr-only `h1`, and the view adds a padded `max-w-7xl` section; drop both inside an app shell
- Search and filters run in the browser over every demo row, and `manualPagination` leaves the rows unsliced with no pager; move both to your API at scale
- Create, open and export buttons change no data and only raise a sonner `toast`; point them at your own routes and API

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.