Vue Data GridTree Data - Filtering

Filtering can be applied to Tree Data to reduce the range of displayed data.

Filtering

By default, when a group row passes a Filter, the children will also be displayed.

The example below applies a filter to the group column for 'ProjectAlpha', note that two 'ProjectAlpha' groups are displayed alongside all of their children.

Exclude Children when Filtering

To omit children when a group row passes a filter, set excludeChildrenWhenTreeDataFiltering to true in the grid options.

The example below applies a default filter to the group column for 'ProjectAlpha', note that only one 'ProjectAlpha' group passes the filter instead of two - this is because the Desktop -> ProjectAlpha group is a Filler Group.

This demonstrates the following configuration:

<ag-grid-vue
    :excludeChildrenWhenTreeDataFiltering="excludeChildrenWhenTreeDataFiltering"
    /* other grid options ... */>
</ag-grid-vue>

this.excludeChildrenWhenTreeDataFiltering = true;

Ignore Filters when Aggregating Values

When using Tree Data and filters, the aggregates are only calculated from the rows which pass the filter. This can be changed by enabling the grid option suppressAggFilteredOnly.

The example below has a filter applied resulting in only one of the Documents children being displayed. Note that when the suppressAggFilteredOnly option is toggled on, the Documents group aggregation will display the sum of all children, regardless of the filter.

This demonstrates the following configuration:

<ag-grid-vue
    :suppressAggFilteredOnly="suppressAggFilteredOnly"
    /* other grid options ... */>
</ag-grid-vue>

this.suppressAggFilteredOnly = true;

Filter Components

Tree Filter

The Tree Filter is a version of the Set Filter that is designed to work with hierarchical data by displaying the set filter in a tree structure that matches the data.

The example below demonstrates the Tree Filter on the Group column:

This demonstrates the following configuration to enable the Tree List Filter. Note that a keyCreator must be used to convert each path into a unique string:

<ag-grid-vue
    :autoGroupColumnDef="autoGroupColumnDef"
    /* other grid options ... */>
</ag-grid-vue>

this.autoGroupColumnDef = {
    filter: 'agSetColumnFilter',
    filterParams: {
        treeList: true,
        keyCreator: (params) => (params.value ? params.value.join('#') : null),
    },
};

For further information, refer to the Tree Filter documentation.

Set Filter

The Set Filter can be used with Tree Data to list all unique values across each level of the group hierarchy.

The example below demonstrates the Set Filter on the Size column.