TreeView
A nested list people open and close level by level, like teams in an organization, project folders or account hierarchies, to pick, check or reorder items.
Master
Simple: selection single, icons and drag off. Advanced: selection multiple, icons and reorderable on. Click chevrons to open folders; drag a row above, below or onto a folder, or click its handle for the Move menu; Alt with the arrows moves the focused row.
- Organization
- Engineering
- Design
- Sienna Hewitt
- Ammar Foley
- Caitlyn King
- Product
- Marketing
- Sales
- Finance
- Projects
- Powersurge
- Client brief
- Brief_v1
- Brief_v2
- Deliverables
- Ikigai Labs
- Settings
Alt with the arrow keys moves the row: up and down, right into the folder above, left out of its folder. Shift F10 opens the Move menu.
Usage
Use TreeView for data that nests: folders and files, an org chart, parent and child accounts, product categories. It comes in two looks from one component: simple (chevrons and guide lines, one row selected) and advanced (selection multiple, showIcons and reorderable: checkboxes, folder icons and drag handles). It is one component: pass items, each with an id, a label and, for a folder, children. Chevrons open and close folders; faint guide lines join each level to its parent (showLines). selection single highlights one row (clicking a folder also opens it); multiple adds a checkbox to each row that checks a folder's whole branch and shows a dash when only part of it is checked; none only opens and closes. showIcons adds a folder or file icon (or the item's own). reorderable adds a drag handle: drag a row above or below another, or onto a folder to move it inside. The handle is also a button that opens a Move menu (up, down, into the folder above, out of its folder), so nothing needs dragging. Alt with the arrow keys makes the same moves on the focused row, and Shift+F10 opens the menu. Items, selection and open folders can each be controlled or left to the tree. See contracts/treeview.json for the full contract.
Do's
- Data that nests more than one level: folders, teams, accounts, categories.
- Picking items or whole branches, with selection multiple.
- Letting people arrange a hierarchy by dragging, with reorderable.
Don'ts
- Do not use it for a flat list. Use Table, Select or RadioGroup.
- Do not use it for main app navigation. Use AppNav.
- Do not use it for sections of one page that open and close. Use Accordion.
- Do not build a local nested list, folder row or tree checkbox. Use TreeView.
- Do not use raw hex.
<TreeView
label="Workspace"
defaultItems={workspace}
onItemsChange={setItems}
selection="multiple"
defaultSelected={checked}
defaultExpanded={open}
showIcons
reorderable
/>