React Data GridRow Grouping - Custom Group Filtering

This section shows how to customise row group filtering - such as providing different filters on the group columns than the underlying columns.

Custom Group Column Filtering

To filter across all levels of the grouping in a single filter, you can use the Set Filter Tree List.

Otherwise, in order to know what values to use in the group column filter, a filterValueGetter should be supplied to the autoGroupColumnDef as shown below:

Single Group Column

const [columnDefs, setColumnDefs] = useState([
    { field: 'sport', rowGroup: true, hide: true },
    { field: 'country', rowGroup: true, hide: true },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
]);
const autoGroupColumnDef = useMemo(() => { 
	return { 
        // enables filtering on the group column with specified filter type
        filter: 'agTextColumnFilter',
        // supplies 'sport' values to the filter 
        filterValueGetter: params => params.data.sport,                          
    };
}, []);
const groupDisplayType = 'singleColumn';

<AgGridReact
    columnDefs={columnDefs}
    autoGroupColumnDef={autoGroupColumnDef}
    groupDisplayType={groupDisplayType}
/>

In the snippet above the rows are grouped by sport and country, however there is only a single group column. This is why a filterValueGetter is required to supply the filter values. In this case, reading the sport property from the row.

Note that Adding Values to Leaf Nodes using a valueGetter or a field will also allow filtering once the filter column property is enabled. However, filtering will be performed using the leaf values in this case.

When applying a filter directly on the group column instead of using the Group Column Filter, the filter model is tied to the group column instead of the underlying columns. To set the filter via the Grid API on a single group column (setFilterModel), it needs to be referenced using the name ag-Grid-AutoColumn.

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

The following example demonstrates filtering with a single group column. Note the following:

• Rows are grouped by sport and country under a Single Group Column.
• A filterValueGetter is supplied to the group column which returns sport values to the filter.
• Clicking the Filter Skiing Sports button at the top will set the filter using the Grid API setFilterModel. Note that the reference name ag-Grid-AutoColumn is used.

Multiple Group Columns

Filtering with Multiple Group Columns uses the same approach as described above with a Single Group Column, however the filterValueGetter must return different filter values for each group column, as shown below:

const [columnDefs, setColumnDefs] = useState([
    { field: 'sport', rowGroup: true, hide: true },
    { field: 'country', rowGroup: true, hide: true },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
]);
const autoGroupColumnDef = useMemo(() => { 
	return { 
        // enables filtering on the group column with specified filter type
        filter: 'agTextColumnFilter',
        // supplies filter values to the column filters based on the colId
        filterValueGetter: params => {      
            const colId = params.column.getColId();        
            if (colId.includes('sport')) {
                return params.data.sport;      
            } else if (colId.includes('country')) {
                return params.data.country;      
            }            
        },                        
    };
}, []);
const groupDisplayType = 'multipleColumns';

<AgGridReact
    columnDefs={columnDefs}
    autoGroupColumnDef={autoGroupColumnDef}
    groupDisplayType={groupDisplayType}
/>

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.

Similar to when using a single group column, the filter model is tied to the group columns instead of the underlying columns. To set the filter via the Grid API against each of the group columns, ag-Grid-AutoColumn-[colId] is used, where [colId] is the column id.

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

The following example demonstrates filtering with multiple group columns. Note the following:

• Rows are grouped by sport and country across Multiple Group Columns.
• A filterValueGetter is supplied to extract the correct filter value for each group column.
• Clicking the Filter Skiing Sports button at the top 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.

Group Rows

The Group Rows display type does not have group columns, so filters can only be defined on the underlying columns.

If the columns used in the grouping are hidden, they can still be filtered by using the Filters Tool Panel.

The following example demonstrates filtering with row groups. Note the following:

• Rows are grouped by sport and country under Group Rows.
• The Filters Tool Panel is shown, which allows filtering to be performed on sport and country values.

Next Up

Continue to the next section to learn about Opening Groups.