Tree Tables

The Data Table component can render its data as nested rows, also known as tree table mode. In this mode, records are displayed hierarchically, similar to the Custom Tree component: parent records can be expanded and collapsed to show or hide their child records.

For a step-by-step guide to building a tree table, with screenshots of every stage, see the Displaying Hierarchical Data in a Tree Table tutorial.

How Tree Table Rendering Works

The data of a tree table remains a flat data table. The hierarchy is encoded by two columns of the data table of the Data Table property:

  • 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.

Record ID

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

Parent Record ID

The Record ID of the parent record. The column must be of the String type and allow NULL values. For top-level records, this column contains NULL.

When the table is rendered, every record is attached to the record whose Record ID matches its Parent Record ID.

Properties Controlling Tree Table Rendering

The tree table rendering is enabled and adjusted by the following properties of the Data Table component:

Record ID Column Name

Indicates the column containing the unique record ID. The property is not specific to tree tables: the indicated column is used as the record identifier in component functions and events regardless of the rendering mode.

Nested Records Settings

Indicates the column referencing the parent record and defines the indent of nesting levels and the number of child records loaded when a parent record is expanded.

Expanded Records ID

Lists the records expanded upon rendering.

Unique Record-Level Columns

Defines columns whose values must be unique among sibling records.

Opened Switcher Image

Replaces the default icon of an expanded record.

Closed Switcher Image

Replaces the default icon of a collapsed record.

The table is rendered as a tree only when both column names are specified and both columns exist in the data table. Otherwise, the data is rendered as a regular table.

Expanding Records

By default, all records are collapsed. When a record is expanded, the component loads the number of its child records defined by the Visible Children field of Nested Records Settings. If the record has more child records, a control row with a number field and a button is displayed after the loaded records, and the button loads the indicated number of additional child records.

Moving Records

Records of a tree table can be moved using drag and drop, provided that the Read Only property of the component is disabled and the Reorderable flag of the table format is enabled (it is enabled by default). A record dropped onto another record becomes its child record, and a record dropped above or below another record is placed next to it at the same nesting level. A moved record keeps its child records and cannot be moved into its own child record.

Was this page helpful?