Skip to content
Handsontable

Column filter

Filter data by values or by a set of conditions, using Handsontable’s intuitive user interface or flexible API.

Overview

Filtering lets you quickly find the information that you’re looking for, based on specific criteria. This makes data analysis easier and faster, especially with large data sets.

Handsontable’s built-in filtering interface resembles Excel’s, so it’s intuitive even to non-technical users. And if you want to implement your own interface, you can easily filter data programmatically, using Handsontable’s API.

You can filter data by value, or use the built-in conditions, which are different for each of the available column types.

Filtering demo

Click on one of the column menu buttons (▼) and play around with filtering by selecting values or conditions-based criteria.

After filtering, the column readjusts its width to the longest value displayed on screen. To disable this behavior, set fixed column widths.

","exampleFilterBasicDemo.js":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleFilterBasicDemo.ts":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});"},"extraDeps":{}}
JavaScript
// to import filtering as an individual module, see the 'Import the filtering module' section of this page
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleFilterBasicDemo');


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
// to import filtering as an individual module, see the 'Import the filtering module' section of this page
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleFilterBasicDemo')!;


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
HTML
<div id="exampleFilterBasicDemo"></div>

Enable filtering

To enable the filtering interface for all columns, you need to do two things:

  1. Set the filters option to true.
  2. Enable the interface by setting the dropdownMenu option to true.

Enabling the filters option without the interface can be useful if you plan to create your own custom interface for filtering by using the API.

const configurationOptions = {
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
};

By default, the column menu presents the filtering interface along with other default items such as Insert column left. To display only the filtering interface, pass an array of filter items in the configuration.

","exampleShowFilterItemsOnly.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleShowFilterItemsOnly');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleShowFilterItemsOnly.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleShowFilterItemsOnly')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleShowFilterItemsOnly');


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu, but display only the filter menu items
  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleShowFilterItemsOnly')!;


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu, but display only the filter menu items
  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
HTML
<div id="exampleShowFilterItemsOnly"></div>

Enable filtering for individual columns

You have control over which columns are filterable and for which columns the column menu is enabled. In the following demo, only the Brand column is filterable, while the other columns are not. However, the Model column still has the column menu available in case you want to have some useful items in the menu such as Clear column.

","exampleEnableFilterInColumns.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableFilterInColumns');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast().to.col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast().to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast().to.col 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement.removeChild(button);\n }\n },\n height: 'auto',\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleEnableFilterInColumns.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableFilterInColumns')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast()!.to.col 1) {\n const button = TH.querySelector('.changeType')!;\n\n if (!button) {\n return;\n }\n\n button.parentElement!.removeChild(button);\n }\n },\n height: 'auto',\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n} as Handsontable.GridSettings);"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleEnableFilterInColumns');


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering for all columns
  filters: true,
  // enable the column menu for all columns
  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons
  dropdownMenu: {
    items: {
      filter_by_value: {
        // hide the 'Filter by value' list from all columns but the first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
      filter_action_bar: {
        // hide the 'OK' and 'Cancel' buttons from all columns but the first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
      clear_column: {
        // hide the 'Clear column' menu item from the first column
        hidden() {
          return this.getSelectedRangeLast().to.col < 1;
        },
      },
    },
  },
  // `afterGetColHeader()` is a Handsontable hook
  // it's fired after Handsontable appends information about a column header to the table header
  afterGetColHeader(col, TH) {
    // remove the column menu button from the 'Brand', 'Price', and 'Date' columns
    if (col > 1) {
      const button = TH.querySelector('.changeType');


      if (!button) {
        return;
      }


      button.parentElement.removeChild(button);
    }
  },
  height: 'auto',
  example: 'exampleEnableFilterInColumns',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleEnableFilterInColumns')!;


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering for all columns
  filters: true,
  // enable the column menu for all columns
  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons
  dropdownMenu: {
    items: {
      filter_by_value: {
        // hide the 'Filter by value' list from all columns but the first one
        hidden() {
          return this.getSelectedRangeLast()!.to.col > 0;
        },
      },
      filter_action_bar: {
        // hide the 'OK' and 'Cancel' buttons from all columns but the first one
        hidden() {
          return this.getSelectedRangeLast()!.to.col > 0;
        },
      },
      clear_column: {
        // hide the 'Clear column' menu item from the first column
        hidden() {
          return this.getSelectedRangeLast()!.to.col < 1;
        },
      },
    },
  },
  // `afterGetColHeader()` is a Handsontable hook
  // it's fired after Handsontable appends information about a column header to the table header
  afterGetColHeader(col, TH) {
    // remove the column menu button from the 'Brand', 'Price', and 'Date' columns
    if (col > 1) {
      const button = TH.querySelector('.changeType')!;


      if (!button) {
        return;
      }


      button.parentElement!.removeChild(button);
    }
  },
  height: 'auto',
  example: 'exampleEnableFilterInColumns',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
} as Handsontable.GridSettings);
HTML
<div id="exampleEnableFilterInColumns"></div>

Enable filtering within already filtered results

To apply filters based on the search input, set searchMode to 'apply'. You can then apply the filter by either pressing the Enter key while the search input is focused or by clicking the OK button.

const configurationOptions = {
  // enable filtering
  filters: {
    searchMode: 'apply'
  },
  // enable the column menu
  dropdownMenu: true,
};
","exampleSearchMode.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSearchMode');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply',\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleSearchMode.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSearchMode')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply',\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleSearchMode');


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering with option
  filters: {
    searchMode: 'apply',
  },
  dropdownMenu: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleSearchMode')!;


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering with option
  filters: {
    searchMode: 'apply',
  },
  dropdownMenu: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
HTML
<div id="exampleSearchMode"></div>

Filter different types of data

With its built-in cell types, Handsontable makes it easy to handle common data types like text, numbers, and dates by providing numerous configuration options. In addition, the filtering feature is designed to understand the underlying data and provides an adaptive interface that is tailored to each data type.

","exampleFilterDifferentTypes.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterDifferentTypes');\n\nnew Handsontable(container, {\n data: [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ],\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleFilterDifferentTypes.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterDifferentTypes')!;\n\nnew Handsontable(container, {\n data: [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ],\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text', // 'text' is the default type, so you can omit this line\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleFilterDifferentTypes');


new Handsontable(container, {
  data: [
    {
      model: 'Racing Socks',
      size: 'S',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
      color: 'Black',
    },
    {
      model: 'HL Mountain Shirt',
      size: 'XS',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
      color: 'White',
    },
    {
      model: 'Cycling Cap',
      size: 'L',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
      color: 'Green',
    },
    {
      model: 'Ski Jacket',
      size: 'M',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
      color: 'Blue',
    },
    {
      model: 'HL Goggles',
      size: 'XL',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
      color: 'Black',
    },
  ],
  columns: [
    {
      title: 'Model',
      // set the type of the 'Model' column
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      // set the type of the 'Price' column
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Sold on',
      // set the type of the 'Date' column
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      // set the type of the 'Time' column
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      // set the type of the 'In stock' column
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
    {
      title: 'Size',
      // set the type of the 'Size' column
      type: 'dropdown',
      data: 'size',
      source: ['XS', 'S', 'M', 'L', 'XL'],
      className: 'htCenter',
    },
    {
      title: 'Color',
      // set the type of the 'Size' column
      type: 'autocomplete',
      data: 'color',
      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  height: 175,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleFilterDifferentTypes')!;


new Handsontable(container, {
  data: [
    {
      model: 'Racing Socks',
      size: 'S',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
      color: 'Black',
    },
    {
      model: 'HL Mountain Shirt',
      size: 'XS',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
      color: 'White',
    },
    {
      model: 'Cycling Cap',
      size: 'L',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
      color: 'Green',
    },
    {
      model: 'Ski Jacket',
      size: 'M',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
      color: 'Blue',
    },
    {
      model: 'HL Goggles',
      size: 'XL',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
      color: 'Black',
    },
  ],
  columns: [
    {
      title: 'Model',
      // set the type of the 'Model' column
      type: 'text', // 'text' is the default type, so you can omit this line
      data: 'model',
    },
    {
      title: 'Price',
      // set the type of the 'Price' column
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Sold on',
      // set the type of the 'Date' column
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      // set the type of the 'Time' column
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      // set the type of the 'In stock' column
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
    {
      title: 'Size',
      // set the type of the 'Size' column
      type: 'dropdown',
      data: 'size',
      source: ['XS', 'S', 'M', 'L', 'XL'],
      className: 'htCenter',
    },
    {
      title: 'Color',
      // set the type of the 'Size' column
      type: 'autocomplete',
      data: 'color',
      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  height: 175,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
HTML
<div id="exampleFilterDifferentTypes"></div>

The following table contains all available filter operators for each built-in data type.

Cell typeAvailable filter operators
All cell typesDefault operators:

None
Is empty
Is not empty
Is equal to
Is not equal to
text
time
checkbox
dropdown
autocomplete
password		Default operators plus:

Begins with
Ends with
Contains
Does not contain
numericDefault operators plus:

Greater than
Greater than or equal to
Less than
Less than or equal to
Is between
Is not between
dateDefault operators plus:

Before
After
Is between
Tomorrow
Today
Yesterday

Filter data on initialization

You can filter data on Handsontable’s initialization. This lets you apply pre-defined filters every time you launch your grid.

To do this, you can use Handsontable’s afterInit() hook, along with the API provided by the Filters plugin. For instance, the demo below demonstrates how you can start with a pre-applied filter to display only items priced less than $200.

","exampleFilterOnInitialization.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit() {\n const handsontableInstance = this;\n // get the `Filters` plugin, so you can use its API\n const filters = handsontableInstance.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleFilterOnInitialization.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit() {\n const handsontableInstance = this;\n // get the `Filters` plugin, so you can use its API\n const filters: Filters = handsontableInstance.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleFilterOnInitialization');


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated
  afterInit() {
    const handsontableInstance = this;
    // get the `Filters` plugin, so you can use its API
    const filters = handsontableInstance.getPlugin('filters');


    // filter data by the 'Price' column (column at index 2)
    // to display only items that are less than ('lt') $200
    filters.addCondition(2, 'lt', [200]);
    filters.filter();
  },
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import { Filters } from 'handsontable/plugins';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleFilterOnInitialization')!;


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated
  afterInit() {
    const handsontableInstance = this;
    // get the `Filters` plugin, so you can use its API
    const filters: Filters = handsontableInstance.getPlugin('filters');


    // filter data by the 'Price' column (column at index 2)
    // to display only items that are less than ('lt') $200
    filters.addCondition(2, 'lt', [200]);
    filters.filter();
  },
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
HTML
<div id="exampleFilterOnInitialization"></div>

External quick filter

Handsontable’s quick filter feature lets you search for a particular phrase in a specific column. To accomplish this, use methods filters.addCondition() and filters.filter().

\n \n
\n
\n
","exampleQuickFilter.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter');\nconst filterField = document.querySelector('#filterField');\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger');\nconst menu = document.getElementById('filterMenu');\nconst label = document.getElementById('filterTriggerLabel');\nlet selectedColumn = '0';\n\ntrigger.addEventListener('click', () => {\n const open = trigger.getAttribute('aria-expanded') === 'true';\n\n trigger.setAttribute('aria-expanded', String(!open));\n menu.hidden = open;\n});\n\nmenu.addEventListener('click', (e) => {\n const li = e.target.closest('li[data-value]');\n\n if (!li) return;\n\n menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n li.setAttribute('aria-selected', 'true');\n selectedColumn = li.dataset.value;\n label.textContent = li.textContent.trim();\n trigger.setAttribute('aria-expanded', 'false');\n menu.hidden = true;\n});\n\ndocument.addEventListener('click', (e) => {\n if (!e.target.closest('#filterDropdown')) {\n trigger.setAttribute('aria-expanded', 'false');\n menu.hidden = true;\n }\n});\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n colHeaders: true,\n height: 'auto',\n filters: true,\n className: 'exampleQuickFilter',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n const filters = hot.getPlugin('filters');\n\n filters.removeConditions(selectedColumn);\n filters.addCondition(selectedColumn, 'contains', [event.target.value]);\n filters.filter();\n hot.render();\n});","exampleQuickFilter.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter')!;\nconst filterField = document.querySelector('#filterField')!;\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger')!;\nconst menu = document.getElementById('filterMenu')!;\nconst label = document.getElementById('filterTriggerLabel')!;\nlet selectedColumn: string = '0';\n\ntrigger.addEventListener('click', () => {\n const open = trigger.getAttribute('aria-expanded') === 'true';\n\n trigger.setAttribute('aria-expanded', String(!open));\n (menu as HTMLElement).hidden = open;\n});\n\nmenu.addEventListener('click', (e: Event) => {\n const li = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n if (!li) return;\n\n menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n li.setAttribute('aria-selected', 'true');\n selectedColumn = li.dataset.value!;\n label.textContent = li.textContent!.trim();\n trigger.setAttribute('aria-expanded', 'false');\n (menu as HTMLElement).hidden = true;\n});\n\ndocument.addEventListener('click', (e: Event) => {\n if (!(e.target as HTMLElement).closest('#filterDropdown')) {\n trigger.setAttribute('aria-expanded', 'false');\n (menu as HTMLElement).hidden = true;\n }\n});\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n colHeaders: true,\n height: 'auto',\n filters: true,\n className: 'exampleQuickFilter',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n const filters: Filters = hot.getPlugin('filters');\n\n filters.removeConditions(selectedColumn as unknown as number);\n filters.addCondition(selectedColumn as unknown as number, 'contains', [(event.target as HTMLInputElement).value]);\n filters.filter();\n hot.render();\n});","exampleQuickFilter.css":".controlsQuickFilter {\n position: relative;\n z-index: 0;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n}\n\n#filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n}\n\n#filterField::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n display: none !important;\n}\n\n.filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleQuickFilter');
const filterField = document.querySelector('#filterField');


// Custom dropdown logic
const trigger = document.getElementById('filterTrigger');
const menu = document.getElementById('filterMenu');
const label = document.getElementById('filterTriggerLabel');
let selectedColumn = '0';


trigger.addEventListener('click', () => {
  const open = trigger.getAttribute('aria-expanded') === 'true';


  trigger.setAttribute('aria-expanded', String(!open));
  menu.hidden = open;
});


menu.addEventListener('click', (e) => {
  const li = e.target.closest('li[data-value]');


  if (!li) return;


  menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));
  li.setAttribute('aria-selected', 'true');
  selectedColumn = li.dataset.value;
  label.textContent = li.textContent.trim();
  trigger.setAttribute('aria-expanded', 'false');
  menu.hidden = true;
});


document.addEventListener('click', (e) => {
  if (!e.target.closest('#filterDropdown')) {
    trigger.setAttribute('aria-expanded', 'false');
    menu.hidden = true;
  }
});


const hot = new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '13:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  colHeaders: true,
  height: 'auto',
  filters: true,
  className: 'exampleQuickFilter',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});


// add a filter input listener
filterField.addEventListener('keyup', (event) => {
  const filters = hot.getPlugin('filters');


  filters.removeConditions(selectedColumn);
  filters.addCondition(selectedColumn, 'contains', [event.target.value]);
  filters.filter();
  hot.render();
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import { Filters } from 'handsontable/plugins';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleQuickFilter')!;
const filterField = document.querySelector('#filterField')!;


// Custom dropdown logic
const trigger = document.getElementById('filterTrigger')!;
const menu = document.getElementById('filterMenu')!;
const label = document.getElementById('filterTriggerLabel')!;
let selectedColumn: string = '0';


trigger.addEventListener('click', () => {
  const open = trigger.getAttribute('aria-expanded') === 'true';


  trigger.setAttribute('aria-expanded', String(!open));
  (menu as HTMLElement).hidden = open;
});


menu.addEventListener('click', (e: Event) => {
  const li = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;


  if (!li) return;


  menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));
  li.setAttribute('aria-selected', 'true');
  selectedColumn = li.dataset.value!;
  label.textContent = li.textContent!.trim();
  trigger.setAttribute('aria-expanded', 'false');
  (menu as HTMLElement).hidden = true;
});


document.addEventListener('click', (e: Event) => {
  if (!(e.target as HTMLElement).closest('#filterDropdown')) {
    trigger.setAttribute('aria-expanded', 'false');
    (menu as HTMLElement).hidden = true;
  }
});


const hot = new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '13:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  colHeaders: true,
  height: 'auto',
  filters: true,
  className: 'exampleQuickFilter',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});


// add a filter input listener
filterField.addEventListener('keyup', (event) => {
  const filters: Filters = hot.getPlugin('filters');


  filters.removeConditions(selectedColumn as unknown as number);
  filters.addCondition(selectedColumn as unknown as number, 'contains', [(event.target as HTMLInputElement).value]);
  filters.filter();
  hot.render();
});
HTML
<div class="example-controls-container">
  <div class="controlsQuickFilter">
    <div class="filter-dropdown" id="filterDropdown">
      <label class="filter-dropdown-label">Select a column:</label>
      <button class="filter-dropdown-trigger" id="filterTrigger" type="button" aria-haspopup="listbox" aria-expanded="false">
        <span class="filter-dropdown-text" id="filterTriggerLabel">Brand</span>
        <svg class="filter-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
      </button>
      <ul class="filter-dropdown-menu" id="filterMenu" role="listbox" hidden>
        <li role="option" data-value="0" aria-selected="true">Brand</li>
        <li role="option" data-value="1">Model</li>
        <li role="option" data-value="2">Price</li>
        <li role="option" data-value="3">Date</li>
        <li role="option" data-value="4">Time</li>
        <li role="option" data-value="5">In stock</li>
      </ul>
    </div>
    <input id="filterField" type="text" placeholder="Filter" />
  </div>
</div>
<div id="exampleQuickFilter"></div>
CSS
.controlsQuickFilter {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}


#filterField {
  border: 1px solid var(--sl-color-gray-5, #e0e0e0);
  background: none;
  color: var(--sl-color-text, #333333);
  font-size: var(--sl-text-sm, 0.875rem);
  padding: 0.4rem 0.625rem;
  outline: none;
  width: 140px;
}


#filterField::placeholder {
  color: var(--sl-color-gray-3, #777777);
}


#filterField:focus {
  border-color: var(--sl-color-accent, #1A42E8);
}


#filterField:focus-visible {
  border-color: var(--sl-color-accent, #1A42E8);
  box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);
}


/* Filter dropdown */
.filter-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}


.filter-dropdown-label {
  color: var(--sl-color-gray-2, #555555);
  font-size: var(--sl-text-sm, 0.875rem);
  white-space: nowrap;
}


.filter-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--sl-color-gray-5, #e0e0e0);
  color: var(--sl-color-gray-2, #555555);
  cursor: pointer;
  font-size: var(--sl-text-sm, 0.875rem);
  font-weight: 500;
  padding: 0.4rem 0.625rem;
  transition: color 0.15s, background-color 0.15s;
  white-space: nowrap;
  border-radius: 0;
}


.filter-dropdown-trigger:hover {
  color: var(--sl-color-white, #333333);
  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));
}


.filter-dropdown-chevron {
  flex-shrink: 0;
  margin-inline-start: 0.15rem;
  transition: transform 0.15s;
}


.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {
  transform: rotate(180deg);
}


.filter-dropdown-menu {
  background: var(--sl-color-bg-nav, #ffffff);
  border: 1px solid var(--sl-color-gray-5, #e0e0e0);
  border-radius: 0;
  box-shadow: none;
  inset-inline-start: 0;
  list-style: none;
  margin: 0;
  min-width: 100%;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  top: 100%;
  z-index: 9999;
}


.filter-dropdown-menu[hidden] {
  display: none !important;
}


.filter-dropdown-menu li {
  align-items: center;
  color: var(--sl-color-text, #333333);
  display: flex;
  font-size: var(--sl-text-sm, 0.875rem);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
  list-style: none;
  margin: 0;
}


.filter-dropdown-menu li:last-child {
  border-bottom: none;
}


.filter-dropdown-menu li:hover,
.filter-dropdown-menu li:focus-visible {
  background: var(--sl-color-gray-6, #eeeeee);
  color: var(--sl-color-white, #333333);
  outline: none;
}


.filter-dropdown-menu li[aria-selected='true'] {
  color: var(--sl-color-white, #333333);
  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);
}

Customize the filter button

The default button that opens the column menu can be styled with CSS by modifying button.changeType variables and its ::before pseudoclass that contains svg mask-image displaying an arrow down icon.

","exampleCustomFilterButton.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleCustomFilterButton.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleCustomFilterButton.css":".handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleCustomFilterButton');


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  // to differentiate this example's CSS from other examples on this page
  className: 'customFilterButtonExample1',
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleCustomFilterButton')!;


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  // to differentiate this example's CSS from other examples on this page
  className: 'customFilterButtonExample1',
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
HTML
<div id="exampleCustomFilterButton"></div>
CSS
.handsontable.customFilterButtonExample1 .changeType {
  --ht-icon-button-background-color: #e2e2e263;
  --ht-icon-button-border-radius: 100%;
}


.handsontable.customFilterButtonExample1 .changeType::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E");
}

The column menu button is always visible, but if you want it to appear only when the mouse cursor is over the header, apply additional styling to th .relative:hover .changeType.

","exampleCustomFilterButton2.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton2');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleCustomFilterButton2.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton2')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleCustomFilterButton2.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n}"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleCustomFilterButton2');


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  // to differentiate this example's CSS from other examples on this page
  className: 'customFilterButtonExample2',
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleCustomFilterButton2')!;


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  // to differentiate this example's CSS from other examples on this page
  className: 'customFilterButtonExample2',
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
HTML
<div id="exampleCustomFilterButton2"></div>
CSS
/* hide the column menu button by default */
.customFilterButtonExample2 .changeType {
  visibility: hidden;
}


/* show the column menu button on hover */
.customFilterButtonExample2 th .relative:hover .changeType {
  visibility: visible;
}

Change the width of the filter menu

If the text data in your columns is too long to fit in the filters container, you can adjust the column menu’s width for better user experience. You can achieve this with by styling .htDropdownMenu table.htCore.

.handsontable .htDropdownMenu table.htCore {
  width: 300px !important;
}

Exclude rows from filtering

You can exclude any number of top or bottom rows from filtering.

In the following demo, the first and the last row are frozen, and filtering doesn’t affect them.

","exampleExcludeRowsFromFiltering.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n minSpareRows: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.indexedValues.length - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleExcludeRowsFromFiltering.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n minSpareRows: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin: Filters = (this as Handsontable).getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.indexedValues.length - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleExcludeRowsFromFiltering');


new Handsontable(container, {
  data: [
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: 11,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: 0,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: 1,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '13:23',
      inStock: 3,
    },
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: 5,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: 22,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: 13,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: 0,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '13:23',
      inStock: 14,
    },
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: 16,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: 18,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: 3,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: 0,
    },
    {
      brand: 'Vinte',
      model: 'ML Road Frame-W',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: 2,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
      className: 'htRight',
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'numeric',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  height: 200,
  colWidths: [120, 150, 120, 140, 120, 120],
  fixedRowsTop: 1,
  fixedRowsBottom: 1,
  minSpareRows: 1,
  colHeaders: true,
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  afterFilter() {
    const filtersPlugin = this.getPlugin('filters');
    const filtersRowsMap = filtersPlugin.filtersRowsMap;


    filtersRowsMap.setValueAtIndex(0, false);
    filtersRowsMap.setValueAtIndex(filtersRowsMap.indexedValues.length - 1, false);
  },
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import { Filters } from 'handsontable/plugins';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleExcludeRowsFromFiltering')!;


new Handsontable(container, {
  data: [
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: 11,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: 0,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: 1,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '13:23',
      inStock: 3,
    },
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: 5,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: 22,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: 13,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: 0,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '13:23',
      inStock: 14,
    },
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: 16,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: 18,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: 3,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: 0,
    },
    {
      brand: 'Vinte',
      model: 'ML Road Frame-W',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: 2,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
      className: 'htRight',
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'numeric',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  height: 200,
  colWidths: [120, 150, 120, 140, 120, 120],
  fixedRowsTop: 1,
  fixedRowsBottom: 1,
  minSpareRows: 1,
  colHeaders: true,
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  afterFilter() {
    const filtersPlugin: Filters = (this as Handsontable).getPlugin('filters');
    const filtersRowsMap = filtersPlugin.filtersRowsMap;


    filtersRowsMap.setValueAtIndex(0, false);
    filtersRowsMap.setValueAtIndex(filtersRowsMap.indexedValues.length - 1, false);
  },
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
HTML
<div id="exampleExcludeRowsFromFiltering"></div>

Server-side filtering

You can decide to use Handsontable as an intuitive filtering interface, but perform the actual filtering on the server.

To help you with that, Handsontable’s beforeFilter() hook allows you to:

In the following demo, click on one of the column menu buttons (▼) and play around with filtering by selecting values or conditions-based criteria. After you click OK, the ▼ button turns green to indicate filtering, but the data is not filtered. Instead, the information about the specified filters is logged to the console.

","exampleServerSideFilter.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n console.log(`The last changed column index: ${conditionsStack[0].column}`);\n console.log(`The amount of filters added to this column: ${conditionsStack[0].conditions.length}`);\n // the list of filter conditions\n console.log(conditionsStack[0].conditions);\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","exampleServerSideFilter.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n console.log(`The last changed column index: ${conditionsStack[0]!.column}`);\n console.log(`The amount of filters added to this column: ${conditionsStack[0]!.conditions.length}`);\n // the list of filter conditions\n console.log(conditionsStack[0]!.conditions);\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleServerSideFilter');


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  height: 'auto',
  // `beforeFilter()` is a Handsontable hook
  // it's fired after Handsontable gathers information about the filters, but before the filters are applied
  beforeFilter(conditionsStack) {
    // gather information about the filters
    console.log(`The amount of filters: ${conditionsStack.length}`);
    console.log(`The last changed column index: ${conditionsStack[0].column}`);
    console.log(`The amount of filters added to this column: ${conditionsStack[0].conditions.length}`);
    // the list of filter conditions
    console.log(conditionsStack[0].conditions);


    // return `false` to disable filtering on the client side
    return false;
  },
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleServerSideFilter')!;


new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  height: 'auto',
  // `beforeFilter()` is a Handsontable hook
  // it's fired after Handsontable gathers information about the filters, but before the filters are applied
  beforeFilter(conditionsStack) {
    // gather information about the filters
    console.log(`The amount of filters: ${conditionsStack.length}`);
    console.log(`The last changed column index: ${conditionsStack[0]!.column}`);
    console.log(`The amount of filters added to this column: ${conditionsStack[0]!.conditions.length}`);
    // the list of filter conditions
    console.log(conditionsStack[0]!.conditions);


    // return `false` to disable filtering on the client side
    return false;
  },
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
HTML
<div id="exampleServerSideFilter"></div>

Control filtering programmatically

You can control filtering at the grid’s runtime by using Handsontable’s hooks and API methods. This allows you to enable or disable filtering based on specific conditions. For example, you may create a user interface outside of the grid to manage Handsontable’s filtering behavior.

Enable or disable filtering programmatically

To enable or disable filtering programmatically, use the updateSettings() method.

handsontableInstance.updateSettings({
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
});


handsontableInstance.updateSettings({
  // disable filtering
  filters: false,
});

You can also enable or disable filtering for specific columns. For example, to enable filtering only for the first column:

handsontableInstance.updateSettings({
  // enable filtering, for all columns
  filters: true,
  // enable the column menu, for all columns
  // but display only the 'Filter by value' list and the 'OK' and
  // 'Cancel' buttons
  dropdownMenu: {
    items: {
      filter_by_value: {
        // hide the 'Filter by value' list from all columns but the
        // first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
      filter_action_bar: {
        // hide the 'OK' and 'Cancel' buttons from all columns but the
        // first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
    },
  },
});

Filter data programmatically

To filter data programmatically, use the Filters plugin’s API. Remember to enable filtering first.

Mind that before you apply new filter conditions, you need to clear the previous ones with filters.clearConditions().

\n\n
","exampleFilterThroughAPI1.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1');\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200').addEventListener('click', () => {\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n});\ndocument.querySelector('.filterAbove200').addEventListener('click', () => {\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\ndocument.querySelector('.clearAllFilters').addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});","exampleFilterThroughAPI1.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1')!;\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200')!.addEventListener('click', () => {\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.filterAbove200')!.addEventListener('click', () => {\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.clearAllFilters')!.addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});"},"extraDeps":{}}
JavaScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleFilterThroughAPI1');
const hot = new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});


// get the `Filters` plugin, so you can use its API
const filters = hot.getPlugin('filters');


document.querySelector('.filterBelow200').addEventListener('click', () => {
  // clear any existing filters
  filters.clearConditions();
  // filter data by the 'Price' column (column at index 2)
  // to display only items that are less than ('lt') $200
  filters.addCondition(2, 'lt', [200]);
  filters.filter();
});
document.querySelector('.filterAbove200').addEventListener('click', () => {
  filters.clearConditions();
  // display only items that are more than ('gt') $200
  filters.addCondition(2, 'gt', [200]);
  filters.filter();
});
document.querySelector('.clearAllFilters').addEventListener('click', () => {
  filters.clearConditions();
  filters.filter();
});
TypeScript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import { Filters } from 'handsontable/plugins';


// Register all Handsontable's modules.
registerAllModules();


const container = document.querySelector('#exampleFilterThroughAPI1')!;
const hot = new Handsontable(container, {
  data: [
    {
      brand: 'Jetpulse',
      model: 'Racing Socks',
      price: 30,
      sellDate: '2023-10-11',
      sellTime: '01:23',
      inStock: false,
    },
    {
      brand: 'Gigabox',
      model: 'HL Mountain Frame',
      price: 1890.9,
      sellDate: '2023-05-03',
      sellTime: '11:27',
      inStock: false,
    },
    {
      brand: 'Camido',
      model: 'Cycling Cap',
      price: 130.1,
      sellDate: '2023-03-27',
      sellTime: '03:17',
      inStock: true,
    },
    {
      brand: 'Chatterpoint',
      model: 'Road Tire Tube',
      price: 59,
      sellDate: '2023-08-28',
      sellTime: '08:01',
      inStock: true,
    },
    {
      brand: 'Eidel',
      model: 'HL Road Tire',
      price: 279.99,
      sellDate: '2023-10-02',
      sellTime: '01:23',
      inStock: true,
    },
  ],
  columns: [
    {
      title: 'Brand',
      type: 'text',
      data: 'brand',
    },
    {
      title: 'Model',
      type: 'text',
      data: 'model',
    },
    {
      title: 'Price',
      type: 'numeric',
      data: 'price',
      locale: 'en-US',
      numericFormat: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
      },
    },
    {
      title: 'Date',
      type: 'intl-date',
      data: 'sellDate',
      locale: 'en-US',
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
      className: 'htRight',
    },
    {
      title: 'Time',
      type: 'intl-time',
      data: 'sellTime',
      locale: 'en-US',
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
      className: 'htRight',
    },
    {
      title: 'In stock',
      type: 'checkbox',
      data: 'inStock',
      className: 'htCenter',
    },
  ],
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});


// get the `Filters` plugin, so you can use its API
const filters: Filters = hot.getPlugin('filters');


document.querySelector('.filterBelow200')!.addEventListener('click', () => {
  // clear any existing filters
  filters.clearConditions();
  // filter data by the 'Price' column (column at index 2)
  // to display only items that are less than ('lt') $200
  filters.addCondition(2, 'lt', [200]);
  filters.filter();
});


document.querySelector('.filterAbove200')!.addEventListener('click', () => {
  filters.clearConditions();
  // display only items that are more than ('gt') $200
  filters.addCondition(2, 'gt', [200]);
  filters.filter();
});


document.querySelector('.clearAllFilters')!.addEventListener('click', () => {
  filters.clearConditions();
  filters.filter();
});
HTML
<div class="example-controls-container">
  <div class="controls">
    <button class="filterBelow200">Show items &lt; $200</button>
    <button class="filterAbove200">Show items &gt; $200</button>
    <button class="clearAllFilters">Clear filters</button>
  </div>
</div>
<div id="exampleFilterThroughAPI1"></div>

Import the filtering module

You can reduce the size of your bundle by importing and registering only the modules that you need.

To use filtering, you need only the following modules:

// import the base module
import Handsontable from 'handsontable/base';


// import the filtering plugins
import { registerPlugin, Filters, DropdownMenu } from 'handsontable/plugins';


// register the filtering plugins
registerPlugin(Filters);
registerPlugin(DropdownMenu);

Known limitations

At the moment, filtering comes with the following limitations:

WindowsmacOSActionExcelSheets
Alt+A⌥+AClear all filters✗✗

API reference

For the list of options, methods, and Handsontable hooks related to filtering, see the following API reference pages:

Plugins

Filters
DropdownMenu

Troubleshooting

Didn’t find what you need? Try this:

View related topics
Report an issue
Start a discussion
Contact our technical support