Skip to main content

Tree

The ui5-tree component provides a tree structure for displaying data in a hierarchy.

Usage​

When to use:​

  • To display hierarchically structured items.
  • To select one or more items out of a set of hierarchically structured items.

When not to use:​

  • To display items not hierarchically structured. In this case, use the List component.
  • To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.
  • The hierarchy turns out to have only two levels. In this case, use List with group items.

Keyboard Handling​

The ui5-tree provides advanced keyboard handling. The user can use the following keyboard shortcuts in order to navigate trough the tree:

  • [Up] or [Down] - Navigates up and down the tree items that are currently visible.
  • [Right] - Drills down the tree by expanding the tree nodes.
  • [Left] - Goes up the tree and collapses the tree nodes.

The user can use the following keyboard shortcuts to perform selection, when the mode property is in use:

  • [Space] - Selects the currently focused item upon keyup.
  • [Enter] - Selects the currently focused item upon keydown.

ES6 Module Import​

import "@ui5/webcomponents/dist/Tree.js";

import "@ui5/webcomponents/dist/TreeItem.js";

Basic Sample​

Properties​

mode​

DescriptionDefines the mode of the component. Since the tree uses a ui5-list to display its structure, the tree modes are exactly the same as the list modes, and are all applicable.
Type"None" | "SingleSelect" | "SingleSelectBegin" | "SingleSelectEnd" | "SingleSelectAuto" | "MultiSelect" | "Delete"
Default"None"

noDataText​

DescriptionDefines the text that is displayed when the component contains no items.
Typestring
Default""

headerText​

DescriptionDefines the component header text.
Note: If the header slot is set, this property is ignored.
Typestring
Default""

footerText​

DescriptionDefines the component footer text.
Typestring
Default""

accessibleName​

DescriptionDefines the accessible name of the component.
Typestring
Default""
Since1.8.0

accessibleNameRef​

DescriptionDefines the IDs of the elements that label the component.
Typestring
Default""
Since1.8.0

Slots​

default​

DescriptionDefines the items of the component. Tree items may have other tree items as children.
Note: Use ui5-tree-item for the intended design.
TypeArray<TreeItemBase>
DescriptionDefines the component header.
Note: When the header slot is set, the headerText property is ignored.
TypeArray<HTMLElement>

Events​

item-toggle​

DescriptionFired when a tree item is expanded or collapsed.
Note: You can call preventDefault() on the event object to suppress the event, if needed. This may be handy for example if you want to dynamically load tree items upon the user expanding a node. Even if you prevented the event's default behavior, you can always manually call toggle() on a tree item.
TypeCustomEvent<TreeItemToggleEventDetail>
Parametersitem: HTMLElement
the toggled item.

item-mouseover​

DescriptionFired when the mouse cursor enters the tree item borders.
TypeCustomEvent<TreeItemMouseoverEventDetail>
Parametersitem: HTMLElement
the hovered item.
Since1.0.0-rc.16

item-mouseout​

DescriptionFired when the mouse cursor leaves the tree item borders.
TypeCustomEvent<TreeItemMouseoutEventDetail>
Parametersitem: HTMLElement
the hovered item.
Since1.0.0-rc.16

item-click​

DescriptionFired when a tree item is activated.
TypeCustomEvent<TreeItemClickEventDetail>
Parametersitem: HTMLElement
The clicked item.

item-delete​

DescriptionFired when the Delete button of any tree item is pressed.
Note: A Delete button is displayed on each item, when the component mode property is set to Delete.
TypeCustomEvent<TreeItemDeleteEventDetail>
Parametersitem: HTMLElement
the deleted item.

selection-change​

DescriptionFired when selection is changed by user interaction in SingleSelect, SingleSelectBegin, SingleSelectEnd and MultiSelect modes.
TypeCustomEvent<TreeSelectionChangeEventDetail>
ParametersselectedItems: Array
An array of the selected items.
previouslySelectedItems: Array
An array of the previously selected items.
targetItem: HTMLElement
The item triggering the event.

Methods​

walk​

DescriptionPerform Depth-First-Search walk on the tree and run a callback on each node
Return typevoid
Parameterscallback: WalkCallback
function to execute on each node of the tree with 3 arguments: the node, the level and the index

CSS Parts​

No CSS parts available for this component.

More Samples​

Custom Tree Items​