Bill of Materials Table

ProNew

A tree table of assemblies and parts where quantities multiply down the tree, so every row shows how many are needed in total and what that costs. Use this when a product is built from sub-assemblies and someone needs the real part counts.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it for manufacturing, kits, recipes and any product made of parts that are made of parts.

Do not use it for flat product lists, or for costs that are not a sum of unit costs (labour, tooling).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`product`	`TreeNode<Part>[]`	-	The top assembly with parts below; `data.qty` is per parent, `data.unitCost` is for parts.

Accessibility

A treegrid with level, position and size on every row.
Both quantity columns have headers, so a screen reader reads "Qty per parent" and "Total needed" for each cell.
Right and Left open and close assemblies.

Testing

The pattern ships with a Testing Library test (bill-of-materials-table.test.tsx) that covers the multiplication down the tree and the cost roll-up.