Tree

Hierarchical lists built on headless-tree with expandable folders, selection, and drag-and-drop.

Basic tree

Expandable folders rendered from a flat tree.getItems() list. Folder rows with children get a chevron that expands and collapses them. Leaf rows are padded past the chevron column.

Indentation

indent sets the width of each nesting level in pixels. The default is 16; this preview uses 24.

Tree with selection

Selection state stays in the consumer. Folders expand via the chevron; leaf rows handle selection. Call event.preventDefault() in a row's onClick to skip the default headless-tree click behavior.

Tree with drag and drop

Enable dragAndDropFeature on the headless-tree instance and render TreeDragLine inside the tree container. The container needs relative so the line lines up with the rows. Moving the data is up to the onDrop handler you pass to useTree; this preview only shows the drop line.

Usage

TreeItemLabel reads the item from the surrounding TreeItem and shows item.getItemName() when it has no children.

Tree

treeRequired
TreeInstance<T>

The headless-tree instance returned by useTree

indent
number

Width of each nesting level in pixels

Default: 16

showLines
boolean

Positions rows relatively so a consumer can draw guide lines. It draws no lines itself.

Default: false

toggleIconType
'chevron''plus-minus'

Icon used by the folder toggle in TreeItemLabel

Default: chevron

aria-label
string

Accessible label for the tree

asChild
boolean

Render the child element instead of a div

Default: false

className
string

Additional CSS classes to apply to the tree container


TreeItem

itemRequired
ItemInstance<T>

The headless-tree item to render

childrenRequired
ReactNode

Row content, usually a TreeItemLabel

disabled
boolean

Blocks clicks and keyboard actions and removes the row from the tab order

Default: false

onToggleExpand
(item: ItemInstance<T>) => void

Replaces the default expand and collapse for the toggle button and the left and right arrow keys

onClick
(event: MouseEvent<HTMLElement>) => void

Runs before the headless-tree click handler. Call preventDefault to skip it

asChild
boolean

Render the child element instead of a div

Default: false

className
string

Additional CSS classes to apply to the row


TreeItemLabel

item
ItemInstance<T>

The item to label. Defaults to the item of the surrounding TreeItem

children
ReactNode

Label content. Defaults to item.getItemName()

onToggleClick
(event: MouseEvent<HTMLButtonElement>) => void

Replaces the default expand and collapse when the folder toggle is clicked

asChild
boolean

Render the child element instead of a span

Default: false

className
string

Additional CSS classes to apply to the label


Other exports

TreeDragLine
component

Drop position indicator. Renders nothing unless the tree uses dragAndDropFeature

syncDataLoaderFeature, hotkeysCoreFeature, dragAndDropFeature
FeatureImplementation

headless-tree features re-exported for useTree