Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Row Grouping - Group Rows

This section covers the Group Rows display type, where group rows are automatically added by the grid containing the row groups instead of group columns. This can be preferred if you have a lot of information you want to say about the group.

Group Rows

Enabling Group Rows

To display each row group using group rows set groupDisplayType = 'groupRows' as shown below:

<AgGridReact groupDisplayType="groupRows">
    <AgGridColumn field="country" rowGroup={true} />
    <AgGridColumn field="year" rowGroup={true} />
    <AgGridColumn field="sport" />
    <AgGridColumn field="total" />
</AgGridReact>

In the snippet above, rows will be grouped by country and year as both column definitions have rowGroup=true declared. These row groups will be displayed using Group Rows as groupDisplayType = 'groupRows'.

The example below demonstrates the Group Rows display type. Note the following:

  • There are two active row groups as the supplied country and year column definitions have rowGroup=true declared.
  • Instead of group columns, the row groups are displayed using full width group rows as groupDisplayType = 'groupRows'.
  • The country and year columns are not shown in the grid as hide=true is set on their column definitions.
  • Styling has been added to the group rows to highlight the different group levels.

Group Row Configuration

When using Group Rows, it is possible to change the rendering of the group row. This done by either replacing the Cell Renderer with your own Custom Cell Renderer, or configuring the provided Group Cell Renderer.

If using Group Rows and no groupRowRenderer properties are provided, then the default Group Cell Renderer is used with its default values.

// groups by row - the grid defaults to using the default group cell renderer for the row with default settings.
const groupDisplayType = 'groupRows';

<AgGridReact groupDisplayType={groupDisplayType}>
    {/* column definitions ... */}
</AgGridReact>
// identical to above - uses 'agGroupCellRenderer' which is the default, so doesn't change anything.
const groupDisplayType = 'groupRows';
const groupRowRenderer = 'agGroupCellRenderer';

<AgGridReact groupDisplayType={groupDisplayType} groupRowRenderer={groupRowRenderer}>
    {/* column definitions ... */}
</AgGridReact>

Providing Cell Renderer

To provide your own Cell Renderer, use the grid properties groupRowRenderer, groupRowRendererFramework and groupRowRendererParams.

Using your own Cell Renderer hands over rendering of the group row to your custom Cell Renderer. However, that also means the customer Cell Renderer will also need to provide expand / collapse functionality.

// configures Group Rows with a customer Cell Renderer
const groupDisplayType = 'groupRows';
const groupRowRenderer = 'myCellRenderer';
const groupRowRendererParams = {
    someProp: 'someValue',
};

<AgGridReact
    groupDisplayType={groupDisplayType}
    groupRowRenderer={groupRowRenderer}
    groupRowRendererParams={groupRowRendererParams}
>
    {/* column definitions ... */}
</AgGridReact>

Configuring Group Cell Renderer

Configure the default Group Cell Renderer using groupRowRendererParams. Full details on what to configure are provided in the page Group Cell Renderer.

// use Group Rows and configure the Group Cell Renderer
const groupDisplayType = 'groupRows';
const groupRowRendererParams = {
    // puts a checkbox onto each group row
    checkbox: true,
    // puts a row dragger onto each group row
    rowDrag: true
};

<AgGridReact groupDisplayType={groupDisplayType} groupRowRendererParams={groupRowRendererParams}>
    {/* column definitions ... */}
</AgGridReact>

Below shows an example of aggregation with Group Rows. It also provides an innerRenderer to configure what gets displaying inside the row groups, however it keeps the Default Group Cell Renderer for its expand / collapse functionality. Note the following:

  • Each group spans the width of the grid.
  • Each group uses a custom Cell Renderer. The cell renderer shows the aggregation data for each medal type.
  • Each medal column is editable, you can change the number of medals for any of the athletes.
  • The column Year has a filter on it.
  • The cell renderer has logic listening for changes to filtering and data cell changes*. This means the aggregation data in the full with row is updated if:

    1. If you edit any cell
    2. If you filter the data (ie take rows out).

* This is true for Vanilla Javascript and React. Angular uses data binding and thus the aggregation data updates automatically without needing to listen to events.

Next Up

Continue to the next section to learn about the Custom Group Columns display type.