The Grid component can show tree data. Use the corresponding plugins to show tree data and manage the expanded rows' state programmatically or via the UI (a column that contains UI elements for row expanding/collapsing).
The following plugins implement tree data support:
Note that the plugin order is important.
TableTreeColumn plugins to set up a Grid with simple tree data structure.
In the following example, the data is specified as grouped array. Specify the
getChildRows property to parse the given array.
You can also transform tree data defined as a plain array.
In uncontrolled mode, specify the initially expanded rows' IDs in the
In controlled mode, pass the expanded row ids to the
expandedRowIds property and handle the
onExpandedRowIdsChange event to control the tree data state externally.
TableTreeColumn plugin allows showing hierarchical selection controls.
Do the following to enable this feature:
SelectionStateplugin. See Selection.
showSelectionControlsproperty to true to show checkboxes.
You can also combine the
TableTreeColumn plugin with the
TableSelection plugin to highlight the selected rows and handle the click event on the entire row.
Do the following to show the Select All checkbox in the header row:
TableHeaderRowplugin. See Fundamentals.
IntegratedSelectionplugin. See Selection.
showSelectAllproperty to true to show Select All checkbox.
You can handle the Grid's tree data state changes to request nested data from the server according to the expanded row ID.
Tree data options are updated once an end-user interacts with the UI. Handle option changes using the
onExpandedRowIdsChange event and request data from the server using the applied tree data options. Once the page data is received from the server, pass it to the