The Grid component supports filtering data by a column value programmatically or using the value an end-user types in the corresponding Filter Row editor. The filtering state management, Filter Row rendering, and filtering logic are implemented in the related plugins.
The following plugins implement filtering features:
Note that plugin order is important.
Import the plugins listed above to set up a Grid with basic filtering.
In the uncontrolled mode, specify the initial filtering conditions in the
In the controlled mode, pass the filtering options to the
filters property and handle the
onFiltersChange event to control the filtering state externally.
You can also specify a filtering predicate using the
getColumnPredicate property to implement a custom filtering logic.
It is possible to perform filtering remotely by handling filtering state changes, generating a request, and sending it to the server.
Filtering options are updated once an end-user modifies a text within a Filter Row editor or other filtering control. Handle filtering option changes using the
onFiltersChange event and request data from the server using the applied filtering options. Once the filtered data is received from the server, pass it to the
Note that in the case of remote filtering, you do not need to use the
Pass a function that returns a custom component to the
cellComponent property to substitute the built-in filter row editors. In this case, you should also delegate the component’s state management to the
TableFilterRow plugin assigning the function’s
onFilter arguments to the appropriate component’s properties.
The order in which the plugins appear in the Grid’s container is important when you use filtering features with paging or grouping. You need to choose whether to paginate filtered rows or filter the current page. In the first case, put the
LocalFiltering plugin before the
LocalPaging one. Otherwise, inverse the plugins’ order.