Search

React Data GridRow Grouping - Unbalanced Groups

Enterprise

This section covers Unbalanced Groups - when grouping by rows that can contain null or undefined group values.

Handling Unbalanced Groups

By default, unbalanced rows (rows containing null, undefined or empty values for the column that is being grouped) get grouped together as (Blanks). To instead have the nodes remain ungrouped, you can enable the groupAllowUnbalanced grid option. We refer to this scenario as Unbalanced Groups in that there is a mix of groups and rows as siblings.

The following example demonstrates:

  • The groupAllowUnbalanced grid option has been set to true.
  • Data is grouped by column 'State'. Rows are either grouped by state 'New York', 'California' or not grouped.
  • Removing the grouping shows that the non grouped rows have no 'State' value.

Balanced Groups

When not using unbalanced groups, the grid will, by default, create a (Blanks) group and populate it with any rows without a valid group value. The following example demonstrates this default behaviour:

Custom Unbalanced Group Sorting

When using unbalanced groups, the grid will sort the ungrouped rows to the top of the grid, due to these rows having a null value for the sorted column.

In the example below note how an autoGroupColumnDef.comparator has been provided, which disables the linked sorting behaviour of groups, instead using a custom sort which enables the unbalanced rows to be sorted amongst the groups.