Data Grid - Row grouping recipes

Advanced grid customization recipes.

Toggling groups on row click

In the demo below, you can toggle the group by clicking anywhere on the grouping row:

Pinning a grouped column

Use GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD to pin a grouped column. In the demo below, the Company column is pinned:

Creating and reordering groups with drag and drop

The demo below shows how to add a custom toolbar that enables creating and reordering groups with drag and drop.

Users can drag column headers into the toolbar to create groups, then reorder them by dragging the chips within the toolbar. Groups can be removed by clicking the delete button.

Sorting row groups by the number of child rows

By default, the row grouping column uses sortComparator of the grouping column for sorting.

To sort the row groups by the number of child rows, you can override it using groupingColDef.sortComparator:

Displaying child row count in footer

By default, the row count in the footer is the number of top level rows that are visible after filtering.

In the demo below, a CustomFooterRowCount component is added to the footerRowCount slot. This component uses the gridFilteredDescendantRowCountSelector to get the number of child rows and display it alongside the number of groups.