# Tree ## Overview The Tree component displays hierarchical data in a collapsible, expandable structure. Users can expand or collapse nodes to explore different levels without cluttering the interface.

### Properties

Name	Type	Description
`name`	`string`	Component name
`selectedRow`	`TreeActionEvent`	The currently selected tree row
`toggledRow`	`TreeActionEvent`	The last toggled (expanded or collapsed) tree row

### Methods

Name	Parameters	Returns	Description
`setData`	`data: object[]`	`void`	Set component data. Data is an array of tree nodes with the following structure: `{` `data: any;` `children: object;` `expanded: boolean;` `childrenCount: number;` `icon: string;` `}`
`selectRow`	`index: number`	`void`	Select tree row by index
`selectRowByPath`	`pathOrId: string`	`void`	Select tree row by path or ID

### Triggers

Name	Description
On Expand Toggle	Triggered when a tree node is expanded
On Row Select	Triggered when a tree row is selected

## Working with the component ### Component configuration The Tree component has two configurable fields: *data* and *columns*. * **Data** The field supports the following format: ```javascript { data: object, children: object[], childrenCount: number, icon: string, } ``` * `data` - an object with raw data; should contain the fields that are listed in the Columns section together with their data * `children` - an array of objects with the same structure * `childrenCount` (optional) - the number of children; displayed only if the children array is empty * `icon` - the name of the icon, if required. The icon is displayed only in the first column.

* **Columns** You can set up columns directly from the interface or using the JS mode.

The code format is represented as an array of the following objects: ```javascript { name: string | number, id: string | number, primaryKey: boolean, width: number, } ``` * `name` - the header of the column * `id` - the unique column identifier; gets value from the `Data.data` field; * `primaryKey` - uniquely defines a record in the `Data` field; necessary for the correct row selection * `width` - width of a column in px ### Use case: Using data from an action Let's say you have two tables - *Orders* and *Order details* - and you want to display the list of orders in the Tree component so that each order can be expanded showing its details. Here's how you can configure it: 1. Start by creating the actions to load the data you need (in our example, *loadOrders* & *loadDetails* actions). 2. Next, add a *JavaScript Code* action with the following code: ```javascript const [orders, orderDetails] = await Promise.all([ {{actions.loadOrders.trigger()}}, {{actions.loadDetails.trigger()}}, ]); const treeData = orders.map(order => { const relatedOrderDetails = orderDetails.filter(item => item.orderNumber === order.orderNumber); const treeItem = { data: { ...order, priceEach: relatedOrderDetails.reduce((acc, cur) => { return acc + Number(cur.priceEach); }, 0).toFixed(2), quantityOrdered: relatedOrderDetails.reduce((acc, cur) => { return acc + Number(cur.quantityOrdered); }, 0).toFixed(2), }, children: relatedOrderDetails.map(item => { return { data: item, } }), icon: 'car', }; return treeItem; }); return treeData; ``` 3. Add a Tree component to the canvas and assign the action from step 2 to the component's *Data* field. 4. Finally, adjust component's Columns based on the columns' data specified in the code. {% hint style="info" %} Make sure to specify the necessary columns as primary keys to correctly identify rows. In our example, we set the *Order Number* and *Product Code* columns as primary keys. {% endhint %}