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 theIgrGrid
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
- Filtering
- Excel Style Filtering
- Virtualization and Performance
- Paging
- Sorting
- Summaries
- Column Moving
- Column Pinning
- Column Resizing
- Selection
Our community is active and always welcoming to new ideas.