# Reporting Hierarchy block

> Reporting Hierarchy Tree Grid With Span Of Control And Cascading Selection

Multi-level DataGrid tree mode for an HR org chart: recursive subRows at arbitrary depth, DataGridTableRowExpand indentation, org size and open roles rolled up each reporting line, tree-cascading row selection with a corrected tri-state checkbox, sticky header, depth control and a bulk selection bar.

- 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-5
- 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-5")`
- Built with: Avatar, Badge, Button, Checkbox, Data Grid, Dropdown Menu, Field, Frame, Input Group, Popover, Select, Switch, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An org tree where checking a manager selects their whole line, with a bulk action bar and direct reports, line size and open roles rolled up

## Agent notes

- Replace `ORG_TREE`, a recursive `PersonNode` tree; `buildOrgRows` derives direct reports, org size and open roles
- `handleOrgAction`, `handleExport` and `handleBulkAction` only raise a toast; `handleBulkAction` then clears `rowSelection`
- `TreeRowSelect` writes a manager's whole line into `rowSelection` by hand instead of using the grid's built-in selection

## When not to use

- Parts and assemblies with cost and lead time rolled up each level: use [Bill of Materials](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-4.md) (`get_block("data-grid-grouping-4")`)
- A long flat list scrolled endlessly with bulk row actions: use [Card Payments Ledger](https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-1.md) (`get_block("data-grid-virtualization-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-5
```

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