Vue Data Grid: Row Grouping - Opening Groups
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.
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.
|
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') {
gridOptions.api.setRowNodeExpanded(node, true);
}
});
The following example demonstrates different ways to expand / collapse row groups via the grid API.
Next Up
Continue to the next section to learn about grouping with Complex Objects.