---
type: how-to
title: Column filter
metaTitle: Column filter - JavaScript Data Grid | Handsontable
description: Filter your data by values or by a set of conditions.
permalink: /column-filter
canonicalUrl: /column-filter
tags:
  - filter
  - filtering
  - data filtering
  - dynamic filter
  - operator
  - criteria
  - conditions
  - expression
  - subset of data
  - excel filter
  - advanced filter
  - dropdown
react:
  metaTitle: Column filter - React Data Grid | Handsontable
angular:
  metaTitle: Column filter - Angular Data Grid | Handsontable
vue:
  metaTitle: Column filter - Vue Data Grid | Handsontable
searchCategory: Guides
category: Columns
---
Filter data by values or by a set of conditions, using Handsontable's intuitive user interface or
flexible API.

[[toc]]

## 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](@/guides/columns/column-width/column-width.md#set-the-column-width-as-a-constant).

::: only-for javascript

::: example #exampleFilterBasicDemo --html 1 --js 2 --ts 3

@[code](@/content/guides/columns/column-filter/javascript/exampleFilterBasicDemo.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleFilterBasicDemo.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleFilterBasicDemo.ts)

:::

:::

::: only-for react

::: example #exampleFilterBasicDemo :react --js 1 --ts 2

@[code](@/content/guides/columns/column-filter/react/exampleFilterBasicDemo.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleFilterBasicDemo.tsx)

:::

:::

::: only-for angular

::: example #example1 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example1.ts)
@[code](@/content/guides/columns/column-filter/angular/example1.html)

:::

:::

::: only-for vue

::: example #exampleFilterBasicDemo :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleFilterBasicDemo.vue)

:::

:::

## Enable filtering

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

1. Set the `filters` option to `true`.
2. 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.

::: only-for javascript

```js
const configurationOptions = {
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
};
```

:::

::: only-for react

```jsx
<HotTable
  // enable filtering
  filters={true}
  // enable the column menu
  dropdownMenu={true}
/>
```

:::

::: only-for angular

```ts
const configurationOptions = {
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
};
```

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

:::

::: only-for vue

```js
const hotSettings = {
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
};
```

```html
<HotTable :settings="hotSettings" />
```

:::

<span style="display: none;"></span>

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.

::: only-for javascript

::: example #exampleShowFilterItemsOnly --html 1 --js 2 --ts 3

@[code](@/content/guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.ts)

:::

:::

::: only-for react

::: example #exampleShowFilterItemsOnly :react --js 1 --ts 2

@[code](@/content/guides/columns/column-filter/react/exampleShowFilterItemsOnly.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleShowFilterItemsOnly.tsx)

:::

:::


::: only-for angular

::: example #example2 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example2.ts)
@[code](@/content/guides/columns/column-filter/angular/example2.html)

:::

:::

::: only-for vue

::: example #exampleShowFilterItemsOnly :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleShowFilterItemsOnly.vue)

:::

:::

### 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**.

::: only-for javascript

::: example #exampleEnableFilterInColumns --html 1 --js 2 --ts 3

@[code](@/content/guides/columns/column-filter/javascript/exampleEnableFilterInColumns.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleEnableFilterInColumns.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleEnableFilterInColumns.ts)

:::

:::

::: only-for react

::: example #exampleEnableFilterInColumns :react --js 1 --ts 2

@[code](@/content/guides/columns/column-filter/react/exampleEnableFilterInColumns.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleEnableFilterInColumns.tsx)

:::

:::

::: only-for angular

::: example #example3 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example3.ts)
@[code](@/content/guides/columns/column-filter/angular/example3.html)

:::

:::

::: only-for vue

::: example #exampleEnableFilterInColumns :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleEnableFilterInColumns.vue)

:::

:::

### 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 <kbd>**Enter**</kbd> key while the search input is focused or by clicking the `OK` button.

::: only-for javascript

```js
const configurationOptions = {
  // enable filtering
  filters: {
    searchMode: 'apply'
  },
  // enable the column menu
  dropdownMenu: true,
};
```

:::

::: only-for react

```jsx
<HotTable
  // enable filtering
  filters={{
    searchMode: 'apply'
  }}
  // enable the column menu
  dropdownMenu={true}
/>
```

:::

::: only-for angular

```ts
const configurationOptions = {
  // enable filtering
  filters: {
    searchMode: 'apply'
  },
  // enable the column menu
  dropdownMenu: true,
};
```

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

:::

::: only-for vue

```js
const hotSettings = {
  // enable filtering
  filters: {
    searchMode: 'apply'
  },
  // enable the column menu
  dropdownMenu: true,
};
```

```html
<HotTable :settings="hotSettings" />
```

:::

::: only-for javascript

::: example #exampleSearchMode --html 1 --js 2 --ts 3

@[code](@/content/guides/columns/column-filter/javascript/exampleSearchMode.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleSearchMode.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleSearchMode.ts)

:::

:::

::: only-for react

::: example #exampleSearchMode :react --js 1 --ts 2

@[code](@/content/guides/columns/column-filter/react/exampleSearchMode.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleSearchMode.tsx)

:::

:::

::: only-for angular

::: example #example12 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example12.ts)
@[code](@/content/guides/columns/column-filter/angular/example12.html)

:::

:::

::: only-for vue

::: example #exampleSearchMode :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleSearchMode.vue)

:::

:::

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

::: only-for javascript

::: example #exampleFilterDifferentTypes --html 1 --js 2 --ts 3

@[code](@/content/guides/columns/column-filter/javascript/exampleFilterDifferentTypes.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleFilterDifferentTypes.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleFilterDifferentTypes.ts)

:::

:::

::: only-for react

::: example #exampleFilterDifferentTypes :react --js 1 --ts 2

@[code](@/content/guides/columns/column-filter/react/exampleFilterDifferentTypes.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleFilterDifferentTypes.tsx)

:::

:::

::: only-for angular

::: example #example4 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example4.ts)
@[code](@/content/guides/columns/column-filter/angular/example4.html)

:::

:::

::: only-for vue

::: example #exampleFilterDifferentTypes :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleFilterDifferentTypes.vue)

:::

:::


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

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

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

::: only-for javascript

To do this, you can use Handsontable's [`afterInit()`](@/api/hooks.md#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.

::: example #exampleFilterOnInitialization --html 1 --js 2 --ts 3

@[code](@/content/guides/columns/column-filter/javascript/exampleFilterOnInitialization.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleFilterOnInitialization.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleFilterOnInitialization.ts)

:::

:::

::: only-for react

To do this, use the API provided by the [`Filters`](@/api/filters.md) plugin. For instance, the demo
below demonstrates how you can start with a pre-applied filter to display only items priced less
than $200.

::: example #exampleFilterOnInitialization :react --js 1 --ts 2

@[code](@/content/guides/columns/column-filter/react/exampleFilterOnInitialization.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleFilterOnInitialization.tsx)

:::

:::

::: only-for angular

To do this, you can use Handsontable's [`afterInit()`](@/api/hooks.md#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.

::: example #example5 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example5.ts)
@[code](@/content/guides/columns/column-filter/angular/example5.html)

:::

:::

::: only-for vue

To do this, use the API provided by the [`Filters`](@/api/filters.md) plugin. For instance, the demo
below demonstrates how you can start with a pre-applied filter to display only items priced less
than $200.

::: example #exampleFilterOnInitialization :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleFilterOnInitialization.vue)

:::

:::


## 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()`](@/api/filters.md#addcondition) and
[`filters.filter()`](@/api/filters.md#filter).

::: only-for javascript

::: example #exampleQuickFilter --html 1 --js 2 --ts 3 --css 4

@[code](@/content/guides/columns/column-filter/javascript/exampleQuickFilter.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleQuickFilter.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleQuickFilter.ts)
@[code](@/content/guides/columns/column-filter/javascript/exampleQuickFilter.css)

:::

:::

::: only-for react

::: example #exampleQuickFilter :react --js 1 --css 2 --ts 3

@[code](@/content/guides/columns/column-filter/react/exampleQuickFilter.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleQuickFilter.css)
@[code](@/content/guides/columns/column-filter/react/exampleQuickFilter.tsx)

:::

:::

::: only-for angular

::: example #example6 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example6.ts)
@[code](@/content/guides/columns/column-filter/angular/example6.html)

:::

:::

::: only-for vue

::: example #exampleQuickFilter :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleQuickFilter.vue)

:::

:::

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

::: only-for javascript

::: example #exampleCustomFilterButton --html 1 --js 2 --ts 3 --css 4

@[code](@/content/guides/columns/column-filter/javascript/exampleCustomFilterButton.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleCustomFilterButton.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleCustomFilterButton.ts)
@[code](@/content/guides/columns/column-filter/javascript/exampleCustomFilterButton.css)

:::

:::

::: only-for react

::: example #exampleCustomFilterButton :react --js 1 --css 2 --ts 3

@[code](@/content/guides/columns/column-filter/react/exampleCustomFilterButton.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleCustomFilterButton.css)
@[code](@/content/guides/columns/column-filter/react/exampleCustomFilterButton.tsx)

:::

:::

::: only-for angular

::: example #example7 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example7.ts)
@[code](@/content/guides/columns/column-filter/angular/example7.html)

:::

:::

::: only-for vue

::: example #exampleCustomFilterButton :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleCustomFilterButton.vue)

:::

:::

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

::: only-for javascript

::: example #exampleCustomFilterButton2 --html 1 --js 2 --ts 3 --css 4

@[code](@/content/guides/columns/column-filter/javascript/exampleCustomFilterButton2.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleCustomFilterButton2.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleCustomFilterButton2.ts)
@[code](@/content/guides/columns/column-filter/javascript/exampleCustomFilterButton2.css)

:::

:::

::: only-for react

::: example #exampleCustomFilterButton2 :react --js 1 --css 2 --ts 3

@[code](@/content/guides/columns/column-filter/react/exampleCustomFilterButton2.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleCustomFilterButton2.css)
@[code](@/content/guides/columns/column-filter/react/exampleCustomFilterButton2.tsx)

:::

:::

::: only-for angular

::: example #example8 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example8.ts)
@[code](@/content/guides/columns/column-filter/angular/example8.html)

:::

:::

::: only-for vue

::: example #exampleCustomFilterButton2 :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleCustomFilterButton2.vue)

:::

:::

## Change the width of the filter menu

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

```css
.handsontable .htDropdownMenu table.htCore {
  width: 300px !important;
}
```

## 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](@/guides/rows/row-freezing/row-freezing.md), and
filtering doesn't affect them.

::: only-for javascript

::: example #exampleExcludeRowsFromFiltering --html 1 --js 2 --ts 3

@[code](@/content/guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts)

:::

:::

::: only-for react

::: example #exampleExcludeRowsFromFiltering :react --js 1 --ts 2

@[code](@/content/guides/columns/column-filter/react/exampleExcludeRowsFromFiltering.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleExcludeRowsFromFiltering.tsx)

:::

:::

::: only-for angular

::: example #example9 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example9.ts)
@[code](@/content/guides/columns/column-filter/angular/example9.html)

:::

:::

::: only-for vue

::: example #exampleExcludeRowsFromFiltering :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue)

:::

:::

## 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()`](@/api/hooks.md#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.

::: only-for javascript

::: example #exampleServerSideFilter --html 1 --js 2 --ts 3

@[code](@/content/guides/columns/column-filter/javascript/exampleServerSideFilter.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleServerSideFilter.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleServerSideFilter.ts)

:::

:::

::: only-for react

::: example #exampleServerSideFilter :react --js 1 --ts 2

@[code](@/content/guides/columns/column-filter/react/exampleServerSideFilter.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleServerSideFilter.tsx)

:::

:::

::: only-for angular

::: example #example10 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example10.ts)
@[code](@/content/guides/columns/column-filter/angular/example10.html)

:::

:::

::: only-for vue

::: example #exampleServerSideFilter :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleServerSideFilter.vue)

:::

:::

## Control filtering programmatically

You can control filtering at the grid's runtime by using Handsontable's
[hooks](@/guides/getting-started/events-and-hooks/events-and-hooks.md) and [API methods](@/api/filters.md#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()`](@/api/core.md#updatesettings) method.

::: only-for javascript

```js
handsontableInstance.updateSettings({
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
});

handsontableInstance.updateSettings({
  // disable filtering
  filters: false,
});
```

:::

::: only-for react

```jsx
const hotTableComponentRef = useRef(null);

hotTableComponentRef.current.hotInstance.updateSettings({
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
});

hotTableComponentRef.current.hotInstance.updateSettings({
  // disable filtering
  filters: false,
});
```

:::

::: only-for angular

```ts
@ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;

this.hotTable.hotInstance!.updateSettings({
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
});

this.hotTable.hotInstance!.updateSettings({
  // disable filtering
  filters: false,
});
```

:::

::: only-for vue

```js
const hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');

hotTableRef.value.hotInstance.updateSettings({
  // enable filtering
  filters: true,
  // enable the column menu
  dropdownMenu: true,
});

hotTableRef.value.hotInstance.updateSettings({
  // disable filtering
  filters: false,
});
```

:::

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

::: only-for javascript

```js
handsontableInstance.updateSettings({
  // enable filtering, for all columns
  filters: true,
  // enable the column menu, for all columns
  // but display only the 'Filter by value' list and the 'OK' and
  // 'Cancel' buttons
  dropdownMenu: {
    items: {
      filter_by_value: {
        // hide the 'Filter by value' list from all columns but the
        // first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
      filter_action_bar: {
        // hide the 'OK' and 'Cancel' buttons from all columns but the
        // first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
    },
  },
});
```

:::

::: only-for react

```jsx
const hotTableComponentRef = useRef(null);

hotTableComponentRef.current.hotInstance.updateSettings({
  // enable filtering for all columns
  filters: true,
  // enable the column menu for all columns
  // but display only the 'Filter by value' list and the 'OK' and
  // 'Cancel' buttons
  dropdownMenu: {
    items: {
      filter_by_value: {
        // hide the 'Filter by value' list from all columns but the
        // first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
      filter_action_bar: {
        // hide the 'OK' and 'Cancel' buttons from all columns but the
        // first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
    },
  },
});
```

:::

::: only-for angular

```ts
@ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;

this.hotTable.hotInstance!.updateSettings({
  // enable filtering, for all columns
  filters: true,
  // enable the column menu, for all columns
  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons
  dropdownMenu: {
    items: {
      filter_by_value: {
        // hide the 'Filter by value' list from all columns but the first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
      filter_action_bar: {
        // hide the 'OK' and 'Cancel' buttons from all columns but the first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
    },
  },
});
```

:::

::: only-for vue

```js
const hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');

hotTableRef.value.hotInstance.updateSettings({
  // enable filtering for all columns
  filters: true,
  // enable the column menu for all columns
  // but display only the 'Filter by value' list and the 'OK' and
  // 'Cancel' buttons
  dropdownMenu: {
    items: {
      filter_by_value: {
        // hide the 'Filter by value' list from all columns but the
        // first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
      filter_action_bar: {
        // hide the 'OK' and 'Cancel' buttons from all columns but the
        // first one
        hidden() {
          return this.getSelectedRangeLast().to.col > 0;
        },
      },
    },
  },
});
```

:::


### Filter data programmatically

To filter data programmatically, use the [`Filters`](@/api/filters.md) plugin's API. Remember to
[enable filtering](#enable-filtering) first.

Mind that before you apply new filter conditions, you need to clear the previous ones with
[`filters.clearConditions()`](@/api/filters.md#clearconditions).

::: only-for javascript

::: example #exampleFilterThroughAPI1 --html 1 --js 2 --ts 3

@[code](@/content/guides/columns/column-filter/javascript/exampleFilterThroughAPI1.html)
@[code](@/content/guides/columns/column-filter/javascript/exampleFilterThroughAPI1.js)
@[code](@/content/guides/columns/column-filter/javascript/exampleFilterThroughAPI1.ts)

:::

:::

::: only-for react

::: example #exampleFilterThroughAPI1 :react --js 1 --ts 2

@[code](@/content/guides/columns/column-filter/react/exampleFilterThroughAPI1.jsx)
@[code](@/content/guides/columns/column-filter/react/exampleFilterThroughAPI1.tsx)

:::

:::

::: only-for angular

::: example #example11 :angular --ts 1 --html 2

@[code](@/content/guides/columns/column-filter/angular/example11.ts)
@[code](@/content/guides/columns/column-filter/angular/example11.html)

:::

:::

::: only-for vue

::: example #exampleFilterThroughAPI1 :vue3

@[code](@/content/guides/columns/column-filter/vue/exampleFilterThroughAPI1.vue)

:::

:::

## Import the filtering module

You can reduce the size of your bundle by importing and registering only the
[modules](@/guides/tools-and-building/modules/modules.md) that you need.

To use filtering, you need only the following modules:

- The [base module](@/guides/tools-and-building/modules/modules.md#import-the-base-module)
- The [`Filters`](@/api/filters.md) module
- The [`DropdownMenu`](@/api/dropdownMenu.md) module

```js
// import the base module
import Handsontable from 'handsontable/base';

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

// register the filtering plugins
registerPlugin(Filters);
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()`](@/api/filters.md), the extra conditions are applied to the data but are not
  visible or editable in the dropdown menu.

## Related keyboard shortcuts

| Windows                             | macOS                                  | Action            |  Excel  | Sheets  |
| ----------------------------------- | -------------------------------------- | ----------------- | :-----: | :-----: |
| <kbd>**Alt**</kbd>+<kbd>**A**</kbd> | <kbd>⌥</kbd>+<kbd>**A**</kbd> | Clear all filters | &cross; | &cross; |

## API reference

For the list of [options](@/guides/getting-started/configuration-options/configuration-options.md), methods, and
[Handsontable hooks](@/guides/getting-started/events-and-hooks/events-and-hooks.md) related to filtering, see the
following API reference pages:

**Plugins**

<div class="boxes-list">

- [Filters](@/api/filters.md)
- [DropdownMenu](@/api/dropdownMenu.md)

</div>

## Troubleshooting

Didn't find what you need? Try this:

<div class="boxes-list">

- [View related topics](https://github.com/handsontable/handsontable/labels/Filtering) on GitHub
- [Report an issue](https://github.com/handsontable/handsontable/issues/new/choose) on GitHub
- [Start a discussion](https://forum.handsontable.com/c/getting-help/questions) on Handsontable's forum
- [Contact our technical support](https://handsontable.com/contact?category=technical_support) to get help

</div>
