Nested Rows Table Block for React

Each unit is a row with an id, a parent and a depth; only the teams have figures. A small helper walks up from every team to the company and adds its headcount and budget to each unit on the way, so the totals follow any change to the data and the strip above the table, which reads the company row, always equals the sum of the teams.

1 shows only the company, 2 shows the company and its departments, and All shows every team. Opening or folding a parent by hand moves the plan to a depth that none of the three means, so the toggle then shows nothing pressed rather than claiming a depth it isn't at. The line over the table says how many of the rows are shown.

A recursive row component and a recursive type work in React but break in the Vue and Svelte versions, so the plan is a flat list rendered by one map. Indentation comes from the depth, and a unit is shown when every unit above it is open, which a helper checks.

The table has a caption and column heads, each unit's name is its row header with "Level 2" read before it, and every parent's chevron is a button with aria-expanded and aria-controls, named with how many departments or teams it holds. After a press the focus returns to the same chevron, and the sums are read with "in total". Level is never carried by colour alone.

The Owner column folds under the unit's name, and Headcount and Budget stay in their own columns. The indent shrinks so a team's name still fits at 320 pixels, and the frame keeps the same height whichever depth is chosen.

The plan is typed in the file and the open parents are plain state, a list of ids. Nothing is saved or sent. Replace UNITS with your own units (keeping depth and parent in step), put figures on the leaves only, and keep the open list wherever you want it to survive a reload.