---
title: "Set Filter - Excel Mode"
enterprise: true
framework: vue
version: "36.1.0"
---
# Set Filter - Excel Mode
The Set Filter is a more powerful version of Excel's AutoFilter, allowing users to easily build more complex sets for filtering in less time. However, sometimes you may want to provide your users with an Excel-like experience. For this you can use Excel Mode.
## Enabling Excel Mode
To enable Excel Mode, simply add the `excelMode` option to your filter params:
```ts
this.columnDefs = [
{
field: 'animal',
filter: 'agSetColumnFilter',
filterParams: {
// can be 'windows' or 'mac'
excelMode: 'windows',
},
}
];
```
Excel's AutoFilter behaves differently depending on whether you are using the Windows or Mac version. The grid therefore allows you to choose which behaviour you would like by setting `excelMode` to `'windows'` or `'mac'` respectively.
The example below demonstrates the differences between the different modes:
- The **Default** column demonstrates the default behaviour of the Set Filter in the grid.
- The **Excel (Windows)** column demonstrates the behaviour of the Set Filter in Windows Excel Mode.
- The **Excel (Mac)** column demonstrates the behaviour of the Set Filter in Mac Excel Mode.
#### Excel Mode
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ISetFilterParams,
LocaleModule,
LocaleText,
ModuleRegistry,
SideBarDef,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
FiltersToolPanelModule,
SetFilterModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
LocaleModule,
ClientSideRowModelModule,
FiltersToolPanelModule,
ColumnMenuModule,
ContextMenuModule,
SetFilterModule,
]);
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef(null);
const columnDefs = ref([
{
headerName: "Default",
field: "animal",
filter: "agSetColumnFilter",
},
{
headerName: "Excel (Windows)",
field: "animal",
filter: "agSetColumnFilter",
filterParams: {
excelMode: "windows",
} as ISetFilterParams,
},
{
headerName: "Excel (Mac)",
field: "animal",
filter: "agSetColumnFilter",
filterParams: {
excelMode: "mac",
} as ISetFilterParams,
},
]);
const defaultColDef = ref({
flex: 1,
minWidth: 200,
});
const sideBar = ref(
"filters",
);
const rowData = ref(getData());
const localeText = ref({
applyFilter: "OK",
cancelFilter: "Cancel",
resetFilter: "Clear Filter",
});
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
sideBar,
rowData,
localeText,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Excel Mode](https://www.ag-grid.com/examples/filter-set-excel-mode/excel-mode/vue3)
## Differences Between Modes
The table below shows the differences in behaviour alongside the default behaviour of the grid for comparison. Note that the behaviour of the grid can be changed from the defaults in many ways using the other options detailed on the [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) page. These options can also be used in conjunction with the Excel Mode to give you the maximum amount of flexibility.
| Behaviour | Default | Excel (Windows) | Excel (Mac) |
| --- | --- | --- | --- |
| Show all values selected by default | ✓ | ✓ | ✓ |
| Allow filter with no values selected | ✓ | ✗ | ✗ |
| Apply the filter immediately when a value is selected/deselected | ✓ | ✗ | ✓ (after 500ms delay) |
| Apply the filter when the Apply button is clicked | ✓ (when button enabled) | ✓ | N/A |
| Close the filter when the Apply button is clicked | ✗ | ✓ | N/A |
| Press {% kbd "↵ Enter" /%} to apply the filter | ✗ | ✓ | N/A |
| Close the filter when {% kbd "↵ Enter" /%} is pressed | ✗ | ✓ | ✗ |
| Discard the selected state of values that are not visible when the filter is applied | ✗ | ✓ | ✓ |
| Hide unavailable values in other Set Filters when a filter is applied | ✓ | ✓ | ✓ |
| Type into search box to only show values with matching text | ✓ | ✓ | ✓ |
| Combine selected values from different searches before applying | ✓ | | ✗ |
| Press {% kbd "↵ Enter" /%} in the search box to apply the filter using all visible values | ✓ | ✓ (unless search box is empty) | N/A |
| Apply the filter immediately using all visible values while typing in the search box | ✗ | ✗ | ✓ (after 500ms delay) |
| Press {% kbd "↵ Enter" /%} in the search box to select all search text | ✗ | ✗ | ✓ |
| Restore the applied filter state when the search box is cleared | ✗ | ✓ | N/A |
| Clear the search box when the filter is closed | ✗ | ✓ | ✓ |
| Discard un-applied changes when the filter is closed | ✓ | ✓ | N/A |
| Discard un-applied changes when the Cancel button is clicked | ✓ | ✓ | N/A |
| Close the filter when the Cancel button is clicked | ✗ | ✓ | N/A |
| Allow blank values to be selected | ✓ | ✓ | ✓ |
| Show (Blanks) option at the end of the list of values | | ✓ | ✓ |
| The (Blanks) option is shown if the search text matches | ✗ | ✓ | ✓ |
> **Note**
>
> The "Discard the selected state of values that are not visible when the filter is applied" row describes how each mode treats values hidden in the filter UI. The default grid behaviour keeps those selections, so it is marked with a cross.
>
> This is separate from how a model is reconciled when set programmatically. When values are taken from the grid (the default), setting a model via [`setColumnFilterModel`](https://www.ag-grid.com/vue-data-grid/filter-set-api/#set-filter-model) drops any selected values that are not currently in the data. See [Refreshing Values](https://www.ag-grid.com/vue-data-grid/filter-set-filter-list/#refreshing-values) for details.