[!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.
Blazor Grid Filtering Overview
The Ignite UI for Blazor 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.
Blazor 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 IgbFilterOperand
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.
Since the operands are applied to the column they can be added in several ways, such as inline, in-code, or in a separate class. Each approach is demonstrated in the example below.
API References
DisplayName
FilterExpressions
FilterFactory
FilterLogicalOperator
IgbFilterOperand
FilterRequested
FilterUIType