React Data GridAdvanced Filter

react logo

The Advanced Filter allows for complex filter conditions to be entered across columns in a single type-ahead input, as well as within a hierarchical visual builder.

Enabling Advanced Filter

The Advanced Filter is enabled by setting the property enableAdvancedFilter = true. By default, the Advanced Filter is displayed between the column headers and the grid rows, where the Floating Filters would be displayed if they were enabled.

const enableAdvancedFilter = true;

<AgGridReact enableAdvancedFilter={enableAdvancedFilter} />

The following example demonstrates the Advanced Filter:

  • Start typing athlete into the Advanced Filter input. As you type, the list of suggested column names will be filtered down.
  • Select the Athlete entry by pressing ↵ Enter or ⇥ Tab, or using the mouse to click on the entry.
  • Select the contains entry in a similar way.
  • After the quote, type michael followed by an end quote (").
  • Press ↵ Enter or click the Apply button to execute the filter.
  • The rows are now filtered to contain only Athletes with names containing michael.
  • Try out each of the columns to see how the different Cell Data Types are handled.
  • Complex filter expressions can be built up by using AND and OR along with brackets - ( and ).

Advanced Filter and Column Filters cannot be active at the same time. Enabling Advanced Filter will disable Column Filters.

Advanced Filter Builder

As well as typing into the Advanced Filter input, Advanced Filters can also be set by using the Advanced Filter Builder. This displays a hierarchical view of the filter, and allows the different filter parts to be set using dropdowns and inputs. It also allows for filter conditions to be added, deleted and reordered.

The Advanced Filter Builder can be launched by clicking the Builder button next to the Advanced Filter input.

The following example demonstrates the Advanced Filter Builder:

  • Click on any of the dropdown pills to change the join operators, columns and filter options.
  • Click on the value pills to change the filter values.
  • Use the drag handles to move the filter conditions or groups around.
  • Use the add and remove buttons to create new conditions or delete existing ones.
  • If the filter is valid (and does not match the already applied filter), click the Apply button to apply the filter.

Configuring Columns

For a column to appear in the Advanced Filter, it needs to have filter: true (or set to a non-null and non-false value).

The type of the filter options displayed is based on the Cell Data Type of the column.

The different properties that can be set for each column are explained in the sections below, and demonstrated in the following example:

  • 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).

Including Hidden Columns

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