The Tree Table component allows you to display data in an expandable tree hierarchy. The nodes in the tree are identified by a special ID; Hence, one item can appear in multiple nodes of a tree.

Designing a Tree Table

To design a Tree Table in your form, do the following:

Insert the Tree Table component into the form.

In the Tree Table properties, define the data source of one of the following type:

ClosureTreeDataSource: the input object of the closure is the clicked node and it returns a list of objects that represent the data source;

Example ClosureTreeDataSource

new ClosureTreeDataSource(
     {
     node ->
       //returns the list of root nodes on load (object stored in the home variable):
       if node == null then
         [home]
       else
         //what to return when the user clicks a node:
         //if the user clicked a Folder, return the list of its files and folders:
         if node.getType() == Folder then
           (node as Folder).items;
         //if the user clicked a file, do not return anything:
         else
           [];
         end;
       end;
     }
   )

SimpleTwoLevelTreeDS: two-level tree

Example SimpleTwoLevelTreeDS data source:

def SimpleTwoLevelTreeDS tree := new SimpleTwoLevelTreeDS(
        [ "eva" -> ["climbing", "painting"], "juraj" -> ["reposing", "windsurfing"] ]
     )

Insert Table Column components ( ) into the Table.

The column operates over the Data Source objects, so that on every column you can define what of the object is displayed.
Define the properties of each column:
1. Define the Value Provider that returns the content of the cell based on the row object.
2. Define the iterator type: the type is the type of the Value Provider
  
  The iterator type is always the same as the type of the Value Provider object: since it is not possible to infer the type of Value Provider object without possible inaccuracies (for example, if the Value Provider is defined by a closure), the user always needs to set the iterator type explicitly.
Insert the form components into the Table Column and define their properties. Use the Table iterator (it by default) to work with the iterated object).

Enabling and Disabling Filtering on a Tree Table

To enable or disable filtering on Tree Tables, use the setFilteringEnabled(Boolean) call on the component: The method hides or displays the filtering row.

Defining a Tree Table with Different Node Types

To create a Tree Table with nodes that are of different data types, do the following:

Insert a Tree Table component into your Form definition.
Define the data source as a SimpleTwoLevelTreeDS or ClosureTreeDataSource.

Check the type of the clicked node: typically you will cast the node to its type to be able to return the list of its child nodes. Note that on load, no node has been clicked yet, so the input object is null: make sure to handle this situation in the closure.
Insert the Table Column into the Tree Table and define the Value Provider type and the value provider expression below.

Make sure that the Value Provider returns values of simple data types: Objects of another type cause a runtime exception since it is not possible to produce their filter and sort feature.
- Closure Value Provider expression:
```
{
   clickedNode:FSItem ->
   clickedNode.name;
}
```
- Property Path Value Provider expression:
```
   FSItem.name
```

Getting the Selected Item in a Tree Table

To allow the user to select an item in a tree table and obtain the selection, do the following:

Enable row selection on the tree table with the setSelectable() method:
```
MyTreeTable.setSelectable(true)
```

Define the action when the user selects a row with the setSelectionChangeListener() method.

MyTreeTable.setSelectionChangeListener( {e:forms::ValueChangeEvent ->
   //set the value in the selected row as caption of a Label:
   Selection.setCaption(
       toString(
          //e.source returns the TreeTable; getSelection the selected object:
          (e.source as forms::TreeTable).getSelection())
       )
    }
)

Sorting a Tree Table

To enable sorting on a Grid or Table, select the sortable flag in the Sorting properties of the respective column: the user will be able to sort the displayed values by clicking the column header.

On a Table, if you do not want to use the column provider for sorting, define the sorting value provider below.

Important: When applying sorting on large collections (the Data Source of the Grid or Table is set to Collection), sorting and filtering actions might cause performance issues: consider using other data sources such as shared Type data sources.

Filterable and sortable Grid Column

Filtering a Tree Table

Important: Filters on Columns of Tables and Tree Tables support only the Boolean, String, Integer, Decimal, Date, and Enumeration data types.

To enable filtering on a column of a Table, Tree Table, and Grid, do the following:

Make sure the table, tree table, or grid is filterable: the flag is set with the setFilteringEnabled method and is enabled by default.
On the column, set the properties:
1. Select the filterable flag.
2. Define the iterator data type at the bottom of the Properties view so the system can infer the filter it should use (Boolean, String, Integer, Decimal, Date, or Enumeration.
3. Make sure the Value Provider expression is set to return the same data type as the iterator data type.
4. Optionally define the filter configuration: The configuration allows you to further specify the filter properties: You can set it with the setFilterConfig() method.
  - OptionsFilterConfig: the user will be able to select one or multiple OptionsFilterConfig from an option set, which will be interpreted as the values and applied by the filter.
```
new OptionsFilterConfig(multiselect -> true, options -> [
  new SelectItem(label -> "label of 1", value -> 1),
  new SelectItem(label -> "label of 2", value -> 2)
])
```
  - NumericFilterConfig: the user will define a number range
```
// numeric filter with default values:
new NumericFilterConfig(equal ->50, moreThan -> 10, lessThan -> 90)
```
  - DateFilterConfig so the user can define a date range to use for filtering and the format of selected dates
```
new DateFilterConfig(
  resolution -> uicommon::DateTimeResolution.Month, formatPattern -> "YYYY MMMM"
)
```
  - RexExpFilterConfig to define the default regex pattern for filtering
  - SubStringFilterConfig to define the default substring pattern for filtering
  - BooleanFilterConfig to define properties of filter for Boolean values

Important: When applying filtering on large Collections (the Data Source is set to Collection), sorting and filtering actions might cause performance issues: consider using other data sources such as shared Type data sources.

Filterable and sortable Grid Column

Enabling and Disabling Filtering

To enable or disable filtering on Tables and Tree Tables dynamically, use the setFilteringEnabled(Boolean) call on the component: The method hides or displays the filtering row.

Selecting Tree Table Row

To enable row selection on a Tree Table, set the tree table as selectable: MyTable.isSelectable() or MyTable.setSelectable(true). You can then use the setSelectionChangeListener() to listen for user Selection and acquire the selected row with use the getSelection() method.

You can use the select() method to select a row from the Form.

c.setSelectable(true);
c.setSelectionChangeListener({ e -> selected := c.getSelection().toString(); SelectedLabel.refresh()})

Adding Column Dynamically

To add a Grid Column, Table Column, or a Tree Table Column to the parent component Dynamically, for example, on button click, call the addColumn() method on the parent component.

Adding a column on button click (Click Listener):

{e -> Vocab.addColumn(
   new forms::TableColumn(
       data -> null,
       modelingId -> null,
       filtrable -> false,
       generator -> null,
       sortable -> false,
       valueProvider -> new PropertyPathValueProvider(Unit.svk))
   )
}

Selecting Tree Table Rows

To enable row selection on a Tree Table set it as selectable: MyTreeTable.isSelectable() or MyTreeTable.setSelectable(true). You can then use the setSelectionChangeListener() to listen for user Selection and acquire the selected row with use the getSelection() method.

You can use the select() method to select a row from the Form.

c.setSelectable(true);
c.setSelectionChangeListener({ e -> selected := c.getSelection().toString(); SelectedLabel.refresh()})

Collapsing Columns

Columns of tabular components can be collapsed from the front-end by the user as well as programatically. You can also enable or disable the feature.

By default, Columns can be collapsed:

To disable collapsibility of a Column, call the following method:
- The setCollapsible(false) method on the Column of a Tree Table or Table.
To collapse or uncollapse a collapsible Column, call the following method:
- The setCollapsed(Boolean) method on the Column of a Tree Table or Table.