Tree

Tree is used to display hierarchical data.

Import #


import { TreeModule } from 'primeng/tree';

Basic #

Tree component requires an array of TreeNode objects as its value.

  • Documents
  • Events
  • Movies


<p-tree class="w-full md:w-30rem" [value]="files"></p-tree>

Controlled #

Tree requires a collection of TreeNode instances as a value.

  • Documents
  • Events
  • Movies


<div class="mb-3">
    <button pButton type="button" label="Expand all" (click)="expandAll()" class="mr-2"></button>
    <button pButton type="button" label="Collapse all" (click)="collapseAll()"></button>
</div>
<p-tree [value]="files" class="w-full md:w-30rem"></p-tree>

Selection #

Single #

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

  • Documents
  • Events
  • Movies


<p-tree [value]="files" class="w-full md:w-30rem" selectionMode="single" [(selection)]="selectedFile"></p-tree>

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.

  • Documents
  • Events
  • Movies


<div class="flex align-items-center mb-4 gap-2">
    <p-inputSwitch inputId="input-metakey" [(ngModel)]="metaKeySelection"></p-inputSwitch>
    <label for="input-metakey">MetaKey</label>
</div>
<p-tree [metaKeySelection]="metaKeySelection" [value]="files" class="w-full md:w-30rem" selectionMode="multiple" [(selection)]="selectedFiles"></p-tree>

Checkbox #

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

  • Documents
  • Events
  • Movies


<p-tree [value]="files" selectionMode="checkbox" class="w-full md:w-30rem" [(selection)]="selectedFiles"></p-tree>

Events #

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

  • Documents
  • Events
  • Movies


<p-tree [value]="files" class="w-full md:w-30rem" selectionMode="single" [(selection)]="selectedFile"
    (onNodeExpand)="nodeExpand($event)" (onNodeCollapse)="nodeCollapse($event)" (onNodeSelect)="nodeSelect($event)"(onNodeUnselect)="nodeUnselect($event)"></p-tree>

Lazy #

Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using loading property and onNodeExpand method.

  • Lazy Node 0
  • Lazy Node 1
  • Lazy Node 1


<p-tree class="w-full md:w-30rem" [value]="files" (onNodeExpand)="nodeExpand($event)" [loading]="loading"></p-tree>

Template #

Custom node content instead of a node label is defined with the pTemplate property.

  • Introduction
  • Components In-Depth


<p-tree [value]="nodes" class="w-full md:w-30rem">
    <ng-template let-node pTemplate="url">
        <a [href]="node.data" target="_blank">{{ node.label }}</a>
    </ng-template>
    <ng-template let-node pTemplate="default">
        <b>{{ node.label }}</b>
    </ng-template>
</p-tree>

DragDrop #

Nodes can be reordered within the same tree and also can be transferred between other trees using drag&drop.

  • Documents
  • Events
  • Movies


<p-tree class="w-full md:w-30rem" [value]="files" [draggableNodes]="true" [droppableNodes]="true" draggableScope="self" droppableScope="self"></p-tree>

Context Menu #

Tree requires a collection of TreeNode instances as a value.

  • Documents
  • Events
  • Movies


<p-tree class="w-full md:w-30rem" [value]="files" selectionMode="single" [(selection)]="selectedFile" [contextMenu]="cm"></p-tree>
<p-contextMenu #cm [model]="items"></p-contextMenu>
<p-toast></p-toast>

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


<p-tree [value]="files" class="w-full md:w-30rem" [filter]="true" filterPlaceholder="Lenient Filter"></p-tree>
<p-tree [value]="files" class="w-full md:w-30rem" [filter]="true" filterMode="strict" filterPlaceholder="Strict Filter"></p-tree>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-treeMain container element
p-tree-horizontalMain container element in horizontal mode
p-tree-containerContainer of nodes
p-treenodeA treenode element
p-treenode-contentContent of a treenode
p-treenode-togglerToggle icon
p-treenode-iconIcon of a treenode
p-treenode-labelLabel of a treenode
p-treenode-childrenContainer element for node children
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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

KeyFunction
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.
enterSelects the focused treenode.
spaceSelects the focused treenode.
down arrowMoves focus to the next treenode.
up arrowMoves focus to the previous treenode.
right arrowIf node is closed, opens the node otherwise moves focus to the first child node.
left arrowIf node is open, closes the node otherwise moves focus to the parent node.
PrimeNG 16.0.0-rc.2 by PrimeTek