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:

filterValueGetter: string | ValueGetterFunc<TData>;

interface ValueGetterFunc<TData = any> {
    (params: ValueGetterParams<TData>) : any
}

interface ValueGetterParams<TData = any> {
  // A utility method for getting other column values 
  getValue: (field: string) => any;
  // Row node for the given row 
  node: RowNode<TData> | null;
  // Data associated with the node 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

<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 and year under a Single Group Column.
• A filterValueGetter is supplied to the group column which returns country values to the filter.

// Loading...

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 and year across Multiple Group Columns.
• A filterValueGetter is supplied to extract the correct filter value for each group column.

// Loading...

Next Up

Continue to the next section to learn about Group Footers.