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:
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 ... */ />
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
andyear
column definitions haverowGroup=true
declared.A group column is added to the left-hand side of the grid as there are active row groups.
The
country
andyear
columns are hidden ashide=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.
- Locking Group Columns - Lock Group Columns to prevent ungrouping and rearranging of group columns by user.
- 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 Totals - add group totals showing totals for each group level.
- Opening Groups - control how row groups are expanded and collapsed.
- Complex Objects - group rows using row data that contains complex objects.
- Unbalanced Groups - group rows when there are
null
orundefined
group values.
API Reference
Row Grouping can be configured using the following grid properties:
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. |
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. |
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. |
When true , preserves the current group order when sorting on non-group columns. |
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. |
When provided, an extra row group total row will be inserted into row groups at the specified position, to display
when the group is expanded. This row will contain the aggregate values for the group. If a callback function is
provided, it can be used to selectively determine which groups will have a total row added. |
When provided, an extra grand total row will be inserted into the grid at the specified position.
This row displays the aggregate totals of all rows in the grid. |
Suppress the sticky behaviour of the total rows, can be suppressed individually by passing 'grand' or 'group' . |
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. |
Shows the open group in the group column for non-group rows. |
(Client-side Row Model only) Allows groups to be open by default. |
Allows default sorting of groups. |
Set to true to collapse groups that only have one child. |
Set to true to collapse lowest level groups that only have one child. |
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. |
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. |
When to show the 'row group panel' (where you drag rows to group) at the top. |
Set to true to suppress sort indicators and actions from the row group panel. |
Provide the Cell Renderer to use when groupDisplayType = 'groupRows' . |
Customise the parameters provided to the groupRowRenderer component. |
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 |
Set to true prevent Group Rows from sticking to the top of the grid. |
If true , when you drag a column into a row group panel the column is not hidden. |
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. Default: false |
Set to true to enable the Grid to work with Tree Data. You must also implement the getDataPath(data) callback. |
Callback to be used when working with Tree Data when treeData = true . |
Next Up
Continue to the next section to learn about the different Row Grouping Display Types.