This section covers different ways to control how row groups are expanded and collapsed.
Opening Group Levels by Default
To open all groups down to a given group level use the groupDefaultExpanded
grid option as shown below:
<ag-grid-vue
:columnDefs="columnDefs"
:groupDefaultExpanded="groupDefaultExpanded"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{ field: 'country', hide: true, rowGroup: true },
{ field: 'year', hide: true, rowGroup: true },
{ field: 'sport' },
{ field: 'total' }
];
// all 'country' row groups will be open by default
this.groupDefaultExpanded = 1;
In the snippet above, all country
row groups will be expanded by default as groupDefaultExpanded = 1
.
By default groupDefaultExpanded = 0
which means no groups are expanded by default. To expand all row groups set groupDefaultExpanded = -1
.
The example below demonstrates the groupDefaultExpanded
behaviour. Note the following:
There are two active row groups as the supplied
country
andyear
column definitions haverowGroup=true
declared.All
country
row groups are expanded by default asgroupDefaultExpanded = 1
.
Open Groups by Default
To have groups open by default, implement the grid callback isGroupOpenByDefault
. This callback is invoked each time a group is created.
<ag-grid-vue
:isGroupOpenByDefault="isGroupOpenByDefault"
/* other grid options ... */>
</ag-grid-vue>
// expand when year is '2004' or when country is 'United States'
this.isGroupOpenByDefault = params => {
return (params.field == 'year' && params.key == '2004') ||
(params.field == 'country' && params.key == 'United States');
};
The params passed to the callback have the IsGroupOpenByDefaultParams
interface:
Properties available on the IsGroupOpenByDefaultParams<TData = any, TContext = any>
interface.
The row node being considered. |
The Column for which this row is grouping. |
Same as rowNode.level - what level the group is at, e.g. 0 for top level, 1 for second etc |
Same as rowNode.field - the field we are grouping on, e.g. 'country' |
Same as rowNode.key , the value of this group, e.g. 'Ireland' |
The grid api. |
Application context as set on gridOptions.context . |
In the example below, the country 'United States' and year '2004' are expanded by default. Note that year '2004' is expanded for all countries, not just 'United States'.
Expand / Collapse Groups via API
It is possible to expand and collapse all group rows using the expandAll()
and collapseAll()
grid API's as shown below:
Expand all groups. |
Collapse all groups. |
When more custom behaviour is required, obtain a reference to the rowNode and then call api.setRowNodeExpanded(rowNode, boolean)
.
Expand or collapse a specific row node, optionally expanding/collapsing all of its parent nodes.
By default rows are expanded asynchronously for best performance. Set forceSync: true if you need to interact with the expanded row immediately after this function. |
For example, to expand a group with the name 'United States' would be done as follows:
this.gridApi.forEachNode(node => {
if (node.key === 'United States') {
api.setRowNodeExpanded(node, true);
}
});
The following example demonstrates different ways to expand / collapse row groups via the grid API.
Expanding Groups & Vertical Scroll Location
Depending on your scroll position the last item's group data may not be visible when clicking on the expand icon.
You can resolve this by using the function api.ensureIndexVisible()
. This ensures the index is visible, scrolling the table if needed.
In the example below, if you expand a group at the bottom, the grid will scroll so all the children of the group are visible.
Next Up
Continue to the next section to learn about grouping with Complex Objects.