Multi-column filter panel

In this tutorial, you will build an external filter panel with a category dropdown and a price range slider that controls Handsontable filtering. You will learn how to apply multiple conditions at once through the Filters plugin API and clear them all with a single button.

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

6
registerAllModules();
7

8
/* start:skip-in-preview */
9
const sourceData = [
10
  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },
11
  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },
12
  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },
13
  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },
14
  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },
15
  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },
16
  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },
17
  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },
18
  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },
19
  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },
20
];
21
/* end:skip-in-preview */
22

23
const FilterLabel = ({ label, children }) => (
24
  <label className="filter-label">
25
    {label}
26
    {children}
27
  </label>
28
);
29

30
const ExampleComponent = () => {
31
  const hotRef = useRef(null);
32
  const nameRef = useRef(null);
33
  const categoryRef = useRef(null);
34
  const minPriceRef = useRef(null);
35
  const maxPriceRef = useRef(null);
36

37
  const applyFilters = () => {
38
    const hot = hotRef.current?.hotInstance;
39

40
    if (!hot) {
41
      return;
42
    }
43

44
    const name = nameRef.current?.value ?? '';
45
    const category = categoryRef.current?.value ?? '';
46
    const minPrice = minPriceRef.current?.value ?? '';
47
    const maxPrice = maxPriceRef.current?.value ?? '';
48
    const filtersPlugin = hot.getPlugin('filters');
49

50
    filtersPlugin.clearConditions();
51

52
    if (category) {
53
      filtersPlugin.addCondition(1, 'eq', [category]);
54
    }
55

56
    if (name.trim()) {
57
      filtersPlugin.addCondition(0, 'contains', [name.trim()]);
58
    }
59

60
    if (minPrice && maxPrice) {
61
      const lowerBound = Number(minPrice);
62
      const upperBound = Number(maxPrice);
63

64
      if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {
65
        filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);
66
      }
67
    } else if (minPrice) {
68
      const lowerBound = Number(minPrice);
69

70
      if (Number.isFinite(lowerBound)) {
71
        filtersPlugin.addCondition(2, 'gte', [lowerBound]);
72
      }
73
    } else if (maxPrice) {
74
      const upperBound = Number(maxPrice);
75

76
      if (Number.isFinite(upperBound)) {
77
        filtersPlugin.addCondition(2, 'lte', [upperBound]);
78
      }
79
    }
80

81
    filtersPlugin.filter();
82
  };
83

84
  const clearFilters = () => {
85
    if (nameRef.current) nameRef.current.value = '';
86
    if (categoryRef.current) categoryRef.current.value = '';
87
    if (minPriceRef.current) minPriceRef.current.value = '';
88
    if (maxPriceRef.current) maxPriceRef.current.value = '';
89

90
    applyFilters();
91
  };
92

93
  return (
94
    <div>
95
      <div className="example-controls-container">
96
        <div className="filter-panel">
97
          <FilterLabel label="Product name">
98
            <input
99
              ref={nameRef}
100
              type="text"
101
              placeholder="Contains..."
102
              onChange={applyFilters}
103
            />
104
          </FilterLabel>
105
          <FilterLabel label="Category">
106
            <select ref={categoryRef} onChange={applyFilters}>
107
              <option value="">All categories</option>
108
              <option value="Bikes">Bikes</option>
109
              <option value="Safety">Safety</option>
110
              <option value="Components">Components</option>
111
              <option value="Accessories">Accessories</option>
112
              <option value="Maintenance">Maintenance</option>
113
            </select>
114
          </FilterLabel>
115
          <FilterLabel label="Min price">
116
            <input
117
              ref={minPriceRef}
118
              type="number"
119
              min="0"
120
              placeholder="0"
121
              onChange={applyFilters}
122
            />
123
          </FilterLabel>
124
          <FilterLabel label="Max price">
125
            <input
126
              ref={maxPriceRef}
127
              type="number"
128
              min="0"
129
              placeholder="2500"
130
              onChange={applyFilters}
131
            />
132
          </FilterLabel>
133
          <button type="button" onClick={clearFilters}>
134
            Clear all filters
135
          </button>
136
        </div>
137
      </div>
138
      <HotTable
139
        ref={hotRef}
140
        data={sourceData}
141
        columns={[
142
          { data: 'name', type: 'text', title: 'Product' },
143
          { data: 'category', type: 'text', title: 'Category' },
144
          { data: 'price', type: 'numeric', title: 'Price' },
145
          { data: 'stock', type: 'numeric', title: 'Stock' },
146
        ]}
147
        colHeaders={['Product', 'Category', 'Price', 'Stock']}
148
        rowHeaders={true}
149
        filters={true}
150
        dropdownMenu={false}
151
        width="100%"
152
        height={320}
153
        autoWrapRow={true}
154
        autoWrapCol={true}
155
        licenseKey="non-commercial-and-evaluation"
156
      />
157
    </div>
158
  );
159
};
160

161
export default ExampleComponent;

1
import { useRef, type ReactNode } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
import './example1.css';
5

6
registerAllModules();
7

8
/* start:skip-in-preview */
9
const sourceData = [
10
  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },
11
  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },
12
  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },
13
  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },
14
  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },
15
  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },
16
  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },
17
  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },
18
  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },
19
  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },
20
];
21
/* end:skip-in-preview */
22

23
type FilterLabelProps = {
24
  label: string;
25
  children: ReactNode;
26
};
27

28
const FilterLabel = ({ label, children }: FilterLabelProps) => (
29
  <label className="filter-label">
30
    {label}
31
    {children}
32
  </label>
33
);
34

35
const ExampleComponent = () => {
36
  const hotRef = useRef<HotTableRef>(null);
37
  const nameRef = useRef<HTMLInputElement>(null);
38
  const categoryRef = useRef<HTMLSelectElement>(null);
39
  const minPriceRef = useRef<HTMLInputElement>(null);
40
  const maxPriceRef = useRef<HTMLInputElement>(null);
41

42
  const applyFilters = () => {
43
    const hot = hotRef.current?.hotInstance;
44

45
    if (!hot) {
46
      return;
47
    }
48

49
    const name = nameRef.current?.value ?? '';
50
    const category = categoryRef.current?.value ?? '';
51
    const minPrice = minPriceRef.current?.value ?? '';
52
    const maxPrice = maxPriceRef.current?.value ?? '';
53
    const filtersPlugin = hot.getPlugin('filters');
54

55
    filtersPlugin.clearConditions();
56

57
    if (category) {
58
      filtersPlugin.addCondition(1, 'eq', [category]);
59
    }
60

61
    if (name.trim()) {
62
      filtersPlugin.addCondition(0, 'contains', [name.trim()]);
63
    }
64

65
    if (minPrice && maxPrice) {
66
      const lowerBound = Number(minPrice);
67
      const upperBound = Number(maxPrice);
68

69
      if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {
70
        filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);
71
      }
72
    } else if (minPrice) {
73
      const lowerBound = Number(minPrice);
74

75
      if (Number.isFinite(lowerBound)) {
76
        filtersPlugin.addCondition(2, 'gte', [lowerBound]);
77
      }
78
    } else if (maxPrice) {
79
      const upperBound = Number(maxPrice);
80

81
      if (Number.isFinite(upperBound)) {
82
        filtersPlugin.addCondition(2, 'lte', [upperBound]);
83
      }
84
    }
85

86
    filtersPlugin.filter();
87
  };
88

89
  const clearFilters = () => {
90
    if (nameRef.current) nameRef.current.value = '';
91
    if (categoryRef.current) categoryRef.current.value = '';
92
    if (minPriceRef.current) minPriceRef.current.value = '';
93
    if (maxPriceRef.current) maxPriceRef.current.value = '';
94

95
    applyFilters();
96
  };
97

98
  return (
99
    <div>
100
      <div className="example-controls-container">
101
        <div className="filter-panel">
102
          <FilterLabel label="Product name">
103
            <input
104
              ref={nameRef}
105
              type="text"
106
              placeholder="Contains..."
107
              onChange={applyFilters}
108
            />
109
          </FilterLabel>
110
          <FilterLabel label="Category">
111
            <select ref={categoryRef} onChange={applyFilters}>
112
              <option value="">All categories</option>
113
              <option value="Bikes">Bikes</option>
114
              <option value="Safety">Safety</option>
115
              <option value="Components">Components</option>
116
              <option value="Accessories">Accessories</option>
117
              <option value="Maintenance">Maintenance</option>
118
            </select>
119
          </FilterLabel>
120
          <FilterLabel label="Min price">
121
            <input
122
              ref={minPriceRef}
123
              type="number"
124
              min="0"
125
              placeholder="0"
126
              onChange={applyFilters}
127
            />
128
          </FilterLabel>
129
          <FilterLabel label="Max price">
130
            <input
131
              ref={maxPriceRef}
132
              type="number"
133
              min="0"
134
              placeholder="2500"
135
              onChange={applyFilters}
136
            />
137
          </FilterLabel>
138
          <button type="button" onClick={clearFilters}>
139
            Clear all filters
140
          </button>
141
        </div>
142
      </div>
143
      <HotTable
144
        ref={hotRef}
145
        data={sourceData}
146
        columns={[
147
          { data: 'name', type: 'text', title: 'Product' },
148
          { data: 'category', type: 'text', title: 'Category' },
149
          { data: 'price', type: 'numeric', title: 'Price' },
150
          { data: 'stock', type: 'numeric', title: 'Stock' },
151
        ]}
152
        colHeaders={['Product', 'Category', 'Price', 'Stock']}
153
        rowHeaders={true}
154
        filters={true}
155
        dropdownMenu={false}
156
        width="100%"
157
        height={320}
158
        autoWrapRow={true}
159
        autoWrapCol={true}
160
        licenseKey="non-commercial-and-evaluation"
161
      />
162
    </div>
163
  );
164
};
165

166
export default ExampleComponent;

1
.filter-panel {
2
  display: flex;
3
  gap: 0.75rem;
4
  flex-wrap: wrap;
5
  align-items: flex-end;
6
}
7

8
/* Stack label text above the control (overrides the inline-flex horizontal
9
   layout from interactive-example.css) */
10
.example-controls-container .filter-label {
11
  display: flex;
12
  flex-direction: column;
13
  align-items: flex-start;
14
  gap: 0.25rem;
15
  min-width: 120px;
16
}

Overview

This recipe shows how to control the Filters plugin from a filter panel outside of the grid. The panel includes controls aligned with the grid columns, and it applies all active filters together with AND logic.

Difficulty: Intermediate Time: ~20 minutes Libraries: Handsontable only

What You’ll Build

An external filter panel that:

Enables filters: true while hiding the built-in filter menu UI.
Uses hot.getPlugin('filters') to control filtering through API calls.
Applies a text filter with addCondition(columnIndex, 'contains', [value]).
Applies a numeric range filter with addCondition(columnIndex, 'between', [min, max]).
Clears and re-applies all active conditions every time controls change.
Includes a Clear all filters button that restores all rows.

Step 1 - Enable filtering and create the grid

Enable the Filters plugin in Handsontable configuration:

1
const hot = new Handsontable(container, {
2
  data: productData,
3
  colHeaders: ['Product', 'Category', 'Price', 'Stock'],
4
  columns: [
5
    { data: 'name' },
6
    { data: 'category' },
7
    { data: 'price', type: 'numeric', numericFormat: { pattern: '$0,0.00', culture: 'en-US' } },
8
    { data: 'stock', type: 'numeric' },
9
  ],
10
  filters: true,
11
  dropdownMenu: false,
12
  licenseKey: 'non-commercial-and-evaluation',
13
});

Setting dropdownMenu: false keeps the filter panel external, while the Filters plugin remains active.

Step 2 - Get the plugin and apply conditions

Get the plugin instance and apply conditions every time a filter value changes:

1
const filtersPlugin = hot.getPlugin('filters');
2

3
const applyFilters = () => {
4
  filtersPlugin.clearConditions();
5

6
  if (enteredName) {
7
    filtersPlugin.addCondition(0, 'contains', [enteredName]);
8
  }
9

10
  if (selectedCategory) {
11
    filtersPlugin.addCondition(1, 'eq', [selectedCategory]);
12
  }
13

14
  if (minPrice && maxPrice) {
15
    filtersPlugin.addCondition(2, 'between', [Number(minPrice), Number(maxPrice)]);
16
  } else if (minPrice) {
17
    filtersPlugin.addCondition(2, 'gte', [Number(minPrice)]);
18
  } else if (maxPrice) {
19
    filtersPlugin.addCondition(2, 'lte', [Number(maxPrice)]);
20
  }
21

22
  filtersPlugin.filter();
23
  hot.render();
24
};

This pattern guarantees each update uses the current set of active controls.

Step 3 - Add clear-all behavior

Add a button that clears control values, removes all conditions, and shows all rows again:

1
clearAllButton.addEventListener('click', () => {
2
  nameInput.value = '';
3
  categorySelect.value = '';
4
  minPriceInput.value = '';
5
  maxPriceInput.value = '';
6
  filtersPlugin.clearConditions();
7
  filtersPlugin.filter();
8
  hot.render();
9
});

How it works

User changes one or more controls in the external panel.
The code clears previously applied conditions.
The code re-applies current conditions for product name, category, and price.
filtersPlugin.filter() updates the visible rows.
Clear all filters resets controls and restores the full dataset.

The full implementation is available in the runnable example above.

What you learned

How to use filtersPlugin.clearConditions() and filtersPlugin.addCondition() to apply fresh conditions on every control change.
How to call filtersPlugin.filter() to update the visible rows after adding conditions, and how hot.render() keeps the view in sync.
How to build a clear-all button that resets external controls, removes all conditions, and restores the full dataset.
Why you must enable the Filters plugin with filters: true and pair it with dropdownMenu: true to expose per-column filter UI alongside your external panel.

Next steps

Explore external search box to add a text search that works alongside the filter panel.
Read the Filters plugin API reference for the full list of built-in condition types (between, contains, begins with, and more).