Tree View Org Chart Team Block for React

Edit ORG at the top of the file. A person is an id, a name, a role and, if they manage anyone, a reports list of more people, nested as deep as you like. The tree, the "22 reports" counts, the figure for people and the figure for departments are all read from that one structure. The "Levels" figure is a number you set yourself (LEVELS), so update it if you change the depth.

The tree is the catalog's Tree View, which is built on Ark UI on every target. Tab moves into it, the Up and Down arrows move between visible rows, Right opens a branch and Left closes it, and Enter picks the person, which fills the band under the tree. Every row is a tree item with a name that reads the person, their role and their number of reports. Expand all and Collapse all are one button whose label changes.

No. The Tree View mounts a branch's rows only while it is open, so a closed branch holds nothing in the HTML and Expand all adds the rest. If you need every name in the markup for search engines, list the team elsewhere on the page as well.

Opening every branch shows twenty-two rows, which would push everything below the block down. The tree sits in a frame of fixed height with its own scroll, so Expand all and Collapse all never move the page, and the eight rows it opens with fit without scrolling. The frame is taller on a desktop than on a phone.

It marks their row with a bar and a tint and fills the band at the end of the block with their name, role, who they report to and who reports to them ("Reports to Priya Raman. Manages Anya Volkova and Kofi Mensah."). The band is a polite live region, so a screen reader hears the change without losing its place in the tree.

Below lg the header comes first, then the Expand all button and the three figures, then the tree under a hairline, then the picked-person band. The tree's indents are tighter, role lines wrap onto a second line, and nothing scrolls sideways at 320 pixels.