React Grid Filtering Overview
The Ignite UI for React Data Table / Data Grid includes column filtering with both a filter row and API that gives you the ability to perform expressive sort conditions based on the data type of the column being filtered.
React Grid Filtering Example
As seen above, setting the
filterUIType property to FilterRow will enables the record filtering record to the user interface where the user can specify filter criteria to filter records. Records that do not match the specified filter criteria will be hidden.
Filtering is also exposed in the column options UI by hovering a field and clicking the vertical ellipsis. This is achieved when setting the
filterUIType to ColumnOptions. Please refer to the sample below.
In the example below, the data grid's FilterExpressions collection is updated to incorporate custom
Columns can be given a custom
IgrFilterOperand that will appear in the filter-row operand dropdown. The key requirements is to ensure the operand is given a
displayName and to utilize the
FilterRequested event on the operand so you can apply a
filterFactory, which is responsible for assigning the operator and value you wish to the filter the column by, e.g. StartsWith with value of "A".
In addition, the grid's
filterLogicalOperator property is responsible for indicating how filters across fields are combined:
Andlogical operator. In order for a successful match, all conditions have to pass.
Orlogical operator. In order for a successful match, at least one of the conditions have to pass.