AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting Started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
AI ToolkitMCP ServerSkills
Layout & Styling
Design SystemGrid Layout
Charting
Core Features
Advanced Features

Angular Data GridAdvanced Filter - Columns & Filter Options

Version 36.2.0
Enterprise

Configure which columns appear in the Advanced Filter including how they are named and which filter options each offers based on its Cell Data Type or filter used.

Columns Copy Link

Every column with filtering enabled appears in the Advanced Filter under its header name, with the exceptions and overrides described below.

Including Hidden Columns Copy Link

By default, hidden columns do not appear in the Advanced Filter. To make hidden columns appear, set the grid option includeHiddenColumnsInAdvancedFilter = true.

includeHiddenColumnsInAdvancedFilterCopy Link
boolean
default: false
Hidden columns are excluded from the Advanced Filter by default. To include hidden columns, set to true.
AdvancedFilterModule

Column Names Copy Link

All column names that are enabled for filtering must be unique for the Advanced Filter to work correctly.

If columns have the same name by default (e.g. where they appear within different column groups), the name by which they appear in the Advanced Filter can be configured using a Header Value Getter and checking for location === 'advancedFilter'.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    {
        field: 'gold',
        headerValueGetter: params => params.location === 'advancedFilter' ? 'Gold 1' : 'Gold',
    },
    {
        field: 'gold',
        headerValueGetter: params => params.location === 'advancedFilter' ? 'Gold 2' : 'Gold',
    },
];

The following example demonstrates the column properties involved:

  • The Age column is not available in the filter as filter = false.
  • The Sport column is not available in the filter by default as hidden columns are excluded.
  • After clicking Include Hidden Columns, the Sport column is available in the filter.
  • The Group column does not appear in the filter, but its underlying column - Country - always appears.
  • The Athlete column has Filter Params defined, so that it only shows the contains option and is case sensitive.
  • The Gold, Silver and Bronze columns in the Medals (-) column group have a headerValueGetter defined and use the location property to have a different name in the filter (with a (-) suffix).

Cell Data Type Handling Copy Link

All of the Cell Data Types are supported in the Advanced Filter. The behaviour of each is described below.

  • Text - The value in the input is compared against the cell value before any Value Formatters are applied (similar to the Text Filter). To change the value being compared against, a Filter Value Getter can be used.
  • Number - The value in the input is compared against the cell value (like in the Number Filter). A column pairing a numberParser with a numberFormatter has its operands read and displayed in its own format, so custom formats such as thousands separators are accepted. Either one on its own leaves the operand as a plain number: the grid only reads a format it can also write. A format containing a space is quoted in the expression, so [Value] = "1 234 567" is read as one operand. A format the parser does not read back as the same number is shown as a plain number instead.
  • BigInt - The value in the input is parsed as a bigint (decimal integer syntax only, optional trailing n) and compared against the cell value (like in the BigInt Filter). A column's bigintParser is used here too, so custom formats such as hexadecimal are also accepted, and its bigintFormatter is used to display a stored operand in the filter expression and the Filter Builder.
  • Boolean - No values are displayed for booleans as the filter option is used instead.
  • Date and Date Time - The value in the input is converted to a Date via the Value Parser.
  • Date String and Date Time String - The value in the input is converted to a Date using the Value Parser and the Date Parser. This is compared against the cell values, which are also converted using the Date Parser.
  • Object - The value in the input is compared against the values returned by the Filter Value Getter if one is provided. Otherwise, the cell values are converted using the Value Formatter.

Filter Parameters Copy Link

Certain properties can be set by using colDef.filterParams.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    {
        field: 'athlete',
        filterParams: {
            // perform case sensitive search
            caseSensitive: true,
            // limit options to `contains` only
            filterOptions: ['contains'],
        }
    }
];

For all Cell Data Types, the available filter options can be set via filterOptions.

The available options are as follows:

Option NameOption KeyCell Data Type
containscontainstext, object
does not containnotContainstext, object
equalsequalstext, object
=equalsnumber, bigint, date, dateString, dateTime, dateTimeString
does not equalnotEqualtext, object
!=notEqualnumber, bigint, date, dateString, dateTime, dateTimeString
begins withstartsWithtext, object
ends withendsWithtext, object
is blankblanktext, number, bigint, boolean, date, dateString, dateTime, dateTimeString, object
is not blanknotBlanktext, number, bigint, boolean, date, dateString, dateTime, dateTimeString, object
>greaterThannumber, bigint, date, dateString, dateTime, dateTimeString
>=greaterThanOrEqualnumber, bigint, date, dateString, dateTime, dateTimeString
<lessThannumber, bigint, date, dateString, dateTime, dateTimeString
<=lessThanOrEqualnumber, bigint, date, dateString, dateTime, dateTimeString
is betweeninRangenumber, bigint, date, dateString, dateTime, dateTimeString
is truetrueboolean
is falsefalseboolean
is any ofisAnyOfcolumn enables a Set Filter*
is none ofisNoneOfcolumn enables a Set Filter*

* Offered where the column enables a Set Filter. Other columns can opt in — see Enabling and Disabling the Set Options.

is between takes two values, written as a comma-separated pair: [Age] is between (21, 38). The range is exclusive of both ends unless inRangeInclusive = true is set, exactly as it is in the Number Filter and the Date Filter.

The two values are validated against each other, as the column filters validate the pair of inputs they show for a range: the first must be below the second, or equal to it where inRangeInclusive = true is set. A range whose values are in the wrong order is invalid and is not applied.

For text and object Cell Data Types, caseSensitive = true can be set to enable case sensitivity.

Text is compared the way the column's Text Filter compares it, so the same condition matches the same rows in both:

  • textFormatter formats the cell value and the operand before they are compared, to substitute accented characters for example. It takes the place of the lower-casing the grid does by default, so caseSensitive no longer has any effect and a formatter that should ignore case has to lower-case the text itself.
  • textMatcher decides the comparison itself. It is called for contains, does not contain, equals, does not equal, begins with and ends with, but not for is blank or is not blank.
  • trimInput removes leading and trailing whitespace from the operand. An operand of only whitespace is left as it was entered.

textFormatter and textMatcher are both told which filter is calling them: params.source is 'advancedFilter' here and 'columnFilter' when the column's own filter is comparing, so one callback can behave differently for each.

All three are read from the column's Text Filter. On a Multi Filter column they come from its Text Filter child, as they do for the Multi Filter itself. On a Set Filter column, filterParams.textFormatter formats the list of values shown in the filter instead, and is not used to compare text here.

trimInput applies wherever the operand is set, including a model set through setAdvancedFilterModel, so getAdvancedFilterModel returns the trimmed value, and the Filter Builder shows the trimmed operand. The column filter trims the model it applies in the same way.

For number, date, dateString, dateTime and dateTimeString Cell Data Types, the following properties can be set to include blank values for the relevant options:

  • includeBlanksInEquals = true
  • includeBlanksInNotEqual = true
  • includeBlanksInLessThan = true
  • includeBlanksInGreaterThan = true
  • includeBlanksInRange = true

For date, dateString, dateTime and dateTimeString Cell Data Types, the Date Filter's comparator also decides the column's comparisons here, including the relative date options below. This is how a column whose cells carry a time is compared by date alone. The comparator is given the cell value as the column holds it, and isValidDate gates every comparison alongside it:

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    {
        field: 'date',
        cellDataType: 'date',
        filter: 'agDateColumnFilter',
        filterParams: {
            // ignore the time the cell carries, so `[Date] = 24/08/2008` matches the whole day
            comparator: (filterLocalDateAtMidnight, cellValue) => {
                const cellDate = new Date(cellValue);
                cellDate.setHours(0, 0, 0, 0);
                return cellDate.getTime() - filterLocalDateAtMidnight.getTime();
            },
        },
    },
];

It applies equally where the Date Filter is a child of a Multi Filter. A custom filter component's filterParams are its own. A Set Filter column's comparator orders its values instead, so it is not read as a date comparison there, but an isValidDate set on such a column still gates the comparisons above.

These settings only apply when using the Client-Side Row Model. You need to implement support for these in your server-side filtering logic when using the Server-Side Row Model.

Relative Date Options Copy Link

date, dateString, dateTime and dateTimeString columns also support the Date Filter's built-in relative date options, under names of their own. As in the Date Filter, none of them is offered by default: a column opts in by naming them in filterOptions.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    {
        field: 'date',
        cellDataType: 'date',
        filterParams: {
            filterOptions: ['equals', 'thisYear', 'lastYear'],
        },
    },
];

The Advanced Filter names each of them as a phrase, where the Date Filter names it as a label:

Option NameOption Key
is yesterdayyesterday
is todaytoday
is tomorrowtomorrow
is in last 7 dayslast7Days
is in last weeklastWeek
is in this weekthisWeek
is in next weeknextWeek
is in last 30 dayslast30Days
is in last monthlastMonth
is in this monththisMonth
is in next monthnextMonth
is in last 90 dayslast90Days
is in last quarterlastQuarter
is in this quarterthisQuarter
is in next quarternextQuarter
is in last yearlastYear
is in this yearthisYear
is in year to dateyearToDate
is in next yearnextYear
is in last 6 monthslast6Months
is in last 12 monthslast12Months
is in last 24 monthslast24Months

They take no value, so an expression is the column and the option alone — [Date] is in last year — and the filter model holds only the option key:

const advancedFilterModel = { filterType: 'date', colId: 'date', type: 'lastYear' };

Relative date options do not take a value, so they cannot be used as bounds for is between. To cover consecutive relative dates, combine the options with OR, for example: [Date] is yesterday OR [Date] is today OR [Date] is tomorrow.

Relative date options remain relative to the current date rather than being converted to fixed dates. This means a saved filter model retains the same relative meaning whenever it is restored. With the Server-Side Row Model, the option key is sent to the server without date values, consistent with the Date Filter — see Preset Date Range Filters.

The following example demonstrates the built-in range and relative date options:

  • The Age column offers is between, which it and every other Number column do by default.
  • The Date column narrows its options to =, is between, is in last 7 days, is in last 30 days, is in this year, is in last year and is in last 24 months.

Set Filters Copy Link

A column with a Set Filter gains the is any of and is none of options, in addition to everything its Cell Data Type already offers. Both take a list of values:

[Country] is any of ["Australia", "Italy"]
[Country] is none of ["Australia", "Italy"]

In the following example, Country uses a Set Filter with a cellRenderer that adds flags, Athlete formats its values through filterParams.valueFormatter, and Date is a Tree List. Sport and Gold use Text and Number Filters, so they do not offer the set options:

Writing the Value List Copy Link

Typing inside the list suggests the column's Set Filter values, with no opening quote required. Selecting one writes it quoted and ready for the next; values already in the list are not suggested again, and deleting one returns it to the list. In the Advanced Filter Builder the value pill opens the column's own Set Filter.

The square brackets are part of the grammar: a list written without them cannot be applied. Quotes, on the other hand, are only needed where a value would otherwise be read as something else. A value containing , or ], or beginning with a quote, is one such: typed bare, those characters end the value, close the list, or open a quoted one. Choose such a value from the suggestions, which writes it quoted, or open a quote before typing it, after which they are all ordinary and the suggestions still narrow as you type. A value written without quotes may contain spaces, and is trimmed:

[Country] is any of [New Zealand, Italy]

Blank values are offered as (Blanks), the name the Set Filter gives them. The model stores null for it.

[Country] is any of ["(Blanks)", Italy]

Reusing the Set Filter Configuration Copy Link

The column's Set Filter configuration is reused, so an expression matches the same rows as the equivalent Set Filter selection, and its filterParams (such as a cellRenderer, valueFormatter or treeList) apply to the suggested values too. A Multi Filter column uses the filterParams of its Set Filter child.

Values are displayed and matched as the Set Filter displays them. With filterParams.valueFormatter, the formatted text is shown and typed, while the filter model still stores the underlying keys. To store formatted values in the model instead, use colDef.filterValueGetter. Where two keys format to the same text, the first keeps that text and the rest are written as their key.

A filterParams.values callback may be called more than once for the same column, as the Advanced Filter resolves values separately from the column filter. Matching runs under the Client-Side Row Model only; with the Server-Side Row Model the option is sent to the server in the filter model.

Tree List Values Copy Link

With treeList enabled, a value is the whole path to a leaf, its segments separated by >. The › the suggestions are drawn with is read as a separator too:

[Location] is any of ["Europe > Italy"]

The suggestions are every path in the column as one flat list, parent segments de-emphasised: typing searches every path, and choosing one writes it in full.

A path can also be written a segment at a time, ["Europe" > "Italy"], which is what a segment containing a separator of its own needs. Both spellings name the same path, and the suggestions write whichever one reads back.

Data Updates Copy Link

Advanced Filter expressions are the source of truth, so changes to the row data never rewrite them. An expression naming a value the data no longer holds is reported against that value and cannot be applied, while an expression already applied keeps its model and keeps filtering.

Enabling and Disabling the Set Options Copy Link

By default, is any of and is none of are offered only on columns using a Set Filter. Setting filterOptions overrides this, as the list then defines exactly which options the column offers:

  • Include isAnyOf or isNoneOf in the list to offer them on a column with any other filter type.
  • Leave them out of the list to remove them from a Set Filter column.
const gridOptions = {
    columnDefs: [
        // A Set Filter column offers the Set Options as well as those of its Cell Data Type.
        { field: 'country', filter: 'agSetColumnFilter' },
        // A Number Filter includes Set Options via filterOptions.
        {
            field: 'age',
            filter: 'agNumberColumnFilter',
            filterParams: {
                filterOptions: ['greaterThan', 'lessThan', 'isAnyOf', 'isNoneOf'],
            },
        },
        // A Set Filter column that does not include the Set Options, just its filterOptions
        {
            field: 'sport',
            filter: 'agSetColumnFilter',
            filterParams: {
                filterOptions: ['contains', 'equals'],
            },
        },
    ],
};

A column with a filter other than the Set Filter keeps that filter and its filterParams unchanged. Its values are offered unconfigured, apart from colDef.keyCreator and colDef.filterValueGetter.

The SetFilterModule must be registered. Without it, naming either option in filterOptions reports a missing module and the column falls back to its default options.

Row Grouping, Aggregation and Pivoting Copy Link

When Row Grouping, group columns will not appear in the Advanced Filter. The underlying columns will always appear, even if hidden.

The Advanced Filter will only work on leaf-level rows when using Aggregation. The groupAggFiltering property will be ignored.

When Pivoting, Pivot Result Columns will not appear in the Advanced Filter. However, primary columns (including underlying group and pivot columns) will be shown in the Advanced Filter.