JavaScript Data Grid Column filter

Filter your data by a value or by a combination of conditions.

Overview

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

Basic configuration

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.

      Custom implementations

      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

      This example places a basic input element inside each column header (A, B, C), separated by a horizontal line. The data is being filtered as you type, with a 100 ms delay. The filter element is excluded from the selection event, so the column doesn’t get selected when clicked on.

      The demo below is just a demonstration (e.g., you can't add more columns). We don't recommend using it in your production code.

        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, addConditionsByValue, filter, and removeConditions.

        TIP

        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.