Displaying Hierarchical Data in a Tree Table

The Data Table component can render its data as nested rows, also known as tree table mode: parent records can be expanded and collapsed to show or hide their child records. The mode and the properties controlling it are described in the Tree Tables article.

This tutorial shows how to create a dashboard with a Data Table component displaying hierarchical data as a tree table.

Сreate a new dashboard by right-clicking on the Dashboards node in the System Tree and selecting Create.

Add a Data Table component from the Tables group of the component palette to the dashboard.

The hierarchy of a tree table is encoded by two columns of the data table:

• A Record ID column with a unique ID for each record. The column must be of String type. Record ID values cannot be NULL and must be unique across the entire table.

• A Parent Record ID column indicating the Record ID of a record's parent record. The column must be of String type and nullable: top-level records have NULL in this column.

Open the component properties editor. In the Basic Properties tab, enable the Fixed Format property, then open the Format property and define its Fields:

Open the Data Table property and add the records. Each record's parent value refers to the id of its parent record, and top-level records have NULL in the parent column:

Record ID values must be unique across the entire table.

In the Advanced tab, Columns group, set Record ID Column Name to id.

This property alone does not change the table rendering. The indicated column becomes the record identifier used by component functions and events, and it is required for the tree table mode.

In the Advanced tab, Nested Data group, open the Nested Records Settings property and set Parent Record ID Column Name to parent. The other two fields can be left with their default values:

• Indent Size is the indent of each nesting level, in pixels (default: 15).

• Visible Children is the number of child records loaded when a parent record is expanded (default: 10).

Save the properties and preview the dashboard. The table is rendered as a tree: Building A and Building B display switcher icons and can be expanded to show their floors.

When a record is expanded, the component loads only the number of child records specified by Visible Children.

Set Visible Children to 1 and preview the dashboard again. When you expand Building A, only Floor 1 is displayed, followed by a control row with a number field and a button. Enter the number of additional child records you want to load, then click the button.

To allow moving records, disable the Read Only property in the Basic Properties tab. The Reorderable flag of the table format must also be enabled (it is enabled by default). Records can then be moved using drag and drop by the handle at the beginning of the row:

• To nest a record under another record, drop it onto that record. For example, add a new record with id = 6 and name = Floor 3, and drop it onto Building B: its parent value becomes 4, and the record is displayed as a child of Building B.

• To place a record next to another record at the same nesting level, drop it above or below that record.

• A parent record is moved together with its child records.

• A record cannot be moved into its own child record.

The Unique Record-Level Columns property defines columns whose values must be unique among the child records of the same parent record. Values may repeat under different parents: in the example data, both buildings contain a floor named Floor 1.

In the Nested Data group, open Unique Record-Level Columns, add a record, and select name in its Unique Column field. Preview the dashboard and try to move Floor 1 of Building A onto Building B: the move is rejected, and an error message is displayed, because Building B already contains a record named Floor 1. The same check is applied when a record is added and when a value in the name column is edited.

Was this page helpful?

Tell us more

Send

Thank you!