This section describes the different ways that aggregated values can be filtered in the grid.
By default, when using Filters and Aggregations the filtering will only apply to the cell values in leaf-level rows, and not to any of the aggregated values in the group rows. Also, when a column filter is applied, the aggregated values shown in the group rows will be updated based on the filtered rows only.
<ag-grid-angular
[columnDefs]="columnDefs"
/* other grid options ... */>
</ag-grid-angular>
this.columnDefs = [
{ field: 'country', rowGroup: true },
{ field: 'athlete', rowGroup: true },
{ field: 'year' },
{ field: 'total', aggFunc: 'sum', filter: 'agNumberColumnFilter' },
];
In the snippet above, rows are grouped by country and athlete. The Built-In Function sum
is used to aggregate the total values.
The example below demonstrates how aggregated values update to reflect the applied filters.
To prevent the Default Behaviour of Aggregated values being calculated from the Filtered results only, and instead calculate them from the pre-filtered data, enable the suppressAggFilteredOnly
option.
<ag-grid-angular
[suppressAggFilteredOnly]="suppressAggFilteredOnly"
/* other grid options ... */>
</ag-grid-angular>
this.suppressAggFilteredOnly = true;
The example below demonstrates this behaviour - when a filter is applied, group row aggregated values remain unchanged and show their original values representing the original unfiltered data.
The Default Behaviour of Filtering is to only filter the leaf-level rows and to ignore cell values in Group Rows. This prevents filtering group rows based on Aggregation values.
By default, column filters are not applied to cell values shown in Group Rows as they do not usually have any data of their own. However when using Aggregation, group rows will show aggregated values computed based on their child rows.
You can filter the grid based on the group row aggregated values by setting the groupAggFiltering
grid option as shown below:
<ag-grid-angular
[groupAggFiltering]="groupAggFiltering"
/* other grid options ... */>
</ag-grid-angular>
this.groupAggFiltering = true;
With this option set, when an aggregated value in a group row matches the filter, the matching group row will be shown as well as:
The example below demonstrates the behaviour when filtering aggregated values. Please go through the list of filtering scenarios below to better understand this functionality.
Note the following:
Take note of the following while using groupAggFiltering
:
groupAggFiltering
is enabled, Suppressing Filtered Aggregation is enabled by default.groupAggFiltering
will be different. See Tree Data Filtering.As seen above, the default behaviour of Filtering Group Aggregations is to apply the filter to all row group levels. If you’d like to change this behaviour and apply the filter only to specific group row levels, or specific grouped columns (regardless of the level at which these group columns appear), a callback can be provided to the groupAggFiltering
property.
See an example implementation of this callback below.
<ag-grid-angular
[groupAggFiltering]="groupAggFiltering"
/* other grid options ... */>
</ag-grid-angular>
this.groupAggFiltering = (params) => !!params.node.group;
The snippet above demonstrates how the callback can be used to selectively apply filters. In this example, the filter condition is applied to group level rows only.
The example below demonstrates this specific scenario.
The properties of the Row Node provided by the groupAggFiltering
callback parameters can be used to further customise row group filtering behaviour.
levelTypenumber | How many levels this node is from the top when grouping. |
groupTypeboolean | undefined | true if this node is a group node (i.e. it has children) |
leaf | true if this node is a group and the group is the bottom level in the tree. |
row | The row group column used for this group. |
Continue to the next section to learn about Other Aggregation Topics.