---
title: "Perspective - Tree"
description: "The Tree component displays a tree hierarchy based on an array of objects."
---

# Perspective - Tree

> The Tree component displays a tree hierarchy based on an array of objects.

![](2018-12-07_16-42-59trecmponent.png)

**Component Palette Icon**:  

![](2019-05-07_9-46-52.png)

## Description

The Tree component displays a tree hierarchy based on an array of objects. Icons can be chosen for the nodes of the tree, and different icons can be used when an node is expanded or collapsed.

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name          | Description   | Property Type |
| ------------- | ------------- | ------------- | 
| items | An array of objects, each of which represents a node on the tree.**label**: Label text for the list item. Value is string.**expanded**: Whether or not the tree appears with all levels expanded. Value is boolean.**data**: String data for list item. Value is string.**items**: An array of objects, each of which represents a child node on the tree. Value is an array.|array|
| interactable  | If set to false, the tree is displayed but the user can't interact with it in the runtime. Default is true. | value: boolean |
| selection     | Holds the item index path of the current selection.  | value: string  |
| selectionData | Array of objects containing the data and index path for all currently selected nodes.**itemPath**: Index path. Value is numeric.**value**: The value of the 'data' property for the selected node. Value is string. | array  |
| appearance    | Settings for the appearance of the tree. Click here to see the [appearance](#appearance-properties) properties.| object         |
| style         | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object         |

### appearance Properties

| Name             | Description  | Property Type          | 
| ---------------- | ------------- | ----------- | 
| textOverflow     | Setting indicating whether overflowing text should cause the entire tree to scroll horizontally or whether the text should be truncated with an ellipsis. Default is scroll. | value: string dropdown |
| expandIcons      | Settings for the expand icons . Options as follows:**collapsed**: Icon appearance when path is collapsed.**path**: Path to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see [https://fonts.google.com/icons?selected=Material+Icons](https://fonts.google.com/icons?selected=Material+Icons). Value is string.**Color**: Fill color to apply to the icon.**style**: Sets a style for the icon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).**expanded**: Icon appearance when path is expanded.**path**: Path to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see [https://fonts.google.com/icons?selected=Material+Icons](https://fonts.google.com/icons?selected=Material+Icons). Value is string.**Color**: Fill color to apply to the icon.**style**: Sets a style for the icon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).**empty**: Icon appearance when path is empty.**path**: Path to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see [https://fonts.google.com/icons?selected=Material+Icons](https://fonts.google.com/icons?selected=Material+Icons). Value is string.**Color**: Fill color to apply to the icon.**style**: Sets a style for the icon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).|object|
| defaultNodeIcons | Settings for the node icons. Options as follows:**collapsed**: Icon appearance when path is collapsed.**path**: Path to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see [https://fonts.google.com/icons?selected=Material+Icons](https://fonts.google.com/icons?selected=Material+Icons). Value is string.**Color**: Fill color to apply to the icon.**style**: Sets a style for the icon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).**expanded**: Icon appearance when path is expanded.**path**: Path to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see [https://fonts.google.com/icons?selected=Material+Icons](https://fonts.google.com/icons?selected=Material+Icons). Value is string.**Color**: Fill color to apply to the icon.**style**: Sets a style for the icon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).**empty**: Icon appearance when path is empty.**path**: Path to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see [https://fonts.google.com/icons?selected=Material+Icons](https://fonts.google.com/icons?selected=Material+Icons). Value is string.**Color**: Fill color to apply to the icon.**style**: Sets a style for the icon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object   |
| selectedStyle    | Sets a style for when nodes are selected. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).  | object                 |
| unselectedStyle  | Sets a style for when nodes are unselected. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).  | object                 |
| rowHeight  | Height, in pixels, of each row/node of the tree. Default is 24. | value: numeric         |

## Scripting
See the [Perspective - Tree Scripting](perspective-tree-scripting.md) page for the full list of scripting functions available for this component.

## Example

![](2019-02-19_14-07-32-tre-ex-m.png)

|Property|Value|
|--|--|
|appearance.defaultNodeIcons.collapsed.path|material/Play_arrow|
|appearance.defaultNodeIcons.collapsed.color|	#D9D900|
|appearance.defaultNodeIcons.expanded.path|	material/subdirectory_arrow_right|
|appearance.defaultNodeIcons.expanded.color|	#FFAC47|
|appearance.defaultNodeIcons.empty.path|	material/panorama_fish_eye|
|appearance.defaultNodeIcons.empty.color	|#000000|