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.


Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню CodeGenerate (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.