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

Filter data on initialization

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

To do this, 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
const columns = [
9
  { value: '0', label: 'Brand' },
10
  { value: '1', label: 'Model' },
11
  { value: '2', label: 'Price' },
12
  { value: '3', label: 'Date' },
13
  { value: '4', label: 'Time' },
14
  { value: '5', label: 'In stock' },
15
];
16

17
const ExampleComponent = () => {
18
  const hotTableComponentRef = useRef(null);
19
  const dropdownRef = useRef(null);
20
  const [selectedColumn, setSelectedColumn] = useState('0');
21
  const [open, setOpen] = useState(false);
22

23
  useEffect(() => {
24
    const handleClickOutside = (e) => {
25
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
26
        setOpen(false);
27
      }
28
    };
29

30
    document.addEventListener('click', handleClickOutside);
31

32
    return () => document.removeEventListener('click', handleClickOutside);
33
  }, []);
34

35
  const handleFilter = (event) => {
36
    const handsontableInstance = hotTableComponentRef.current?.hotInstance;
37
    const filtersPlugin = handsontableInstance?.getPlugin('filters');
38

39
    filtersPlugin?.removeConditions(Number(selectedColumn));
40
    filtersPlugin?.addCondition(Number(selectedColumn), 'contains', [event.target.value]);
41
    filtersPlugin?.filter();
42
    handsontableInstance?.render();
43
  };
44

45
  const handleSelect = (col) => {
46
    setSelectedColumn(col.value);
47
    setOpen(false);
48
  };
49

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

52
  return (
53
    <>
54
      <div className="controlsQuickFilter">
55
        <div className="filter-dropdown" ref={dropdownRef}>
56
          <span className="filter-dropdown-label">Select a column:</span>
57
          <button
58
            className="filter-dropdown-trigger"
59
            type="button"
60
            aria-haspopup="listbox"
61
            aria-expanded={open}
62
            onClick={() => setOpen(!open)}
63
          >
64
            <span className="filter-dropdown-text">{selectedLabel}</span>
65
            <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>
66
          </button>
67
          {open && (
68
            <ul className="filter-dropdown-menu" role="listbox">
69
              {columns.map((col) => (
70
                <li
71
                  key={col.value}
72
                  role="option"
73
                  aria-selected={col.value === selectedColumn}
74
                  onClick={() => handleSelect(col)}
75
                >
76
                  {col.label}
77
                </li>
78
              ))}
79
            </ul>
80
          )}
81
        </div>
82
        <input id="filterField" type="text" placeholder="Filter" onKeyUp={handleFilter} />
83
      </div>
84
      <HotTable
85
        ref={hotTableComponentRef}
86
        data={[
87
          {
88
            brand: 'Jetpulse',
89
            model: 'Racing Socks',
90
            price: 30,
91
            sellDate: '2023-10-11',
92
            sellTime: '01:23',
93
            inStock: false,
94
          },
95
          {
96
            brand: 'Gigabox',
97
            model: 'HL Mountain Frame',
98
            price: 1890.9,
99
            sellDate: '2023-05-03',
100
            sellTime: '11:27',
101
            inStock: false,
102
          },
103
          {
104
            brand: 'Camido',
105
            model: 'Cycling Cap',
106
            price: 130.1,
107
            sellDate: '2023-03-27',
108
            sellTime: '03:17',
109
            inStock: true,
110
          },
111
          {
112
            brand: 'Chatterpoint',
113
            model: 'Road Tire Tube',
114
            price: 59,
115
            sellDate: '2023-08-28',
116
            sellTime: '08:01',
117
            inStock: true,
118
          },
119
          {
120
            brand: 'Eidel',
121
            model: 'HL Road Tire',
122
            price: 279.99,
123
            sellDate: '2023-10-02',
124
            sellTime: '01:23',
125
            inStock: true,
126
          },
127
        ]}
128
        columns={[
129
          {
130
            title: 'Brand',
131
            type: 'text',
132
            data: 'brand',
133
          },
134
          {
135
            title: 'Model',
136
            type: 'text',
137
            data: 'model',
138
          },
139
          {
140
            title: 'Price',
141
            type: 'numeric',
142
            data: 'price',
143
            locale: 'en-US',
144
            numericFormat: {
145
              style: 'currency',
146
              currency: 'USD',
147
              minimumFractionDigits: 2,
148
            },
149
          },
150
          {
151
            title: 'Date',
152
            type: 'intl-date',
153
            data: 'sellDate',
154
            locale: 'en-US',
155
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
156
            className: 'htRight',
157
          },
158
          {
159
            title: 'Time',
160
            type: 'intl-time',
161
            data: 'sellTime',
162
            locale: 'en-US',
163
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
164
            className: 'htRight',
165
          },
166
          {
167
            title: 'In stock',
168
            type: 'checkbox',
169
            data: 'inStock',
170
            className: 'htCenter',
171
          },
172
        ]}
173
        filters={true}
174
        height="auto"
175
        className="exampleQuickFilter"
176
        autoWrapRow={true}
177
        autoWrapCol={true}
178
        licenseKey="non-commercial-and-evaluation"
179
      />
180
    </>
181
  );
182
};
183

184
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
const columnOptions = [
9
  { value: '0', label: 'Brand' },
10
  { value: '1', label: 'Model' },
11
  { value: '2', label: 'Price' },
12
  { value: '3', label: 'Date' },
13
  { value: '4', label: 'Time' },
14
  { value: '5', label: 'In stock' },
15
];
16

17
const ExampleComponent = () => {
18
  const hotTableComponentRef = useRef<HotTableRef>(null);
19
  const dropdownRef = useRef<HTMLDivElement>(null);
20
  const [selectedColumn, setSelectedColumn] = useState('0');
21
  const [open, setOpen] = useState(false);
22

23
  useEffect(() => {
24
    const handleClickOutside = (e: MouseEvent) => {
25
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
26
        setOpen(false);
27
      }
28
    };
29

30
    document.addEventListener('click', handleClickOutside);
31

32
    return () => document.removeEventListener('click', handleClickOutside);
33
  }, []);
34

35
  const handleFilter = (event: React.KeyboardEvent<HTMLInputElement>) => {
36
    const handsontableInstance = hotTableComponentRef.current?.hotInstance;
37
    const filtersPlugin = handsontableInstance?.getPlugin('filters');
38

39
    filtersPlugin?.removeConditions(Number(selectedColumn));
40
    filtersPlugin?.addCondition(Number(selectedColumn), 'contains', [(event.target as HTMLInputElement).value]);
41
    filtersPlugin?.filter();
42
    handsontableInstance?.render();
43
  };
44

45
  const handleSelect = (col: { value: string; label: string }) => {
46
    setSelectedColumn(col.value);
47
    setOpen(false);
48
  };
49

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

52
  return (
53
    <>
54
      <div className="controlsQuickFilter">
55
        <div className="filter-dropdown" ref={dropdownRef}>
56
          <span className="filter-dropdown-label">Select a column:</span>
57
          <button
58
            className="filter-dropdown-trigger"
59
            type="button"
60
            aria-haspopup="listbox"
61
            aria-expanded={open}
62
            onClick={() => setOpen(!open)}
63
          >
64
            <span className="filter-dropdown-text">{selectedLabel}</span>
65
            <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>
66
          </button>
67
          {open && (
68
            <ul className="filter-dropdown-menu" role="listbox">
69
              {columnOptions.map((col) => (
70
                <li
71
                  key={col.value}
72
                  role="option"
73
                  aria-selected={col.value === selectedColumn}
74
                  onClick={() => handleSelect(col)}
75
                >
76
                  {col.label}
77
                </li>
78
              ))}
79
            </ul>
80
          )}
81
        </div>
82
        <input id="filterField" type="text" placeholder="Filter" onKeyUp={handleFilter} />
83
      </div>
84
      <HotTable
85
        ref={hotTableComponentRef}
86
        data={[
87
          {
88
            brand: 'Jetpulse',
89
            model: 'Racing Socks',
90
            price: 30,
91
            sellDate: '2023-10-11',
92
            sellTime: '01:23',
93
            inStock: false,
94
          },
95
          {
96
            brand: 'Gigabox',
97
            model: 'HL Mountain Frame',
98
            price: 1890.9,
99
            sellDate: '2023-05-03',
100
            sellTime: '11:27',
101
            inStock: false,
102
          },
103
          {
104
            brand: 'Camido',
105
            model: 'Cycling Cap',
106
            price: 130.1,
107
            sellDate: '2023-03-27',
108
            sellTime: '03:17',
109
            inStock: true,
110
          },
111
          {
112
            brand: 'Chatterpoint',
113
            model: 'Road Tire Tube',
114
            price: 59,
115
            sellDate: '2023-08-28',
116
            sellTime: '08:01',
117
            inStock: true,
118
          },
119
          {
120
            brand: 'Eidel',
121
            model: 'HL Road Tire',
122
            price: 279.99,
123
            sellDate: '2023-10-02',
124
            sellTime: '01:23',
125
            inStock: true,
126
          },
127
        ]}
128
        columns={[
129
          {
130
            title: 'Brand',
131
            type: 'text',
132
            data: 'brand',
133
          },
134
          {
135
            title: 'Model',
136
            type: 'text',
137
            data: 'model',
138
          },
139
          {
140
            title: 'Price',
141
            type: 'numeric',
142
            data: 'price',
143
            locale: 'en-US',
144
            numericFormat: {
145
              style: 'currency',
146
              currency: 'USD',
147
              minimumFractionDigits: 2,
148
            },
149
          },
150
          {
151
            title: 'Date',
152
            type: 'intl-date',
153
            data: 'sellDate',
154
            locale: 'en-US',
155
            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
156
            className: 'htRight',
157
          },
158
          {
159
            title: 'Time',
160
            type: 'intl-time',
161
            data: 'sellTime',
162
            locale: 'en-US',
163
            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
164
            className: 'htRight',
165
          },
166
          {
167
            title: 'In stock',
168
            type: 'checkbox',
169
            data: 'inStock',
170
            className: 'htCenter',
171
          },
172
        ]}
173
        filters={true}
174
        height="auto"
175
        className="exampleQuickFilter"
176
        autoWrapRow={true}
177
        autoWrapCol={true}
178
        licenseKey="non-commercial-and-evaluation"
179
      />
180
    </>
181
  );
182
};
183

184
export default ExampleComponent;

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

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

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

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

29
/* Filter dropdown */
30
.filter-dropdown {
31
  position: relative;
32
  display: inline-flex;
33
  align-items: center;
34
  gap: 0.5rem;
35
}
36

37
.filter-dropdown-label {
38
  color: var(--sl-color-gray-2);
39
  font-size: var(--sl-text-sm);
40
  white-space: nowrap;
41
}
42

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

59
.filter-dropdown-trigger:hover {
60
  color: var(--sl-color-white);
61
  background: var(--sl-color-gray-7, var(--sl-color-gray-6));
62
}
63

64
.filter-dropdown-chevron {
65
  flex-shrink: 0;
66
  margin-inline-start: 0.15rem;
67
  transition: transform 0.15s;
68
}
69

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

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

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

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

108
.filter-dropdown-menu li:last-child {
109
  border-bottom: none;
110
}
111

112
.filter-dropdown-menu li:hover,
113
.filter-dropdown-menu li:focus-visible {
114
  background: var(--sl-color-gray-6);
115
  color: var(--sl-color-white);
116
  outline: none;
117
}
118

119
.filter-dropdown-menu li[aria-selected='true'] {
120
  color: var(--sl-color-white);
121
  box-shadow: inset 0 0 0 1px var(--sl-color-accent);
122
}

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

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

9
const ExampleComponent = () => {
10
  const hotTableComponentRef = useRef(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.indexedValues.length - 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
      minSpareRows={1}
188
      colHeaders={true}
189
      filters={true}
190
      dropdownMenu={true}
191
      afterFilter={exclude}
192
      autoWrapRow={true}
193
      autoWrapCol={true}
194
      licenseKey="non-commercial-and-evaluation"
195
    />
196
  );
197
};
198

199
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.indexedValues.length - 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
      minSpareRows={1}
188
      colHeaders={true}
189
      filters={true}
190
      dropdownMenu={true}
191
      afterFilter={exclude}
192
      autoWrapRow={true}
193
      autoWrapCol={true}
194
      licenseKey="non-commercial-and-evaluation"
195
    />
196
  );
197
};
198

199
export default ExampleComponent;

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

112
        // return `false` to disable filtering on the client side
113
        return false;
114
      }}
115
      autoWrapRow={true}
116
      autoWrapCol={true}
117
      licenseKey="non-commercial-and-evaluation"
118
    />
119
  );
120
};
121

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

112
        // return `false` to disable filtering on the client side
113
        return false;
114
      }}
115
      autoWrapRow={true}
116
      autoWrapCol={true}
117
      licenseKey="non-commercial-and-evaluation"
118
    />
119
  );
120
};
121

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

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

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