JavaScript Data GridRow Grouping

Enterprise

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

Enabling Row Grouping

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 gridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true },
        { field: 'sport', rowGroup: true },
        // ...other column definitions
    ],

    // other grid options ...
}

API Reference

groupDisplayType
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.
  • autoGroupColumnDef
    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.
    groupRowRenderer
    any
    Provide the Cell Renderer to use when groupDisplayType = 'groupRows'.
    groupRowRendererParams
    any
    Customise the parameters provided to the groupRowRenderer component.
    showOpenedGroup
    boolean
    default: false
    Shows the open group in the group column for non-group rows.
    groupHideOpenParents
    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.
    groupHideParentOfSingleChild
    boolean | 'leafGroupsOnly'
    default: false
    Enable to display the child row in place of the group row when the group only has a single child.
    initialGroupOrderComparator
    Function
    Allows default sorting of groups.
    groupAllowUnbalanced
    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.
    groupMaintainOrder
    boolean
    default: false
    When true, preserves the current group order when sorting on non-group columns.
    groupDefaultExpanded
    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.
    isGroupOpenByDefault
    Function
    (Client-side Row Model only) Allows groups to be open by default.
    suppressGroupRowsSticky
    boolean
    default: false
    Set to true prevent Group Rows from sticking to the top of the grid.
    rowGroupPanelShow
    'always' | 'onlyWhenGrouping' | 'never'
    default: 'never'
    When to show the 'row group panel' (where you drag rows to group) at the top.
    rowGroupPanelSuppressSort
    boolean
    default: false
    Set to true to suppress sort indicators and actions from the row group panel.
    groupLockGroupColumns
    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.
    suppressDragLeaveHidesColumns
    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
    suppressGroupChangesColumnVisibility
    boolean | 'suppressHideOnGroup' | 'suppressShowOnUngroup'
    default: false
    Enable to prevent column visibility changing when grouped columns are changed.

    Next Up

    Continue to the next section to learn about Grouping Data.