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.

1
// to import filtering as an individual module, see the 'Import the filtering module' section of this page
2
import Handsontable from 'handsontable/base';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

10
new Handsontable(container, {
11
  data: [
12
    {
13
      brand: 'Jetpulse',
14
      model: 'Racing Socks',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Gigabox',
22
      model: 'HL Mountain Frame',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
    },
28
    {
29
      brand: 'Camido',
30
      model: 'Cycling Cap',
31
      price: 130.1,
32
      sellDate: '2023-03-27',
33
      sellTime: '03:17',
34
      inStock: true,
35
    },
36
    {
37
      brand: 'Chatterpoint',
38
      model: 'Road Tire Tube',
39
      price: 59,
40
      sellDate: '2023-08-28',
41
      sellTime: '08:01',
42
      inStock: true,
43
    },
44
    {
45
      brand: 'Eidel',
46
      model: 'HL Road Tire',
47
      price: 279.99,
48
      sellDate: '2023-10-02',
49
      sellTime: '01:23',
50
      inStock: true,
51
    },
52
  ],
53
  columns: [
54
    {
55
      title: 'Brand',
56
      type: 'text',
57
      data: 'brand',
58
    },
59
    {
60
      title: 'Model',
61
      type: 'text',
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      type: 'numeric',
67
      data: 'price',
68
      locale: 'en-US',
69
      numericFormat: {
70
        style: 'currency',
71
        currency: 'USD',
72
        minimumFractionDigits: 2,
73
      },
74
    },
75
    {
76
      title: 'Date',
77
      type: 'intl-date',
78
      data: 'sellDate',
79
      locale: 'en-US',
80
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
81
      className: 'htRight',
82
    },
83
    {
84
      title: 'Time',
85
      type: 'intl-time',
86
      data: 'sellTime',
87
      locale: 'en-US',
88
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
89
      className: 'htRight',
90
    },
91
    {
92
      title: 'In stock',
93
      type: 'checkbox',
94
      data: 'inStock',
95
      className: 'htCenter',
96
    },
97
  ],
98
  // enable filtering
99
  filters: true,
100
  // enable the column menu
101
  dropdownMenu: true,
102
  height: 'auto',
103
  autoWrapRow: true,
104
  autoWrapCol: true,
105
  licenseKey: 'non-commercial-and-evaluation',
106
});

1
// to import filtering as an individual module, see the 'Import the filtering module' section of this page
2
import Handsontable from 'handsontable/base';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

10
new Handsontable(container, {
11
  data: [
12
    {
13
      brand: 'Jetpulse',
14
      model: 'Racing Socks',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Gigabox',
22
      model: 'HL Mountain Frame',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
    },
28
    {
29
      brand: 'Camido',
30
      model: 'Cycling Cap',
31
      price: 130.1,
32
      sellDate: '2023-03-27',
33
      sellTime: '03:17',
34
      inStock: true,
35
    },
36
    {
37
      brand: 'Chatterpoint',
38
      model: 'Road Tire Tube',
39
      price: 59,
40
      sellDate: '2023-08-28',
41
      sellTime: '08:01',
42
      inStock: true,
43
    },
44
    {
45
      brand: 'Eidel',
46
      model: 'HL Road Tire',
47
      price: 279.99,
48
      sellDate: '2023-10-02',
49
      sellTime: '01:23',
50
      inStock: true,
51
    },
52
  ],
53
  columns: [
54
    {
55
      title: 'Brand',
56
      type: 'text',
57
      data: 'brand',
58
    },
59
    {
60
      title: 'Model',
61
      type: 'text',
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      type: 'numeric',
67
      data: 'price',
68
      locale: 'en-US',
69
      numericFormat: {
70
        style: 'currency',
71
        currency: 'USD',
72
        minimumFractionDigits: 2,
73
      },
74
    },
75
    {
76
      title: 'Date',
77
      type: 'intl-date',
78
      data: 'sellDate',
79
      locale: 'en-US',
80
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
81
      className: 'htRight',
82
    },
83
    {
84
      title: 'Time',
85
      type: 'intl-time',
86
      data: 'sellTime',
87
      locale: 'en-US',
88
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
89
      className: 'htRight',
90
    },
91
    {
92
      title: 'In stock',
93
      type: 'checkbox',
94
      data: 'inStock',
95
      className: 'htCenter',
96
    },
97
  ],
98
  // enable filtering
99
  filters: true,
100
  // enable the column menu
101
  dropdownMenu: true,
102
  height: 'auto',
103
  autoWrapRow: true,
104
  autoWrapCol: true,
105
  licenseKey: 'non-commercial-and-evaluation',
106
});

1
<div id="exampleFilterBasicDemo"></div>

Enable filtering

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

Set the filters option to true.
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.

1
const configurationOptions = {
2
  // enable filtering
3
  filters: true,
4
  // enable the column menu
5
  dropdownMenu: true,
6
};

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.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu, but display only the filter menu items
100
  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
101
  height: 'auto',
102
  autoWrapRow: true,
103
  autoWrapCol: true,
104
  licenseKey: 'non-commercial-and-evaluation',
105
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu, but display only the filter menu items
100
  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
101
  height: 'auto',
102
  autoWrapRow: true,
103
  autoWrapCol: true,
104
  licenseKey: 'non-commercial-and-evaluation',
105
});

1
<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.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering for all columns
98
  filters: true,
99
  // enable the column menu for all columns
100
  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons
101
  dropdownMenu: {
102
    items: {
103
      filter_by_value: {
104
        // hide the 'Filter by value' list from all columns but the first one
105
        hidden() {
106
          return this.getSelectedRangeLast().to.col > 0;
107
        },
108
      },
109
      filter_action_bar: {
110
        // hide the 'OK' and 'Cancel' buttons from all columns but the first one
111
        hidden() {
112
          return this.getSelectedRangeLast().to.col > 0;
113
        },
114
      },
115
      clear_column: {
116
        // hide the 'Clear column' menu item from the first column
117
        hidden() {
118
          return this.getSelectedRangeLast().to.col < 1;
119
        },
120
      },
121
    },
122
  },
123
  // `afterGetColHeader()` is a Handsontable hook
124
  // it's fired after Handsontable appends information about a column header to the table header
125
  afterGetColHeader(col, TH) {
126
    // remove the column menu button from the 'Brand', 'Price', and 'Date' columns
127
    if (col > 1) {
128
      const button = TH.querySelector('.changeType');
129

130
      if (!button) {
131
        return;
132
      }
133

134
      button.parentElement.removeChild(button);
135
    }
136
  },
137
  height: 'auto',
138
  example: 'exampleEnableFilterInColumns',
139
  autoWrapRow: true,
140
  autoWrapCol: true,
141
  licenseKey: 'non-commercial-and-evaluation',
142
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering for all columns
98
  filters: true,
99
  // enable the column menu for all columns
100
  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons
101
  dropdownMenu: {
102
    items: {
103
      filter_by_value: {
104
        // hide the 'Filter by value' list from all columns but the first one
105
        hidden() {
106
          return this.getSelectedRangeLast()!.to.col > 0;
107
        },
108
      },
109
      filter_action_bar: {
110
        // hide the 'OK' and 'Cancel' buttons from all columns but the first one
111
        hidden() {
112
          return this.getSelectedRangeLast()!.to.col > 0;
113
        },
114
      },
115
      clear_column: {
116
        // hide the 'Clear column' menu item from the first column
117
        hidden() {
118
          return this.getSelectedRangeLast()!.to.col < 1;
119
        },
120
      },
121
    },
122
  },
123
  // `afterGetColHeader()` is a Handsontable hook
124
  // it's fired after Handsontable appends information about a column header to the table header
125
  afterGetColHeader(col, TH) {
126
    // remove the column menu button from the 'Brand', 'Price', and 'Date' columns
127
    if (col > 1) {
128
      const button = TH.querySelector('.changeType')!;
129

130
      if (!button) {
131
        return;
132
      }
133

134
      button.parentElement!.removeChild(button);
135
    }
136
  },
137
  height: 'auto',
138
  example: 'exampleEnableFilterInColumns',
139
  autoWrapRow: true,
140
  autoWrapCol: true,
141
  licenseKey: 'non-commercial-and-evaluation',
142
} as Handsontable.GridSettings);

1
<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.

1
const configurationOptions = {
2
  // enable filtering
3
  filters: {
4
    searchMode: 'apply'
5
  },
6
  // enable the column menu
7
  dropdownMenu: true,
8
};

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering with option
98
  filters: {
99
    searchMode: 'apply',
100
  },
101
  dropdownMenu: true,
102
  height: 'auto',
103
  autoWrapRow: true,
104
  autoWrapCol: true,
105
  licenseKey: 'non-commercial-and-evaluation',
106
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering with option
98
  filters: {
99
    searchMode: 'apply',
100
  },
101
  dropdownMenu: true,
102
  height: 'auto',
103
  autoWrapRow: true,
104
  autoWrapCol: true,
105
  licenseKey: 'non-commercial-and-evaluation',
106
});

1
<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.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      model: 'Racing Socks',
13
      size: 'S',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
      color: 'Black',
19
    },
20
    {
21
      model: 'HL Mountain Shirt',
22
      size: 'XS',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
      color: 'White',
28
    },
29
    {
30
      model: 'Cycling Cap',
31
      size: 'L',
32
      price: 130.1,
33
      sellDate: '2023-03-27',
34
      sellTime: '03:17',
35
      inStock: true,
36
      color: 'Green',
37
    },
38
    {
39
      model: 'Ski Jacket',
40
      size: 'M',
41
      price: 59,
42
      sellDate: '2023-08-28',
43
      sellTime: '08:01',
44
      inStock: true,
45
      color: 'Blue',
46
    },
47
    {
48
      model: 'HL Goggles',
49
      size: 'XL',
50
      price: 279.99,
51
      sellDate: '2023-10-02',
52
      sellTime: '01:23',
53
      inStock: true,
54
      color: 'Black',
55
    },
56
  ],
57
  columns: [
58
    {
59
      title: 'Model',
60
      // set the type of the 'Model' column
61
      type: 'text',
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      // set the type of the 'Price' column
67
      type: 'numeric',
68
      data: 'price',
69
      locale: 'en-US',
70
      numericFormat: {
71
        style: 'currency',
72
        currency: 'USD',
73
        minimumFractionDigits: 2,
74
      },
75
    },
76
    {
77
      title: 'Sold on',
78
      // set the type of the 'Date' column
79
      type: 'intl-date',
80
      data: 'sellDate',
81
      locale: 'en-US',
82
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
83
      className: 'htRight',
84
    },
85
    {
86
      title: 'Time',
87
      // set the type of the 'Time' column
88
      type: 'intl-time',
89
      data: 'sellTime',
90
      locale: 'en-US',
91
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
92
      className: 'htRight',
93
    },
94
    {
95
      title: 'In stock',
96
      // set the type of the 'In stock' column
97
      type: 'checkbox',
98
      data: 'inStock',
99
      className: 'htCenter',
100
    },
101
    {
102
      title: 'Size',
103
      // set the type of the 'Size' column
104
      type: 'dropdown',
105
      data: 'size',
106
      source: ['XS', 'S', 'M', 'L', 'XL'],
107
      className: 'htCenter',
108
    },
109
    {
110
      title: 'Color',
111
      // set the type of the 'Size' column
112
      type: 'autocomplete',
113
      data: 'color',
114
      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],
115
      className: 'htCenter',
116
    },
117
  ],
118
  // enable filtering
119
  filters: true,
120
  // enable the column menu
121
  dropdownMenu: true,
122
  height: 175,
123
  autoWrapRow: true,
124
  autoWrapCol: true,
125
  licenseKey: 'non-commercial-and-evaluation',
126
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      model: 'Racing Socks',
13
      size: 'S',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
      color: 'Black',
19
    },
20
    {
21
      model: 'HL Mountain Shirt',
22
      size: 'XS',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
      color: 'White',
28
    },
29
    {
30
      model: 'Cycling Cap',
31
      size: 'L',
32
      price: 130.1,
33
      sellDate: '2023-03-27',
34
      sellTime: '03:17',
35
      inStock: true,
36
      color: 'Green',
37
    },
38
    {
39
      model: 'Ski Jacket',
40
      size: 'M',
41
      price: 59,
42
      sellDate: '2023-08-28',
43
      sellTime: '08:01',
44
      inStock: true,
45
      color: 'Blue',
46
    },
47
    {
48
      model: 'HL Goggles',
49
      size: 'XL',
50
      price: 279.99,
51
      sellDate: '2023-10-02',
52
      sellTime: '01:23',
53
      inStock: true,
54
      color: 'Black',
55
    },
56
  ],
57
  columns: [
58
    {
59
      title: 'Model',
60
      // set the type of the 'Model' column
61
      type: 'text', // 'text' is the default type, so you can omit this line
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      // set the type of the 'Price' column
67
      type: 'numeric',
68
      data: 'price',
69
      locale: 'en-US',
70
      numericFormat: {
71
        style: 'currency',
72
        currency: 'USD',
73
        minimumFractionDigits: 2,
74
      },
75
    },
76
    {
77
      title: 'Sold on',
78
      // set the type of the 'Date' column
79
      type: 'intl-date',
80
      data: 'sellDate',
81
      locale: 'en-US',
82
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
83
      className: 'htRight',
84
    },
85
    {
86
      title: 'Time',
87
      // set the type of the 'Time' column
88
      type: 'intl-time',
89
      data: 'sellTime',
90
      locale: 'en-US',
91
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
92
      className: 'htRight',
93
    },
94
    {
95
      title: 'In stock',
96
      // set the type of the 'In stock' column
97
      type: 'checkbox',
98
      data: 'inStock',
99
      className: 'htCenter',
100
    },
101
    {
102
      title: 'Size',
103
      // set the type of the 'Size' column
104
      type: 'dropdown',
105
      data: 'size',
106
      source: ['XS', 'S', 'M', 'L', 'XL'],
107
      className: 'htCenter',
108
    },
109
    {
110
      title: 'Color',
111
      // set the type of the 'Size' column
112
      type: 'autocomplete',
113
      data: 'color',
114
      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],
115
      className: 'htCenter',
116
    },
117
  ],
118
  // enable filtering
119
  filters: true,
120
  // enable the column menu
121
  dropdownMenu: true,
122
  height: 175,
123
  autoWrapRow: true,
124
  autoWrapCol: true,
125
  licenseKey: 'non-commercial-and-evaluation',
126
});

1
<div id="exampleFilterDifferentTypes"></div>

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

Cell type	Available filter operators
All cell types	Default 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
numeric	Default operators plus: Greater than Greater than or equal to Less than Less than or equal to Is between Is not between
date	Default operators plus: Before (exclusive — boundary date excluded) Before or equal to (boundary date included) After (exclusive — boundary date excluded) After or equal to (boundary date included) Is between Tomorrow Today Yesterday
intl-date	Default operators plus: Before (exclusive — boundary date excluded) Before or equal to (boundary date included) After (exclusive — boundary date excluded) After or equal to (boundary date included) Is between Tomorrow Today Yesterday
intl-time	Default operators plus: Begins with Ends with Contains Does not contain Before (exclusive — boundary time excluded) Before or equal to (boundary time included) After (exclusive — boundary time excluded) After or equal to (boundary time included) Is between

The None operator clears the column’s filter. Its programmatic equivalent is filters.removeConditions(column). For more on clearing filters with the API, see Clear a column filter.

For the Before, After, Before or equal to, After or equal to, and Is between operators on date, intl-date, and intl-time columns, the filter menu shows a native date or time input. Pick the value from the browser’s picker or type it in your locale’s format. When you set the condition through the API instead, pass the value as an ISO 8601 string (YYYY-MM-DD for dates, HH:mm for times).

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.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu
100
  dropdownMenu: true,
101
  // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated
102
  afterInit() {
103
    const handsontableInstance = this;
104
    // get the `Filters` plugin, so you can use its API
105
    const filters = handsontableInstance.getPlugin('filters');
106

107
    // filter data by the 'Price' column (column at index 2)
108
    // to display only items that are less than ('lt') $200
109
    filters.addCondition(2, 'lt', [200]);
110
    filters.filter();
111
  },
112
  height: 'auto',
113
  autoWrapRow: true,
114
  autoWrapCol: true,
115
  licenseKey: 'non-commercial-and-evaluation',
116
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { Filters } from 'handsontable/plugins';
4

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

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

10
new Handsontable(container, {
11
  data: [
12
    {
13
      brand: 'Jetpulse',
14
      model: 'Racing Socks',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Gigabox',
22
      model: 'HL Mountain Frame',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
    },
28
    {
29
      brand: 'Camido',
30
      model: 'Cycling Cap',
31
      price: 130.1,
32
      sellDate: '2023-03-27',
33
      sellTime: '03:17',
34
      inStock: true,
35
    },
36
    {
37
      brand: 'Chatterpoint',
38
      model: 'Road Tire Tube',
39
      price: 59,
40
      sellDate: '2023-08-28',
41
      sellTime: '08:01',
42
      inStock: true,
43
    },
44
    {
45
      brand: 'Eidel',
46
      model: 'HL Road Tire',
47
      price: 279.99,
48
      sellDate: '2023-10-02',
49
      sellTime: '01:23',
50
      inStock: true,
51
    },
52
  ],
53
  columns: [
54
    {
55
      title: 'Brand',
56
      type: 'text',
57
      data: 'brand',
58
    },
59
    {
60
      title: 'Model',
61
      type: 'text',
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      type: 'numeric',
67
      data: 'price',
68
      locale: 'en-US',
69
      numericFormat: {
70
        style: 'currency',
71
        currency: 'USD',
72
        minimumFractionDigits: 2,
73
      },
74
    },
75
    {
76
      title: 'Date',
77
      type: 'intl-date',
78
      data: 'sellDate',
79
      locale: 'en-US',
80
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
81
      className: 'htRight',
82
    },
83
    {
84
      title: 'Time',
85
      type: 'intl-time',
86
      data: 'sellTime',
87
      locale: 'en-US',
88
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
89
      className: 'htRight',
90
    },
91
    {
92
      title: 'In stock',
93
      type: 'checkbox',
94
      data: 'inStock',
95
      className: 'htCenter',
96
    },
97
  ],
98
  // enable filtering
99
  filters: true,
100
  // enable the column menu
101
  dropdownMenu: true,
102
  // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated
103
  afterInit() {
104
    const handsontableInstance = this;
105
    // get the `Filters` plugin, so you can use its API
106
    const filters: Filters = handsontableInstance.getPlugin('filters');
107

108
    // filter data by the 'Price' column (column at index 2)
109
    // to display only items that are less than ('lt') $200
110
    filters.addCondition(2, 'lt', [200]);
111
    filters.filter();
112
  },
113
  height: 'auto',
114
  autoWrapRow: true,
115
  autoWrapCol: true,
116
  licenseKey: 'non-commercial-and-evaluation',
117
});

1
<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().

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

10
// Custom dropdown logic
11
const trigger = document.getElementById('filterTrigger');
12
const menu = document.getElementById('filterMenu');
13
const label = document.getElementById('filterTriggerLabel');
14
let selectedColumn = '0';
15

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

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

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

26
  if (!li) return;
27

28
  menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));
29
  li.setAttribute('aria-selected', 'true');
30
  selectedColumn = li.dataset.value;
31
  label.textContent = li.textContent.trim();
32
  trigger.setAttribute('aria-expanded', 'false');
33
  menu.hidden = true;
34
});
35

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

43
const hot = new Handsontable(container, {
44
  data: [
45
    {
46
      brand: 'Jetpulse',
47
      model: 'Racing Socks',
48
      price: 30,
49
      sellDate: '2023-10-11',
50
      sellTime: '01:23',
51
      inStock: false,
52
    },
53
    {
54
      brand: 'Gigabox',
55
      model: 'HL Mountain Frame',
56
      price: 1890.9,
57
      sellDate: '2023-05-03',
58
      sellTime: '11:27',
59
      inStock: false,
60
    },
61
    {
62
      brand: 'Camido',
63
      model: 'Cycling Cap',
64
      price: 130.1,
65
      sellDate: '2023-03-27',
66
      sellTime: '03:17',
67
      inStock: true,
68
    },
69
    {
70
      brand: 'Chatterpoint',
71
      model: 'Road Tire Tube',
72
      price: 59,
73
      sellDate: '2023-08-28',
74
      sellTime: '08:01',
75
      inStock: true,
76
    },
77
    {
78
      brand: 'Eidel',
79
      model: 'HL Road Tire',
80
      price: 279.99,
81
      sellDate: '2023-10-02',
82
      sellTime: '13:23',
83
      inStock: true,
84
    },
85
  ],
86
  columns: [
87
    {
88
      title: 'Brand',
89
      type: 'text',
90
      data: 'brand',
91
    },
92
    {
93
      title: 'Model',
94
      type: 'text',
95
      data: 'model',
96
    },
97
    {
98
      title: 'Price',
99
      type: 'numeric',
100
      data: 'price',
101
      locale: 'en-US',
102
      numericFormat: {
103
        style: 'currency',
104
        currency: 'USD',
105
        minimumFractionDigits: 2,
106
      },
107
    },
108
    {
109
      title: 'Date',
110
      type: 'intl-date',
111
      data: 'sellDate',
112
      className: 'htRight',
113
    },
114
    {
115
      title: 'Time',
116
      type: 'intl-time',
117
      data: 'sellTime',
118
      className: 'htRight',
119
    },
120
    {
121
      title: 'In stock',
122
      type: 'checkbox',
123
      data: 'inStock',
124
      className: 'htCenter',
125
    },
126
  ],
127
  colHeaders: true,
128
  height: 'auto',
129
  filters: true,
130
  className: 'exampleQuickFilter',
131
  autoWrapRow: true,
132
  autoWrapCol: true,
133
  licenseKey: 'non-commercial-and-evaluation',
134
});
135

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

140
  filters.removeConditions(selectedColumn);
141
  filters.addCondition(selectedColumn, 'contains', [event.target.value]);
142
  filters.filter();
143
  hot.render();
144
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { Filters } from 'handsontable/plugins';
4

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

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

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

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

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

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

27
  if (!li) return;
28

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

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

44
const hot = new Handsontable(container, {
45
  data: [
46
    {
47
      brand: 'Jetpulse',
48
      model: 'Racing Socks',
49
      price: 30,
50
      sellDate: '2023-10-11',
51
      sellTime: '01:23',
52
      inStock: false,
53
    },
54
    {
55
      brand: 'Gigabox',
56
      model: 'HL Mountain Frame',
57
      price: 1890.9,
58
      sellDate: '2023-05-03',
59
      sellTime: '11:27',
60
      inStock: false,
61
    },
62
    {
63
      brand: 'Camido',
64
      model: 'Cycling Cap',
65
      price: 130.1,
66
      sellDate: '2023-03-27',
67
      sellTime: '03:17',
68
      inStock: true,
69
    },
70
    {
71
      brand: 'Chatterpoint',
72
      model: 'Road Tire Tube',
73
      price: 59,
74
      sellDate: '2023-08-28',
75
      sellTime: '08:01',
76
      inStock: true,
77
    },
78
    {
79
      brand: 'Eidel',
80
      model: 'HL Road Tire',
81
      price: 279.99,
82
      sellDate: '2023-10-02',
83
      sellTime: '13:23',
84
      inStock: true,
85
    },
86
  ],
87
  columns: [
88
    {
89
      title: 'Brand',
90
      type: 'text',
91
      data: 'brand',
92
    },
93
    {
94
      title: 'Model',
95
      type: 'text',
96
      data: 'model',
97
    },
98
    {
99
      title: 'Price',
100
      type: 'numeric',
101
      data: 'price',
102
      locale: 'en-US',
103
      numericFormat: {
104
        style: 'currency',
105
        currency: 'USD',
106
        minimumFractionDigits: 2,
107
      },
108
    },
109
    {
110
      title: 'Date',
111
      type: 'intl-date',
112
      data: 'sellDate',
113
      className: 'htRight',
114
    },
115
    {
116
      title: 'Time',
117
      type: 'intl-time',
118
      data: 'sellTime',
119
      className: 'htRight',
120
    },
121
    {
122
      title: 'In stock',
123
      type: 'checkbox',
124
      data: 'inStock',
125
      className: 'htCenter',
126
    },
127
  ],
128
  colHeaders: true,
129
  height: 'auto',
130
  filters: true,
131
  className: 'exampleQuickFilter',
132
  autoWrapRow: true,
133
  autoWrapCol: true,
134
  licenseKey: 'non-commercial-and-evaluation',
135
});
136

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

141
  filters.removeConditions(selectedColumn as unknown as number);
142
  filters.addCondition(selectedColumn as unknown as number, 'contains', [(event.target as HTMLInputElement).value]);
143
  filters.filter();
144
  hot.render();
145
});

1
<div class="example-controls-container">
2
  <div class="controlsQuickFilter">
3
    <div class="filter-dropdown" id="filterDropdown">
4
      <label class="filter-dropdown-label">Select a column:</label>
5
      <button class="filter-dropdown-trigger" id="filterTrigger" type="button" aria-haspopup="listbox" aria-expanded="false">
6
        <span class="filter-dropdown-text" id="filterTriggerLabel">Brand</span>
7
        <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>
8
      </button>
9
      <ul class="filter-dropdown-menu" id="filterMenu" role="listbox" hidden>
10
        <li role="option" data-value="0" aria-selected="true">Brand</li>
11
        <li role="option" data-value="1">Model</li>
12
        <li role="option" data-value="2">Price</li>
13
        <li role="option" data-value="3">Date</li>
14
        <li role="option" data-value="4">Time</li>
15
        <li role="option" data-value="5">In stock</li>
16
      </ul>
17
    </div>
18
    <input id="filterField" type="text" placeholder="Filter" />
19
  </div>
20
</div>
21
<div id="exampleQuickFilter"></div>

1
.controlsQuickFilter {
2
  position: relative;
3
  display: flex;
4
  align-items: center;
5
  gap: 0.75rem;
6
  margin: 0;
7
  padding: 0;
8
}
9

10
#filterField {
11
  border: 1px solid var(--sl-color-gray-5, #e0e0e0);
12
  background: none;
13
  color: var(--sl-color-text, #333333);
14
  font-size: var(--sl-text-sm, 0.875rem);
15
  padding: 0.4rem 0.625rem;
16
  outline: none;
17
  width: 140px;
18
}
19

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

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

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

33
/* Filter dropdown */
34
.filter-dropdown {
35
  position: relative;
36
  display: inline-flex;
37
  align-items: center;
38
  gap: 0.5rem;
39
}
40

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

47
.filter-dropdown-trigger {
48
  display: inline-flex;
49
  align-items: center;
50
  gap: 0.5rem;
51
  background: none;
52
  border: 1px solid var(--sl-color-gray-5, #e0e0e0);
53
  color: var(--sl-color-gray-2, #555555);
54
  cursor: pointer;
55
  font-size: var(--sl-text-sm, 0.875rem);
56
  font-weight: 500;
57
  padding: 0.4rem 0.625rem;
58
  transition: color 0.15s, background-color 0.15s;
59
  white-space: nowrap;
60
  border-radius: 0;
61
}
62

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

68
.filter-dropdown-chevron {
69
  flex-shrink: 0;
70
  margin-inline-start: 0.15rem;
71
  transition: transform 0.15s;
72
}
73

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

78
.filter-dropdown-menu {
79
  background: var(--sl-color-bg-nav, #ffffff);
80
  border: 1px solid var(--sl-color-gray-5, #e0e0e0);
81
  border-radius: 0;
82
  box-shadow: none;
83
  inset-inline-start: 0;
84
  list-style: none;
85
  margin: 0;
86
  min-width: 100%;
87
  overflow-y: auto;
88
  padding: 0;
89
  position: absolute;
90
  top: 100%;
91
  z-index: 9999;
92
}
93

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

98
.filter-dropdown-menu li {
99
  align-items: center;
100
  color: var(--sl-color-text, #333333);
101
  display: flex;
102
  font-size: var(--sl-text-sm, 0.875rem);
103
  padding: 0.5rem 0.75rem;
104
  cursor: pointer;
105
  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);
106
  transition: background 0.1s, color 0.1s;
107
  white-space: nowrap;
108
  list-style: none;
109
  margin: 0;
110
}
111

112
.filter-dropdown-menu li:last-child {
113
  border-bottom: none;
114
}
115

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

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

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.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu
100
  dropdownMenu: true,
101
  // to differentiate this example's CSS from other examples on this page
102
  className: 'customFilterButtonExample1',
103
  height: 'auto',
104
  autoWrapRow: true,
105
  autoWrapCol: true,
106
  licenseKey: 'non-commercial-and-evaluation',
107
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu
100
  dropdownMenu: true,
101
  // to differentiate this example's CSS from other examples on this page
102
  className: 'customFilterButtonExample1',
103
  height: 'auto',
104
  autoWrapRow: true,
105
  autoWrapCol: true,
106
  licenseKey: 'non-commercial-and-evaluation',
107
});

1
<div id="exampleCustomFilterButton"></div>

1
.handsontable.customFilterButtonExample1 .changeType {
2
  --ht-icon-button-background-color: #e2e2e263;
3
  --ht-icon-button-border-radius: 100%;
4
}
5

6
.handsontable.customFilterButtonExample1 .changeType::before {
7
  -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");
8
}

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.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu
100
  dropdownMenu: true,
101
  // to differentiate this example's CSS from other examples on this page
102
  className: 'customFilterButtonExample2',
103
  height: 'auto',
104
  autoWrapRow: true,
105
  autoWrapCol: true,
106
  licenseKey: 'non-commercial-and-evaluation',
107
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu
100
  dropdownMenu: true,
101
  // to differentiate this example's CSS from other examples on this page
102
  className: 'customFilterButtonExample2',
103
  height: 'auto',
104
  autoWrapRow: true,
105
  autoWrapCol: true,
106
  licenseKey: 'non-commercial-and-evaluation',
107
});

1
<div id="exampleCustomFilterButton2"></div>

1
/* hide the column menu button by default */
2
.customFilterButtonExample2 .changeType {
3
  visibility: hidden;
4
}
5

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

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.

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

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.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
// Register all Handsontable's modules.
4
registerAllModules();
5
const container = document.querySelector('#exampleExcludeRowsFromFiltering');
6
new Handsontable(container, {
7
    data: [
8
        {
9
            brand: 'Gigabox',
10
            model: 'HL Mountain Frame',
11
            price: 1890.9,
12
            sellDate: '2023-05-03',
13
            sellTime: '11:27',
14
            inStock: 11,
15
        },
16
        {
17
            brand: 'Camido',
18
            model: 'Cycling Cap',
19
            price: 130.1,
20
            sellDate: '2023-03-27',
21
            sellTime: '03:17',
22
            inStock: 0,
23
        },
24
        {
25
            brand: 'Chatterpoint',
26
            model: 'Road Tire Tube',
27
            price: 59,
28
            sellDate: '2023-08-28',
29
            sellTime: '08:01',
30
            inStock: 1,
31
        },
32
        {
33
            brand: 'Eidel',
34
            model: 'HL Road Tire',
35
            price: 279.99,
36
            sellDate: '2023-10-02',
37
            sellTime: '13:23',
38
            inStock: 3,
39
        },
40
        {
41
            brand: 'Jetpulse',
42
            model: 'Racing Socks',
43
            price: 30,
44
            sellDate: '2023-10-11',
45
            sellTime: '01:23',
46
            inStock: 5,
47
        },
48
        {
49
            brand: 'Gigabox',
50
            model: 'HL Mountain Frame',
51
            price: 1890.9,
52
            sellDate: '2023-05-03',
53
            sellTime: '11:27',
54
            inStock: 22,
55
        },
56
        {
57
            brand: 'Camido',
58
            model: 'Cycling Cap',
59
            price: 130.1,
60
            sellDate: '2023-03-27',
61
            sellTime: '03:17',
62
            inStock: 13,
63
        },
64
        {
65
            brand: 'Chatterpoint',
66
            model: 'Road Tire Tube',
67
            price: 59,
68
            sellDate: '2023-08-28',
69
            sellTime: '08:01',
70
            inStock: 0,
71
        },
72
        {
73
            brand: 'Eidel',
74
            model: 'HL Road Tire',
75
            price: 279.99,
76
            sellDate: '2023-10-02',
77
            sellTime: '13:23',
78
            inStock: 14,
79
        },
80
        {
81
            brand: 'Jetpulse',
82
            model: 'Racing Socks',
83
            price: 30,
84
            sellDate: '2023-10-11',
85
            sellTime: '01:23',
86
            inStock: 16,
87
        },
88
        {
89
            brand: 'Gigabox',
90
            model: 'HL Mountain Frame',
91
            price: 1890.9,
92
            sellDate: '2023-05-03',
93
            sellTime: '11:27',
94
            inStock: 18,
95
        },
96
        {
97
            brand: 'Camido',
98
            model: 'Cycling Cap',
99
            price: 130.1,
100
            sellDate: '2023-03-27',
101
            sellTime: '03:17',
102
            inStock: 3,
103
        },
104
        {
105
            brand: 'Chatterpoint',
106
            model: 'Road Tire Tube',
107
            price: 59,
108
            sellDate: '2023-08-28',
109
            sellTime: '08:01',
110
            inStock: 0,
111
        },
112
        {
113
            brand: 'Vinte',
114
            model: 'ML Road Frame-W',
115
            price: 30,
116
            sellDate: '2023-10-11',
117
            sellTime: '01:23',
118
            inStock: 2,
119
        },
120
    ],
121
    columns: [
122
        {
123
            title: 'Brand',
124
            type: 'text',
125
            data: 'brand',
126
        },
127
        {
128
            title: 'Model',
129
            type: 'text',
130
            data: 'model',
131
        },
132
        {
133
            title: 'Price',
134
            type: 'numeric',
135
            data: 'price',
136
            locale: 'en-US',
137
            numericFormat: {
138
                style: 'currency',
139
                currency: 'USD',
140
                minimumFractionDigits: 2,
141
            },
142
            className: 'htRight',
143
        },
144
        {
145
            title: 'Date',
146
            type: 'intl-date',
147
            data: 'sellDate',
148
            locale: 'en-US',
149
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
150
            className: 'htRight',
151
        },
152
        {
153
            title: 'Time',
154
            type: 'intl-time',
155
            data: 'sellTime',
156
            locale: 'en-US',
157
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
158
            className: 'htRight',
159
        },
160
        {
161
            title: 'In stock',
162
            type: 'numeric',
163
            data: 'inStock',
164
            className: 'htCenter',
165
        },
166
    ],
167
    height: 200,
168
    colWidths: [120, 150, 120, 140, 120, 120],
169
    fixedRowsTop: 1,
170
    fixedRowsBottom: 1,
171
    colHeaders: true,
172
    // enable filtering
173
    filters: true,
174
    // enable the column menu
175
    dropdownMenu: true,
176
    afterFilter() {
177
        const filtersPlugin = this.getPlugin('filters');
178
        const filtersRowsMap = filtersPlugin.filtersRowsMap;
179
        filtersRowsMap.setValueAtIndex(0, false);
180
        filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);
181
    },
182
    autoWrapRow: true,
183
    autoWrapCol: true,
184
    licenseKey: 'non-commercial-and-evaluation',
185
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { Filters } from 'handsontable/plugins';
4

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

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

10
new Handsontable(container, {
11
  data: [
12
    {
13
      brand: 'Gigabox',
14
      model: 'HL Mountain Frame',
15
      price: 1890.9,
16
      sellDate: '2023-05-03',
17
      sellTime: '11:27',
18
      inStock: 11,
19
    },
20
    {
21
      brand: 'Camido',
22
      model: 'Cycling Cap',
23
      price: 130.1,
24
      sellDate: '2023-03-27',
25
      sellTime: '03:17',
26
      inStock: 0,
27
    },
28
    {
29
      brand: 'Chatterpoint',
30
      model: 'Road Tire Tube',
31
      price: 59,
32
      sellDate: '2023-08-28',
33
      sellTime: '08:01',
34
      inStock: 1,
35
    },
36
    {
37
      brand: 'Eidel',
38
      model: 'HL Road Tire',
39
      price: 279.99,
40
      sellDate: '2023-10-02',
41
      sellTime: '13:23',
42
      inStock: 3,
43
    },
44
    {
45
      brand: 'Jetpulse',
46
      model: 'Racing Socks',
47
      price: 30,
48
      sellDate: '2023-10-11',
49
      sellTime: '01:23',
50
      inStock: 5,
51
    },
52
    {
53
      brand: 'Gigabox',
54
      model: 'HL Mountain Frame',
55
      price: 1890.9,
56
      sellDate: '2023-05-03',
57
      sellTime: '11:27',
58
      inStock: 22,
59
    },
60
    {
61
      brand: 'Camido',
62
      model: 'Cycling Cap',
63
      price: 130.1,
64
      sellDate: '2023-03-27',
65
      sellTime: '03:17',
66
      inStock: 13,
67
    },
68
    {
69
      brand: 'Chatterpoint',
70
      model: 'Road Tire Tube',
71
      price: 59,
72
      sellDate: '2023-08-28',
73
      sellTime: '08:01',
74
      inStock: 0,
75
    },
76
    {
77
      brand: 'Eidel',
78
      model: 'HL Road Tire',
79
      price: 279.99,
80
      sellDate: '2023-10-02',
81
      sellTime: '13:23',
82
      inStock: 14,
83
    },
84
    {
85
      brand: 'Jetpulse',
86
      model: 'Racing Socks',
87
      price: 30,
88
      sellDate: '2023-10-11',
89
      sellTime: '01:23',
90
      inStock: 16,
91
    },
92
    {
93
      brand: 'Gigabox',
94
      model: 'HL Mountain Frame',
95
      price: 1890.9,
96
      sellDate: '2023-05-03',
97
      sellTime: '11:27',
98
      inStock: 18,
99
    },
100
    {
101
      brand: 'Camido',
102
      model: 'Cycling Cap',
103
      price: 130.1,
104
      sellDate: '2023-03-27',
105
      sellTime: '03:17',
106
      inStock: 3,
107
    },
108
    {
109
      brand: 'Chatterpoint',
110
      model: 'Road Tire Tube',
111
      price: 59,
112
      sellDate: '2023-08-28',
113
      sellTime: '08:01',
114
      inStock: 0,
115
    },
116
    {
117
      brand: 'Vinte',
118
      model: 'ML Road Frame-W',
119
      price: 30,
120
      sellDate: '2023-10-11',
121
      sellTime: '01:23',
122
      inStock: 2,
123
    },
124
  ],
125
  columns: [
126
    {
127
      title: 'Brand',
128
      type: 'text',
129
      data: 'brand',
130
    },
131
    {
132
      title: 'Model',
133
      type: 'text',
134
      data: 'model',
135
    },
136
    {
137
      title: 'Price',
138
      type: 'numeric',
139
      data: 'price',
140
      locale: 'en-US',
141
      numericFormat: {
142
        style: 'currency',
143
        currency: 'USD',
144
        minimumFractionDigits: 2,
145
      },
146
      className: 'htRight',
147
    },
148
    {
149
      title: 'Date',
150
      type: 'intl-date',
151
      data: 'sellDate',
152
      locale: 'en-US',
153
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
154
      className: 'htRight',
155
    },
156
    {
157
      title: 'Time',
158
      type: 'intl-time',
159
      data: 'sellTime',
160
      locale: 'en-US',
161
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
162
      className: 'htRight',
163
    },
164
    {
165
      title: 'In stock',
166
      type: 'numeric',
167
      data: 'inStock',
168
      className: 'htCenter',
169
    },
170
  ],
171
  height: 200,
172
  colWidths: [120, 150, 120, 140, 120, 120],
173
  fixedRowsTop: 1,
174
  fixedRowsBottom: 1,
175
  colHeaders: true,
176
  // enable filtering
177
  filters: true,
178
  // enable the column menu
179
  dropdownMenu: true,
180
  afterFilter() {
181
    const filtersPlugin: Filters = (this as Handsontable).getPlugin('filters');
182
    const filtersRowsMap = filtersPlugin.filtersRowsMap;
183

184
    filtersRowsMap.setValueAtIndex(0, false);
185
    filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);
186
  },
187
  autoWrapRow: true,
188
  autoWrapCol: true,
189
  licenseKey: 'non-commercial-and-evaluation',
190
});

1
<div id="exampleExcludeRowsFromFiltering"></div>

If you use bindRowsWithHeaders to keep row headers tied to a row’s position in the source data, filtering doesn’t affect that binding. Filtering removes non-matching rows from view instead of renumbering the rows that remain, so bound row headers keep pointing to the same row after you filter or clear a filter.

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:

Gather information about the filters that the user wants to apply, to send it to the server.
Disable filtering on the front end, so it doesn’t interfere with filtering on the server.

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.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu
100
  dropdownMenu: true,
101
  height: 'auto',
102
  // `beforeFilter()` is a Handsontable hook
103
  // it's fired after Handsontable gathers information about the filters, but before the filters are applied
104
  beforeFilter(conditionsStack) {
105
    // gather information about the filters
106
    console.log(`The amount of filters: ${conditionsStack.length}`);
107

108
    // when the filters are cleared, the conditions stack is empty
109
    const [lastChanged] = conditionsStack;
110

111
    if (lastChanged) {
112
      console.log(`The last changed column index: ${lastChanged.column}`);
113
      console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);
114
      // the list of filter conditions
115
      console.log(lastChanged.conditions);
116
    }
117

118
    // return `false` to disable filtering on the client side
119
    return false;
120
  },
121
  autoWrapRow: true,
122
  autoWrapCol: true,
123
  licenseKey: 'non-commercial-and-evaluation',
124
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

9
new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu
100
  dropdownMenu: true,
101
  height: 'auto',
102
  // `beforeFilter()` is a Handsontable hook
103
  // it's fired after Handsontable gathers information about the filters, but before the filters are applied
104
  beforeFilter(conditionsStack) {
105
    // gather information about the filters
106
    console.log(`The amount of filters: ${conditionsStack.length}`);
107

108
    // when the filters are cleared, the conditions stack is empty
109
    const [lastChanged] = conditionsStack;
110

111
    if (lastChanged) {
112
      console.log(`The last changed column index: ${lastChanged.column}`);
113
      console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);
114
      // the list of filter conditions
115
      console.log(lastChanged.conditions);
116
    }
117

118
    // return `false` to disable filtering on the client side
119
    return false;
120
  },
121
  autoWrapRow: true,
122
  autoWrapCol: true,
123
  licenseKey: 'non-commercial-and-evaluation',
124
});

1
<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.

1
handsontableInstance.updateSettings({
2
  // enable filtering
3
  filters: true,
4
  // enable the column menu
5
  dropdownMenu: true,
6
});
7

8
handsontableInstance.updateSettings({
9
  // disable filtering
10
  filters: false,
11
});

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

1
handsontableInstance.updateSettings({
2
  // enable filtering, for all columns
3
  filters: true,
4
  // enable the column menu, for all columns
5
  // but display only the 'Filter by value' list and the 'OK' and
6
  // 'Cancel' buttons
7
  dropdownMenu: {
8
    items: {
9
      filter_by_value: {
10
        // hide the 'Filter by value' list from all columns but the
11
        // first one
12
        hidden() {
13
          return this.getSelectedRangeLast().to.col > 0;
14
        },
15
      },
16
      filter_action_bar: {
17
        // hide the 'OK' and 'Cancel' buttons from all columns but the
18
        // first one
19
        hidden() {
20
          return this.getSelectedRangeLast().to.col > 0;
21
        },
22
      },
23
    },
24
  },
25
});

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().

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

7
const container = document.querySelector('#exampleFilterThroughAPI1');
8
const hot = new Handsontable(container, {
9
  data: [
10
    {
11
      brand: 'Jetpulse',
12
      model: 'Racing Socks',
13
      price: 30,
14
      sellDate: '2023-10-11',
15
      sellTime: '01:23',
16
      inStock: false,
17
    },
18
    {
19
      brand: 'Gigabox',
20
      model: 'HL Mountain Frame',
21
      price: 1890.9,
22
      sellDate: '2023-05-03',
23
      sellTime: '11:27',
24
      inStock: false,
25
    },
26
    {
27
      brand: 'Camido',
28
      model: 'Cycling Cap',
29
      price: 130.1,
30
      sellDate: '2023-03-27',
31
      sellTime: '03:17',
32
      inStock: true,
33
    },
34
    {
35
      brand: 'Chatterpoint',
36
      model: 'Road Tire Tube',
37
      price: 59,
38
      sellDate: '2023-08-28',
39
      sellTime: '08:01',
40
      inStock: true,
41
    },
42
    {
43
      brand: 'Eidel',
44
      model: 'HL Road Tire',
45
      price: 279.99,
46
      sellDate: '2023-10-02',
47
      sellTime: '01:23',
48
      inStock: true,
49
    },
50
  ],
51
  columns: [
52
    {
53
      title: 'Brand',
54
      type: 'text',
55
      data: 'brand',
56
    },
57
    {
58
      title: 'Model',
59
      type: 'text',
60
      data: 'model',
61
    },
62
    {
63
      title: 'Price',
64
      type: 'numeric',
65
      data: 'price',
66
      locale: 'en-US',
67
      numericFormat: {
68
        style: 'currency',
69
        currency: 'USD',
70
        minimumFractionDigits: 2,
71
      },
72
    },
73
    {
74
      title: 'Date',
75
      type: 'intl-date',
76
      data: 'sellDate',
77
      locale: 'en-US',
78
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
79
      className: 'htRight',
80
    },
81
    {
82
      title: 'Time',
83
      type: 'intl-time',
84
      data: 'sellTime',
85
      locale: 'en-US',
86
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
87
      className: 'htRight',
88
    },
89
    {
90
      title: 'In stock',
91
      type: 'checkbox',
92
      data: 'inStock',
93
      className: 'htCenter',
94
    },
95
  ],
96
  // enable filtering
97
  filters: true,
98
  // enable the column menu
99
  dropdownMenu: true,
100
  height: 'auto',
101
  autoWrapRow: true,
102
  autoWrapCol: true,
103
  licenseKey: 'non-commercial-and-evaluation',
104
});
105

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

109
document.querySelector('.filterBelow200').addEventListener('click', () => {
110
  // clear any existing filters
111
  filters.clearConditions();
112
  // filter data by the 'Price' column (column at index 2)
113
  // to display only items that are less than ('lt') $200
114
  filters.addCondition(2, 'lt', [200]);
115
  filters.filter();
116
});
117
document.querySelector('.filterAbove200').addEventListener('click', () => {
118
  filters.clearConditions();
119
  // display only items that are more than ('gt') $200
120
  filters.addCondition(2, 'gt', [200]);
121
  filters.filter();
122
});
123
document.querySelector('.clearAllFilters').addEventListener('click', () => {
124
  filters.clearConditions();
125
  filters.filter();
126
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { Filters } from 'handsontable/plugins';
4

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

8
const container = document.querySelector('#exampleFilterThroughAPI1')!;
9
const hot = new Handsontable(container, {
10
  data: [
11
    {
12
      brand: 'Jetpulse',
13
      model: 'Racing Socks',
14
      price: 30,
15
      sellDate: '2023-10-11',
16
      sellTime: '01:23',
17
      inStock: false,
18
    },
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: true,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '01:23',
49
      inStock: true,
50
    },
51
  ],
52
  columns: [
53
    {
54
      title: 'Brand',
55
      type: 'text',
56
      data: 'brand',
57
    },
58
    {
59
      title: 'Model',
60
      type: 'text',
61
      data: 'model',
62
    },
63
    {
64
      title: 'Price',
65
      type: 'numeric',
66
      data: 'price',
67
      locale: 'en-US',
68
      numericFormat: {
69
        style: 'currency',
70
        currency: 'USD',
71
        minimumFractionDigits: 2,
72
      },
73
    },
74
    {
75
      title: 'Date',
76
      type: 'intl-date',
77
      data: 'sellDate',
78
      locale: 'en-US',
79
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
80
      className: 'htRight',
81
    },
82
    {
83
      title: 'Time',
84
      type: 'intl-time',
85
      data: 'sellTime',
86
      locale: 'en-US',
87
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
      className: 'htRight',
89
    },
90
    {
91
      title: 'In stock',
92
      type: 'checkbox',
93
      data: 'inStock',
94
      className: 'htCenter',
95
    },
96
  ],
97
  // enable filtering
98
  filters: true,
99
  // enable the column menu
100
  dropdownMenu: true,
101
  height: 'auto',
102
  autoWrapRow: true,
103
  autoWrapCol: true,
104
  licenseKey: 'non-commercial-and-evaluation',
105
});
106

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

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

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

126
document.querySelector('.clearAllFilters')!.addEventListener('click', () => {
127
  filters.clearConditions();
128
  filters.filter();
129
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button class="filterBelow200">Show items &lt; $200</button>
4
    <button class="filterAbove200">Show items &gt; $200</button>
5
    <button class="clearAllFilters">Clear filters</button>
6
  </div>
7
</div>
8
<div id="exampleFilterThroughAPI1"></div>

Combine multiple filter conditions

A column can hold more than one condition. The fourth argument of filters.addCondition() sets the logical operation that joins the conditions for that column:

'conjunction' — AND logic. Every condition must match. This is the default, so you can omit the argument.
'disjunction' — OR logic. At least one condition must match.

Apply the same operation to all conditions in a column. Don’t mix 'conjunction' and 'disjunction' for a single column.

The following snippet keeps the rows where the price (column index 2) is less than 200 or greater than 400.

1
const filters = handsontableInstance.getPlugin('filters');
2

3
// clear the column's existing conditions first
4
filters.clearConditions(2);
5

6
// match rows where the price is less than 200 OR greater than 400
7
filters.addCondition(2, 'lt', [200], 'disjunction');
8
filters.addCondition(2, 'gt', [400], 'disjunction');
9
filters.filter();

The dropdown menu shows at most two conditions plus one Filter by value condition per column. If you add more conditions than that, they still filter the data but don’t appear in the menu. See Known limitations.

Clear a column filter

To clear the conditions for a single column, call filters.removeConditions(column). This is the programmatic equivalent of selecting the None operator in the column menu.

1
const filters = handsontableInstance.getPlugin('filters');
2

3
// clear the filter for the column at index 2
4
filters.removeConditions(2);
5
filters.filter();

To clear the conditions for every column at once, call filters.clearConditions() without an argument.

Adding the 'none' condition with addCondition() has no filtering effect, because 'none' matches every row:

1
// matches all rows -- the column stays unfiltered
2
filters.addCondition(2, 'none', []);
3
filters.filter();

Save and restore filter settings

To persist a user’s filter selections (for example, across page reloads or between sessions), export the current conditions with filters.exportConditions(), and store the result. To reapply them later, pass the stored array to filters.importConditions(), then call filters.filter() to apply the change.

Unlike addCondition(), which takes a visual column index, the column property in each exported condition is a physical column index.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
// Register all Handsontable's modules.
4
registerAllModules();
5
const container = document.querySelector('#exampleSaveRestoreFilters');
6
const hot = new Handsontable(container, {
7
    data: [
8
        {
9
            brand: 'Jetpulse',
10
            model: 'Racing Socks',
11
            price: 30,
12
            sellDate: '2023-10-11',
13
            sellTime: '01:23',
14
            inStock: false,
15
        },
16
        {
17
            brand: 'Gigabox',
18
            model: 'HL Mountain Frame',
19
            price: 1890.9,
20
            sellDate: '2023-05-03',
21
            sellTime: '11:27',
22
            inStock: false,
23
        },
24
        {
25
            brand: 'Camido',
26
            model: 'Cycling Cap',
27
            price: 130.1,
28
            sellDate: '2023-03-27',
29
            sellTime: '03:17',
30
            inStock: true,
31
        },
32
        {
33
            brand: 'Chatterpoint',
34
            model: 'Road Tire Tube',
35
            price: 59,
36
            sellDate: '2023-08-28',
37
            sellTime: '08:01',
38
            inStock: true,
39
        },
40
        {
41
            brand: 'Eidel',
42
            model: 'HL Road Tire',
43
            price: 279.99,
44
            sellDate: '2023-10-02',
45
            sellTime: '01:23',
46
            inStock: true,
47
        },
48
    ],
49
    columns: [
50
        {
51
            title: 'Brand',
52
            type: 'text',
53
            data: 'brand',
54
        },
55
        {
56
            title: 'Model',
57
            type: 'text',
58
            data: 'model',
59
        },
60
        {
61
            title: 'Price',
62
            type: 'numeric',
63
            data: 'price',
64
            locale: 'en-US',
65
            numericFormat: {
66
                style: 'currency',
67
                currency: 'USD',
68
                minimumFractionDigits: 2,
69
            },
70
        },
71
        {
72
            title: 'Date',
73
            type: 'intl-date',
74
            data: 'sellDate',
75
            locale: 'en-US',
76
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
77
            className: 'htRight',
78
        },
79
        {
80
            title: 'Time',
81
            type: 'intl-time',
82
            data: 'sellTime',
83
            locale: 'en-US',
84
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
85
            className: 'htRight',
86
        },
87
        {
88
            title: 'In stock',
89
            type: 'checkbox',
90
            data: 'inStock',
91
            className: 'htCenter',
92
        },
93
    ],
94
    // enable filtering
95
    filters: true,
96
    // enable the column menu
97
    dropdownMenu: true,
98
    height: 'auto',
99
    autoWrapRow: true,
100
    autoWrapCol: true,
101
    licenseKey: 'non-commercial-and-evaluation',
102
});
103
// get the `Filters` plugin, so you can use its API
104
const filters = hot.getPlugin('filters');
105
let savedConditions = [];
106
document.querySelector('.applySampleFilter').addEventListener('click', () => {
107
    filters.clearConditions();
108
    // filter the 'Price' column (column at index 2) for items over $200
109
    filters.addCondition(2, 'gt', [200]);
110
    filters.filter();
111
});
112
document.querySelector('.saveFilters').addEventListener('click', () => {
113
    // `exportConditions()` returns the current conditions, keyed by physical column index
114
    savedConditions = filters.exportConditions();
115
});
116
document.querySelector('.clearFilters').addEventListener('click', () => {
117
    filters.clearConditions();
118
    filters.filter();
119
});
120
document.querySelector('.restoreFilters').addEventListener('click', () => {
121
    // `importConditions()` expects the same physical-column-indexed structure
122
    filters.importConditions(savedConditions);
123
    filters.filter();
124
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { Filters } from 'handsontable/plugins';
4
import type { ColumnConditions } from 'handsontable/plugins/filters';
5

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

9
const container = document.querySelector('#exampleSaveRestoreFilters')!;
10
const hot = new Handsontable(container, {
11
  data: [
12
    {
13
      brand: 'Jetpulse',
14
      model: 'Racing Socks',
15
      price: 30,
16
      sellDate: '2023-10-11',
17
      sellTime: '01:23',
18
      inStock: false,
19
    },
20
    {
21
      brand: 'Gigabox',
22
      model: 'HL Mountain Frame',
23
      price: 1890.9,
24
      sellDate: '2023-05-03',
25
      sellTime: '11:27',
26
      inStock: false,
27
    },
28
    {
29
      brand: 'Camido',
30
      model: 'Cycling Cap',
31
      price: 130.1,
32
      sellDate: '2023-03-27',
33
      sellTime: '03:17',
34
      inStock: true,
35
    },
36
    {
37
      brand: 'Chatterpoint',
38
      model: 'Road Tire Tube',
39
      price: 59,
40
      sellDate: '2023-08-28',
41
      sellTime: '08:01',
42
      inStock: true,
43
    },
44
    {
45
      brand: 'Eidel',
46
      model: 'HL Road Tire',
47
      price: 279.99,
48
      sellDate: '2023-10-02',
49
      sellTime: '01:23',
50
      inStock: true,
51
    },
52
  ],
53
  columns: [
54
    {
55
      title: 'Brand',
56
      type: 'text',
57
      data: 'brand',
58
    },
59
    {
60
      title: 'Model',
61
      type: 'text',
62
      data: 'model',
63
    },
64
    {
65
      title: 'Price',
66
      type: 'numeric',
67
      data: 'price',
68
      locale: 'en-US',
69
      numericFormat: {
70
        style: 'currency',
71
        currency: 'USD',
72
        minimumFractionDigits: 2,
73
      },
74
    },
75
    {
76
      title: 'Date',
77
      type: 'intl-date',
78
      data: 'sellDate',
79
      locale: 'en-US',
80
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
81
      className: 'htRight',
82
    },
83
    {
84
      title: 'Time',
85
      type: 'intl-time',
86
      data: 'sellTime',
87
      locale: 'en-US',
88
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
89
      className: 'htRight',
90
    },
91
    {
92
      title: 'In stock',
93
      type: 'checkbox',
94
      data: 'inStock',
95
      className: 'htCenter',
96
    },
97
  ],
98
  // enable filtering
99
  filters: true,
100
  // enable the column menu
101
  dropdownMenu: true,
102
  height: 'auto',
103
  autoWrapRow: true,
104
  autoWrapCol: true,
105
  licenseKey: 'non-commercial-and-evaluation',
106
});
107

108
// get the `Filters` plugin, so you can use its API
109
const filters: Filters = hot.getPlugin('filters');
110
let savedConditions: ColumnConditions[] = [];
111

112
document.querySelector('.applySampleFilter')!.addEventListener('click', () => {
113
  filters.clearConditions();
114
  // filter the 'Price' column (column at index 2) for items over $200
115
  filters.addCondition(2, 'gt', [200]);
116
  filters.filter();
117
});
118

119
document.querySelector('.saveFilters')!.addEventListener('click', () => {
120
  // `exportConditions()` returns the current conditions, keyed by physical column index
121
  savedConditions = filters.exportConditions();
122
});
123

124
document.querySelector('.clearFilters')!.addEventListener('click', () => {
125
  filters.clearConditions();
126
  filters.filter();
127
});
128

129
document.querySelector('.restoreFilters')!.addEventListener('click', () => {
130
  // `importConditions()` expects the same physical-column-indexed structure
131
  filters.importConditions(savedConditions);
132
  filters.filter();
133
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button class="applySampleFilter">Filter: price &gt; $200</button>
4
    <button class="saveFilters">Save filter settings</button>
5
    <button class="clearFilters">Clear filters</button>
6
    <button class="restoreFilters">Restore filter settings</button>
7
  </div>
8
</div>
9
<div id="exampleSaveRestoreFilters"></div>

Get filtered data

After filtering, getData() returns only the rows that pass the current filters, because filtering removes non-matching rows from the grid’s data map instead of merely hiding them. To read every row regardless of the active filters, use getSourceData().

The following demo uses the afterFilter() hook to compare the two methods every time the filters change.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
// Register all Handsontable's modules.
4
registerAllModules();
5
const container = document.querySelector('#exampleGetFilteredData');
6
const rowCountInfo = document.querySelector('#rowCountInfo');
7
function updateRowCountInfo(instance) {
8
    // `getData()` returns only the rows that pass the current filters
9
    const visibleRowCount = instance.getData().length;
10
    // `getSourceData()` always returns every row, filtered or not
11
    const totalRowCount = instance.getSourceData().length;
12
    rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;
13
}
14
const hot = new Handsontable(container, {
15
    data: [
16
        {
17
            brand: 'Jetpulse',
18
            model: 'Racing Socks',
19
            price: 30,
20
            sellDate: '2023-10-11',
21
            sellTime: '01:23',
22
            inStock: false,
23
        },
24
        {
25
            brand: 'Gigabox',
26
            model: 'HL Mountain Frame',
27
            price: 1890.9,
28
            sellDate: '2023-05-03',
29
            sellTime: '11:27',
30
            inStock: false,
31
        },
32
        {
33
            brand: 'Camido',
34
            model: 'Cycling Cap',
35
            price: 130.1,
36
            sellDate: '2023-03-27',
37
            sellTime: '03:17',
38
            inStock: true,
39
        },
40
        {
41
            brand: 'Chatterpoint',
42
            model: 'Road Tire Tube',
43
            price: 59,
44
            sellDate: '2023-08-28',
45
            sellTime: '08:01',
46
            inStock: true,
47
        },
48
        {
49
            brand: 'Eidel',
50
            model: 'HL Road Tire',
51
            price: 279.99,
52
            sellDate: '2023-10-02',
53
            sellTime: '01:23',
54
            inStock: true,
55
        },
56
    ],
57
    columns: [
58
        {
59
            title: 'Brand',
60
            type: 'text',
61
            data: 'brand',
62
        },
63
        {
64
            title: 'Model',
65
            type: 'text',
66
            data: 'model',
67
        },
68
        {
69
            title: 'Price',
70
            type: 'numeric',
71
            data: 'price',
72
            locale: 'en-US',
73
            numericFormat: {
74
                style: 'currency',
75
                currency: 'USD',
76
                minimumFractionDigits: 2,
77
            },
78
        },
79
        {
80
            title: 'Date',
81
            type: 'intl-date',
82
            data: 'sellDate',
83
            locale: 'en-US',
84
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
85
            className: 'htRight',
86
        },
87
        {
88
            title: 'Time',
89
            type: 'intl-time',
90
            data: 'sellTime',
91
            locale: 'en-US',
92
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
93
            className: 'htRight',
94
        },
95
        {
96
            title: 'In stock',
97
            type: 'checkbox',
98
            data: 'inStock',
99
            className: 'htCenter',
100
        },
101
    ],
102
    // enable filtering
103
    filters: true,
104
    // enable the column menu
105
    dropdownMenu: true,
106
    // `afterFilter()` fires after Handsontable applies the filters
107
    afterFilter() {
108
        updateRowCountInfo(this);
109
    },
110
    height: 'auto',
111
    autoWrapRow: true,
112
    autoWrapCol: true,
113
    licenseKey: 'non-commercial-and-evaluation',
114
});
115
updateRowCountInfo(hot);

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

7
const container = document.querySelector('#exampleGetFilteredData')!;
8
const rowCountInfo = document.querySelector('#rowCountInfo')!;
9

10
function updateRowCountInfo(instance: Handsontable) {
11
  // `getData()` returns only the rows that pass the current filters
12
  const visibleRowCount = instance.getData().length;
13
  // `getSourceData()` always returns every row, filtered or not
14
  const totalRowCount = instance.getSourceData().length;
15

16
  rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;
17
}
18

19
const hot = new Handsontable(container, {
20
  data: [
21
    {
22
      brand: 'Jetpulse',
23
      model: 'Racing Socks',
24
      price: 30,
25
      sellDate: '2023-10-11',
26
      sellTime: '01:23',
27
      inStock: false,
28
    },
29
    {
30
      brand: 'Gigabox',
31
      model: 'HL Mountain Frame',
32
      price: 1890.9,
33
      sellDate: '2023-05-03',
34
      sellTime: '11:27',
35
      inStock: false,
36
    },
37
    {
38
      brand: 'Camido',
39
      model: 'Cycling Cap',
40
      price: 130.1,
41
      sellDate: '2023-03-27',
42
      sellTime: '03:17',
43
      inStock: true,
44
    },
45
    {
46
      brand: 'Chatterpoint',
47
      model: 'Road Tire Tube',
48
      price: 59,
49
      sellDate: '2023-08-28',
50
      sellTime: '08:01',
51
      inStock: true,
52
    },
53
    {
54
      brand: 'Eidel',
55
      model: 'HL Road Tire',
56
      price: 279.99,
57
      sellDate: '2023-10-02',
58
      sellTime: '01:23',
59
      inStock: true,
60
    },
61
  ],
62
  columns: [
63
    {
64
      title: 'Brand',
65
      type: 'text',
66
      data: 'brand',
67
    },
68
    {
69
      title: 'Model',
70
      type: 'text',
71
      data: 'model',
72
    },
73
    {
74
      title: 'Price',
75
      type: 'numeric',
76
      data: 'price',
77
      locale: 'en-US',
78
      numericFormat: {
79
        style: 'currency',
80
        currency: 'USD',
81
        minimumFractionDigits: 2,
82
      },
83
    },
84
    {
85
      title: 'Date',
86
      type: 'intl-date',
87
      data: 'sellDate',
88
      locale: 'en-US',
89
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
90
      className: 'htRight',
91
    },
92
    {
93
      title: 'Time',
94
      type: 'intl-time',
95
      data: 'sellTime',
96
      locale: 'en-US',
97
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
98
      className: 'htRight',
99
    },
100
    {
101
      title: 'In stock',
102
      type: 'checkbox',
103
      data: 'inStock',
104
      className: 'htCenter',
105
    },
106
  ],
107
  // enable filtering
108
  filters: true,
109
  // enable the column menu
110
  dropdownMenu: true,
111
  // `afterFilter()` fires after Handsontable applies the filters
112
  afterFilter() {
113
    updateRowCountInfo(this);
114
  },
115
  height: 'auto',
116
  autoWrapRow: true,
117
  autoWrapCol: true,
118
  licenseKey: 'non-commercial-and-evaluation',
119
});
120

121
updateRowCountInfo(hot);

1
<p id="rowCountInfo"></p>
2
<div id="exampleGetFilteredData"></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:

The base module
The Filters module
The DropdownMenu module

1
// import the base module
2
import Handsontable from 'handsontable/base';
3

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

7
// register the filtering plugins
8
registerPlugin(Filters);
9
registerPlugin(DropdownMenu);

Known limitations

At the moment, filtering comes with the following limitations:

There is no easy way to add custom filter operators to the user interface.
The list of values that you can filter by is generated automatically and there’s no supported way of modifying it.
The filter’s dropdown menu has a limited capacity per column: at most 2 regular conditions and 1 “filter by value” condition. If you add more conditions programmatically via addCondition(), the extra conditions are applied to the data but are not visible or editable in the dropdown menu.

Use keyboard and pointer interactions together to control the filtering UI:

Press Tab and Shift+Tab to move between filtering components, such as the search input, Select all, Clear all, condition controls, and action bar controls.
When the search input is focused, press Arrow up and Arrow down to move through the Filter by value list.
When Select all or Clear all is focused, press Enter or Space to run the action.
If you hover a non-filter menu item (for example, Clear column), the filter-components focus order resets. The next Tab focuses the first filter component.

For a reference list of filter-related shortcuts, see Keyboard shortcuts.

Windows	macOS	Action	Excel	Sheets
`Alt`+`A`	`⌥`+`A`	Clear 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

Column filter

Overview

Filtering demo

Enable filtering

Enable filtering for individual columns

Enable filtering within already filtered results

Filter different types of data

Filter data on initialization

External quick filter

Customize the filter button

Change the width of the filter menu

Exclude rows from filtering

Server-side filtering

Control filtering programmatically

Enable or disable filtering programmatically

Filter data programmatically

Combine multiple filter conditions

Clear a column filter

Save and restore filter settings

Get filtered data

Import the filtering module

Known limitations

Navigate the filter menu

API reference

Troubleshooting

Column filter

Overview

Filtering demo

Enable filtering

Enable filtering for individual columns

Enable filtering within already filtered results

Filter different types of data

Filter data on initialization

External quick filter

Customize the filter button

Change the width of the filter menu

Exclude rows from filtering

Server-side filtering

Control filtering programmatically

Enable or disable filtering programmatically

Filter data programmatically

Combine multiple filter conditions

Clear a column filter

Save and restore filter settings

Get filtered data

Import the filtering module

Known limitations

Navigate the filter menu

Related keyboard shortcuts

API reference

Troubleshooting