AG Grid
Results:
Loading...
Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

JavaScript Data Grid: Set Filter - Overview

The Set Filter takes inspiration from Excel's AutoFilter and allows filtering on sets of data. It is built on top of the shared functionality that is common across all Provided Filters.

Set Filter

Set Filter Sections

The Set Filter is comprised of the following sections:

  • 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: a list of Set Filter Values which can be selected / deselected to set the filter.
  • Filter 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, but it can also be explicitly configured as shown below:

const gridOptions = {
    columnDefs: [
        // 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' },
    ],

    // other grid options ...
}

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 using filter='agNumberColumnFilter'.
  • Filters can be accessed from the Column Menu or by clicking on the filter icon in the Floating Filters.

Set Filter Parameters

Parameters that are common to all Provided Filters:

buttons
string[]
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.
closeOnApply
boolean
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.
Default: false
debounceMs
number
By default the Text and Number filters will debounce by 500ms. This is because these filters have text field inputs, so time is given to the user to type items in before the input is formatted and the filtering applied. The Set and Date will execute immediately (no debounce). To override these defaults, set debounceMs to the number of milliseconds to debounce by.
newRowsAction
string
This property is for when using the Client Side Row Model only. When set to 'clear', updating the data in the grid by calling api.setRowData() (or updating the rowData property if bound by a framework) will clear (reset) the filter. If you instead set this to 'keep', the grid will keep its currently set filter when the data is updated.
Default: 'clear'
Options: 'clear', 'keep'

Parameters that are specific to the Set Filter:

values
SetFilterValues
The values to display in the Filter List. If this is not set, the filter will takes its values from what is loaded in the table. See Supplying Filter Values.
values: SetFilterValues;

type SetFilterValues = 
      SetFilterValuesFunc 
    | any[]


type SetFilterValuesFunc = 
      (params: SetFilterValuesFuncParams) => void


interface SetFilterValuesFuncParams {
  // The function to call with the values to load into the filter once they are ready. 
  success: (values: string[]) => void;
  // The column definition from which the set filter is invoked. 
  colDef: ColDef;
}
refreshValuesOnOpen
boolean
Refresh the values every time the Set filter is opened. See Refreshing Values.
cellHeight
number
The height of values in the Filter List in pixels.
suppressSorting
boolean
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. Default: false See Supplying Filter Values.
cellRenderer
{ new(): ICellRendererComp; } | ICellRendererFunc | string
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.
cellRenderer: { new(): ICellRendererComp; } | ICellRendererFunc | string;

interface ICellRendererFunc {
    (params: ICellRendererParams) : HTMLElement | string
}
suppressMiniFilter
boolean
Set to true to hide the Mini Filter. Default: false See Hiding the Mini Filter.
applyMiniFilterWhileTyping
boolean
Set to true to apply the Set Filter immediately when the user is typing in the Mini Filter. Default: false See Keyboard Shortcuts.
suppressSelectAll
boolean
Set to true to remove the Select All checkbox. Default: false
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. See Default State.
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.
comparator = (
    a: any,
    b: any
) => number;
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.
textFormatter = (from: string) => string;
valueFormatter
Function
(params: ValueFormatterParams) => string
valueFormatter = (
    params: ValueFormatterParams
) => string;

interface ValueFormatterParams {
  // Value for the cell. 
  value: any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
showTooltips
boolean
If true, hovering over a value in the Set Filter will show a tooltip containing the full, untruncated value. Default: false See Filter Value Tooltips.
excelMode
'mac' | 'windows'
Changes the behaviour of the Set Filter to match that of Excel's AutoFilter. See Excel Mode.

Next Up

Continue to the next section: Filter List.