React Data GridRow Grouping

Enterprise

The Grid can group rows with equivalent cell values under shared parent rows.

Enabling Row Grouping Copy Link

Row Grouping is enabled by setting rowGroup to true on one or more Column Definition. Group rows are then introduced for each unique value in that column, containing the rows with that value.

The example above uses the following configuration to group rows by their country and year values:

const [columnDefs, setColumnDefs] = useState([
    { field: 'country', rowGroup: true },
    { field: 'sport', rowGroup: true },
    // ...other column definitions
]);

<AgGridReact columnDefs={columnDefs} />

API Reference Copy Link

groupDisplayTypeCopy Link
RowGroupingDisplayType
Specifies how the results of row grouping should be displayed. The options are:
  • 'singleColumn': single group column automatically added by the grid.
  • 'multipleColumns': a group column per row group is added automatically.
  • 'groupRows': group rows are automatically added instead of group columns.
  • 'custom': informs the grid that group columns will be provided.
  • autoGroupColumnDefCopy Link
    Allows specifying the group 'auto column' if you are not happy with the default. If grouping, this column definition is included as the first column in the grid. If not grouping, this column is not included.
    groupRowRendererCopy Link
    any
    Provide the Cell Renderer to use when groupDisplayType = 'groupRows'.
    groupRowRendererParamsCopy Link
    any
    Customise the parameters provided to the groupRowRenderer component.
    showOpenedGroupCopy Link
    boolean
    default: false
    Shows the open group in the group column for non-group rows.
    groupHideOpenParentsCopy Link
    boolean
    default: false
    Set to true to hide parents that are open. When used with multiple columns for showing groups, it can give a more pleasing user experience.
    groupHideParentOfSingleChildCopy Link
    boolean | 'leafGroupsOnly'
    default: false
    Enable to display the child row in place of the group row when the group only has a single child.
    initialGroupOrderComparatorCopy Link
    Function
    Allows default sorting of groups.
    groupAllowUnbalancedCopy Link
    boolean
    default: false
    Set to true to prevent the grid from creating a '(Blanks)' group for nodes which do not belong to a group, and display the unbalanced nodes alongside group nodes.
    groupMaintainOrderCopy Link
    boolean
    default: false
    When true, preserves the current group order when sorting on non-group columns.
    groupDefaultExpandedCopy Link
    number
    default: 0
    If grouping, set to the number of levels to expand by default, e.g. 0 for none, 1 for first level only, etc. Set to -1 to expand everything.
    isGroupOpenByDefaultCopy Link
    Function
    (Client-side Row Model only) Allows groups to be open by default.
    suppressGroupRowsStickyCopy Link
    boolean
    default: false
    Set to true prevent Group Rows from sticking to the top of the grid.
    rowGroupPanelShowCopy Link
    'always' | 'onlyWhenGrouping' | 'never'
    default: 'never'
    When to show the 'row group panel' (where you drag rows to group) at the top.
    rowGroupPanelSuppressSortCopy Link
    boolean
    default: false
    Set to true to suppress sort indicators and actions from the row group panel.
    groupLockGroupColumnsCopy Link
    number
    default: 0
    If grouping, locks the group settings of a number of columns, e.g. 0 for no group locking. 1 for first group column locked, -1 for all group columns locked.
    suppressDragLeaveHidesColumnsCopy Link
    boolean
    default: false
    By default, dragging a column out of the grid, i.e. to the Row Group Panel, it will be hidden in the grid. This property prevents the column becoming hidden in the grid. Default: false
    suppressGroupChangesColumnVisibilityCopy Link
    boolean | 'suppressHideOnGroup' | 'suppressShowOnUngroup'
    default: false
    Enable to prevent column visibility changing when grouped columns are changed.

    Next Up Copy Link

    Continue to the next section to learn about Grouping Data.