Search

Angular 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:

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: 'country', rowGroup: true },
    { field: 'sport', rowGroup: true },
    // ...other column definitions
];

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.
    • Row Grouping - Display Types
    autoGroupColumnDef
    ColDef
    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.
    Group Column Configuration
    groupRowRenderer
    any
    Provide the Cell Renderer to use when groupDisplayType = 'groupRows'.
    Custom Group Row Cell Renderer
    groupRowRendererParams
    any
    Customise the parameters provided to the groupRowRenderer component.
    Configuring Group Row Cell Renderer
    showOpenedGroup
    boolean
    default: false
    Shows the open group in the group column for non-group rows.
    Showing Open Groups
    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.
    Hide Open Parents
    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.
    Remove Single Children
    initialGroupOrderComparator
    Function
    Allows default sorting of groups.
    Initial Group Order
    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.
    Enabling Unbalanced Groups
    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.
    Opening Group Levels by Default
    isGroupOpenByDefault
    Function
    (Client-side Row Model only) Allows groups to be open by default.
    Open Groups by Default
    suppressGroupRowsSticky
    boolean
    default: false
    Initial
    Set to true prevent Group Rows from sticking to the top of the grid.
    Suppressing Sticky Groups
    rowGroupPanelShow
    'always' | 'onlyWhenGrouping' | 'never'
    default: 'never'
    When to show the 'row group panel' (where you drag rows to group) at the top.
    Enabling Row Group Panel
    rowGroupPanelSuppressSort
    boolean
    default: false
    Set to true to suppress sort indicators and actions from the row group panel.
    Suppress Sorting
    groupLockGroupColumns
    number
    default: 0
    Initial
    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.
    Group Lock Group Columns
    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
    Keeping Columns Visible
    suppressGroupChangesColumnVisibility
    boolean | 'suppressHideOnGroup' | 'suppressShowOnUngroup'
    default: false
    Enable to prevent column visibility changing when grouped columns are changed.
    Keeping Columns Visible

    Next Up

    Continue to the next section to learn about Grouping Data.