Vue PivotGrid - Filtering

With the PivotGrid UI component, you can navigate through data in three dimensions. The first two dimensions are formed by fields of the row and column areas. The third dimension has no visual representation and is linked with the filter area. Filter area fields (along with the fields in other two areas) can participate in data filtering. This article describes how to filter pivot grid data in the UI and in code.

Filtering in the UI

To enable the filtering feature globally, set the PivotGrid.allowFiltering property to true. This property can also be set for each separate field (fields | allowFiltering).

When the filtering feature is enabled for a field (enabled globally and not disabled for the field or enabled in the field configuration) and the field belongs to an area, the filter icon (DevExtreme PivotGrid: Filter icon) appears at the right part of the field in the Field Chooser or the Field Panel. Click this icon to select the fields to be included in the data set displayed by the pivot grid.

When filtering by the fields group, the filter becomes hierarchical and field values are arranged in a tree. In this case, you can configure your filter more precisely in comparison with filtering by a set of independent fields.

DevExtreme PivotGrid: Header filter

NOTE
If all fields are selected for filtering or if no fields are selected, data is displayed as if filtering was disabled (therefore, all fields are displayed).

Filtering in Code

To apply a filter in code, set the filterType and filterValues properties of the field.

The example of filtering data by a field in the hidden 'filter' area is presented below.

JavaScript
fields: [
//...
{
    area: 'filter', 
    dataField: 'OrderDate',
    groupInterval: 'year', 
    dataType: 'date',
    filterType: 'include',
    filterValues: [2014, 2015]
}]

The filter above allows you to exclude data for all years except for 2014 and 2015.

NOTE
If you need to filter data by the group field, assign an array of arrays to the filterValues property. Each item of the filterValues array should contain a filtering condition for each field in the group.

You can get and apply filters at runtime using the filter() and filter(filterExpr) methods.