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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example1',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: true,
13
  imports: [HotTableModule],
14
})
15
export class AppComponent {
16

17
  readonly hotData = [
18
    {
19
      brand: 'Jetpulse',
20
      model: 'Racing Socks',
21
      price: 30,
22
      sellDate: '2023-10-11',
23
      sellTime: '01:23',
24
      inStock: false,
25
    },
26
    {
27
      brand: 'Gigabox',
28
      model: 'HL Mountain Frame',
29
      price: 1890.9,
30
      sellDate: '2023-05-03',
31
      sellTime: '11:27',
32
      inStock: false,
33
    },
34
    {
35
      brand: 'Camido',
36
      model: 'Cycling Cap',
37
      price: 130.1,
38
      sellDate: '2023-03-27',
39
      sellTime: '03:17',
40
      inStock: true,
41
    },
42
    {
43
      brand: 'Chatterpoint',
44
      model: 'Road Tire Tube',
45
      price: 59,
46
      sellDate: '2023-08-28',
47
      sellTime: '08:01',
48
      inStock: true,
49
    },
50
    {
51
      brand: 'Eidel',
52
      model: 'HL Road Tire',
53
      price: 279.99,
54
      sellDate: '2023-10-02',
55
      sellTime: '01:23',
56
      inStock: true,
57
    },
58
  ];
59

60
  readonly hotSettings: GridSettings = {
61
    columns: [
62
      {
63
        title: 'Brand',
64
        type: 'text',
65
        data: 'brand',
66
      },
67
      {
68
        title: 'Model',
69
        type: 'text',
70
        data: 'model',
71
      },
72
      {
73
        title: 'Price',
74
        type: 'numeric',
75
        data: 'price',
76
        locale: 'en-US',
77
        numericFormat: {
78
          style: 'currency',
79
          currency: 'USD',
80
          minimumFractionDigits: 2,
81
        },
82
      },
83
      {
84
        title: 'Date',
85
        type: 'intl-date',
86
        data: 'sellDate',
87
        locale: 'en-US',
88
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
89
        className: 'htRight',
90
      },
91
      {
92
        title: 'Time',
93
        type: 'intl-time',
94
        data: 'sellTime',
95
        locale: 'en-US',
96
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
97
        className: 'htRight',
98
      },
99
      {
100
        title: 'In stock',
101
        type: 'checkbox',
102
        data: 'inStock',
103
        className: 'htCenter',
104
      },
105
    ],
106
    // enable filtering
107
    filters: true,
108
    // enable the column menu
109
    dropdownMenu: true,
110
    height: 'auto',
111
    autoWrapRow: true,
112
    autoWrapCol: true,
113
  };
114
}
115
/* end-file */
116

117

118

119
/* file: app.config.ts */
120
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
121
import { registerAllModules } from 'handsontable/registry';
122
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
123

124
// register Handsontable's modules
125
registerAllModules();
126

127
export const appConfig: ApplicationConfig = {
128
  providers: [
129
    provideZoneChangeDetection({ eventCoalescing: true }),
130
    {
131
      provide: HOT_GLOBAL_CONFIG,
132
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
133
    },
134
  ],
135
};
136
/* end-file */

1
<div>
2
    <app-example1></app-example1>
3
</div>

Enable filtering

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

Set the filters option to true.
Enable the interface by setting the dropdownMenu option to true.

Enabling the filters option without the interface can be useful if you plan to create your own custom interface for filtering by using the API.

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

1
<hot-table [settings]="configurationOptions"></hot-table>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example2',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: true,
13
  imports: [HotTableModule],
14
})
15
export class AppComponent {
16

17
  readonly hotData = [
18
    {
19
      brand: 'Jetpulse',
20
      model: 'Racing Socks',
21
      price: 30,
22
      sellDate: '2023-10-11',
23
      sellTime: '01:23',
24
      inStock: false,
25
    },
26
    {
27
      brand: 'Gigabox',
28
      model: 'HL Mountain Frame',
29
      price: 1890.9,
30
      sellDate: '2023-05-03',
31
      sellTime: '11:27',
32
      inStock: false,
33
    },
34
    {
35
      brand: 'Camido',
36
      model: 'Cycling Cap',
37
      price: 130.1,
38
      sellDate: '2023-03-27',
39
      sellTime: '03:17',
40
      inStock: true,
41
    },
42
    {
43
      brand: 'Chatterpoint',
44
      model: 'Road Tire Tube',
45
      price: 59,
46
      sellDate: '2023-08-28',
47
      sellTime: '08:01',
48
      inStock: true,
49
    },
50
    {
51
      brand: 'Eidel',
52
      model: 'HL Road Tire',
53
      price: 279.99,
54
      sellDate: '2023-10-02',
55
      sellTime: '01:23',
56
      inStock: true,
57
    },
58
  ];
59

60
  readonly hotSettings: GridSettings = {
61
    columns: [
62
      {
63
        title: 'Brand',
64
        type: 'text',
65
        data: 'brand',
66
      },
67
      {
68
        title: 'Model',
69
        type: 'text',
70
        data: 'model',
71
      },
72
      {
73
        title: 'Price',
74
        type: 'numeric',
75
        data: 'price',
76
        locale: 'en-US',
77
        numericFormat: {
78
          style: 'currency',
79
          currency: 'USD',
80
          minimumFractionDigits: 2,
81
        },
82
      },
83
      {
84
        title: 'Date',
85
        type: 'intl-date',
86
        data: 'sellDate',
87
        locale: 'en-US',
88
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
89
        className: 'htRight',
90
      },
91
      {
92
        title: 'Time',
93
        type: 'intl-time',
94
        data: 'sellTime',
95
        locale: 'en-US',
96
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
97
        className: 'htRight',
98
      },
99
      {
100
        title: 'In stock',
101
        type: 'checkbox',
102
        data: 'inStock',
103
        className: 'htCenter',
104
      },
105
    ],
106
    // enable filtering
107
    filters: true,
108
    // enable the column menu, but display only the filter menu items
109
    dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
110
    height: 'auto',
111
    autoWrapRow: true,
112
    autoWrapCol: true,
113
  };
114
}
115
/* end-file */
116

117

118

119
/* file: app.config.ts */
120
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
121
import { registerAllModules } from 'handsontable/registry';
122
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
123

124
// register Handsontable's modules
125
registerAllModules();
126

127
export const appConfig: ApplicationConfig = {
128
  providers: [
129
    provideZoneChangeDetection({ eventCoalescing: true }),
130
    {
131
      provide: HOT_GLOBAL_CONFIG,
132
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
133
    },
134
  ],
135
};
136
/* end-file */

1
<div>
2
  <app-example2></app-example2>
3
</div>

Enable filtering for individual columns

You have control over which columns are filterable and for which columns the column menu is enabled. In the following demo, only the Brand column is filterable, while the other columns are not. However, the Model column still has the column menu available in case you want to have some useful items in the menu such as Clear column.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import Handsontable from 'handsontable';
4
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
5

6
@Component({
7
  selector: 'app-example3',
8
  template: `
9
    <hot-table
10
      [settings]="hotSettings!" [data]="hotData">
11
    </hot-table>
12
  `,
13
  standalone: true,
14
  imports: [HotTableModule],
15
})
16
export class AppComponent {
17

18
  readonly hotData = [
19
    {
20
      brand: 'Jetpulse',
21
      model: 'Racing Socks',
22
      price: 30,
23
      sellDate: '2023-10-11',
24
      sellTime: '01:23',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Gigabox',
29
      model: 'HL Mountain Frame',
30
      price: 1890.9,
31
      sellDate: '2023-05-03',
32
      sellTime: '11:27',
33
      inStock: false,
34
    },
35
    {
36
      brand: 'Camido',
37
      model: 'Cycling Cap',
38
      price: 130.1,
39
      sellDate: '2023-03-27',
40
      sellTime: '03:17',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Chatterpoint',
45
      model: 'Road Tire Tube',
46
      price: 59,
47
      sellDate: '2023-08-28',
48
      sellTime: '08:01',
49
      inStock: true,
50
    },
51
    {
52
      brand: 'Eidel',
53
      model: 'HL Road Tire',
54
      price: 279.99,
55
      sellDate: '2023-10-02',
56
      sellTime: '01:23',
57
      inStock: true,
58
    },
59
  ];
60

61
  readonly hotSettings: GridSettings = {
62
    columns: [
63
      {
64
        title: 'Brand',
65
        type: 'text',
66
        data: 'brand',
67
      },
68
      {
69
        title: 'Model',
70
        type: 'text',
71
        data: 'model',
72
      },
73
      {
74
        title: 'Price',
75
        type: 'numeric',
76
        data: 'price',
77
        locale: 'en-US',
78
        numericFormat: {
79
          style: 'currency',
80
          currency: 'USD',
81
          minimumFractionDigits: 2,
82
        },
83
      },
84
      {
85
        title: 'Date',
86
        type: 'intl-date',
87
        data: 'sellDate',
88
        locale: 'en-US',
89
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
90
        className: 'htRight',
91
      },
92
      {
93
        title: 'Time',
94
        type: 'intl-time',
95
        data: 'sellTime',
96
        locale: 'en-US',
97
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
98
        className: 'htRight',
99
      },
100
      {
101
        title: 'In stock',
102
        type: 'checkbox',
103
        data: 'inStock',
104
        className: 'htCenter',
105
      },
106
    ],
107
    // enable filtering for all columns
108
    filters: true,
109
    // enable the column menu for all columns
110
    // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons
111
    dropdownMenu: {
112
      items: {
113
        filter_by_value: {
114
          // hide the 'Filter by value' list from all columns but the first one
115
          hidden(this: Handsontable) {
116
            const col = this.getSelectedRangeLast()?.to.col;
117
            return col != null && col > 0;
118
          },
119
        },
120
        filter_action_bar: {
121
          // hide the 'OK' and 'Cancel' buttons from all columns but the first one
122
          hidden(this: Handsontable) {
123
            const col = this.getSelectedRangeLast()?.to.col;
124
            return col != null && col > 0;
125
          },
126
        },
127
        clear_column: {
128
          // hide the 'Clear column' menu item from the first column
129
          hidden(this: Handsontable) {
130
            const col = this.getSelectedRangeLast()?.to.col;
131
            return col != null && 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(col: number, TH: HTMLElement) {
139
      // remove the column menu button from the 'Brand', 'Price', and 'Date' columns
140
      if (col > 1) {
141
        const button = TH.querySelector('.changeType');
142

143
        if (!button) {
144
          return;
145
        }
146

147
        button.parentElement?.removeChild(button);
148
      }
149
    },
150
    height: 'auto',
151
    // @ts-ignore
152
    example: 'exampleEnableFilterInColumns',
153
    autoWrapRow: true,
154
    autoWrapCol: true,
155
  };
156
}
157
/* end-file */
158

159

160

161
/* file: app.config.ts */
162
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
163
import { registerAllModules } from 'handsontable/registry';
164
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
165

166
// register Handsontable's modules
167
registerAllModules();
168

169
export const appConfig: ApplicationConfig = {
170
  providers: [
171
    provideZoneChangeDetection({ eventCoalescing: true }),
172
    {
173
      provide: HOT_GLOBAL_CONFIG,
174
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
175
    },
176
  ],
177
};
178
/* end-file */

1
<div>
2
  <app-example3></app-example3>
3
</div>

Enable filtering within already filtered results

To apply filters based on the search input, set searchMode to 'apply'. You can then apply the filter by either pressing the Enter key while the search input is focused or by clicking the OK button.

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

1
<hot-table [settings]="configurationOptions"></hot-table>

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example12',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: true,
13
  imports: [HotTableModule],
14
})
15
export class AppComponent {
16

17
  readonly hotData = [
18
    {
19
      brand: 'Jetpulse',
20
      model: 'Racing Socks',
21
      price: 30,
22
      sellDate: '2023-10-11',
23
      sellTime: '01:23',
24
      inStock: false,
25
    },
26
    {
27
      brand: 'Gigabox',
28
      model: 'HL Mountain Frame',
29
      price: 1890.9,
30
      sellDate: '2023-05-03',
31
      sellTime: '11:27',
32
      inStock: false,
33
    },
34
    {
35
      brand: 'Camido',
36
      model: 'Cycling Cap',
37
      price: 130.1,
38
      sellDate: '2023-03-27',
39
      sellTime: '03:17',
40
      inStock: true,
41
    },
42
    {
43
      brand: 'Chatterpoint',
44
      model: 'Road Tire Tube',
45
      price: 59,
46
      sellDate: '2023-08-28',
47
      sellTime: '08:01',
48
      inStock: true,
49
    },
50
    {
51
      brand: 'Eidel',
52
      model: 'HL Road Tire',
53
      price: 279.99,
54
      sellDate: '2023-10-02',
55
      sellTime: '01:23',
56
      inStock: true,
57
    },
58
  ];
59

60
  readonly hotSettings: GridSettings = {
61
    columns: [
62
      {
63
        title: 'Brand',
64
        type: 'text',
65
        data: 'brand',
66
      },
67
      {
68
        title: 'Model',
69
        type: 'text',
70
        data: 'model',
71
      },
72
      {
73
        title: 'Price',
74
        type: 'numeric',
75
        data: 'price',
76
        locale: 'en-US',
77
        numericFormat: {
78
          style: 'currency',
79
          currency: 'USD',
80
          minimumFractionDigits: 2,
81
        },
82
      },
83
      {
84
        title: 'Date',
85
        type: 'intl-date',
86
        data: 'sellDate',
87
        locale: 'en-US',
88
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
89
        className: 'htRight',
90
      },
91
      {
92
        title: 'Time',
93
        type: 'intl-time',
94
        data: 'sellTime',
95
        locale: 'en-US',
96
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
97
        className: 'htRight',
98
      },
99
      {
100
        title: 'In stock',
101
        type: 'checkbox',
102
        data: 'inStock',
103
        className: 'htCenter',
104
      },
105
    ],
106
    // enable filtering with option
107
    filters: {
108
      searchMode: 'apply'
109
    },
110
    dropdownMenu: true,
111
    height: 'auto',
112
    autoWrapRow: true,
113
    autoWrapCol: true,
114
  };
115
}
116
/* end-file */
117

118

119

120
/* file: app.config.ts */
121
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
122
import { registerAllModules } from 'handsontable/registry';
123
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
124

125
// register Handsontable's modules
126
registerAllModules();
127

128
export const appConfig: ApplicationConfig = {
129
  providers: [
130
    provideZoneChangeDetection({ eventCoalescing: true }),
131
    {
132
      provide: HOT_GLOBAL_CONFIG,
133
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
134
    },
135
  ],
136
};
137
/* end-file */

1
<div>
2
  <app-example12></app-example12>
3
</div>

Filter different types of data

With its built-in cell types, Handsontable makes it easy to handle common data types like text, numbers, and dates by providing numerous configuration options. In addition, the filtering feature is designed to understand the underlying data and provides an adaptive interface that is tailored to each data type.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example4',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: true,
13
  imports: [HotTableModule],
14
})
15
export class AppComponent {
16

17
  readonly hotData = [
18
    {
19
      model: 'Racing Socks',
20
      size: 'S',
21
      price: 30,
22
      sellDate: '2023-10-11',
23
      sellTime: '01:23',
24
      inStock: false,
25
      color: 'Black',
26
    },
27
    {
28
      model: 'HL Mountain Shirt',
29
      size: 'XS',
30
      price: 1890.9,
31
      sellDate: '2023-05-03',
32
      sellTime: '11:27',
33
      inStock: false,
34
      color: 'White',
35
    },
36
    {
37
      model: 'Cycling Cap',
38
      size: 'L',
39
      price: 130.1,
40
      sellDate: '2023-03-27',
41
      sellTime: '03:17',
42
      inStock: true,
43
      color: 'Green',
44
    },
45
    {
46
      model: 'Ski Jacket',
47
      size: 'M',
48
      price: 59,
49
      sellDate: '2023-08-28',
50
      sellTime: '08:01',
51
      inStock: true,
52
      color: 'Blue',
53
    },
54
    {
55
      model: 'HL Goggles',
56
      size: 'XL',
57
      price: 279.99,
58
      sellDate: '2023-10-02',
59
      sellTime: '01:23',
60
      inStock: true,
61
      color: 'Black',
62
    },
63
  ];
64

65
  readonly hotSettings: GridSettings = {
66
    columns: [
67
      {
68
        title: 'Model',
69
        // set the type of the 'Model' column
70
        type: 'text',
71
        data: 'model',
72
      },
73
      {
74
        title: 'Price',
75
        // set the type of the 'Price' column
76
        type: 'numeric',
77
        data: 'price',
78
        locale: 'en-US',
79
        numericFormat: {
80
          style: 'currency',
81
          currency: 'USD',
82
          minimumFractionDigits: 2,
83
        },
84
      },
85
      {
86
        title: 'Sold on',
87
        // set the type of the 'Date' column
88
        type: 'intl-date',
89
        data: 'sellDate',
90
        locale: 'en-US',
91
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
92
        className: 'htRight',
93
      },
94
      {
95
        title: 'Time',
96
        // set the type of the 'Time' column
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
        // set the type of the 'In stock' column
106
        type: 'checkbox',
107
        data: 'inStock',
108
        className: 'htCenter',
109
      },
110
      {
111
        title: 'Size',
112
        // set the type of the 'Size' column
113
        type: 'dropdown',
114
        data: 'size',
115
        source: ['XS', 'S', 'M', 'L', 'XL'],
116
        className: 'htCenter',
117
      },
118
      {
119
        title: 'Color',
120
        // set the type of the 'Size' column
121
        type: 'autocomplete',
122
        data: 'color',
123
        source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],
124
        className: 'htCenter',
125
      },
126
    ],
127
    // enable filtering
128
    filters: true,
129
    // enable the column menu
130
    dropdownMenu: true,
131
    height: 175,
132
    autoWrapRow: true,
133
    autoWrapCol: true,
134
  };
135
}
136
/* end-file */
137

138

139

140
/* file: app.config.ts */
141
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
142
import { registerAllModules } from 'handsontable/registry';
143
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
144

145
// register Handsontable's modules
146
registerAllModules();
147

148
export const appConfig: ApplicationConfig = {
149
  providers: [
150
    provideZoneChangeDetection({ eventCoalescing: true }),
151
    {
152
      provide: HOT_GLOBAL_CONFIG,
153
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
154
    },
155
  ],
156
};
157
/* end-file */

1
<div>
2
  <app-example4></app-example4>
3
</div>

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

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

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

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

Filter data on initialization

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

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

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import Handsontable from 'handsontable';
4
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
5

6
@Component({
7
  selector: 'app-example5',
8
  template: `
9
    <hot-table
10
      [settings]="hotSettings!" [data]="hotData">
11
    </hot-table>
12
  `,
13
  standalone: true,
14
  imports: [HotTableModule],
15
})
16
export class AppComponent {
17

18
  readonly hotData = [
19
    {
20
      brand: 'Jetpulse',
21
      model: 'Racing Socks',
22
      price: 30,
23
      sellDate: '2023-10-11',
24
      sellTime: '01:23',
25
      inStock: false,
26
    },
27
    {
28
      brand: 'Gigabox',
29
      model: 'HL Mountain Frame',
30
      price: 1890.9,
31
      sellDate: '2023-05-03',
32
      sellTime: '11:27',
33
      inStock: false,
34
    },
35
    {
36
      brand: 'Camido',
37
      model: 'Cycling Cap',
38
      price: 130.1,
39
      sellDate: '2023-03-27',
40
      sellTime: '03:17',
41
      inStock: true,
42
    },
43
    {
44
      brand: 'Chatterpoint',
45
      model: 'Road Tire Tube',
46
      price: 59,
47
      sellDate: '2023-08-28',
48
      sellTime: '08:01',
49
      inStock: true,
50
    },
51
    {
52
      brand: 'Eidel',
53
      model: 'HL Road Tire',
54
      price: 279.99,
55
      sellDate: '2023-10-02',
56
      sellTime: '01:23',
57
      inStock: true,
58
    },
59
  ];
60

61
  readonly hotSettings: GridSettings = {
62
    columns: [
63
      {
64
        title: 'Brand',
65
        type: 'text',
66
        data: 'brand',
67
      },
68
      {
69
        title: 'Model',
70
        type: 'text',
71
        data: 'model',
72
      },
73
      {
74
        title: 'Price',
75
        type: 'numeric',
76
        data: 'price',
77
        locale: 'en-US',
78
        numericFormat: {
79
          style: 'currency',
80
          currency: 'USD',
81
          minimumFractionDigits: 2,
82
        },
83
      },
84
      {
85
        title: 'Date',
86
        type: 'intl-date',
87
        data: 'sellDate',
88
        locale: 'en-US',
89
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
90
        className: 'htRight',
91
      },
92
      {
93
        title: 'Time',
94
        type: 'intl-time',
95
        data: 'sellTime',
96
        locale: 'en-US',
97
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
98
        className: 'htRight',
99
      },
100
      {
101
        title: 'In stock',
102
        type: 'checkbox',
103
        data: 'inStock',
104
        className: 'htCenter',
105
      },
106
    ],
107
    // enable filtering
108
    filters: true,
109
    // enable the column menu
110
    dropdownMenu: true,
111
    // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated
112
    afterInit(this: Handsontable) {
113
      // get the `Filters` plugin, so you can use its API
114
      const filters = this.getPlugin('filters');
115

116
      // filter data by the 'Price' column (column at index 2)
117
      // to display only items that are less than ('lt') $200
118
      filters.addCondition(2, 'lt', [200]);
119
      filters.filter();
120
    },
121
    height: 'auto',
122
    autoWrapRow: true,
123
    autoWrapCol: true,
124
  };
125
}
126
/* end-file */
127

128

129

130
/* file: app.config.ts */
131
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
132
import { registerAllModules } from 'handsontable/registry';
133
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
134

135
// register Handsontable's modules
136
registerAllModules();
137

138
export const appConfig: ApplicationConfig = {
139
  providers: [
140
    provideZoneChangeDetection({ eventCoalescing: true }),
141
    {
142
      provide: HOT_GLOBAL_CONFIG,
143
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
144
    },
145
  ],
146
};
147
/* end-file */

1
<div>
2
  <app-example5></app-example5>
3
</div>

External quick filter

Handsontable’s quick filter feature lets you search for a particular phrase in a specific column. To accomplish this, use methods filters.addCondition() and filters.filter().

1
/* file: app.component.ts */
2
import { Component, HostListener, ViewChild, ViewEncapsulation } from "@angular/core";
3
import { GridSettings, HotTableComponent, HotTableModule } from "@handsontable/angular-wrapper";
4

5
@Component({
6
  standalone: true,
7
  imports: [HotTableModule],
8
  selector: "app-example6",
9
  encapsulation: ViewEncapsulation.None,
10
  styles: `
11
    .controlsQuickFilter {
12
      position: relative;
13
      display: flex;
14
      align-items: center;
15
      gap: 0.75rem;
16
      margin: 0;
17
      padding: 0;
18
    }
19

20
    .selectColumn {
21
      display: inline-flex;
22
      align-items: center;
23
      gap: 0.5rem;
24
      font-size: 0.875rem;
25
      color: #555555;
26
      white-space: nowrap;
27
    }
28

29
    .selectColumn select {
30
      border: 1px solid #e0e0e0;
31
      background: none;
32
      color: #333333;
33
      font-size: 0.875rem;
34
      padding: 0.4rem 0.625rem;
35
      outline: none;
36
      border-radius: 0;
37
      cursor: pointer;
38
    }
39

40
    .selectColumn select:focus {
41
      border-color: #1A42E8;
42
    }
43

44
    #filterField {
45
      border: 1px solid var(--sl-color-gray-5, #e0e0e0);
46
      background: none;
47
      color: var(--sl-color-text, #333333);
48
      font-size: var(--sl-text-sm, 0.875rem);
49
      padding: 0.4rem 0.625rem;
50
      outline: none;
51
      width: 140px;
52
    }
53

54
    #filterField::placeholder {
55
      color: var(--sl-color-gray-3, #777777);
56
    }
57

58
    #filterField:focus {
59
      border-color: var(--sl-color-accent, #1A42E8);
60
    }
61

62
    #filterField:focus-visible {
63
      border-color: var(--sl-color-accent, #1A42E8);
64
      box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);
65
    }
66

67
    .filter-dropdown {
68
      position: relative;
69
      display: inline-flex;
70
      align-items: center;
71
      gap: 0.5rem;
72
    }
73

74
    .filter-dropdown-label {
75
      color: var(--sl-color-gray-2, #555555);
76
      font-size: var(--sl-text-sm, 0.875rem);
77
      white-space: nowrap;
78
    }
79

80
    .filter-dropdown-trigger {
81
      display: inline-flex;
82
      align-items: center;
83
      gap: 0.5rem;
84
      background: none;
85
      border: 1px solid var(--sl-color-gray-5, #e0e0e0);
86
      color: var(--sl-color-gray-2, #555555);
87
      cursor: pointer;
88
      font-size: var(--sl-text-sm, 0.875rem);
89
      font-weight: 500;
90
      padding: 0.4rem 0.625rem;
91
      transition: color 0.15s, background-color 0.15s;
92
      white-space: nowrap;
93
      border-radius: 0;
94
    }
95

96
    .filter-dropdown-trigger:hover {
97
      color: var(--sl-color-white, #333333);
98
      background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));
99
    }
100

101
    .filter-dropdown-chevron {
102
      flex-shrink: 0;
103
      margin-inline-start: 0.15rem;
104
      transition: transform 0.15s;
105
    }
106

107
    .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {
108
      transform: rotate(180deg);
109
    }
110

111
    .filter-dropdown-menu {
112
      background: var(--sl-color-bg-nav, #ffffff);
113
      border: 1px solid var(--sl-color-gray-5, #e0e0e0);
114
      border-radius: 0;
115
      box-shadow: none;
116
      inset-inline-start: 0;
117
      list-style: none;
118
      margin: 0;
119
      min-width: 100%;
120
      overflow-y: auto;
121
      padding: 0;
122
      position: absolute;
123
      top: 100%;
124
      z-index: 9999;
125
    }
126

127
    .filter-dropdown-menu li {
128
      align-items: center;
129
      color: var(--sl-color-text, #333333);
130
      display: flex;
131
      font-size: var(--sl-text-sm, 0.875rem);
132
      padding: 0.5rem 0.75rem;
133
      cursor: pointer;
134
      border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);
135
      transition: background 0.1s, color 0.1s;
136
      white-space: nowrap;
137
      list-style: none;
138
      margin: 0;
139
    }
140

141
    .filter-dropdown-menu li:last-child {
142
      border-bottom: none;
143
    }
144

145
    .filter-dropdown-menu li:hover,
146
    .filter-dropdown-menu li:focus-visible {
147
      background: var(--sl-color-gray-6, #eeeeee);
148
      color: var(--sl-color-white, #333333);
149
      outline: none;
150
    }
151

152
    .filter-dropdown-menu li[aria-selected='true'] {
153
      color: var(--sl-color-white, #333333);
154
      box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);
155
    }
156
  `,
157
  template: `
158
    <div class="example-controls-container">
159
      <div class="controlsQuickFilter">
160
        <div class="filter-dropdown" (click)="$event.stopPropagation()">
161
          <label class="filter-dropdown-label">Select a column:</label>
162
          <button
163
            class="filter-dropdown-trigger"
164
            type="button"
165
            aria-haspopup="listbox"
166
            [attr.aria-expanded]="isOpen ? 'true' : 'false'"
167
            (click)="toggleDropdown()"
168
          >
169
            <span class="filter-dropdown-text">{{ selectedLabel }}</span>
170
            <svg class="filter-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
171
              <path d="M6 9l6 6l6 -6"/>
172
            </svg>
173
          </button>
174
          @if (isOpen) {
175
            <ul class="filter-dropdown-menu" role="listbox">
176
              @for (option of columnOptions; track option.value) {
177
                <li
178
                  role="option"
179
                  [attr.aria-selected]="option.value === selectedColumn.toString() ? 'true' : 'false'"
180
                  (click)="selectColumn(option)"
181
                >
182
                  {{ option.label }}
183
                </li>
184
              }
185
            </ul>
186
          }
187
        </div>
188
        <input id="filterField" type="text" placeholder="Filter" (keyup)="handleFilter($event)" />
189
      </div>
190
    </div>
191

192
    <hot-table [settings]="hotSettings!" [data]="hotData"></hot-table>
193
  `,
194
})
195
export class AppComponent {
196
  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;
197

198
  isOpen = false;
199
  selectedColumn = 0;
200

201
  readonly columnOptions: Array<{ value: string; label: string }> = [
202
    { value: "0", label: "Brand" },
203
    { value: "1", label: "Model" },
204
    { value: "2", label: "Price" },
205
    { value: "3", label: "Date" },
206
    { value: "4", label: "Time" },
207
    { value: "5", label: "In stock" },
208
  ];
209

210
  get selectedLabel(): string {
211
    return this.columnOptions.find((o) => o.value === this.selectedColumn.toString())?.label ?? "Brand";
212
  }
213

214
  @HostListener("document:click")
215
  closeDropdown() {
216
    this.isOpen = false;
217
  }
218

219
  toggleDropdown() {
220
    this.isOpen = !this.isOpen;
221
  }
222

223
  selectColumn(option: { value: string; label: string }) {
224
    this.selectedColumn = Number(option.value);
225
    this.isOpen = false;
226
  }
227

228
  handleFilter(event: Event) {
229
    const value = (event.target as HTMLInputElement).value;
230
    const filters = this.hotTable.hotInstance!.getPlugin("filters");
231

232
    filters.removeConditions(this.selectedColumn);
233
    filters.addCondition(this.selectedColumn, "contains", [value]);
234
    filters.filter();
235
    this.hotTable.hotInstance!.render();
236
  }
237

238
  readonly hotData = [
239
    {
240
      brand: "Jetpulse",
241
      model: "Racing Socks",
242
      price: 30,
243
      sellDate: "2023-10-11",
244
      sellTime: "01:23",
245
      inStock: false,
246
    },
247
    {
248
      brand: "Gigabox",
249
      model: "HL Mountain Frame",
250
      price: 1890.9,
251
      sellDate: "2023-05-03",
252
      sellTime: "11:27",
253
      inStock: false,
254
    },
255
    {
256
      brand: "Camido",
257
      model: "Cycling Cap",
258
      price: 130.1,
259
      sellDate: "2023-03-27",
260
      sellTime: "03:17",
261
      inStock: true,
262
    },
263
    {
264
      brand: "Chatterpoint",
265
      model: "Road Tire Tube",
266
      price: 59,
267
      sellDate: "2023-08-28",
268
      sellTime: "08:01",
269
      inStock: true,
270
    },
271
    {
272
      brand: "Eidel",
273
      model: "HL Road Tire",
274
      price: 279.99,
275
      sellDate: "2023-10-02",
276
      sellTime: "13:23",
277
      inStock: true,
278
    },
279
  ];
280

281
  readonly hotSettings: GridSettings = {
282
    columns: [
283
      {
284
        title: "Brand",
285
        type: "text",
286
        data: "brand",
287
      },
288
      {
289
        title: "Model",
290
        type: "text",
291
        data: "model",
292
      },
293
      {
294
        title: "Price",
295
        type: "numeric",
296
        data: "price",
297
        locale: "en-US",
298
        numericFormat: {
299
          style: "currency",
300
          currency: "USD",
301
          minimumFractionDigits: 2,
302
        },
303
      },
304
      {
305
        title: "Date",
306
        type: "intl-date",
307
        data: "sellDate",
308
        locale: "en-GB",
309
        dateFormat: { day: "2-digit", month: "2-digit", year: "numeric" },
310
        className: "htRight",
311
      },
312
      {
313
        title: "Time",
314
        type: "intl-time",
315
        data: "sellTime",
316
        locale: "en-GB",
317
        timeFormat: { hour: "2-digit", minute: "2-digit", hour12: false },
318
        className: "htRight",
319
      },
320
      {
321
        title: "In stock",
322
        type: "checkbox",
323
        data: "inStock",
324
        className: "htCenter",
325
      },
326
    ],
327
    colHeaders: true,
328
    height: "auto",
329
    filters: true,
330
    className: "exampleQuickFilter",
331
    autoWrapRow: true,
332
    autoWrapCol: true,
333
  };
334
}
335
/* end-file */
336

337

338

339
/* file: app.config.ts */
340
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
341
import { registerAllModules } from 'handsontable/registry';
342
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
343

344
// register Handsontable's modules
345
registerAllModules();
346

347
export const appConfig: ApplicationConfig = {
348
  providers: [
349
    provideZoneChangeDetection({ eventCoalescing: true }),
350
    {
351
      provide: HOT_GLOBAL_CONFIG,
352
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
353
    },
354
  ],
355
};
356
/* end-file */

1
<div>
2
    <app-example6></app-example6>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  standalone: true,
7
  imports: [HotTableModule],
8
  selector: 'app-example7',
9
  template: `
10
    <hot-table
11
      [settings]="hotSettings!" [data]="hotData">
12
    </hot-table>
13
  `,
14
  styles: `
15
    :host ::ng-deep {
16
      .handsontable.customFilterButtonExample1 .changeType {
17
        --ht-icon-button-background-color: #e2e2e263;
18
        --ht-icon-button-border-radius: 100%;
19
      }
20

21
      .handsontable.customFilterButtonExample1 .changeType::before {
22
        -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");
23
      }
24
    }
25
  `,
26
})
27
export class AppComponent {
28

29
  readonly hotData = [
30
    {
31
      brand: 'Jetpulse',
32
      model: 'Racing Socks',
33
      price: 30,
34
      sellDate: '2023-10-11',
35
      sellTime: '01:23',
36
      inStock: false,
37
    },
38
    {
39
      brand: 'Gigabox',
40
      model: 'HL Mountain Frame',
41
      price: 1890.9,
42
      sellDate: '2023-05-03',
43
      sellTime: '11:27',
44
      inStock: false,
45
    },
46
    {
47
      brand: 'Camido',
48
      model: 'Cycling Cap',
49
      price: 130.1,
50
      sellDate: '2023-03-27',
51
      sellTime: '03:17',
52
      inStock: true,
53
    },
54
    {
55
      brand: 'Chatterpoint',
56
      model: 'Road Tire Tube',
57
      price: 59,
58
      sellDate: '2023-08-28',
59
      sellTime: '08:01',
60
      inStock: true,
61
    },
62
    {
63
      brand: 'Eidel',
64
      model: 'HL Road Tire',
65
      price: 279.99,
66
      sellDate: '2023-10-02',
67
      sellTime: '01:23',
68
      inStock: true,
69
    },
70
  ];
71

72
  readonly hotSettings: GridSettings = {
73
    columns: [
74
      {
75
        title: 'Brand',
76
        type: 'text',
77
        data: 'brand',
78
      },
79
      {
80
        title: 'Model',
81
        type: 'text',
82
        data: 'model',
83
      },
84
      {
85
        title: 'Price',
86
        type: 'numeric',
87
        data: 'price',
88
        locale: 'en-US',
89
        numericFormat: {
90
          style: 'currency',
91
          currency: 'USD',
92
          minimumFractionDigits: 2,
93
        },
94
      },
95
      {
96
        title: 'Date',
97
        type: 'intl-date',
98
        data: 'sellDate',
99
        locale: 'en-US',
100
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
101
        className: 'htRight',
102
      },
103
      {
104
        title: 'Time',
105
        type: 'intl-time',
106
        data: 'sellTime',
107
        locale: 'en-US',
108
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
109
        className: 'htRight',
110
      },
111
      {
112
        title: 'In stock',
113
        type: 'checkbox',
114
        data: 'inStock',
115
        className: 'htCenter',
116
      },
117
    ],
118
    // enable filtering
119
    filters: true,
120
    // enable the column menu
121
    dropdownMenu: true,
122
    // to differentiate this example's CSS from other examples on this page
123
    className: 'customFilterButtonExample1',
124
    height: 'auto',
125
    autoWrapRow: true,
126
    autoWrapCol: true,
127
  };
128
}
129
/* end-file */
130

131

132

133
/* file: app.config.ts */
134
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
135
import { registerAllModules } from 'handsontable/registry';
136
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
137

138
// register Handsontable's modules
139
registerAllModules();
140

141
export const appConfig: ApplicationConfig = {
142
  providers: [
143
    provideZoneChangeDetection({ eventCoalescing: true }),
144
    {
145
      provide: HOT_GLOBAL_CONFIG,
146
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
147
    },
148
  ],
149
};
150
/* end-file */

1
<div>
2
    <app-example7></app-example7>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example8',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  styles: `
13
    :host ::ng-deep {
14
      /* hide the column menu button by default */
15
      .customFilterButtonExample2 .changeType {
16
        visibility: hidden;
17
      }
18

19
      /* show the column menu button on hover */
20
      .customFilterButtonExample2 th .relative:hover .changeType {
21
        visibility: visible;
22
      }
23
    }
24
  `,
25
  standalone: true,
26
  imports: [HotTableModule],
27
})
28
export class AppComponent {
29

30
  readonly hotData = [
31
    {
32
      brand: 'Jetpulse',
33
      model: 'Racing Socks',
34
      price: 30,
35
      sellDate: '2023-10-11',
36
      sellTime: '01:23',
37
      inStock: false,
38
    },
39
    {
40
      brand: 'Gigabox',
41
      model: 'HL Mountain Frame',
42
      price: 1890.9,
43
      sellDate: '2023-05-03',
44
      sellTime: '11:27',
45
      inStock: false,
46
    },
47
    {
48
      brand: 'Camido',
49
      model: 'Cycling Cap',
50
      price: 130.1,
51
      sellDate: '2023-03-27',
52
      sellTime: '03:17',
53
      inStock: true,
54
    },
55
    {
56
      brand: 'Chatterpoint',
57
      model: 'Road Tire Tube',
58
      price: 59,
59
      sellDate: '2023-08-28',
60
      sellTime: '08:01',
61
      inStock: true,
62
    },
63
    {
64
      brand: 'Eidel',
65
      model: 'HL Road Tire',
66
      price: 279.99,
67
      sellDate: '2023-10-02',
68
      sellTime: '01:23',
69
      inStock: true,
70
    },
71
  ];
72

73
  readonly hotSettings: GridSettings = {
74
    columns: [
75
      {
76
        title: 'Brand',
77
        type: 'text',
78
        data: 'brand',
79
      },
80
      {
81
        title: 'Model',
82
        type: 'text',
83
        data: 'model',
84
      },
85
      {
86
        title: 'Price',
87
        type: 'numeric',
88
        data: 'price',
89
        locale: 'en-US',
90
        numericFormat: {
91
          style: 'currency',
92
          currency: 'USD',
93
          minimumFractionDigits: 2,
94
        },
95
      },
96
      {
97
        title: 'Date',
98
        type: 'intl-date',
99
        data: 'sellDate',
100
        locale: 'en-US',
101
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
102
        className: 'htRight',
103
      },
104
      {
105
        title: 'Time',
106
        type: 'intl-time',
107
        data: 'sellTime',
108
        locale: 'en-US',
109
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
110
        className: 'htRight',
111
      },
112
      {
113
        title: 'In stock',
114
        type: 'checkbox',
115
        data: 'inStock',
116
        className: 'htCenter',
117
      },
118
    ],
119
    // enable filtering
120
    filters: true,
121
    // enable the column menu
122
    dropdownMenu: true,
123
    // to differentiate this example's CSS from other examples on this page
124
    className: 'customFilterButtonExample2',
125
    height: 'auto',
126
    autoWrapRow: true,
127
    autoWrapCol: true,
128
  };
129
}
130
/* end-file */
131

132

133

134
/* file: app.config.ts */
135
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
136
import { registerAllModules } from 'handsontable/registry';
137
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
138

139
// register Handsontable's modules
140
registerAllModules();
141

142
export const appConfig: ApplicationConfig = {
143
  providers: [
144
    provideZoneChangeDetection({ eventCoalescing: true }),
145
    {
146
      provide: HOT_GLOBAL_CONFIG,
147
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
148
    },
149
  ],
150
};
151
/* end-file */

1
<div>
2
    <app-example8></app-example8>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import Handsontable from 'handsontable';
4
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
5

6
@Component({
7
  selector: 'app-example9',
8
  template: `
9
    <hot-table
10
      [settings]="hotSettings!" [data]="hotData">
11
    </hot-table>
12
  `,
13
  standalone: true,
14
  imports: [HotTableModule],
15
})
16
export class AppComponent {
17

18
  readonly hotData = [
19
    {
20
      brand: 'Gigabox',
21
      model: 'HL Mountain Frame',
22
      price: 1890.9,
23
      sellDate: '2023-05-03',
24
      sellTime: '11:27',
25
      inStock: 11,
26
    },
27
    {
28
      brand: 'Camido',
29
      model: 'Cycling Cap',
30
      price: 130.1,
31
      sellDate: '2023-03-27',
32
      sellTime: '03:17',
33
      inStock: 0,
34
    },
35
    {
36
      brand: 'Chatterpoint',
37
      model: 'Road Tire Tube',
38
      price: 59,
39
      sellDate: '2023-08-28',
40
      sellTime: '08:01',
41
      inStock: 1,
42
    },
43
    {
44
      brand: 'Eidel',
45
      model: 'HL Road Tire',
46
      price: 279.99,
47
      sellDate: '2023-10-02',
48
      sellTime: '13:23',
49
      inStock: 3,
50
    },
51
    {
52
      brand: 'Jetpulse',
53
      model: 'Racing Socks',
54
      price: 30,
55
      sellDate: '2023-10-11',
56
      sellTime: '01:23',
57
      inStock: 5,
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: 22,
66
    },
67
    {
68
      brand: 'Camido',
69
      model: 'Cycling Cap',
70
      price: 130.1,
71
      sellDate: '2023-03-27',
72
      sellTime: '03:17',
73
      inStock: 13,
74
    },
75
    {
76
      brand: 'Chatterpoint',
77
      model: 'Road Tire Tube',
78
      price: 59,
79
      sellDate: '2023-08-28',
80
      sellTime: '08:01',
81
      inStock: 0,
82
    },
83
    {
84
      brand: 'Eidel',
85
      model: 'HL Road Tire',
86
      price: 279.99,
87
      sellDate: '2023-10-02',
88
      sellTime: '13:23',
89
      inStock: 14,
90
    },
91
    {
92
      brand: 'Jetpulse',
93
      model: 'Racing Socks',
94
      price: 30,
95
      sellDate: '2023-10-11',
96
      sellTime: '01:23',
97
      inStock: 16,
98
    },
99
    {
100
      brand: 'Gigabox',
101
      model: 'HL Mountain Frame',
102
      price: 1890.9,
103
      sellDate: '2023-05-03',
104
      sellTime: '11:27',
105
      inStock: 18,
106
    },
107
    {
108
      brand: 'Camido',
109
      model: 'Cycling Cap',
110
      price: 130.1,
111
      sellDate: '2023-03-27',
112
      sellTime: '03:17',
113
      inStock: 3,
114
    },
115
    {
116
      brand: 'Chatterpoint',
117
      model: 'Road Tire Tube',
118
      price: 59,
119
      sellDate: '2023-08-28',
120
      sellTime: '08:01',
121
      inStock: 0,
122
    },
123
    {
124
      brand: 'Vinte',
125
      model: 'ML Road Frame-W',
126
      price: 30,
127
      sellDate: '2023-10-11',
128
      sellTime: '01:23',
129
      inStock: 2,
130
    },
131
  ];
132

133
  readonly hotSettings: GridSettings = {
134
    columns: [
135
      {
136
        title: 'Brand',
137
        type: 'text',
138
        data: 'brand',
139
      },
140
      {
141
        title: 'Model',
142
        type: 'text',
143
        data: 'model',
144
      },
145
      {
146
        title: 'Price',
147
        type: 'numeric',
148
        data: 'price',
149
        locale: 'en-US',
150
        numericFormat: {
151
          style: 'currency',
152
          currency: 'USD',
153
          minimumFractionDigits: 2,
154
        },
155
        className: 'htRight',
156
      },
157
      {
158
        title: 'Date',
159
        type: 'intl-date',
160
        data: 'sellDate',
161
        locale: 'en-US',
162
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
163
        className: 'htRight',
164
      },
165
      {
166
        title: 'Time',
167
        type: 'intl-time',
168
        data: 'sellTime',
169
        locale: 'en-US',
170
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
171
        className: 'htRight',
172
      },
173
      {
174
        title: 'In stock',
175
        type: 'numeric',
176
        data: 'inStock',
177
        className: 'htCenter',
178
      },
179
    ],
180
    height: 200,
181
    colWidths: [120, 150, 120, 140, 120, 120],
182
    fixedRowsTop: 1,
183
    fixedRowsBottom: 1,
184
    colHeaders: true,
185
    // enable filtering
186
    filters: true,
187
    // enable the column menu
188
    dropdownMenu: true,
189
    afterFilter(this: Handsontable) {
190
      const filtersPlugin = this.getPlugin('filters');
191
      const filtersRowsMap = (filtersPlugin as any).filtersRowsMap;
192

193
      filtersRowsMap.setValueAtIndex(0, false);
194
      filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);
195
    },
196
    autoWrapRow: true,
197
    autoWrapCol: true,
198
  };
199
}
200
/* end-file */
201

202

203

204
/* file: app.config.ts */
205
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
206
import { registerAllModules } from 'handsontable/registry';
207
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
208

209
// register Handsontable's modules
210
registerAllModules();
211

212
export const appConfig: ApplicationConfig = {
213
  providers: [
214
    provideZoneChangeDetection({ eventCoalescing: true }),
215
    {
216
      provide: HOT_GLOBAL_CONFIG,
217
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
218
    },
219
  ],
220
};
221
/* end-file */

1
<div>
2
    <app-example9></app-example9>
3
</div>

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

Server-side filtering

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

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

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

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

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example10',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: true,
13
  imports: [HotTableModule],
14
})
15
export class AppComponent {
16

17
  readonly hotData = [
18
    {
19
      brand: 'Jetpulse',
20
      model: 'Racing Socks',
21
      price: 30,
22
      sellDate: '2023-10-11',
23
      sellTime: '01:23',
24
      inStock: false,
25
    },
26
    {
27
      brand: 'Gigabox',
28
      model: 'HL Mountain Frame',
29
      price: 1890.9,
30
      sellDate: '2023-05-03',
31
      sellTime: '11:27',
32
      inStock: false,
33
    },
34
    {
35
      brand: 'Camido',
36
      model: 'Cycling Cap',
37
      price: 130.1,
38
      sellDate: '2023-03-27',
39
      sellTime: '03:17',
40
      inStock: true,
41
    },
42
    {
43
      brand: 'Chatterpoint',
44
      model: 'Road Tire Tube',
45
      price: 59,
46
      sellDate: '2023-08-28',
47
      sellTime: '08:01',
48
      inStock: true,
49
    },
50
    {
51
      brand: 'Eidel',
52
      model: 'HL Road Tire',
53
      price: 279.99,
54
      sellDate: '2023-10-02',
55
      sellTime: '01:23',
56
      inStock: true,
57
    },
58
  ];
59

60
  readonly hotSettings: GridSettings = {
61
    columns: [
62
      {
63
        title: 'Brand',
64
        type: 'text',
65
        data: 'brand',
66
      },
67
      {
68
        title: 'Model',
69
        type: 'text',
70
        data: 'model',
71
      },
72
      {
73
        title: 'Price',
74
        type: 'numeric',
75
        data: 'price',
76
        locale: 'en-US',
77
        numericFormat: {
78
          style: 'currency',
79
          currency: 'USD',
80
          minimumFractionDigits: 2,
81
        },
82
      },
83
      {
84
        title: 'Date',
85
        type: 'intl-date',
86
        data: 'sellDate',
87
        locale: 'en-US',
88
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
89
        className: 'htRight',
90
      },
91
      {
92
        title: 'Time',
93
        type: 'intl-time',
94
        data: 'sellTime',
95
        locale: 'en-US',
96
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
97
        className: 'htRight',
98
      },
99
      {
100
        title: 'In stock',
101
        type: 'checkbox',
102
        data: 'inStock',
103
        className: 'htCenter',
104
      },
105
    ],
106
    // enable filtering
107
    filters: true,
108
    // enable the column menu
109
    dropdownMenu: true,
110
    height: 'auto',
111
    // `beforeFilter()` is a Handsontable hook
112
    // it's fired after Handsontable gathers information about the filters, but before the filters are applied
113
    beforeFilter(conditionsStack: { column: number; conditions: unknown[]; operation: string }[]) {
114
      // gather information about the filters
115
      console.log(`The amount of filters: ${conditionsStack.length}`);
116

117
      // when the filters are cleared, the conditions stack is empty
118
      const [lastChanged] = conditionsStack;
119

120
      if (lastChanged) {
121
        console.log(`The last changed column index: ${lastChanged.column}`);
122
        console.log(
123
          `The amount of filters added to this column: ${lastChanged.conditions.length}`
124
        );
125
        // the list of filter conditions
126
        console.log(lastChanged.conditions);
127
      }
128

129
      // return `false` to disable filtering on the client side
130
      return false;
131
    },
132
    autoWrapRow: true,
133
    autoWrapCol: true,
134
  };
135
}
136
/* end-file */
137

138

139

140
/* file: app.config.ts */
141
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
142
import { registerAllModules } from 'handsontable/registry';
143
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
144

145
// register Handsontable's modules
146
registerAllModules();
147

148
export const appConfig: ApplicationConfig = {
149
  providers: [
150
    provideZoneChangeDetection({ eventCoalescing: true }),
151
    {
152
      provide: HOT_GLOBAL_CONFIG,
153
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
154
    },
155
  ],
156
};
157
/* end-file */

1
<div>
2
    <app-example10></app-example10>
3
</div>

Control filtering programmatically

You can control filtering at the grid’s runtime by using Handsontable’s hooks and API methods. This allows you to enable or disable filtering based on specific conditions. For example, you may create a user interface outside of the grid to manage Handsontable’s filtering behavior.

Enable or disable filtering programmatically

To enable or disable filtering programmatically, use the updateSettings() method.

1
@ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
2

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

10
this.hotTable.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
@ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
2

3
this.hotTable.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 'Cancel' buttons
8
  dropdownMenu: {
9
    items: {
10
      filter_by_value: {
11
        // hide the 'Filter by value' list from all columns but the first one
12
        hidden() {
13
          return this.getSelectedRangeLast().to.col > 0;
14
        },
15
      },
16
      filter_action_bar: {
17
        // hide the 'OK' and 'Cancel' buttons from all columns but the first one
18
        hidden() {
19
          return this.getSelectedRangeLast().to.col > 0;
20
        },
21
      },
22
    },
23
  },
24
});

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
/* file: app.component.ts */
2
import { Component, ViewChild } from '@angular/core';
3
import { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';
4
import { Filters } from 'handsontable/plugins';
5

6
@Component({
7
  standalone: true,
8
  imports: [HotTableModule],
9
  selector: 'app-example11',
10
  template: `
11
    <div class="example-controls-container">
12
      <div class="controls">
13
        <button (click)="filterBelow200()">Show items < $200</button>
14
        <button (click)="filterAbove200()">Show items > $200</button>
15
        <button (click)="clearAllFilters()">Clear filters</button>
16
      </div>
17
    </div>
18

19
    <hot-table
20
      [settings]="hotSettings!" [data]="hotData">
21
    </hot-table>
22
  `,
23
})
24
export class AppComponent {
25
  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
26

27
  readonly hotData = [
28
    {
29
      brand: 'Jetpulse',
30
      model: 'Racing Socks',
31
      price: 30,
32
      sellDate: '2023-10-11',
33
      sellTime: '01:23',
34
      inStock: false,
35
    },
36
    {
37
      brand: 'Gigabox',
38
      model: 'HL Mountain Frame',
39
      price: 1890.9,
40
      sellDate: '2023-05-03',
41
      sellTime: '11:27',
42
      inStock: false,
43
    },
44
    {
45
      brand: 'Camido',
46
      model: 'Cycling Cap',
47
      price: 130.1,
48
      sellDate: '2023-03-27',
49
      sellTime: '03:17',
50
      inStock: true,
51
    },
52
    {
53
      brand: 'Chatterpoint',
54
      model: 'Road Tire Tube',
55
      price: 59,
56
      sellDate: '2023-08-28',
57
      sellTime: '08:01',
58
      inStock: true,
59
    },
60
    {
61
      brand: 'Eidel',
62
      model: 'HL Road Tire',
63
      price: 279.99,
64
      sellDate: '2023-10-02',
65
      sellTime: '01:23',
66
      inStock: true,
67
    },
68
  ];
69

70
  readonly hotSettings: GridSettings = {
71
    columns: [
72
      {
73
        title: 'Brand',
74
        type: 'text',
75
        data: 'brand',
76
      },
77
      {
78
        title: 'Model',
79
        type: 'text',
80
        data: 'model',
81
      },
82
      {
83
        title: 'Price',
84
        type: 'numeric',
85
        data: 'price',
86
        locale: 'en-US',
87
        numericFormat: {
88
          style: 'currency',
89
          currency: 'USD',
90
          minimumFractionDigits: 2,
91
        },
92
      },
93
      {
94
        title: 'Date',
95
        type: 'intl-date',
96
        data: 'sellDate',
97
        locale: 'en-US',
98
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
99
        className: 'htRight',
100
      },
101
      {
102
        title: 'Time',
103
        type: 'intl-time',
104
        data: 'sellTime',
105
        locale: 'en-US',
106
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
107
        className: 'htRight',
108
      },
109
      {
110
        title: 'In stock',
111
        type: 'checkbox',
112
        data: 'inStock',
113
        className: 'htCenter',
114
      },
115
    ],
116
    // enable filtering
117
    filters: true,
118
    // enable the column menu
119
    dropdownMenu: true,
120
    height: 'auto',
121
    autoWrapRow: true,
122
    autoWrapCol: true,
123
  };
124

125

126
  // get the `Filters` plugin, so you can use its API
127
  getFiltersPlugin(): Filters {
128
    return this.hotTable.hotInstance!.getPlugin('filters');
129
  }
130

131
  filterBelow200() {
132
    const filters = this.getFiltersPlugin();
133

134
    // clear any existing filters
135
    filters.clearConditions();
136
    // filter data by the 'Price' column (column at index 2)
137
    // to display only items that are less than ('lt') $200
138
    filters.addCondition(2, 'lt', [200]);
139
    filters.filter();
140
  }
141

142
  filterAbove200() {
143
    const filters = this.getFiltersPlugin();
144

145
    filters.clearConditions();
146
    // display only items that are more than ('gt') $200
147
    filters.addCondition(2, 'gt', [200]);
148
    filters.filter();
149
  }
150

151
  clearAllFilters() {
152
    const filters = this.getFiltersPlugin();
153

154
    filters.clearConditions();
155
    filters.filter();
156
  }
157
}
158
/* end-file */
159

160

161

162
/* file: app.config.ts */
163
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
164
import { registerAllModules } from 'handsontable/registry';
165
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
166

167
// register Handsontable's modules
168
registerAllModules();
169

170
export const appConfig: ApplicationConfig = {
171
  providers: [
172
    provideZoneChangeDetection({ eventCoalescing: true }),
173
    {
174
      provide: HOT_GLOBAL_CONFIG,
175
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
176
    },
177
  ],
178
};
179
/* end-file */

1
<div>
2
  <app-example11></app-example11>
3
</div>

Combine multiple filter conditions

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

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

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

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

1
const filters = this.hotTable.hotInstance!.getPlugin('filters');
2

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

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

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

Clear a column filter

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

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

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

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

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

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

Save and restore filter settings

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

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

1
/* file: app.component.ts */
2
import { Component, ViewChild } from '@angular/core';
3
import { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';
4
import { Filters } from 'handsontable/plugins';
5
import type { ColumnConditions } from 'handsontable/plugins/filters';
6

7
@Component({
8
  standalone: true,
9
  imports: [HotTableModule],
10
  selector: 'app-example13',
11
  template: `
12
    <div class="example-controls-container">
13
      <div class="controls">
14
        <button (click)="applySampleFilter()">Filter: price &gt; $200</button>
15
        <button (click)="saveFilters()">Save filter settings</button>
16
        <button (click)="clearFilters()">Clear filters</button>
17
        <button (click)="restoreFilters()">Restore filter settings</button>
18
      </div>
19
    </div>
20

21
    <hot-table
22
      [settings]="hotSettings!" [data]="hotData">
23
    </hot-table>
24
  `,
25
})
26
export class AppComponent {
27
  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
28

29
  savedConditions: ColumnConditions[] = [];
30

31
  readonly hotData = [
32
    {
33
      brand: 'Jetpulse',
34
      model: 'Racing Socks',
35
      price: 30,
36
      sellDate: '2023-10-11',
37
      sellTime: '01:23',
38
      inStock: false,
39
    },
40
    {
41
      brand: 'Gigabox',
42
      model: 'HL Mountain Frame',
43
      price: 1890.9,
44
      sellDate: '2023-05-03',
45
      sellTime: '11:27',
46
      inStock: false,
47
    },
48
    {
49
      brand: 'Camido',
50
      model: 'Cycling Cap',
51
      price: 130.1,
52
      sellDate: '2023-03-27',
53
      sellTime: '03:17',
54
      inStock: true,
55
    },
56
    {
57
      brand: 'Chatterpoint',
58
      model: 'Road Tire Tube',
59
      price: 59,
60
      sellDate: '2023-08-28',
61
      sellTime: '08:01',
62
      inStock: true,
63
    },
64
    {
65
      brand: 'Eidel',
66
      model: 'HL Road Tire',
67
      price: 279.99,
68
      sellDate: '2023-10-02',
69
      sellTime: '01:23',
70
      inStock: true,
71
    },
72
  ];
73

74
  readonly hotSettings: GridSettings = {
75
    columns: [
76
      {
77
        title: 'Brand',
78
        type: 'text',
79
        data: 'brand',
80
      },
81
      {
82
        title: 'Model',
83
        type: 'text',
84
        data: 'model',
85
      },
86
      {
87
        title: 'Price',
88
        type: 'numeric',
89
        data: 'price',
90
        locale: 'en-US',
91
        numericFormat: {
92
          style: 'currency',
93
          currency: 'USD',
94
          minimumFractionDigits: 2,
95
        },
96
      },
97
      {
98
        title: 'Date',
99
        type: 'intl-date',
100
        data: 'sellDate',
101
        locale: 'en-US',
102
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
103
        className: 'htRight',
104
      },
105
      {
106
        title: 'Time',
107
        type: 'intl-time',
108
        data: 'sellTime',
109
        locale: 'en-US',
110
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
111
        className: 'htRight',
112
      },
113
      {
114
        title: 'In stock',
115
        type: 'checkbox',
116
        data: 'inStock',
117
        className: 'htCenter',
118
      },
119
    ],
120
    // enable filtering
121
    filters: true,
122
    // enable the column menu
123
    dropdownMenu: true,
124
    height: 'auto',
125
    autoWrapRow: true,
126
    autoWrapCol: true,
127
  };
128

129
  // get the `Filters` plugin, so you can use its API
130
  getFiltersPlugin(): Filters {
131
    return this.hotTable.hotInstance!.getPlugin('filters');
132
  }
133

134
  applySampleFilter() {
135
    const filters = this.getFiltersPlugin();
136

137
    filters.clearConditions();
138
    // filter the 'Price' column (column at index 2) for items over $200
139
    filters.addCondition(2, 'gt', [200]);
140
    filters.filter();
141
  }
142

143
  saveFilters() {
144
    const filters = this.getFiltersPlugin();
145

146
    // `exportConditions()` returns the current conditions, keyed by physical column index
147
    this.savedConditions = filters.exportConditions();
148
  }
149

150
  clearFilters() {
151
    const filters = this.getFiltersPlugin();
152

153
    filters.clearConditions();
154
    filters.filter();
155
  }
156

157
  restoreFilters() {
158
    const filters = this.getFiltersPlugin();
159

160
    // `importConditions()` expects the same physical-column-indexed structure
161
    filters.importConditions(this.savedConditions);
162
    filters.filter();
163
  }
164
}
165
/* end-file */
166

167

168

169
/* file: app.config.ts */
170
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
171
import { registerAllModules } from 'handsontable/registry';
172
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
173

174
// register Handsontable's modules
175
registerAllModules();
176

177
export const appConfig: ApplicationConfig = {
178
  providers: [
179
    provideZoneChangeDetection({ eventCoalescing: true }),
180
    {
181
      provide: HOT_GLOBAL_CONFIG,
182
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
183
    },
184
  ],
185
};
186
/* end-file */

1
<div>
2
  <app-example13></app-example13>
3
</div>

Get filtered data

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

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

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import Handsontable from 'handsontable';
4
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
5

6
@Component({
7
  standalone: true,
8
  imports: [HotTableModule],
9
  selector: 'app-example14',
10
  template: `
11
    <p>{{ rowCountInfo }}</p>
12

13
    <hot-table
14
      [settings]="hotSettings!" [data]="hotData">
15
    </hot-table>
16
  `,
17
})
18
export class AppComponent {
19
  rowCountInfo = '';
20

21
  readonly hotData = [
22
    {
23
      brand: 'Jetpulse',
24
      model: 'Racing Socks',
25
      price: 30,
26
      sellDate: '2023-10-11',
27
      sellTime: '01:23',
28
      inStock: false,
29
    },
30
    {
31
      brand: 'Gigabox',
32
      model: 'HL Mountain Frame',
33
      price: 1890.9,
34
      sellDate: '2023-05-03',
35
      sellTime: '11:27',
36
      inStock: false,
37
    },
38
    {
39
      brand: 'Camido',
40
      model: 'Cycling Cap',
41
      price: 130.1,
42
      sellDate: '2023-03-27',
43
      sellTime: '03:17',
44
      inStock: true,
45
    },
46
    {
47
      brand: 'Chatterpoint',
48
      model: 'Road Tire Tube',
49
      price: 59,
50
      sellDate: '2023-08-28',
51
      sellTime: '08:01',
52
      inStock: true,
53
    },
54
    {
55
      brand: 'Eidel',
56
      model: 'HL Road Tire',
57
      price: 279.99,
58
      sellDate: '2023-10-02',
59
      sellTime: '01:23',
60
      inStock: true,
61
    },
62
  ];
63

64
  readonly hotSettings: GridSettings;
65

66
  constructor() {
67
    // deferred so the update doesn't trigger NG0100 when `afterInit` fires
68
    // during the same change-detection cycle that first rendered the template
69
    const updateRowCountInfo = (hotInstance: Handsontable) => {
70
      setTimeout(() => {
71
        // `getData()` returns only the rows that pass the current filters
72
        // `getSourceData()` always returns every row, filtered or not
73
        this.rowCountInfo = `Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`;
74
      }, 0);
75
    };
76

77
    this.hotSettings = {
78
      columns: [
79
        {
80
          title: 'Brand',
81
          type: 'text',
82
          data: 'brand',
83
        },
84
        {
85
          title: 'Model',
86
          type: 'text',
87
          data: 'model',
88
        },
89
        {
90
          title: 'Price',
91
          type: 'numeric',
92
          data: 'price',
93
          locale: 'en-US',
94
          numericFormat: {
95
            style: 'currency',
96
            currency: 'USD',
97
            minimumFractionDigits: 2,
98
          },
99
        },
100
        {
101
          title: 'Date',
102
          type: 'intl-date',
103
          data: 'sellDate',
104
          locale: 'en-US',
105
          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
106
          className: 'htRight',
107
        },
108
        {
109
          title: 'Time',
110
          type: 'intl-time',
111
          data: 'sellTime',
112
          locale: 'en-US',
113
          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
114
          className: 'htRight',
115
        },
116
        {
117
          title: 'In stock',
118
          type: 'checkbox',
119
          data: 'inStock',
120
          className: 'htCenter',
121
        },
122
      ],
123
      // enable filtering
124
      filters: true,
125
      // enable the column menu
126
      dropdownMenu: true,
127
      // `afterInit()` and `afterFilter()` are Handsontable hooks
128
      afterInit(this: Handsontable) {
129
        updateRowCountInfo(this);
130
      },
131
      afterFilter(this: Handsontable) {
132
        updateRowCountInfo(this);
133
      },
134
      height: 'auto',
135
      autoWrapRow: true,
136
      autoWrapCol: true,
137
    };
138
  }
139
}
140
/* end-file */
141

142

143

144
/* file: app.config.ts */
145
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
146
import { registerAllModules } from 'handsontable/registry';
147
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
148

149
// register Handsontable's modules
150
registerAllModules();
151

152
export const appConfig: ApplicationConfig = {
153
  providers: [
154
    provideZoneChangeDetection({ eventCoalescing: true }),
155
    {
156
      provide: HOT_GLOBAL_CONFIG,
157
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
158
    },
159
  ],
160
};
161
/* end-file */

1
<div>
2
  <app-example14></app-example14>
3
</div>

Import the filtering module

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

To use filtering, you need only the following modules:

The base module
The Filters module
The DropdownMenu module

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

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

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

Known limitations

At the moment, filtering comes with the following limitations:

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

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

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

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

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

API reference

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

Plugins

Filters

DropdownMenu

Troubleshooting

Didn’t find what you need? Try this:

View related topics

Report an issue

Start a discussion

Contact our technical support

Column filter

Overview

Filtering demo

Enable filtering

Enable filtering for individual columns

Enable filtering within already filtered results

Filter different types of data

Filter data on initialization

External quick filter

Customize the filter button

Change the width of the filter menu

Exclude rows from filtering

Server-side filtering

Control filtering programmatically

Enable or disable filtering programmatically

Filter data programmatically

Combine multiple filter conditions

Clear a column filter

Save and restore filter settings

Get filtered data

Import the filtering module

Known limitations

Navigate the filter menu

API reference

Troubleshooting

Column filter

Overview

Filtering demo

Enable filtering

Enable filtering for individual columns

Enable filtering within already filtered results

Filter different types of data

Filter data on initialization

External quick filter

Customize the filter button

Change the width of the filter menu

Exclude rows from filtering

Server-side filtering

Control filtering programmatically

Enable or disable filtering programmatically

Filter data programmatically

Combine multiple filter conditions

Clear a column filter

Save and restore filter settings

Get filtered data

Import the filtering module

Known limitations

Navigate the filter menu

Related keyboard shortcuts

API reference

Troubleshooting