Tree view

@summonware/ui · treeview · P2 · Advanced UI

Usage

A recursive, collapsible tree — an org chart, a category hierarchy, nested folders. Each node manages its own expand/collapse state locally rather than a single flat "expanded ids" set, since that is the simpler mental model and nothing here needs cross-node coordination (expand-all, for instance) that would require lifting it.
import { TreeView } from '@summonware/ui';

Best practices

DoExpand the top level by default (this component does) so the tree does not open on a wall of collapsed root nodes.
Don'tUse this for a hierarchy the user mostly needs flattened (e.g. "which team is Ada on") — a searchable flat list with a parent breadcrumb usually answers that faster than expanding a tree.

Examples

Common configurations, variations and states.

Org chart

Two levels deep. Click a node to select it; click the chevron to expand/collapse.

Reference variants

1 of 1 labels from the reference are demonstrated above.