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

Methods

Triggers

Working with the component

Component configuration

The Tree component has two configurable fields: data and columns.

• Data

The field supports the following format:

{
    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:

{
    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:

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;

1. Add a Tree component to the canvas and assign the action from step 2 to the component's Data field.

2. Finally, adjust component's Columns based on the columns' data specified in the code.