--- product: "AG Grid" title: "Set Filter - Overview" description: "Set Filter works like Excel, providing checkboxes to select values from a set." enterprise: true framework: react version: "36.3.0" related: - title: "Text Filter" url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-text/" - title: "Number Filter" url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-number/" - title: "BigInt Filter" url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-bigint/" - title: "Date Filter" url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-date/" - title: "Multi Filter" url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-multi/" - title: "Filter Conditions" url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-conditions/" - title: "Applying Filters" url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-applying/" - title: "Filter API" url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-api/" llms: "https://www.ag-grid.com/archive/36.3.0/llms.txt" --- # Set Filter - Overview The Set Filter takes inspiration from Excel's AutoFilter and allows filtering on sets of data. ![Set Filter](https://www.ag-grid.com/archive/36.3.0/_astro/set-filter.BVqbXaVo.png) ## Set Filter Sections The Set Filter is comprised of the following sections: - **[Mini Filter](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-mini-filter/)**: used to narrow the values available for selection inside the Filter List. - **Select All**: used to select / deselect all values shown in the Filter List. - **[Filter List](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-filter-list/)**: a list of Set Filter Values which can be selected / deselected to set the filter. - **[Filter Buttons](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-applying/#apply-clear-reset-and-cancel-buttons)**: Action buttons that can be optionally added to the bottom of the Set Filter. ## Enabling Set Filters The Set Filter is the default filter used in AG Grid Enterprise (unless it has been [Suppressed by Default](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set/#suppress-set-filter-by-default) or the `SetFilterModule` has not been registered), but it can also be explicitly configured as shown below: ```jsx const [columnDefs, setColumnDefs] = useState([ // Set Filter is used by default in Enterprise version { field: 'athlete', filter: true }, // explicitly configure column to use the Set Filter { field: 'country', filter: 'agSetColumnFilter' }, ]); ``` The following example demonstrates how the Set Filter can be enabled. Note the following: - The **Athlete** column has `filter=true` which defaults to the Set Filter as this example is using AG Grid Enterprise. - The **Country** column is explicitly configured to use the Set Filter using `filter='agSetColumnFilter'`. - All other columns are configured to use the [Number Filter](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-number/) using `filter='agNumberColumnFilter'`. - Filters can be accessed by clicking on the filter icon in the [Floating Filters](https://www.ag-grid.com/archive/36.3.0/react-data-grid/floating-filters/). #### Enabling Set Filters ```tsx "use client"; import React, { useCallback, useMemo, useRef, useState, StrictMode, } from "react"; import { createRoot } from "react-dom/client"; import { AgGridReact, AgGridProvider } from "ag-grid-react"; import { ClientSideRowModelModule, ColDef, ColGroupDef, GridApi, GridOptions, ModuleRegistry, NumberFilterModule, enableDevValidations, } from "ag-grid-community"; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, SetFilterModule, } from "ag-grid-enterprise"; import { IOlympicData } from "./interfaces"; import { useFetchJson } from "./useFetchJson"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableDevValidations(); } const modules = [ ClientSideRowModelModule, ColumnsToolPanelModule, ColumnMenuModule, ContextMenuModule, SetFilterModule, NumberFilterModule, ]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []); const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []); const [columnDefs, setColumnDefs] = useState([ // set filters { field: "athlete", filter: true }, { field: "country", filter: "agSetColumnFilter" }, // number filters { field: "gold", filter: "agNumberColumnFilter" }, { field: "silver", filter: "agNumberColumnFilter" }, { field: "bronze", filter: "agNumberColumnFilter" }, ]); const defaultColDef = useMemo(() => { return { flex: 1, minWidth: 200, floatingFilter: true, }; }, []); const { data, loading } = useFetchJson( "https://www.ag-grid.com/example-assets/olympic-winners.json", ); return (
rowData={data} loading={loading} columnDefs={columnDefs} defaultColDef={defaultColDef} />
); }; const root = createRoot(document.getElementById("root")!); root.render( , ); ``` [Live example: Enabling Set Filters](https://www.ag-grid.com/archive/36.3.0/examples/filter-set/enabling-set-filters/reactFunctionalTs/) ## Set Filters in the Advanced Filter Where the [Advanced Filter](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-advanced-columns/#set-filters) is enabled, a column that enables a Set Filter also offers `is any of` and `is none of` there, reusing the column's own Set Filter configuration and matching the same rows a selection in the Filter List would. `filterParams.filterOptions` decides for any column: a list naming `isAnyOf` or `isNoneOf` offers them on a column with a different filter, and a list leaving them out withholds them here. See [Enabling and Disabling the Set Options](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-advanced-columns/#enabling-and-disabling-the-set-options). ## Suppress Set Filter by Default When `filter = true`, the Set Filter is used for AG Grid Enterprise by default. To use the [Text Filter](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-text/), [Number Filter](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-number/) or [Date Filter](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-date/) instead based on the [Cell Data Type](https://www.ag-grid.com/archive/36.3.0/react-data-grid/cell-data-types/) (as in AG Grid Community), set the grid option `suppressSetFilterByDefault = true`. Since the column is then no longer a Set Filter, it also stops offering `is any of` and `is none of` in the [Advanced Filter](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-advanced-columns/#set-filters) unless its [`filterOptions`](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-advanced-columns/#enabling-and-disabling-the-set-options) name them. ## Set Filter Parameters Set Filters are configured through the `filterParams` attribute of the column definition (`ISetFilterParams` interface): | Property | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `applyMiniFilterWhileTyping` | `boolean` | | `false` | Set to `true` to apply the Set Filter immediately when the user is typing in the Mini Filter. See [Keyboard Shortcuts](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-mini-filter/#keyboard-shortcuts) for more information. | | `browserAutoComplete` | `boolean \| string` | | | Overrides the browser's autocomplete/autofill behaviour by updating the `autocomplete` attribute on the component's input field(s). Possible values are: `true` to allow the **default** browser autocomplete/autofill behaviour. `false` to disable the browser autocomplete/autofill behaviour by setting the `autocomplete` attribute to `off`. A **string** to be used as the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute value. If omitted, the value of `enableInputAutoComplete` is used. Some browsers do not respect setting the HTML attribute `autocomplete="off"` and display the auto-fill prompts anyway. | | `buttons` | `FilterAction[]` | | | Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are: `'apply'`: If the Apply button is present, the filter is only applied after the user hits the Apply button. `'clear'`: The Clear button will clear the (form) details of the filter without removing any active filters on the column. `'reset'`: The Reset button will clear the details of the filter and any active filters on that column. `'cancel'`: The Cancel button will discard any changes that have been made to the filter in the UI, restoring the applied model. | | `caseSensitive` | `boolean` | | `false` | If `true`, enables case-sensitivity in the SetFilter Mini-Filter and Filter List. | | `cellHeight` | `number` | | | The height of values in the Filter List in pixels. | | `cellRenderer` | `any` | | | Similar to the Cell Renderer for the grid. Setting it separately here allows for the value to be rendered differently in the filter. See [Filter List Cell Renderer](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-filter-list/#cell-renderer) for more information. | | `closeOnApply` | `boolean` | | `false` | If the Apply button is present, the filter popup will be closed immediately when the Apply or Reset button is clicked if this is set to `true`. | | `comparator` | `Function` | | | Comparator for sorting. If not provided, the Column Definition comparator is used. If Column Definition comparator is also not provided, the default (grid provided) comparator is used. See [Sorting Filter Lists](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-filter-list/#sorting-filter-lists) for more information. | | `debounceMs` | `number` | | | Overrides the default debounce time in milliseconds for the filter. Defaults are: `TextFilter` and `NumberFilter`: 500ms. (These filters have text field inputs, so a short delay before the input is formatted and the filtering applied is usually appropriate). `DateFilter` and `SetFilter`: 0ms | | `defaultToNothingSelected` | `boolean` | | | By default, when the Set Filter is opened all values are shown selected. Set this to `true` to instead show all values as de-selected by default. This does not work when `excelMode` is enabled. See [Default State](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-filter-list/#default-state) for more information. | | `excelMode` | `'mac' \| 'windows'` | | | Changes the behaviour of the Set Filter to match that of Excel's AutoFilter. See [Excel Mode](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-excel-mode/) for more information. | | `keyCreator` | `Function` | | | Function to return a string key for a value. This is required when the filter values are complex objects, or when `treeList = true` and the column is a group column with Tree Data or Grouping enabled. If not provided, the Column Definition Key Creator is used. | | `preservePreviousValues` | `boolean` | | `false` | If `true`, values that leave the data (or the provided values) stay in the Filter List with their selected state, so they are filtered the same way when they return. Model values not in the data are kept too. See [Preserving Previous Values](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-data-updates/#preserving-previous-values) for more information. | | `preservePreviousValuesLabel` | `string` | | | Requires `preservePreviousValues = true`. Text shown as given after each value in the Filter List that is no longer in the data, for example `'(not in rows)'`. See [Preserving Previous Values](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-data-updates/#preserving-previous-values) for more information. | | `preservePreviousValuesLimit` | `number` | | `1000` | Requires `preservePreviousValues = true`. The most values not in the filter model to keep once they are no longer in the data; the first to leave is discarded first. Values in the filter model, or named by an applied Advanced Filter expression, are always kept and not counted. Set to `0` to keep only those, or `-1` for no limit, so memory use is unbounded. See [Limiting Preserved Values](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-data-updates/#limiting-preserved-values) for more information. | | `readOnly` | `boolean` | | `false` | If set to `true`, disables controls in the filter to mutate its state. Normally this would be used in conjunction with the Filter API. See [Read-only Filter UI](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-api/#read-only-filter-ui) for more information. | | `refreshValuesOnOpen` | `boolean` | | | Refresh the values every time the Set filter is opened. See [Refreshing Values](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-filter-list/#refreshing-values) for more information. | | `showTooltips` | `boolean` | | `false` | If `true`, hovering over a value in the Set Filter will show a tooltip containing the full, untruncated value. See [Filter Value Tooltips](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-filter-list/#filter-value-tooltips) for more information. | | `suppressClearModelOnRefreshValues` | `boolean` | | | By default, if using provided filter values and there is an active filter model, when the filter values are refreshed such that every value is in the filter model, the filter model will be cleared (reset to `null`), unless `preservePreviousValues` is set. To prevent this behaviour, set this property to `true`. This is useful if using SSRM and updating the filter values based on other column filters. | | `suppressMiniFilter` | `boolean` | | `false` | Set to `true` to hide the Mini Filter. See [Hiding the Mini Filter](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-mini-filter/#hiding-the-mini-filter) for more information. | | `suppressSelectAll` | `boolean` | | `false` | Set to `true` to remove the Select All checkbox. | | `suppressSorting` | `boolean` | | `false` | If `true`, the Set Filter values will not be sorted. Use this if you are providing your own values and don't want them sorted as you are providing in the order you want. See [Supplying Filter Values](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-filter-list/#supplying-filter-values) for more information. | | `textFormatter` | `Function` | | | If specified, this formats the text before applying the Mini Filter compare logic, useful for instance to substitute accented characters. See [Custom Searches](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-mini-filter/#custom-searches) for more information. | | `treeList` | `boolean` | | | If `true`, the Set Filter List will be displayed in a tree format. If enabled, one of the following must be true: A `treeListPathGetter` is provided to get the tree path for the column values. The column values are of type `Date`, in which case the tree will be year -> month -> day. Tree Data mode is enabled and the column is the group column. The Filter List will match the tree structure. A Key Creator must be supplied. Grouping is enabled and the column is the group column. The Filter List will match the group structure. A Key Creator must be supplied. See [Tree List](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-tree-list/) for more information. | | `treeListFormatter` | `Function` | | | Requires `treeList = true`. If specified, this formats the tree values before they are displayed in the Filter List. `pathKey` - The key for the current node in the tree. `level` - The level of the current node in the tree (starting at 0). `parentPathKeys` - The keys of the parent nodes up until the current node (exclusive). This will be an empty array if the node is at the root level. See [Tree List](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-tree-list/) for more information. | | `treeListPathGetter` | `Function` | | | Requires `treeList = true`. If provided, this gets the tree path to display in the Set Filter List based on the column values. Each row must map to a leaf value in the tree. The `value` argument may be `null` — for example on group rows or when the `field` is absent from the row data; the callback must handle this. See [Tree List](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-tree-list/) for more information. | | `valueFormatter` | `Function` | | | If specified, this formats the value before it is displayed in the Filter List. If a Key Creator is provided (see `keyCreator`), this must also be provided. | | `values` | `SetFilterValues` | | | The values to display in the Filter List. If this is not set, the filter will take its values from what is loaded in the table. See [Supplying Filter Values](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-filter-list/#supplying-filter-values) for more information. | ### Updating Set Filter Parameters When new column definitions are set, the Set Filter updates to reflect them and keeps the selected values that are still among its values, or every selected value with [`preservePreviousValues`](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-data-updates/#preserving-previous-values). The Set Filter is reset instead, clearing its filter model, when the update changes how its values are identified: - `caseSensitive` is changed. - A `keyCreator` you supply is changed, `filterParams.keyCreator` taking precedence over the column's. - `treeList` is changed on a group column. - The source of the values, such as `field`, `valueGetter` or `filterValueGetter`, is changed, unless the Set Filter lists [Supplied Values](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-set-filter-list/#supplying-filter-values) both before and after the update. - The column's `valueFormatter` is changed, where its [Cell Data Type](https://www.ag-grid.com/archive/36.3.0/react-data-grid/cell-data-types/#pre-defined-cell-data-types) identifies values by their formatted text, such as `date` or `object`, and no `keyCreator` is supplied. This includes the formatter the data type provides, which is rebuilt whenever new `dataTypeDefinitions` are set. Functions are compared by reference, so a new function resets the Set Filter even when it returns the same result. When a Set Filter inside a [Multi Filter](https://www.ag-grid.com/archive/36.3.0/react-data-grid/filter-multi/) is reset, the whole Multi Filter is reset. For the function-valued properties above, memoise the individual functions (e.g. define them via `useCallback` outside of the column definition), and memoise `dataTypeDefinitions`, to avoid resetting the Set Filter when passing new column definitions.