React Grid Advanced Filtering

The Ignite UI for React Advanced Filtering in React Grid allows you to manipulate data by providing you with a dialog where you can create different groups with filtering conditions across all columns in the IgrGrid.

React Grid Advanced Filtering Example

Interaction

In order to open the advanced filtering dialog, the Advanced Filtering button in the grid toolbar should be clicked. If no advanced filter is applied, you should start with creating a group of filtering conditions linked with AND or OR. After that, you can add filtering conditions or sub-groups.

In order to add a filtering condition, you have to select any of the filterable columns, an operand based on the column dataType and a value if the operand is not unary. Once the condition is committed, a chip with the condition information appears. By hovering or clicking the chip, you have the options to modify it or add another condition or group right after it.

If you select more than one filtering condition chip, a context menu appears with options to create a group or delete the filters. If you choose to create a group with the selected conditions, the newly created group will appear where the topmost selected condition was placed.

In order to select a group, you can also click on its vertical line, which is colored based on the the linking condition AND or OR. If a single group is selected, you get a context menu with options to change its filtering logic, ungroup or delete it.

In order to filter the data once you are ready with creating the filtering conditions and groups, you should click the Apply button. If you have modified the advanced filter, but you don't want to preserve the changes, you should click the Cancel button. You could also clear the advanced filter by clicking the Clear Filter button.

Usage

To enable the advanced filtering, the allowAdvancedFiltering input property should be set to true.

<IgrGrid data={nwindData} autoGenerate="false" ref={gridRef} allowAdvancedFiltering="true">
    <IgrGridToolbar></IgrGridToolbar>
</IgrGrid>

The advanced filtering generates a filteringExpressionsTree which is stored in the advancedFilteringExpressionsTree input property. You could use the advancedFilteringExpressionsTree property to set an initial state of the advanced filtering.

In case you don't want to show the IgrGrid toolbar, you could use the openAdvancedFilteringDialog and closeAdvancedFilteringDialog methods to open and close the advanced filtering dialog programmatically.

[!Note] You can enable both the QuickFilter/ExcelStyleFilter and the advanced filtering user interfaces in the IgrGrid. Both filtering user interfaces will work independently of one another. The final filtered result in the IgrGrid is the intersection between the results of the two filters.

Styling

In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

<IgrGrid className="grid"></IgrGrid>

Then set the related CSS properties to this class:

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-background-or: #d83434;
}

Demo

API References

Additional Resources

Our community is active and always welcoming to new ideas.