Tree component
Last updated
Last updated
© 2024 UI Bakery
Triggers allow you to launch certain actions based on different events.
A tree component has 2 fields for configuration: data and columns.
Columns can be set up directly from the interface or with the JS code. You can get a quick tip about a supported data format for the columns by clicking on the question mark icon near the field.
The code format is represented as an array of the following objects:
where:
name:
the header of the column;
id
: unique column identifier. Will get value from Data.data
field;
primaryKey
: uniquely defines a record in a Data
field, necessary for a correct row selection;
width
: width of a column in px.
Data field supports the following format:
where:
data
: an object with raw data, should contain the fields that are listed in column's id fields together with their data;
children
: an array of objects with the same structure;
childrenCount
(optional): a number of children. Will be displayed only if the children array is empty;
icon
: the name of the icon, if required. The icon is displayed in the first column only.
You can get a quick tip about a supported data format by clicking on the question mark icon near the field:
Let's check an example of how to use data from the action in a tree component. For the example, we will use two tables: Orders and Order details. In the tree component, we will add the list of the orders, so that each order can be expanded and its details can be shown.
Start with loading the data from the Orders and Order details tables.
Drag a Tree component onto the working area.
Next, add a new action - Code. Below is a code example:
4. After that, assign this action to the tree component in the Data field.
5. Finally, adjust the columns in the tree component based on the columns data specified in the code. Make sure to specify the necessary columns as primary key to correctly identify the rows. For the example, we are setting Order Number and Product Code as primary keys.
On Expand Toggle
Calls for any action as expand toggle is activated
On Row Select
Calls for an action when a row is selected