Interface OptionsDataTree

To enable data trees in your table, set the dataTree property to true in your table constructor:

Show tree branch icon.

When you are using the dataTree option with your table, the column calculations will by default only use the data for the top level rows and will ignore any children. To include child rows in the column calculations set the dataTreeChildColumnCalcs option to true in the table constructor.

By default Tabulator will look for child rows in the _children field of a row data object. You can change this to look in a different field using the dataTreeChildField property in your table constructor:

Tree level indent in pixels

The toggle button that allows users to collapse and expand the column can be customized to meet your needs. There are two options, dataTreeExpandElement and dataTreeCollapseElement, that can be set to replace the default toggle elements with your own.

Both options can take either an html string representing the contents of the toggle element

By default the toggle element will be inserted into the first column on the table. If you want the toggle element to be inserted in a different column you can pass the field name of the column to the dataTreeElementColumn setup option.

The toggle button that allows users to expand the column.

Propagate selection events from parent rows to children.

By default all nodes on the tree will start collapsed, you can customize the initial expansion state of the tree using the dataTreeStartExpanded option.* This option can take one of three possible value types, either a boolean to indicate whether all nodes should start expanded or collapsed: