Tree View

A hierarchy of items that open and close, such as folders or place codes.

Stable

Web

iOS

Android

@advui/data

Source

Files

Preview

Code

Reports

Q3 summary.pdf

Maps

README.md

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/data

npm

npm install @advui/data

Usage

import { TreeView } from '@advui/data'

<TreeView
  aria-label="Files"
  data={[{ id: 'reports', label: 'Reports', children: [{ id: 'q3', label: 'Q3 summary' }] }]}
  defaultExpanded={['reports']}
/>

Examples

Controlled

Expand or collapse everything from outside; one township is disabled.

Preview

Code

Yangon

Yangon (East)

Yangon (West)

Mandalay

Selected place code: none

API reference

TreeView

Prop	Type	Default	Description
`data` required	`TreeNode[]`	—	`{ id, label, icon?, children?, disabled? }` nodes.
`aria-label`	`string`	—	Names the tree. Required.
`expanded`	`string[]`	—	Ids of open branches.
`defaultExpanded`	`string[]`	—	Starting `expanded` when uncontrolled.
`onExpandedChange`	`(expanded: string[]) => void`	—	Called with the new `expanded`.
`selected`	`string \| null`	—	Id of the selected item.
`defaultSelected`	`string \| null`	—	Starting `selected` when uncontrolled.
`onSelectedChange`	`(selected: string \| null) => void`	—	Called with the new `selected`.
`onNodePress`	`(node: TreeNode) => void`	—	An item was activated (press, Enter or Space).

flattenTree(nodes, expanded)

The visible nodes in order, with level and position. Useful for your own rendering.

Accessibility

Follows the WAI-ARIA tree pattern on web: tree and treeitem roles with aria-level, aria-posinset, aria-setsize, aria-expanded and aria-selected.
The tree is one Tab stop (roving tabIndex); focus lands on the selected item.
On iOS and Android, which have no tree roles, each item is a button that reports expanded and selected.
Chevrons, icons and indents are hidden. Rows are 44pt tall on touch screens.

Keyboard interactions
Key	Action
`Arrow Down / Arrow Up`	Next or previous visible item.
`Arrow Right`	Opens a closed branch, or moves into an open one.
`Arrow Left`	Closes an open branch, or moves to the parent.
`Home / End`	First or last visible item.
`Enter / Space`	Selects the item.
`A–Z`	Moves to the next item starting with that letter.

Platform notes

Web

Pressing a branch selects it and toggles it open.

iOS

Tapping a branch selects it and toggles it open. VoiceOver reads "expanded" or "collapsed".