KendoReact Data Grid Filtering Overview
The KendoReact Data Grid enables you to display only those Grid records which meet specified criteria.
Start Free Trial
The KendoReact Data Grid Filtering in Action
The following example demonstrates how to use the filterBy helper method:
Getting Started with the KendoReact Data Grid Filtering
To enable filtering:
- Set the
filterableprop of the Grid which will render a filter row under the column headers. - Set the
filteroption of the Grid. The filtering conditions are declared asFilterDescriptorsorCompositeFilterDescriptor. - Handle the
onFilterChangeor theonDataStateChangeevent of the Grid. TheonDataStateChangeevent is recommended when the Grid will have other data operations as it provides the completedataStatein a single event. - Filter the data on the client by using our built-in methods filterBy or
process. The data can also be filtered on the server by making a request using the event parameters.
The
filterBymethod is recommended when using theonFilterChangeevent. Theprocessmethod is recommended when using theonDataStateChangeevent.
Each consecutive filter is added to the previous ones and reduces the subset of data.
By default, when filtering is enabled, the Grid renders a filter row in its header. Based on the type of data the columns contain, the filter row displays filtering components in each column header where the user can filter string, numeric, boolean, or date data types.
Filtering Data Grid Rows by Using the filterBy Method
To use the filterBy method you have to set the filter property of the Grid with the current filter expression and handle the onFilterChange to retrieve the new expression.
The following example demonstrates how to use the filterBy helper method:
Filtering Data Grid Rows by Using the process Method
When multiple data-operations are enabled (filtering, sorting, paging, etc.), using the process method and the data state from the onDataStateChange event is the recommended approach.
The following example demonstrates how to use the process helper method:
Filtering Data Grid Through Column Menu Filter
The columnMenu allows using the GridColumnMenuFilter or the GridColumnMenuCheckboxFilter component to filter the Grid. This provides menu like filtering functionality inside a popup container for the column.
This example showcase how to filter a column using the columnMenu and how to change the default column menu icon using the columnMenuIcon.
Filtering Data Grid Through External Filter
You can use the KendoReact Filter component to build complex filter expressions and filter the data inside the Grid.
Filtering Data Grid Through External TextBox
You can use an external TextBox to filter the Grid.
Filtering Data Grid Through Custom Filter Cells
The filterCell property of the GridColumn enables the full customization of the filter cells.
The following example demonstrates how to implement a KendoReact DropDownList component for filtering the products by category and price range.
Define Custom Filter Operators
The Grid allows you to customize the operators for the numeric, text, and date filter types by using the filterOperators property which accepts GridFilterOperators. The Grid uses the first operator from each type as its default operator. The Boolean filter types always use the equal operator.