Skip to main content Skip to footer

Hide Column Filter Options in React

Background:

Some developers may want to prevent users from filtering by certain properties. Its possible to prevent users from selecting either 'Filter by Condition' or 'Filter by Value' to limit their filtering options.

Steps to Complete:

1. Initialize the engine inside of the constructor

2. Create a field variable to hold the fields of the engine that we want to change

3. Set the filter type for the fields

Getting Started

Initialize the engine inside of the constructor

Since the PivotEngine is what is going to have all the work done on it, it'll need to be initialized, which will be done in the constructor of the class

this.engine = new wjcOlap.PivotEngine({
    itemsSource: this.state.data,
    rowFields: ['Country', 'Product'],
    valueFields: ['Sales', 'Downloads'],
    columnFields: ['Active']
});

Create a field variable to hold the fields of the engine that we want to change

Next, a variable is going to be needed to update the filterTypes of the different fields in the PivotEngine. That will get set as specific fields that we want to change.

let field = this.engine.fields.getField('Id');

Set the filter type for the fields

Finally, we'll set the filter type for the fields that we want to hide specific filter options for. We'll use the 'Id' field and the 'Country' field.

field.filter.filterType = wjcFilter.FilterType.Condition;
field = this.engine.fields.getField('Country');
field.filter.filterType = wjcFilter.FilterType.Value;

Now, if you right click on a cell under the 'Country' column, it will only display the 'Filter by Value' under the 'Filter' section, and if you right click on a cell under 'Id', and under the 'Filter' option it will only allow you to filter buy condition.

You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-react-pivotgrid-hide-filter-options

Joel Parks