# 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.

<figure><img src="/files/1Wm4De4SkyGqQmrPjpvj" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="142.109375">Name</th><th width="161.859375">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>selectedRow</code></td><td><code>TreeActionEvent</code></td><td>The currently selected tree row</td></tr><tr><td><code>toggledRow</code></td><td><code>TreeActionEvent</code></td><td>The last toggled (expanded or collapsed) tree row</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="157.11328125">Name</th><th width="163.66015625">Parameters</th><th width="99.7421875">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>setData</code></td><td><code>data: object[]</code></td><td><code>void</code></td><td>Set component data. Data is an array of tree nodes with the following structure:<br><code>{</code><br><code>data: any;</code><br><code>children: object;</code><br><code>expanded: boolean;</code><br><code>childrenCount: number;</code><br><code>icon: string;</code><br><code>}</code></td></tr><tr><td><code>selectRow</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Select tree row by index</td></tr><tr><td><code>selectRowByPath</code></td><td><code>pathOrId: string</code></td><td><code>void</code></td><td>Select tree row by path or ID</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="166.6015625">Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>On Expand Toggle</strong></td><td>Triggered when a tree node is expanded</td><td></td></tr><tr><td><strong>On Row Select</strong></td><td>Triggered when a tree row is selected</td><td></td></tr></tbody></table>

## Working with the component

### Component configuration

The Tree component has two configurable fields: *data* and *columns*.&#x20;

* **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.

<figure><img src="/files/cEx4CKmMg2yGeSxzk43n" alt=""><figcaption></figcaption></figure>

* **Columns**

You can set up columns directly from the interface or using the JS mode.&#x20;

<figure><img src="/files/DDgqmO4YntPq1EFqnf8M" alt=""><figcaption></figcaption></figure>

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 %}

<figure><img src="/files/JkDUVCg2JHC2ch5VGrwN" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/reference/working-with-components/tree-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.