React Data Grid Column filter
Filters plugin allows filtering the data in the table's columns using a range of pre-defined conditions.
To enable the plugin, set the
filters configuration option to
true and enable the filters dependency, which is the dropdownMenu plugin.
Custom filter menu
To display filters while hiding the other elements in the dropdown menu, pass the elements to be displayed as an array into the configuration.
The examples below show how to adjust the Filter plugin to your needs. They include customizing the UI components, changing the default behavior, and using filters outside the table.
Filter as you type
In this example, a basic
input element has been placed inside a column’s header (A, B, C…). It is placed right below the column's label and is separated with a horizontal line for better visibility. The data is being filtered as you type - with a 100 ms delay. The filter element has been excluded from the selection event, so the column doesn’t get selected when clicked on.
Please note that this demo uses a Handsontable API to a great extent.
Filter from the outside the table
The external Filter component is controlling the main table by passing values for particular columns. Only a fraction of the code is related to Handsontable API, for example,
Note that selecting a column in the Filter component resets the state of the table. This implementation can filter only one column at a time.
Related API reference
- Configuration options: