JavaScript 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

Function or expression. Gets the value for filtering purposes.

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: IRowNode<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;
}

const gridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true, hide: true },
        { field: 'year', rowGroup: true, hide: true },
        { field: 'gold' },
        { field: 'silver' },
        { field: 'bronze' },
    ],
    autoGroupColumnDef: { 
        // enables filtering on the group column
        filter: true,
        // supplies 'country' values to the filter 
        filterValueGetter: params => params.data.country,                          
    },
    groupDisplayType: 'singleColumn',

    // other grid options ...
}

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.

Example: Enabling Group Filtering

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:

const gridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true, hide: true },
        { field: 'year', rowGroup: true, hide: true },
        { field: 'gold' },
        { field: 'silver' },
        { field: 'bronze' },
    ],
    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.getColId();        
            if (colId.includes('country')) {
                return params.data.country;      
            } else if (colId.includes('year')) {
                return params.data.year;      
            }            
        },                        
    },
    groupDisplayType: 'multipleColumns',

    // other grid options ...
}

Note in the snippet above that the filterValueGetter uses the colId value 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.

Example: Filtering with Multiple Group Columns

Applying Filter Model to Grouped Columns

When a column is grouped, and the group column can be filtered, in order to set the filter via the Grid API on the group column (setFilterModel), it needs to be referenced with a particular name that’s different from the group column name itself. The reference depends on the groupDisplayType used:

For Single group column (the default if nothing is set), ag-Grid-AutoColumn is used
For Multiple group columns, ag-Grid-AutoColumn-[colId] is used, where [colId] is the column id

Single Group Column

In the following example, it is displaying the default single group column and when you click on the button at the top, it will set the filter using the Grid API setFilterModel. Note that the reference name ag-Grid-AutoColumn is used since it is using single group column.

gridOptions.api.setFilterModel({
    'ag-Grid-AutoColumn': {
        filterType: 'text',
        type: 'contains',
        filter: 'Skiing'
    },
});

Example: Applying Filter Model with Single Group Column

Multiple Group Columns

In the following example, multiple group columns are set up and when you click on the button at the top, it will set the filter using the Grid API setFilterModel. Note that the reference name ag-Grid-AutoColumn-sport is used, as sport is the column id for the column where the filter is changing.

gridOptions.api.setFilterModel({
    'ag-Grid-AutoColumn-sport': {
        filterType: 'text',
        type: 'contains',
        filter: 'Skiing'
    },
});

Example: Applying Filter Model with Multiple Group Columns

Next Up

Continue to the next section to learn about Group Footers.