Vue Data Grid: Row Grouping - Filtering Groups
This section provides details on how to configure and customise how row groups are filtered.
Enabling Group Filtering
In order to filter on row group columns, filtering must be enabled on the group column and a filterValueGetter
should
be supplied to the autoGroupColumnDef
as shown below:
| Function or expression. Gets the value for filtering purposes.
|
<ag-grid-vue
:columnDefs="columnDefs"
:autoGroupColumnDef="autoGroupColumnDef"
:groupDisplayType="groupDisplayType"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{ field: 'country', rowGroup: true, hide: true },
{ field: 'year', rowGroup: true, hide: true },
{ field: 'gold' },
{ field: 'silver' },
{ field: 'bronze' },
];
this.autoGroupColumnDef = {
// enables filtering on the group column
filter: true,
// supplies 'country' values to the filter
filterValueGetter: params => params.data.country,
};
this.groupDisplayType = 'singleColumn';
In the snippet above that rows are grouped by country
and year
, however there is only a single group column.
This is why a filterValueGetter
is required to supply the filter values, in this case country
values.
Note that Adding Values to Leaf Nodes using a valueGetter
or a field
will also allow filtering once the filter = true
column property is enabled. However, filtering will be
performed using the leaf values in this case.
The following example demonstrates filtering with a group column. Note the following:
- Rows are grouped by
country
andyear
under a Single Group Column. - A
filterValueGetter
is supplied to the group column which returnscountry
values to the filter.
Filtering with Multiple Group Columns
Filtering with Multiple Group Columns uses the same approach as described above in
Enabling Group Filtering, however the filterValueGetter
must return
different filter values for each group column, as shown below:
<ag-grid-vue
:columnDefs="columnDefs"
:autoGroupColumnDef="autoGroupColumnDef"
:groupDisplayType="groupDisplayType"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{ field: 'country', rowGroup: true, hide: true },
{ field: 'year', rowGroup: true, hide: true },
{ field: 'gold' },
{ field: 'silver' },
{ field: 'bronze' },
];
this.autoGroupColumnDef = {
// enables filtering on the group column
filter: true,
// supplies filter values to the column filters based on the colId
filterValueGetter: params => {
const colId = params.column.colId;
if (colId.includes('country')) {
return params.data.country;
}
if (colId.includes('year') > -1) {
return params.data.year;
}
},
};
this.groupDisplayType = 'multipleColumns';
Note in the snippet above that the filterValueGetter
uses the colId
to determine which filter value to return,
although different strategies may be required for different column configurations.
The following example demonstrates filtering with multiple group columns. Note the following:
- Rows are grouped by
country
andyear
across Multiple Group Columns. - A
filterValueGetter
is supplied to extract the correct filter value for each group column.
Next Up
Continue to the next section to learn about Group Footers.