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.
The Tree component has two configurable fields: data and columns.
Data
The field supports the following format:
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
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 - 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
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:
Start by creating the actions to load the data you need (in our example, loadOrders & loadDetails actions).
Next, add a JavaScript Code action with the following code:
Add a Tree component to the canvas and assign the action from step 2 to the component's Data field.
Finally, adjust component's Columns based on the columns' data specified in the code.
icon - the name of the icon, if required. The icon is displayed only in the first column.
width - width of a column in px
name
string
Component name
selectedRow
TreeActionEvent
The currently selected tree row
toggledRow
TreeActionEvent
The last toggled (expanded or collapsed) tree row
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
On Expand Toggle
Triggered when a tree node is expanded
On Row Select
Triggered when a tree row is selected
Select tree row by path or ID
{
data: object,
children: object[],
childrenCount: number,
icon: string,
}{
name: string | number,
id: string | number,
primaryKey: boolean,
width: number,
}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;