# Excel-like Filter in FlexGrid

Learn how to add Excel-like filtering to FlexGrid in this tutorial

## Content

The **wijmo.grid.filter** module provides a **FlexGridFilter** class that adds an Excel-style filtering UI to each column.

The **FlexGridFilter** adds filter icons to the column headers. Users may click the icons to see a drop-down where they can apply filters by value or by condition.

```javascript
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridFilter from '@mescius/wijmo.grid.filter';

function init() {
    // FlexGridFilter client-side filtering
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        itemsSource: data,
    });
    var filter = new wjGridFilter.FlexGridFilter(theGrid);
}
```

***

To include current selected values along with previously selected values when filtering data by value, users can use the **Include Current Selection** checkbox. This option is available in the filter dropdown of the grid. By default, the **Include Current Selection** option is hidden in the *Filter By Value* tab.

![IncludeCurrentSelection](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/IncludeCurrentSelection.95eb49.png?width=480)

The visibility of **Include Current Selection** checkbox is controlled using the **showIncludeSelection** property. To enable the **Include Current Selection** checkbox, set **showIncludeSelection** of FlexGridFilter class to *true*. By default, the **showIncludeSelection** property is set to *false*.

When the **Include Current Selection** option is selected and the value filter is applied again, the previously selected rows (if any) are retained in the new filter along with the newly selected rows. For example, in the demo, when a user,

1. Applies a value filter with values ‘Germany’, and ‘Italy’. The grid displays rows with this filtered data.
2. Applies the value filter again with values ‘Greece’, and ‘Japan’. And this time the user checks the *Include Current Selection* checkbox.
3. Now, the datagrid will display filtered rows with values ‘Germany’, ‘Greece’, ‘Italy’ and ‘Japan’. The filter will retain the previously selected values in the filtered list.

![showincludeselection](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/showincludeselection.189644.gif?width=500)
The following example code is used to enable the Include Current Selection option in the filter tab.

```auto
import * as wjGrid from '@mescius/wijmo.grid';  
import * as wjGridFilter from '@mescius/wijmo.grid.filter';  

function init() 
{  
// FlexGridFilter client-side filtering  
   var theGrid = new wjGrid.FlexGrid('#theGrid', {  
   itemsSource: data,  
   });  

// To enable/disable for all value filters 
   var filter = new wjGridFilter.FlexGridFilter(flexGrid);  
   filter.showIncludeSelection = true;  

//To enable/disable for a single column value filter 
  filter.getColumnFilter("country").valueFilter.showIncludeSelection = false;
} 
```

***

**Custom Filter Method**
The `ValueFilter` supports a `Custom` search type that allows you to define your own filtering logic beyond the built-in Text, `Regex`, and `Excel` search types.
To use a custom filter, set the `searchType` property to `ValueFilterSearchKind.Custom` and assign a `customFilter` function to the `ValueFilter`. The custom filter function receives two parameters:

* **filterText**: The text entered in the filter editor search box.
* **filterItem**: An {@link ICustomFilterItem} object containing `value`(raw cell value), `text` (formatted display text), and `show` (current checked state) properties.

The function should return `true` to include the item in the filtered results, or `false` to exclude it.

```
import * as wjGridFilter from '@mescius/wijmo.grid.filter';
var filter = new wjGridFilter.FlexGridFilter(theGrid);
let colFilter = filter.getColumnFilter('country');
let valFilter = colFilter.valueFilter;
valFilter.searchType = wjGridFilter.ValueFilterSearchKind.Custom;
valFilter.customFilter = function (filterText, filterItem) {
    // use '&' as AND operator
    let strings = filterText.split('&');
    return strings.every(str => filterItem.text.includes(str.trim()));
};
```

In the example above, entering `aa&bb` in the filter box will match items containing both "aa" and "bb" (e.g., "aa bb").

> **Note**: When `searchType` is set to `Custom` and a `customFilter` function is provided, the `caseSensitiveSearch` property is ignored — the raw `filterText` is passed directly to your function, allowing you to handle case sensitivity yourself. If no `customFilter` is defined, the default `Excel` filtering method is used as a fallback.

***

We support the **MultiFilter** which presents both the **condition filter** and **value filter** components on the same UI panel. This design improves usability by helping users clearly distinguish and configure both types of filters in one place.
![Multi Filter](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/multi-filter-20251218.bccc24.png)
In the multi filter UI, we'll remove the **Apply** and **Cancel** buttons. This means that when you set a filter through the UI, the filter will take effect immediately.
To enable the Multi Filter:

```javascript
import { FlexGridFilter, FilterMode } from '@mescius/wijmo.grid.filter';

const filter = new FlexGridFilter(grid, {
  defaultFilterMode: FilterMode.MultiFilter // apply MultiFilter to each column
});
```

Alternatively, you can also specify a MultiFilter for the filter of a particular column.

```javascript
import { FilterMode } from '@mescius/wijmo.grid.filter';

const col = grid.getColumn('some-column'); // get column instance by binding
const cf = filter.getColumnFilter(col); // get column filter from column instance
cf.filterMode = FilterMode.MultiFilter; // apply MultiFilter to single column
```