treeDataGrid is a component for displaying hierarchical tabular data grouped into expandable and collapsible nodes.

  • XML element: treeDataGrid

  • Java class: TreeDataGrid


treeDataGrid primarily replicates the functionality of the dataGrid component.

An example of treeDataGrid declaration in the XML view descriptor is shown below:

<data readOnly="true">
    <collection id="departmentsDc"
                class=""> (1)
        <fetchPlan extends="_base">
            <property name="hrManager" fetchPlan="_base"/>
            <property name="parentDepartment" fetchPlan="_base"/>
        <loader id="departmentsDl">
                <![CDATA[select e from Department e]]>
    <treeDataGrid id="departmentsTable"
                  dataContainer="departmentsDc"> (2)
        <columns> (3)
            <column property="name"/>
            <column property="hrManager"/>
1 Collection container for the Department entity.
2 treeDataGrid is bound to the departmentsDc container using the dataContainer attribute.
3 The columns element defines which entity attributes are shown in the tree data grid columns.
tree data grid basics



The hierarchyProperty attribute is required. It defines the name of the entity attribute, which refers to the same entity.


An orphan record is a child record that refers to a parent that doesn’t exist. Usually it’s a result of loading only a part of data from the database due to filtering or paging.

The showOrphans attribute is used to control the visibility of orphan records. If it’s set to false, the component doesn’t show orphan records. If showOrphans is set to true, orphan records are displayed on the top level as roots.

The default value is false.

Not showing orphans looks like a natural choice when using filters. However, it doesn’t help with paging (some pages will be empty or half-populated). So do not use the SimplePagination component together with treeDataGrid.


To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the CodeGenerate menu (Alt+Insert / Cmd+N).


com.vaadin.flow.component.treegrid.CollapseEvent is fired when the item is collapsed.


com.vaadin.flow.component.treegrid.ExpandEvent is fired when the item is expanded.


See Also

See the Vaadin Docs for more information.