📄 primereact/tree

File: tree.md | Updated: 11/15/2025

Source: https://primereact.org/tree/

Introducing PrimeReact v11 Alpha 🥁Learn More

Tree

Tree is used to display hierarchical data.

Import#

import { Tree } from 'primereact/tree';

Copy

Basic#

Tree requires a collection of TreeNode instances as a value.

  • Documents

  • Events

  • Movies

    <Tree value={nodes} className="w-full md:w-30rem" />

Copy

Controlled#

Expanded state of nodes is managed programmatically with expandedKeys and onToggle properties.

Expand AllCollapse All

  • Documents

    • Work

      • Expenses.doc

      • Resume.doc

    • Home

  • Events

  • Movies

    <div className="flex flex-wrap gap-2 mb-4"> <Button type="button" icon="pi pi-plus" label="Expand All" onClick={expandAll} /> <Button type="button" icon="pi pi-minus" label="Collapse All" onClick={collapseAll} /> </div>

    <Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="w-full md:w-30rem" />

Copy

Selection#

Single#

Single node selection is configured by setting selectionMode as single along with selectionKeys and onSelectionChange properties to manage the selection value binding.

  • Documents

  • Events

  • Movies

    <Tree value={nodes} selectionMode="single" selectionKeys={selectedKey} onSelectionChange={(e) => setSelectedKey(e.value)} className="w-full md:w-30rem" />

Copy

Multiple#

More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is necessary to add to existing selections however this can be configured with disabling the metaKeySelection property. Note that in touch enabled devices, Tree always ignores metaKey.

In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.

{
    '0-0': true,
    '0-1-0': true
}

Copy

MetaKey

  • Documents

  • Events

  • Movies

    <div className="flex align-items-center mb-4 gap-2"> <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} /> <label htmlFor="input-metakey">MetaKey</label> </div> <Tree value={nodes} metaKeySelection={metaKey} selectionMode="multiple" selectionKeys={selectedKeys} onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />

Copy

Checkbox#

Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.

In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node.

{
    '0-0': {
        partialChecked: false,
        checked: true
    }
}

Copy

  • Documents

  • Events

  • Movies

    <Tree value={nodes} selectionMode="checkbox" selectionKeys={selectedKeys} onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />

Copy

Events#

An event is provided for each type of user interaction such as expand, collapse and selection.

  • Documents

  • Events

  • Movies

    <Toast ref={toast} /> <Tree value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e) => setSelectedNodeKey(e.value)} onExpand={onExpand} onCollapse={onCollapse} onSelect={onSelect} onUnselect={onUnselect} className="w-full md:w-30rem" />

Copy

Lazy#

Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using onExpand event.

  • No available options

    <Tree value={nodes} onExpand={loadOnExpand} loading={loading} className="w-full md:w-30rem" />

Copy

Template#

Custom node content instead of a node label is defined with the nodeTemplate property. The toggler can be customized with the togglerTemplate property.

  • Installation

  • Main Concepts

    <Tree value={nodes} nodeTemplate={nodeTemplate} togglerTemplate={togglerTemplate} className="w-full md:w-30rem" />

Copy

DragDrop#

Nodes can be reordered with dragdrop using dragdropScope and onDragDrop properties. The dragdropScope defines a unique scope of the component so that other drag events do not intervene with the component whereas onDragDrop is a callback to update the new state after a drop.

  • Documents

  • Events

  • Movies

    <Tree value={nodes} dragdropScope="demo" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />

Copy

ContextMenu#

Tree has exclusive integration with ContextMenu using contextMenuSelectionKey, onContextMenuSelectionChange and onContextMenu properties.

  • Documents

  • Events

  • Movies

    <Toast ref={toast} /> <ContextMenu model={menu} ref={cm} />

    <Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} contextMenuSelectionKey={selectedNodeKey} onContextMenuSelectionChange={(e) => setSelectedNodeKey(e.value)} onContextMenu={(e) => cm.current.show(e.originalEvent)} className="w-full md:w-30rem" />

Copy

Filter#

Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define filterBy property. In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in strict mode when the query matches a node, filtering continues on all descendants.

  • Documents

  • Events

  • Movies

  • Documents

  • Events

  • Movies

    <Tree value={nodes} filter filterMode="lenient" filterPlaceholder="Lenient Filter" className="w-full md:w-30rem" /> <Tree value={nodes} filter filterMode="strict" filterPlaceholder="Strict Filter" className="w-full md:w-30rem" />

Copy

Accessibility#

Screen Reader

Value to describe the component can either be provided with aria-labelledby or aria-label props. The root list element has a tree role whereas each list item has a treeitem role along with aria-label, aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. The container element of a treenode has the group role. Checkbox and toggle icons are hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The aria-setsize, aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem.

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the page tab sequence. | | shift + tab | Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the page tab sequence. | | enter | Selects the focused treenode. | | space | Selects the focused treenode. | | down arrow | Moves focus to the next treenode. | | up arrow | Moves focus to the previous treenode. | | right arrow | If node is closed, opens the node otherwise moves focus to the first child node. | | left arrow | If node is open, closes the node otherwise moves focus to the parent node. |

  • Import

  • Basic

  • Controlled

  • Selection

    • Single

    • Multiple

    • Checkbox

  • Events

  • Lazy

  • Template

  • DragDrop

  • ContextMenu

  • Filter

  • Accessibility

PrimeReact 10.9.7 by PrimeTek