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.
DxTableGroupRow plugins to set up a Grid with simple static grouping.
Specify the expanded group keys in the
expandedGroups property and subscribe to the
update:expandedGroups event to control group expanding/collapsing. Use the
.sync modifier for two-way binding.
In the following examples, the grouping options are specified using the
grouping property. However, the
update:grouping 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
DxCustomGrouping 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.
DxTableHeaderRow 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.
Specify the grouping options in the
grouping property and subscribe to the
update:grouping event. Use the
.sync modifier for two-way binding.
You can disable grouping/ungrouping for a specific column using the DxGroupingState plugin’s
Pass a grouping criterion function to the
DxIntegratedGrouping 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
update:expandedGroups events and request data from the server using the newly applied grouping options.
CustomGrouping plugin instead of the
DxIntegratedGrouping 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
DxGroupingState plugin. This means configuration changes are not applied to the
DxGrid 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
DxGrid simultaneously applies the changes to its grouping configuration and receives the updated data set.
The following example demonstrates remote grouping with local expanding/collapsing, as well as the approach described in the previous paragraph: