Tutorial: Filtering



The Filters plugin allows filtering the data in the table's columns using a range of pre-defined conditions.

This plugin uses the Trim Rows plugin to hide the filtered out rows. It does not render these rows at all, which is good for the overall table performance.

Quick setup

To enable the plugin you need to set the filters property to true and enable the filters dependency, which is the dropdownMenu plugin.

To only display filters while hiding the other elements in the dropdown menu, pass the elements to be displayed as an array in the configuration.

Custom implementations

The examples below will give you a good idea on how to adjust the Filter plugin to your needs. That includes customizing the UI components, changing the default behavior and using filters from the outside of the table.

Filter as you type

We placed a basic input element inside a column’s header (A, B, C…), right below the label of the column. For a better visibility it is separated with a horizontal line. The data is being filtered as you type - with a 200 ms delay. The filter element has been excluded from the selection event so when you click on it, the column doesn’t get selected.

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 with Handsontable API (e.g. addConditionsByValue, filter, removeConditions). A significantly more glue code handles the Filter component itself.

Please mind that selecting a column in the Filter component resets the state of the table. This implementation can filter only one column at a time.

Help us improve this page