[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Web Components Grid Filtering Overview
The Ignite UI for Web Components 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.
Web Components 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 IgcFilterOperand 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.