The Grid component supports grouping data by one or several column values. Use the corresponding plugins or UI (Group Panel and column headers) to manage the grouping state and group data programmatically.
The following plugins implement grouping features:
Note that plugin order is important.
TableGroupRow plugins to set up a Grid with simple static grouping.
In the following examples, the grouping options are specified using the
grouping property, which is usual for the controlled mode. However, the
onGroupingChange event handler is not specified because the grouping option is not supposed to be changed internally as the grouping UI is not available.
In the following example, the data is specified as plain rows. In this case, the data should be grouped using the
CustomGrouping plugin if the data has a hierarchical structure (already grouped).
In the following example, the data is specified as an array of groups. Specify the
getChildGroups property to parse a custom group structure.
TableHeaderRow plugins in addition to those used for the basic setup to enable the grouping UI. You can configure the UI to provide any of the following methods for specifying grouping options:
You can also set the
showSortingControls option to true to enable sorting data by a grouped column.
In the following example, the Grid functions are in the uncontrolled mode. This means that the Grid controls its grouping state internally. The initial grouping options are specified in the
In controlled mode, pass a grouping options array to the
grouping property and handle the
onGroupingChange event to control the grid grouping state.
You can disable grouping/ungrouping for a specific column using the GroupingState plugin's
Pass a grouping criterion function to the
IntegratedGrouping plugin’s columnExtensions property to group data by a custom key based on the specified column's value. Set the columns configuration's
showWhenGrouped field to true to avoid hiding the column when data is grouped by this column. In the following example, data is grouped by the first letter of the "city" column's values while still displaying the column.
You can also assign a Boolean value to the
showColumnsWhenGrouped property to define what columns should remain visible when they group data.
Note that if the grouping criterion function returns a non-primitive value, you should also specify a custom group cell template using the
cellComponent property as demonstrated in the following example:
You can perform remote grouping by handling grouping state changes, generating a request based on the grouping state and sending it to a server that can return grouped data.
Grouping options are updated whenever an end-user interacts with the grouping UI. Handle grouping option changes using the
onExpandedGroupsChange events and request data from the server using the newly applied grouping options.
CustomGrouping plugin instead of the
IntegratedGrouping plugin for remote grouping.
While waiting for a response from a server, there is a moment when the grouping state does not match the data in the
rows property. To avoid issues, temporarily assign the
expandedGroups state fields' "old" values to the properties with the same names in the
GroupingState plugin. This means configuration changes are not applied to the
Grid immediately. Once the grouped data is received from the server, pass it to the
rows property and reset the
expandedGroups property values (set them to
null). At this point, the
Grid simultaneously applies the changes to its grouping configuration and receives the updated data set.
The following example demonstrates remote grouping with local expanding/collapsing, and the approach described in the previous paragraph:
In Safari, the virtual table is scrolled when a user drags a column header. This is caused by a bug in WebKit: Unable to call event.preventDefault in dynamically added event listener.