Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

Angular Data GridRow GroupingEnterprise

Row Grouping allows rows to be grouped by columns with the grid performing a 'group by' operation on the rows supplied to the grid. This section introduces Row Grouping and provides links to subsections that cover the various ways Row Grouping can be configured and customised.

The grid can be configured to initially display rows in a grouped state or rows can be grouped programmatically through the grid API's. Users can also manually group rows through the UI as shown below:

Row Grouping

Enabling Default Row Grouping

To group rows by a particular column, enable the rowGroup column property as shown below:

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

this.columnDefs = [
    { field: 'country', rowGroup: true, hide: true },
    { field: 'year', rowGroup: true, hide: true },
    { field: 'sport' },
    { field: 'total' }
];

In the snippet above, rows will be grouped by country and year as both column definitions have rowGroup=true declared.

Note that the Single Group Column display type is used by default.

The example below demonstrates the default row grouping behaviour. Note the following:

  • There are two active row groups as the supplied country and year column definitions have rowGroup=true declared.
  • A group column is added to the left-hand side of the grid as there are active row groups.
  • The country and year columns are hidden as hide=true on their column definitions.

Row Grouping Customisations

The previous example demonstrated the Default Row Grouping behavior, however extensive Row Grouping customisations are also possible as summarised below:

  • Display Types - compares the different ways row groups can be displayed in the grid.

    • Single Group Column - a single group column is automatically added by the grid for all row groups.
    • Multiple Group Columns - group columns are automatically added by the grid for each row group.
    • Group Rows - group rows are automatically added by the grid containing the row groups instead of group columns.
    • Custom Group Columns - customise how row groups are displayed without using the built-in display types.
  • Row Group Panel - add a panel above the grid to allow users control which columns the rows are grouped by.
  • Group Order - control how row groups are ordered.
  • Sorting Groups - configure and customise how row groups are sorted.
  • Filtering Groups - configure and customise how row groups are filtered.
  • Group Footers - add group footers showing totals for each group level.
  • Opening Groups - control how row groups are expanded and collapsed.
  • Complex Objects - group rows using row data contains complex objects.
  • Unbalanced Groups - group rows when there are null or undefined group values.

API Reference

Row Grouping can be configured using the following grid properties:

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.
    • See Row Grouping - Display Types.
    groupDisplayType: RowGroupingDisplayType;

type RowGroupingDisplayType = 
      'singleColumn' 
    | 'multipleColumns' 
    | 'groupRows' 
    | 'custom'
    groupDefaultExpanded
    number
    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. See Opening Group Levels by Default.
    Default: 0
    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. See Group Column Configuration.
    groupMaintainOrder
    boolean
    When true, preserves the current group order when sorting on non-group columns. See Maintain Group Order.
    Default: false
    groupSelectsChildren
    boolean
    When true, if you select a group, the children of the group will also be selected. See Group Selection.
    Default: false
    groupIncludeFooter
    boolean
    If grouping, this controls whether to show a group footer when the group is expanded. If true, then by default, the footer will contain aggregate data (if any) when shown and the header will be blank. When closed, the header will contain the aggregate data regardless of this setting (as the footer is hidden anyway). This is handy for 'total' rows, that are displayed below the data when the group is open, and alongside the group when it is closed. See Enabling Group Footers.
    Default: false
    groupIncludeTotalFooter
    boolean
    Set to true to show a 'grand total' group footer across all groups. See Enabling Group Footers.
    Default: false
    groupSuppressBlankHeader
    boolean
    If true, and showing footer, aggregate data will always be displayed at both the header and footer levels. This stops the possibly undesirable behaviour of the header details 'jumping' to the footer on expand.
    Default: false
    groupRowsSticky
    boolean
    Set to true to keep open Group Rows visible at the top of the grid. See Sticky Groups.
    Default: false.
    groupSelectsFiltered
    boolean
    If using groupSelectsChildren, then only the children that pass the current filter will get selected. See Group Selection.
    Default: false
    showOpenedGroup
    boolean
    Shows the open group in the group column for non-group rows. See Showing Open Groups.
    Default: false
    isGroupOpenByDefault
    Function
    (Client-side Row Model only) Allows groups to be open by default. 
    isGroupOpenByDefault = (
    params: IsGroupOpenByDefaultParams<TData>
) => boolean;

interface IsGroupOpenByDefaultParams<TData = any, TContext = any> {
  // The row node being considered. 
  rowNode: IRowNode<TData>;
  // The Column for which this row is grouping. 
  rowGroupColumn: Column;
  // Same as `rowNode.level` - what level the group is at, e.g. 0 for top level, 1 for second etc 
  level: number;
  // Same as `rowNode.field` - the field we are grouping on, e.g. 'country' 
  field: string;
  // Same as `rowNode.key`, the value of this group, e.g. 'Ireland' 
  key: string;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
    initialGroupOrderComparator
    Function
    Allows default sorting of groups. See Initial Group Order.
    initialGroupOrderComparator = (
    params: InitialGroupOrderComparatorParams<TData>
) => number;

interface InitialGroupOrderComparatorParams<TData = any, TContext = any> {
  nodeA: IRowNode<TData>;
  nodeB: IRowNode<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
    groupRemoveSingleChildren
    boolean
    Set to true to collapse groups that only have one child. See Remove Single Children.
    groupRemoveLowestSingleChildren
    boolean
    Set to true to collapse lowest level groups that only have one child. See Remove Single Children.
    Default: false
    groupHideOpenParents
    boolean
    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. See Hide Open Parents.
    Default: false
    groupAllowUnbalanced
    boolean
    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. See Enabling Unbalanced Groups.
    Default: false
    rowGroupPanelShow
    'always' | 'onlyWhenGrouping' | 'never'
    When to show the 'row group panel' (where you drag rows to group) at the top. See Enabling Row Group Panel.
    Default: never
    rowGroupPanelSuppressSort
    boolean
    Set to true to suppress sort indicators and actions from the row group panel. See Suppress Sorting.
    Default: false.
    groupRowRenderer
    any
    Provide the Cell Renderer to use when groupDisplayType = 'groupRows'. See Group Row Cell Renderer.
    groupRowRendererParams
    any
    Customise the parameters provided to the groupRowRenderer component.
    suppressDragLeaveHidesColumns
    boolean
    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. See Keeping Columns Visible.
    Default: false
    suppressRowGroupHidesColumns
    boolean
    If true, when you drag a column into a row group panel the column is not hidden. See Keeping Columns Visible.
    Default: false
    suppressMakeColumnVisibleAfterUnGroup
    boolean
    By default, when a column is un-grouped, i.e. using the Row Group Panel, it is made visible in the grid. This property stops the column becoming visible again when un-grouping. See Keeping Columns Visible.
    Default: false
    treeData
    boolean
    Set to true to enable the Grid to work with Tree Data. You must also implement the getDataPath(data) callback. See Tree Data.
    getDataPath
    GetDataPath
    Callback to be used when working with Tree Data when treeData = true. See Tree Data.
    getDataPath: GetDataPath<TData>;

interface GetDataPath<TData = any> {
    (data: TData) : string[]
}

    Next Up

    Continue to the next section to learn about the different Row Grouping Display Types.