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.

    Filter Expressions

    In the example below, the data grid's FilterExpressions collection is updated to incorporate custom filterExpressions.

    Filter Operators

    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:

    • And logical operator. In order for a successful match, all conditions have to pass.
    • Or logical operator. In order for a successful match, at least one of the conditions have to pass.

    API References