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 { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

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

110
export default ExampleComponent;

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

5
// register Handsontable's modules
6
registerAllModules();
7

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

110
export default ExampleComponent;

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
<HotTable
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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
106
  );
107
};
108

109
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
106
  );
107
};
108

109
export default ExampleComponent;

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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  // remove the column menu button from the 'Brand', 'Price', and 'Date' columns
9
  const removeColumnMenuButton = (col, TH) => {
10
    if (col > 1) {
11
      const button = TH.querySelector('.changeType');
12

13
      if (!button) {
14
        return;
15
      }
16

17
      button.parentElement.removeChild(button);
18
    }
19
  };
20

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

147
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  // remove the column menu button from the 'Brand', 'Price', and 'Date' columns
9
  const removeColumnMenuButton = (col: number, TH: { querySelector: (value: string) => any }) => {
10
    if (col > 1) {
11
      const button = TH.querySelector('.changeType');
12

13
      if (!button) {
14
        return;
15
      }
16

17
      button.parentElement.removeChild(button);
18
    }
19
  };
20

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

147
export default ExampleComponent;

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
<HotTable
2
  // enable filtering
3
  filters={{
4
    searchMode: 'apply'
5
  }}
6
  // enable the column menu
7
  dropdownMenu={true}
8
/>

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
107
  );
108
};
109

110
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
107
  );
108
};
109

110
export default ExampleComponent;

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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
127
  );
128
};
129

130
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
127
  );
128
};
129

130
export default ExampleComponent;

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

Cell type	Available filter operators
All cell types	Default operators: None Is empty Is not empty Is equal to Is not equal to
text time checkbox dropdown autocomplete password	Default operators plus: Begins with Ends with Contains Does not contain
numeric	Default operators plus: Greater than Greater than or equal to Less than Less than or equal to Is between Is not between
date	Default operators plus: Before (exclusive — boundary date excluded) Before or equal to (boundary date included) After (exclusive — boundary date excluded) After or equal to (boundary date included) Is between Tomorrow Today Yesterday
intl-date	Default operators plus: Before (exclusive — boundary date excluded) Before or equal to (boundary date included) After (exclusive — boundary date excluded) After or equal to (boundary date included) Is between Tomorrow Today Yesterday
intl-time	Default operators plus: Begins with Ends with Contains Does not contain Before (exclusive — boundary time excluded) Before or equal to (boundary time included) After (exclusive — boundary time excluded) After or equal to (boundary time included) Is between

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

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

Filter data on initialization

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

To do this, use 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
// you need `useRef` to call Handsontable's instance methods
2
import { useRef, useEffect } from 'react';
3
import { HotTable } from '@handsontable/react-wrapper';
4
import { registerAllModules } from 'handsontable/registry';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const ExampleComponent = () => {
10
  const hotTableComponentRef = useRef(null);
11

12
  useEffect(() => {
13
    const handsontableInstance = hotTableComponentRef.current?.hotInstance;
14
    // get the `Filters` plugin, so you can use its API
15
    const filters = handsontableInstance?.getPlugin('filters');
16

17
    // filter data by the 'Price' column (column at index 2)
18
    // to display only items that are less than ('lt') $200
19
    filters?.addCondition(2, 'lt', [200]);
20
    filters?.filter();
21
  }, []);
22

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

125
export default ExampleComponent;

1
// you need `useRef` to call Handsontable's instance methods
2
import { useRef, useEffect } from 'react';
3
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
4
import { registerAllModules } from 'handsontable/registry';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const ExampleComponent = () => {
10
  const hotTableComponentRef = useRef<HotTableRef>(null);
11

12
  useEffect(() => {
13
    const handsontableInstance = hotTableComponentRef.current?.hotInstance;
14
    // get the `Filters` plugin, so you can use its API
15
    const filters = handsontableInstance?.getPlugin('filters');
16

17
    // filter data by the 'Price' column (column at index 2)
18
    // to display only items that are less than ('lt') $200
19
    filters?.addCondition(2, 'lt', [200]);
20
    filters?.filter();
21
  }, []);
22

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

125
export default ExampleComponent;

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 { useEffect, useRef, useState } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
// Embedded so the example is self-contained in bundler environments.
9
const QUICK_FILTER_STYLES = `
10
  .controlsQuickFilter {
11
    position: relative;
12
    display: flex;
13
    align-items: center;
14
    gap: 0.75rem;
15
    margin: 0;
16
    padding: 0;
17
  }
18
  #filterField {
19
    border: 1px solid var(--sl-color-gray-5, #e0e0e0);
20
    background: none;
21
    color: var(--sl-color-text, #333333);
22
    font-size: var(--sl-text-sm, 0.875rem);
23
    padding: 0.4rem 0.625rem;
24
    outline: none;
25
    width: 140px;
26
  }
27
  #filterField::placeholder { color: var(--sl-color-gray-3, #777777); }
28
  #filterField:focus { border-color: var(--sl-color-accent, #1A42E8); }
29
  #filterField:focus-visible {
30
    border-color: var(--sl-color-accent, #1A42E8);
31
    box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);
32
  }
33
  .filter-dropdown {
34
    position: relative;
35
    display: inline-flex;
36
    align-items: center;
37
    gap: 0.5rem;
38
  }
39
  .filter-dropdown-label {
40
    color: var(--sl-color-gray-2, #555555);
41
    font-size: var(--sl-text-sm, 0.875rem);
42
    white-space: nowrap;
43
  }
44
  .filter-dropdown-trigger {
45
    display: inline-flex;
46
    align-items: center;
47
    gap: 0.5rem;
48
    background: none;
49
    border: 1px solid var(--sl-color-gray-5, #e0e0e0);
50
    color: var(--sl-color-gray-2, #555555);
51
    cursor: pointer;
52
    font-size: var(--sl-text-sm, 0.875rem);
53
    font-weight: 500;
54
    padding: 0.4rem 0.625rem;
55
    transition: color 0.15s, background-color 0.15s;
56
    white-space: nowrap;
57
    border-radius: 0;
58
  }
59
  .filter-dropdown-trigger:hover {
60
    color: var(--sl-color-white, #333333);
61
    background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));
62
  }
63
  .filter-dropdown-chevron {
64
    flex-shrink: 0;
65
    margin-inline-start: 0.15rem;
66
    transition: transform 0.15s;
67
  }
68
  .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron { transform: rotate(180deg); }
69
  .filter-dropdown-menu {
70
    background: var(--sl-color-bg-nav, #ffffff);
71
    border: 1px solid var(--sl-color-gray-5, #e0e0e0);
72
    border-radius: 0;
73
    box-shadow: none;
74
    inset-inline-start: 0;
75
    list-style: none;
76
    margin: 0;
77
    min-width: 100%;
78
    overflow-y: auto;
79
    padding: 0;
80
    position: absolute;
81
    top: 100%;
82
    z-index: 9999;
83
  }
84
  .filter-dropdown-menu li {
85
    align-items: center;
86
    color: var(--sl-color-text, #333333);
87
    display: flex;
88
    font-size: var(--sl-text-sm, 0.875rem);
89
    padding: 0.5rem 0.75rem;
90
    cursor: pointer;
91
    border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);
92
    transition: background 0.1s, color 0.1s;
93
    white-space: nowrap;
94
    list-style: none;
95
    margin: 0;
96
  }
97
  .filter-dropdown-menu li:last-child { border-bottom: none; }
98
  .filter-dropdown-menu li:hover,
99
  .filter-dropdown-menu li:focus-visible {
100
    background: var(--sl-color-gray-6, #eeeeee);
101
    color: var(--sl-color-white, #333333);
102
    outline: none;
103
  }
104
  .filter-dropdown-menu li[aria-selected='true'] {
105
    color: var(--sl-color-white, #333333);
106
    box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);
107
  }
108
`;
109

110
const columns = [
111
  { value: '0', label: 'Brand' },
112
  { value: '1', label: 'Model' },
113
  { value: '2', label: 'Price' },
114
  { value: '3', label: 'Date' },
115
  { value: '4', label: 'Time' },
116
  { value: '5', label: 'In stock' },
117
];
118

119
const ExampleComponent = () => {
120
  const hotTableComponentRef = useRef(null);
121
  const dropdownRef = useRef(null);
122
  const [selectedColumn, setSelectedColumn] = useState('0');
123
  const [open, setOpen] = useState(false);
124

125
  useEffect(() => {
126
    const handleClickOutside = (e) => {
127
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
128
        setOpen(false);
129
      }
130
    };
131

132
    document.addEventListener('click', handleClickOutside);
133

134
    return () => document.removeEventListener('click', handleClickOutside);
135
  }, []);
136

137
  const handleFilter = (event) => {
138
    const handsontableInstance = hotTableComponentRef.current?.hotInstance;
139
    const filtersPlugin = handsontableInstance?.getPlugin('filters');
140

141
    filtersPlugin?.removeConditions(Number(selectedColumn));
142
    filtersPlugin?.addCondition(Number(selectedColumn), 'contains', [event.target.value]);
143
    filtersPlugin?.filter();
144
    handsontableInstance?.render();
145
  };
146

147
  const handleSelect = (col) => {
148
    setSelectedColumn(col.value);
149
    setOpen(false);
150
  };
151

152
  const selectedLabel = columns.find((c) => c.value === selectedColumn)?.label || 'Brand';
153

154
  return (
155
    <>
156
      <style>{QUICK_FILTER_STYLES}</style>
157
      <div className="example-controls-container">
158
        <div className="controlsQuickFilter">
159
          <div className="filter-dropdown" ref={dropdownRef}>
160
            <span className="filter-dropdown-label">Select a column:</span>
161
            <button
162
              className="filter-dropdown-trigger"
163
              type="button"
164
              aria-haspopup="listbox"
165
              aria-expanded={open}
166
              onClick={() => setOpen(!open)}
167
            >
168
              <span className="filter-dropdown-text">{selectedLabel}</span>
169
              <svg className="filter-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
170
            </button>
171
            {open && (
172
              <ul className="filter-dropdown-menu" role="listbox">
173
                {columns.map((col) => (
174
                  <li
175
                    key={col.value}
176
                    role="option"
177
                    aria-selected={col.value === selectedColumn}
178
                    onClick={() => handleSelect(col)}
179
                  >
180
                    {col.label}
181
                  </li>
182
                ))}
183
              </ul>
184
            )}
185
          </div>
186
          <input id="filterField" type="text" placeholder="Filter" onKeyUp={handleFilter} />
187
        </div>
188
      </div>
189
      <HotTable
190
        ref={hotTableComponentRef}
191
        data={[
192
          {
193
            brand: 'Jetpulse',
194
            model: 'Racing Socks',
195
            price: 30,
196
            sellDate: '2023-10-11',
197
            sellTime: '01:23',
198
            inStock: false,
199
          },
200
          {
201
            brand: 'Gigabox',
202
            model: 'HL Mountain Frame',
203
            price: 1890.9,
204
            sellDate: '2023-05-03',
205
            sellTime: '11:27',
206
            inStock: false,
207
          },
208
          {
209
            brand: 'Camido',
210
            model: 'Cycling Cap',
211
            price: 130.1,
212
            sellDate: '2023-03-27',
213
            sellTime: '03:17',
214
            inStock: true,
215
          },
216
          {
217
            brand: 'Chatterpoint',
218
            model: 'Road Tire Tube',
219
            price: 59,
220
            sellDate: '2023-08-28',
221
            sellTime: '08:01',
222
            inStock: true,
223
          },
224
          {
225
            brand: 'Eidel',
226
            model: 'HL Road Tire',
227
            price: 279.99,
228
            sellDate: '2023-10-02',
229
            sellTime: '01:23',
230
            inStock: true,
231
          },
232
        ]}
233
        columns={[
234
          {
235
            title: 'Brand',
236
            type: 'text',
237
            data: 'brand',
238
          },
239
          {
240
            title: 'Model',
241
            type: 'text',
242
            data: 'model',
243
          },
244
          {
245
            title: 'Price',
246
            type: 'numeric',
247
            data: 'price',
248
            locale: 'en-US',
249
            numericFormat: {
250
              style: 'currency',
251
              currency: 'USD',
252
              minimumFractionDigits: 2,
253
            },
254
          },
255
          {
256
            title: 'Date',
257
            type: 'intl-date',
258
            data: 'sellDate',
259
            locale: 'en-US',
260
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
261
            className: 'htRight',
262
          },
263
          {
264
            title: 'Time',
265
            type: 'intl-time',
266
            data: 'sellTime',
267
            locale: 'en-US',
268
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
269
            className: 'htRight',
270
          },
271
          {
272
            title: 'In stock',
273
            type: 'checkbox',
274
            data: 'inStock',
275
            className: 'htCenter',
276
          },
277
        ]}
278
        filters={true}
279
        height="auto"
280
        className="exampleQuickFilter"
281
        autoWrapRow={true}
282
        autoWrapCol={true}
283
        licenseKey="non-commercial-and-evaluation"
284
      />
285
    </>
286
  );
287
};
288

289
export default ExampleComponent;

1
import { useEffect, useRef, useState } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
// Embedded so the example is self-contained in bundler environments.
9
const QUICK_FILTER_STYLES = `
10
  .controlsQuickFilter {
11
    position: relative;
12
    display: flex;
13
    align-items: center;
14
    gap: 0.75rem;
15
    margin: 0;
16
    padding: 0;
17
  }
18
  #filterField {
19
    border: 1px solid var(--sl-color-gray-5, #e0e0e0);
20
    background: none;
21
    color: var(--sl-color-text, #333333);
22
    font-size: var(--sl-text-sm, 0.875rem);
23
    padding: 0.4rem 0.625rem;
24
    outline: none;
25
    width: 140px;
26
  }
27
  #filterField::placeholder { color: var(--sl-color-gray-3, #777777); }
28
  #filterField:focus { border-color: var(--sl-color-accent, #1A42E8); }
29
  #filterField:focus-visible {
30
    border-color: var(--sl-color-accent, #1A42E8);
31
    box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);
32
  }
33
  .filter-dropdown {
34
    position: relative;
35
    display: inline-flex;
36
    align-items: center;
37
    gap: 0.5rem;
38
  }
39
  .filter-dropdown-label {
40
    color: var(--sl-color-gray-2, #555555);
41
    font-size: var(--sl-text-sm, 0.875rem);
42
    white-space: nowrap;
43
  }
44
  .filter-dropdown-trigger {
45
    display: inline-flex;
46
    align-items: center;
47
    gap: 0.5rem;
48
    background: none;
49
    border: 1px solid var(--sl-color-gray-5, #e0e0e0);
50
    color: var(--sl-color-gray-2, #555555);
51
    cursor: pointer;
52
    font-size: var(--sl-text-sm, 0.875rem);
53
    font-weight: 500;
54
    padding: 0.4rem 0.625rem;
55
    transition: color 0.15s, background-color 0.15s;
56
    white-space: nowrap;
57
    border-radius: 0;
58
  }
59
  .filter-dropdown-trigger:hover {
60
    color: var(--sl-color-white, #333333);
61
    background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));
62
  }
63
  .filter-dropdown-chevron {
64
    flex-shrink: 0;
65
    margin-inline-start: 0.15rem;
66
    transition: transform 0.15s;
67
  }
68
  .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron { transform: rotate(180deg); }
69
  .filter-dropdown-menu {
70
    background: var(--sl-color-bg-nav, #ffffff);
71
    border: 1px solid var(--sl-color-gray-5, #e0e0e0);
72
    border-radius: 0;
73
    box-shadow: none;
74
    inset-inline-start: 0;
75
    list-style: none;
76
    margin: 0;
77
    min-width: 100%;
78
    overflow-y: auto;
79
    padding: 0;
80
    position: absolute;
81
    top: 100%;
82
    z-index: 9999;
83
  }
84
  .filter-dropdown-menu li {
85
    align-items: center;
86
    color: var(--sl-color-text, #333333);
87
    display: flex;
88
    font-size: var(--sl-text-sm, 0.875rem);
89
    padding: 0.5rem 0.75rem;
90
    cursor: pointer;
91
    border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);
92
    transition: background 0.1s, color 0.1s;
93
    white-space: nowrap;
94
    list-style: none;
95
    margin: 0;
96
  }
97
  .filter-dropdown-menu li:last-child { border-bottom: none; }
98
  .filter-dropdown-menu li:hover,
99
  .filter-dropdown-menu li:focus-visible {
100
    background: var(--sl-color-gray-6, #eeeeee);
101
    color: var(--sl-color-white, #333333);
102
    outline: none;
103
  }
104
  .filter-dropdown-menu li[aria-selected='true'] {
105
    color: var(--sl-color-white, #333333);
106
    box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);
107
  }
108
`;
109

110
const columnOptions = [
111
  { value: '0', label: 'Brand' },
112
  { value: '1', label: 'Model' },
113
  { value: '2', label: 'Price' },
114
  { value: '3', label: 'Date' },
115
  { value: '4', label: 'Time' },
116
  { value: '5', label: 'In stock' },
117
];
118

119
const ExampleComponent = () => {
120
  const hotTableComponentRef = useRef<HotTableRef>(null);
121
  const dropdownRef = useRef<HTMLDivElement>(null);
122
  const [selectedColumn, setSelectedColumn] = useState('0');
123
  const [open, setOpen] = useState(false);
124

125
  useEffect(() => {
126
    const handleClickOutside = (e: MouseEvent) => {
127
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
128
        setOpen(false);
129
      }
130
    };
131

132
    document.addEventListener('click', handleClickOutside);
133

134
    return () => document.removeEventListener('click', handleClickOutside);
135
  }, []);
136

137
  const handleFilter = (event: React.KeyboardEvent<HTMLInputElement>) => {
138
    const handsontableInstance = hotTableComponentRef.current?.hotInstance;
139
    const filtersPlugin = handsontableInstance?.getPlugin('filters');
140

141
    filtersPlugin?.removeConditions(Number(selectedColumn));
142
    filtersPlugin?.addCondition(Number(selectedColumn), 'contains', [(event.target as HTMLInputElement).value]);
143
    filtersPlugin?.filter();
144
    handsontableInstance?.render();
145
  };
146

147
  const handleSelect = (col: { value: string; label: string }) => {
148
    setSelectedColumn(col.value);
149
    setOpen(false);
150
  };
151

152
  const selectedLabel = columnOptions.find((c) => c.value === selectedColumn)?.label || 'Brand';
153

154
  return (
155
    <>
156
      <style>{QUICK_FILTER_STYLES}</style>
157
      <div className="example-controls-container">
158
        <div className="controlsQuickFilter">
159
          <div className="filter-dropdown" ref={dropdownRef}>
160
            <span className="filter-dropdown-label">Select a column:</span>
161
            <button
162
              className="filter-dropdown-trigger"
163
              type="button"
164
              aria-haspopup="listbox"
165
              aria-expanded={open}
166
              onClick={() => setOpen(!open)}
167
            >
168
              <span className="filter-dropdown-text">{selectedLabel}</span>
169
              <svg className="filter-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
170
            </button>
171
            {open && (
172
              <ul className="filter-dropdown-menu" role="listbox">
173
                {columnOptions.map((col) => (
174
                  <li
175
                    key={col.value}
176
                    role="option"
177
                    aria-selected={col.value === selectedColumn}
178
                    onClick={() => handleSelect(col)}
179
                  >
180
                    {col.label}
181
                  </li>
182
                ))}
183
              </ul>
184
            )}
185
          </div>
186
          <input id="filterField" type="text" placeholder="Filter" onKeyUp={handleFilter} />
187
        </div>
188
      </div>
189
      <HotTable
190
        ref={hotTableComponentRef}
191
        data={[
192
          {
193
            brand: 'Jetpulse',
194
            model: 'Racing Socks',
195
            price: 30,
196
            sellDate: '2023-10-11',
197
            sellTime: '01:23',
198
            inStock: false,
199
          },
200
          {
201
            brand: 'Gigabox',
202
            model: 'HL Mountain Frame',
203
            price: 1890.9,
204
            sellDate: '2023-05-03',
205
            sellTime: '11:27',
206
            inStock: false,
207
          },
208
          {
209
            brand: 'Camido',
210
            model: 'Cycling Cap',
211
            price: 130.1,
212
            sellDate: '2023-03-27',
213
            sellTime: '03:17',
214
            inStock: true,
215
          },
216
          {
217
            brand: 'Chatterpoint',
218
            model: 'Road Tire Tube',
219
            price: 59,
220
            sellDate: '2023-08-28',
221
            sellTime: '08:01',
222
            inStock: true,
223
          },
224
          {
225
            brand: 'Eidel',
226
            model: 'HL Road Tire',
227
            price: 279.99,
228
            sellDate: '2023-10-02',
229
            sellTime: '01:23',
230
            inStock: true,
231
          },
232
        ]}
233
        columns={[
234
          {
235
            title: 'Brand',
236
            type: 'text',
237
            data: 'brand',
238
          },
239
          {
240
            title: 'Model',
241
            type: 'text',
242
            data: 'model',
243
          },
244
          {
245
            title: 'Price',
246
            type: 'numeric',
247
            data: 'price',
248
            locale: 'en-US',
249
            numericFormat: {
250
              style: 'currency',
251
              currency: 'USD',
252
              minimumFractionDigits: 2,
253
            },
254
          },
255
          {
256
            title: 'Date',
257
            type: 'intl-date',
258
            data: 'sellDate',
259
            locale: 'en-US',
260
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
261
            className: 'htRight',
262
          },
263
          {
264
            title: 'Time',
265
            type: 'intl-time',
266
            data: 'sellTime',
267
            locale: 'en-US',
268
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
269
            className: 'htRight',
270
          },
271
          {
272
            title: 'In stock',
273
            type: 'checkbox',
274
            data: 'inStock',
275
            className: 'htCenter',
276
          },
277
        ]}
278
        filters={true}
279
        height="auto"
280
        className="exampleQuickFilter"
281
        autoWrapRow={true}
282
        autoWrapCol={true}
283
        licenseKey="non-commercial-and-evaluation"
284
      />
285
    </>
286
  );
287
};
288

289
export default ExampleComponent;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Customize the filter button

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

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
108
  );
109
};
110

111
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
108
  );
109
};
110

111
export default ExampleComponent;

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 { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
108
  );
109
};
110

111
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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
    />
108
  );
109
};
110

111
export default ExampleComponent;

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

1
// you need `useRef` to call Handsontable's instance methods
2
import { useRef } from 'react';
3
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
4
import { registerAllModules } from 'handsontable/registry';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const ExampleComponent = () => {
10
  const hotTableComponentRef = useRef<HotTableRef>(null);
11
  const exclude = () => {
12
    const hotInstance = hotTableComponentRef.current?.hotInstance;
13
    // @ts-ignore
14
    const filtersRowsMap = hotInstance?.getPlugin('filters').filtersRowsMap;
15

16
    filtersRowsMap.setValueAtIndex(0, false);
17
    filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);
18
  };
19

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

198
export default ExampleComponent;

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

Server-side filtering

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

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

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

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

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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={function (conditionsStack) {
105
        // gather information about the filters
106
        console.log(`The amount of filters: ${conditionsStack.length}`);
107

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

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

118
        // return `false` to disable filtering on the client side
119
        return false;
120
      }}
121
      autoWrapRow={true}
122
      autoWrapCol={true}
123
      licenseKey="non-commercial-and-evaluation"
124
    />
125
  );
126
};
127

128
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
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={function (conditionsStack) {
105
        // gather information about the filters
106
        console.log(`The amount of filters: ${conditionsStack.length}`);
107

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

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

118
        // return `false` to disable filtering on the client side
119
        return false;
120
      }}
121
      autoWrapRow={true}
122
      autoWrapCol={true}
123
      licenseKey="non-commercial-and-evaluation"
124
    />
125
  );
126
};
127

128
export default ExampleComponent;

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
const hotTableComponentRef = useRef(null);
2

3
hotTableComponentRef.current.hotInstance.updateSettings({
4
  // enable filtering
5
  filters: true,
6
  // enable the column menu
7
  dropdownMenu: true,
8
});
9

10
hotTableComponentRef.current.hotInstance.updateSettings({
11
  // disable filtering
12
  filters: false,
13
});

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

1
const hotTableComponentRef = useRef(null);
2

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

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 { useRef } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotTableComponentRef = useRef(null);
10
  const filterBelow200 = () => {
11
    // get the `Filters` plugin, so you can use its API
12
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
13

14
    // clear any existing filters
15
    filters?.clearConditions();
16
    // filter data by the 'Price' column (column at index 2)
17
    // to display only items that are less than ('lt') $200
18
    filters?.addCondition(2, 'lt', [200]);
19
    filters?.filter();
20
  };
21

22
  const filterAbove200 = () => {
23
    // get the `Filters` plugin, so you can use its API
24
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
25

26
    filters?.clearConditions();
27
    // display only items that are more than ('gt') $200
28
    filters?.addCondition(2, 'gt', [200]);
29
    filters?.filter();
30
  };
31

32
  const clearAllFilters = () => {
33
    // get the `Filters` plugin, so you can use its API
34
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
35

36
    // clear all filters
37
    filters?.clearConditions();
38
    filters?.filter();
39
  };
40

41
  return (
42
    <>
43
      <div className="example-controls-container">
44
        <div className="controls">
45
          <button onClick={filterBelow200}>Show items &lt; $200</button>
46
          <button onClick={filterAbove200}>Show items &gt; $200</button>
47
          <button onClick={clearAllFilters}>Clear filters</button>
48
        </div>
49
      </div>
50
      <HotTable
51
        ref={hotTableComponentRef}
52
        data={[
53
          {
54
            brand: 'Jetpulse',
55
            model: 'Racing Socks',
56
            price: 30,
57
            sellDate: '2023-10-11',
58
            sellTime: '01:23',
59
            inStock: false,
60
          },
61
          {
62
            brand: 'Gigabox',
63
            model: 'HL Mountain Frame',
64
            price: 1890.9,
65
            sellDate: '2023-05-03',
66
            sellTime: '11:27',
67
            inStock: false,
68
          },
69
          {
70
            brand: 'Camido',
71
            model: 'Cycling Cap',
72
            price: 130.1,
73
            sellDate: '2023-03-27',
74
            sellTime: '03:17',
75
            inStock: true,
76
          },
77
          {
78
            brand: 'Chatterpoint',
79
            model: 'Road Tire Tube',
80
            price: 59,
81
            sellDate: '2023-08-28',
82
            sellTime: '08:01',
83
            inStock: true,
84
          },
85
          {
86
            brand: 'Eidel',
87
            model: 'HL Road Tire',
88
            price: 279.99,
89
            sellDate: '2023-10-02',
90
            sellTime: '01:23',
91
            inStock: true,
92
          },
93
        ]}
94
        columns={[
95
          {
96
            title: 'Brand',
97
            type: 'text',
98
            data: 'brand',
99
          },
100
          {
101
            title: 'Model',
102
            type: 'text',
103
            data: 'model',
104
          },
105
          {
106
            title: 'Price',
107
            type: 'numeric',
108
            data: 'price',
109
            locale: 'en-US',
110
            numericFormat: {
111
              style: 'currency',
112
              currency: 'USD',
113
              minimumFractionDigits: 2,
114
            },
115
          },
116
          {
117
            title: 'Date',
118
            type: 'intl-date',
119
            data: 'sellDate',
120
            locale: 'en-US',
121
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
122
            className: 'htRight',
123
          },
124
          {
125
            title: 'Time',
126
            type: 'intl-time',
127
            data: 'sellTime',
128
            locale: 'en-US',
129
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
130
            className: 'htRight',
131
          },
132
          {
133
            title: 'In stock',
134
            type: 'checkbox',
135
            data: 'inStock',
136
            className: 'htCenter',
137
          },
138
        ]}
139
        // enable filtering
140
        filters={true}
141
        // enable the column menu
142
        dropdownMenu={true}
143
        height="auto"
144
        autoWrapRow={true}
145
        autoWrapCol={true}
146
        licenseKey="non-commercial-and-evaluation"
147
      />
148
    </>
149
  );
150
};
151

152
export default ExampleComponent;

1
import { useRef } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotTableComponentRef = useRef<HotTableRef>(null);
10
  const filterBelow200 = () => {
11
    // get the `Filters` plugin, so you can use its API
12
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
13

14
    // clear any existing filters
15
    filters?.clearConditions();
16
    // filter data by the 'Price' column (column at index 2)
17
    // to display only items that are less than ('lt') $200
18
    filters?.addCondition(2, 'lt', [200]);
19
    filters?.filter();
20
  };
21

22
  const filterAbove200 = () => {
23
    // get the `Filters` plugin, so you can use its API
24
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
25

26
    filters?.clearConditions();
27
    // display only items that are more than ('gt') $200
28
    filters?.addCondition(2, 'gt', [200]);
29
    filters?.filter();
30
  };
31

32
  const clearAllFilters = () => {
33
    // get the `Filters` plugin, so you can use its API
34
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
35

36
    // clear all filters
37
    filters?.clearConditions();
38
    filters?.filter();
39
  };
40

41
  return (
42
    <>
43
      <div className="example-controls-container">
44
        <div className="controls">
45
          <button onClick={filterBelow200}>Show items &lt; $200</button>
46
          <button onClick={filterAbove200}>Show items &gt; $200</button>
47
          <button onClick={clearAllFilters}>Clear filters</button>
48
        </div>
49
      </div>
50
      <HotTable
51
        ref={hotTableComponentRef}
52
        data={[
53
          {
54
            brand: 'Jetpulse',
55
            model: 'Racing Socks',
56
            price: 30,
57
            sellDate: '2023-10-11',
58
            sellTime: '01:23',
59
            inStock: false,
60
          },
61
          {
62
            brand: 'Gigabox',
63
            model: 'HL Mountain Frame',
64
            price: 1890.9,
65
            sellDate: '2023-05-03',
66
            sellTime: '11:27',
67
            inStock: false,
68
          },
69
          {
70
            brand: 'Camido',
71
            model: 'Cycling Cap',
72
            price: 130.1,
73
            sellDate: '2023-03-27',
74
            sellTime: '03:17',
75
            inStock: true,
76
          },
77
          {
78
            brand: 'Chatterpoint',
79
            model: 'Road Tire Tube',
80
            price: 59,
81
            sellDate: '2023-08-28',
82
            sellTime: '08:01',
83
            inStock: true,
84
          },
85
          {
86
            brand: 'Eidel',
87
            model: 'HL Road Tire',
88
            price: 279.99,
89
            sellDate: '2023-10-02',
90
            sellTime: '01:23',
91
            inStock: true,
92
          },
93
        ]}
94
        columns={[
95
          {
96
            title: 'Brand',
97
            type: 'text',
98
            data: 'brand',
99
          },
100
          {
101
            title: 'Model',
102
            type: 'text',
103
            data: 'model',
104
          },
105
          {
106
            title: 'Price',
107
            type: 'numeric',
108
            data: 'price',
109
            locale: 'en-US',
110
            numericFormat: {
111
              style: 'currency',
112
              currency: 'USD',
113
              minimumFractionDigits: 2,
114
            },
115
          },
116
          {
117
            title: 'Date',
118
            type: 'intl-date',
119
            data: 'sellDate',
120
            locale: 'en-US',
121
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
122
            className: 'htRight',
123
          },
124
          {
125
            title: 'Time',
126
            type: 'intl-time',
127
            data: 'sellTime',
128
            locale: 'en-US',
129
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
130
            className: 'htRight',
131
          },
132
          {
133
            title: 'In stock',
134
            type: 'checkbox',
135
            data: 'inStock',
136
            className: 'htCenter',
137
          },
138
        ]}
139
        // enable filtering
140
        filters={true}
141
        // enable the column menu
142
        dropdownMenu={true}
143
        height="auto"
144
        autoWrapRow={true}
145
        autoWrapCol={true}
146
        licenseKey="non-commercial-and-evaluation"
147
      />
148
    </>
149
  );
150
};
151

152
export default ExampleComponent;

Combine multiple filter conditions

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

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

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

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

1
const filters = hotTableComponentRef.current.hotInstance.getPlugin('filters');
2

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

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

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

Clear a column filter

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

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

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

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

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

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

Save and restore filter settings

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

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

1
import { useRef } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotTableComponentRef = useRef(null);
10
  const savedConditions = useRef([]);
11

12
  const applySampleFilter = () => {
13
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
14

15
    filters?.clearConditions();
16
    // filter the 'Price' column (column at index 2) for items over $200
17
    filters?.addCondition(2, 'gt', [200]);
18
    filters?.filter();
19
  };
20

21
  const saveFilters = () => {
22
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
23

24
    // `exportConditions()` returns the current conditions, keyed by physical column index
25
    savedConditions.current = filters?.exportConditions() ?? [];
26
  };
27

28
  const clearFilters = () => {
29
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
30

31
    filters?.clearConditions();
32
    filters?.filter();
33
  };
34

35
  const restoreFilters = () => {
36
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
37

38
    // `importConditions()` expects the same physical-column-indexed structure
39
    filters?.importConditions(savedConditions.current);
40
    filters?.filter();
41
  };
42

43
  return (
44
    <>
45
      <div className="example-controls-container">
46
        <div className="controls">
47
          <button onClick={applySampleFilter}>Filter: price &gt; $200</button>
48
          <button onClick={saveFilters}>Save filter settings</button>
49
          <button onClick={clearFilters}>Clear filters</button>
50
          <button onClick={restoreFilters}>Restore filter settings</button>
51
        </div>
52
      </div>
53
      <HotTable
54
        ref={hotTableComponentRef}
55
        data={[
56
          {
57
            brand: 'Jetpulse',
58
            model: 'Racing Socks',
59
            price: 30,
60
            sellDate: '2023-10-11',
61
            sellTime: '01:23',
62
            inStock: false,
63
          },
64
          {
65
            brand: 'Gigabox',
66
            model: 'HL Mountain Frame',
67
            price: 1890.9,
68
            sellDate: '2023-05-03',
69
            sellTime: '11:27',
70
            inStock: false,
71
          },
72
          {
73
            brand: 'Camido',
74
            model: 'Cycling Cap',
75
            price: 130.1,
76
            sellDate: '2023-03-27',
77
            sellTime: '03:17',
78
            inStock: true,
79
          },
80
          {
81
            brand: 'Chatterpoint',
82
            model: 'Road Tire Tube',
83
            price: 59,
84
            sellDate: '2023-08-28',
85
            sellTime: '08:01',
86
            inStock: true,
87
          },
88
          {
89
            brand: 'Eidel',
90
            model: 'HL Road Tire',
91
            price: 279.99,
92
            sellDate: '2023-10-02',
93
            sellTime: '01:23',
94
            inStock: true,
95
          },
96
        ]}
97
        columns={[
98
          {
99
            title: 'Brand',
100
            type: 'text',
101
            data: 'brand',
102
          },
103
          {
104
            title: 'Model',
105
            type: 'text',
106
            data: 'model',
107
          },
108
          {
109
            title: 'Price',
110
            type: 'numeric',
111
            data: 'price',
112
            locale: 'en-US',
113
            numericFormat: {
114
              style: 'currency',
115
              currency: 'USD',
116
              minimumFractionDigits: 2,
117
            },
118
          },
119
          {
120
            title: 'Date',
121
            type: 'intl-date',
122
            data: 'sellDate',
123
            locale: 'en-US',
124
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
125
            className: 'htRight',
126
          },
127
          {
128
            title: 'Time',
129
            type: 'intl-time',
130
            data: 'sellTime',
131
            locale: 'en-US',
132
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
133
            className: 'htRight',
134
          },
135
          {
136
            title: 'In stock',
137
            type: 'checkbox',
138
            data: 'inStock',
139
            className: 'htCenter',
140
          },
141
        ]}
142
        // enable filtering
143
        filters={true}
144
        // enable the column menu
145
        dropdownMenu={true}
146
        height="auto"
147
        autoWrapRow={true}
148
        autoWrapCol={true}
149
        licenseKey="non-commercial-and-evaluation"
150
      />
151
    </>
152
  );
153
};
154

155
export default ExampleComponent;

1
import { useRef } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
import type { ColumnConditions } from 'handsontable/plugins/filters';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const ExampleComponent = () => {
10
  const hotTableComponentRef = useRef<HotTableRef>(null);
11
  const savedConditions = useRef<ColumnConditions[]>([]);
12

13
  const applySampleFilter = () => {
14
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
15

16
    filters?.clearConditions();
17
    // filter the 'Price' column (column at index 2) for items over $200
18
    filters?.addCondition(2, 'gt', [200]);
19
    filters?.filter();
20
  };
21

22
  const saveFilters = () => {
23
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
24

25
    // `exportConditions()` returns the current conditions, keyed by physical column index
26
    savedConditions.current = filters?.exportConditions() ?? [];
27
  };
28

29
  const clearFilters = () => {
30
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
31

32
    filters?.clearConditions();
33
    filters?.filter();
34
  };
35

36
  const restoreFilters = () => {
37
    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');
38

39
    // `importConditions()` expects the same physical-column-indexed structure
40
    filters?.importConditions(savedConditions.current);
41
    filters?.filter();
42
  };
43

44
  return (
45
    <>
46
      <div className="example-controls-container">
47
        <div className="controls">
48
          <button onClick={applySampleFilter}>Filter: price &gt; $200</button>
49
          <button onClick={saveFilters}>Save filter settings</button>
50
          <button onClick={clearFilters}>Clear filters</button>
51
          <button onClick={restoreFilters}>Restore filter settings</button>
52
        </div>
53
      </div>
54
      <HotTable
55
        ref={hotTableComponentRef}
56
        data={[
57
          {
58
            brand: 'Jetpulse',
59
            model: 'Racing Socks',
60
            price: 30,
61
            sellDate: '2023-10-11',
62
            sellTime: '01:23',
63
            inStock: false,
64
          },
65
          {
66
            brand: 'Gigabox',
67
            model: 'HL Mountain Frame',
68
            price: 1890.9,
69
            sellDate: '2023-05-03',
70
            sellTime: '11:27',
71
            inStock: false,
72
          },
73
          {
74
            brand: 'Camido',
75
            model: 'Cycling Cap',
76
            price: 130.1,
77
            sellDate: '2023-03-27',
78
            sellTime: '03:17',
79
            inStock: true,
80
          },
81
          {
82
            brand: 'Chatterpoint',
83
            model: 'Road Tire Tube',
84
            price: 59,
85
            sellDate: '2023-08-28',
86
            sellTime: '08:01',
87
            inStock: true,
88
          },
89
          {
90
            brand: 'Eidel',
91
            model: 'HL Road Tire',
92
            price: 279.99,
93
            sellDate: '2023-10-02',
94
            sellTime: '01:23',
95
            inStock: true,
96
          },
97
        ]}
98
        columns={[
99
          {
100
            title: 'Brand',
101
            type: 'text',
102
            data: 'brand',
103
          },
104
          {
105
            title: 'Model',
106
            type: 'text',
107
            data: 'model',
108
          },
109
          {
110
            title: 'Price',
111
            type: 'numeric',
112
            data: 'price',
113
            locale: 'en-US',
114
            numericFormat: {
115
              style: 'currency',
116
              currency: 'USD',
117
              minimumFractionDigits: 2,
118
            },
119
          },
120
          {
121
            title: 'Date',
122
            type: 'intl-date',
123
            data: 'sellDate',
124
            locale: 'en-US',
125
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
126
            className: 'htRight',
127
          },
128
          {
129
            title: 'Time',
130
            type: 'intl-time',
131
            data: 'sellTime',
132
            locale: 'en-US',
133
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
134
            className: 'htRight',
135
          },
136
          {
137
            title: 'In stock',
138
            type: 'checkbox',
139
            data: 'inStock',
140
            className: 'htCenter',
141
          },
142
        ]}
143
        // enable filtering
144
        filters={true}
145
        // enable the column menu
146
        dropdownMenu={true}
147
        height="auto"
148
        autoWrapRow={true}
149
        autoWrapCol={true}
150
        licenseKey="non-commercial-and-evaluation"
151
      />
152
    </>
153
  );
154
};
155

156
export default ExampleComponent;

Get filtered data

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

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

1
import { useRef, useState } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotTableComponentRef = useRef(null);
10
  const [rowCountInfo, setRowCountInfo] = useState('');
11

12
  const updateRowCountInfo = () => {
13
    const hotInstance = hotTableComponentRef.current?.hotInstance;
14

15
    if (!hotInstance) {
16
      return;
17
    }
18

19
    // `getData()` returns only the rows that pass the current filters
20
    // `getSourceData()` always returns every row, filtered or not
21
    setRowCountInfo(`Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`);
22
  };
23

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

131
export default ExampleComponent;

1
import { useRef, useState } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotTableComponentRef = useRef<HotTableRef>(null);
10
  const [rowCountInfo, setRowCountInfo] = useState('');
11

12
  const updateRowCountInfo = () => {
13
    const hotInstance = hotTableComponentRef.current?.hotInstance;
14

15
    if (!hotInstance) {
16
      return;
17
    }
18

19
    // `getData()` returns only the rows that pass the current filters
20
    // `getSourceData()` always returns every row, filtered or not
21
    setRowCountInfo(`Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`);
22
  };
23

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

131
export default ExampleComponent;

Import the filtering module

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

To use filtering, you need only the following modules:

The base module
The Filters module
The DropdownMenu module

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

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

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

Known limitations

At the moment, filtering comes with the following limitations:

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

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

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

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

Windows	macOS	Action	Excel	Sheets
`Alt`+`A`	`⌥`+`A`	Clear all filters	✗	✗

API reference

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

Plugins

Filters

DropdownMenu

Troubleshooting

Didn’t find what you need? Try this:

View related topics

Report an issue

Start a discussion

Contact our technical support

Column filter

Overview

Filtering demo

Enable filtering

Enable filtering for individual columns

Enable filtering within already filtered results

Filter different types of data

Filter data on initialization

External quick filter

Customize the filter button

Change the width of the filter menu

Exclude rows from filtering

Server-side filtering

Control filtering programmatically

Enable or disable filtering programmatically

Filter data programmatically

Combine multiple filter conditions

Clear a column filter

Save and restore filter settings

Get filtered data

Import the filtering module

Known limitations

Navigate the filter menu

API reference

Troubleshooting

Column filter

Overview

Filtering demo

Enable filtering

Enable filtering for individual columns

Enable filtering within already filtered results

Filter different types of data

Filter data on initialization

External quick filter

Customize the filter button

Change the width of the filter menu

Exclude rows from filtering

Server-side filtering

Control filtering programmatically

Enable or disable filtering programmatically

Filter data programmatically

Combine multiple filter conditions

Clear a column filter

Save and restore filter settings

Get filtered data

Import the filtering module

Known limitations

Navigate the filter menu

Related keyboard shortcuts

API reference

Troubleshooting