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 After Is between Tomorrow Today Yesterday

Filter data on initialization

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

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

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
  z-index: 0;
4
  display: flex;
5
  align-items: center;
6
  gap: 0.75rem;
7
  margin: 0;
8
  padding: 0;
9
}
10

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

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

25
#filterField:focus {
26
  border-color: var(--sl-color-accent);
27
}
28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
  minSpareRows: 1,
176
  colHeaders: true,
177
  // enable filtering
178
  filters: true,
179
  // enable the column menu
180
  dropdownMenu: true,
181
  afterFilter() {
182
    const filtersPlugin: Filters = (this as Handsontable).getPlugin('filters');
183
    const filtersRowsMap = filtersPlugin.filtersRowsMap;
184

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

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

Server-side filtering

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

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

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
    console.log(`The last changed column index: ${conditionsStack[0].column}`);
108
    console.log(`The amount of filters added to this column: ${conditionsStack[0].conditions.length}`);
109
    // the list of filter conditions
110
    console.log(conditionsStack[0].conditions);
111

112
    // return `false` to disable filtering on the client side
113
    return false;
114
  },
115
  autoWrapRow: true,
116
  autoWrapCol: true,
117
  licenseKey: 'non-commercial-and-evaluation',
118
});

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
    console.log(`The last changed column index: ${conditionsStack[0]!.column}`);
108
    console.log(`The amount of filters added to this column: ${conditionsStack[0]!.conditions.length}`);
109
    // the list of filter conditions
110
    console.log(conditionsStack[0]!.conditions);
111

112
    // return `false` to disable filtering on the client side
113
    return false;
114
  },
115
  autoWrapRow: true,
116
  autoWrapCol: true,
117
  licenseKey: 'non-commercial-and-evaluation',
118
});

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>

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.