# Bill of Materials block

> Bill Of Materials Tree Grid With Rolled-Up Cost And Supply Risk

Multi-level DataGrid tree mode for a bill of materials: recursive subRows at arbitrary depth, DataGridTableRowExpand depth indentation, quantity multiplied down the tree, cost and lead time rolled up, supply risk badges, a depth level control and a grand-total footer.

- 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-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-grouping-4")`
- Built with: Badge, Button, Data Grid, Dropdown Menu, Field, Frame, Icon Tile, 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

A bill of materials tree of any depth that rolls quantity down and cost and lead time up, with share of build donuts and a depth switch

## Agent notes

- Replace `BOM_TREE`, a recursive `BomNode` tree; `buildBomRows` derives quantity, cost, lead time and supply per row
- `handleExport` and the open and source branches of `handleBomAction` only raise a toast; connect them to your PLM and sourcing
- The header metrics read `BUILD_ROWS`, computed once from the whole tree, so filters never change them; the footer does

## When not to use

- People in a reporting tree, selected a whole line at a time: use [Reporting Hierarchy](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-5.md) (`get_block("data-grid-grouping-5")`)
- Folders whose rows move inside other folders or between siblings: use [Shared Drive Folders](https://web.dev.reui.io/blocks/data-grid/drag-drop/data-grid-drag-drop-4.md) (`get_block("data-grid-drag-drop-4")`)

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

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