Column Filter

Column filters are filters that are applied to the data at the column level. Many column filters can be active (eg filters set on different columns) and the grid will display rows that pass each column's filter.

Column filters are access in the grid UI either in the Column Menu or the Tool Panel.

Access via Column Menu
 Access via Tool Panel

You can use the Provided Filters that come with the grid, or you can build your own Filter Components if you want to customise the filter experience to your application.

Example Simple Filters

The example below demonstrates simple filters. The following can be noted:

  • Column Athlete has a simple text filter.
  • Column Age has a simple number filter.
  • Column Date has a simple date filter.

Configuring Filters to Columns

Set filtering on a column using the column definition property filter. The property can have one of the following values:

  • boolean: Set to 'true' to enable the default filter. the default is Text Filter for ag-Grid Community and Set Filter for ag-Grid Enterprise
  • string / component: Provide a specific filter to use over the default filter.

Below shows some column definitions with filters set:

columnDefs: [ // sets the text filter {field: "athlete", filter: "agTextColumnFilter"}, // sets the number filter {field: "age", filter: "agNumberColumnFilter"}, // use the default filter {field: "gold", filter: true}, // use no filter (leaving unspecified means use no filter) {field: "sport"} ]

If you want to enable filters on all columns then set a filter on the Default Column Definition. The following code snippet shows setting filter=true for all columns via the defaultColDef and then setting filter=false for the Sport column, so all columns have a filter except Sport.

gridOptions = { ... // anything specified in defaultColDef gets applied on all columns defaultColDef: { filter: true // set filtering on for all cols }, // then define individual column definitions columnDefs: [ // filter not specified, defaultColDef setting is used {field: "athlete"}, {field: "age"}, // filter specifically set to 'false' {field: "sport", filter: false} // use no filter ] }

Filter Parameters

Each filter can take additional filter parameters by setting colDef.filterParams. What parameters each filter type takes is specific to each filter. The parameters for the provided filters are explained in their relevant sections.

Below shows configuring the text filter on an Athlete column and providing extra filter parameters (what resetButton and applyButton do are explained in Apply, Clear and Reset Buttons).

columnDefinition = { field: 'athlete' // set the column to use text filter filter: 'agTextColumnFilter', // pass in additional parameters to the text filter filterParams: { resetButton: true, applyButton: true, debounceMs: 200 } }

Filter Events

Filtering results in the following events getting emitted:

  • Filter Changed: Filter has changed and applied by the grid.
  • Filter Modified: Filter UI has changed but not necessarily applied. This is useful when using an apply button and you want to know if the filter changed but not applied.

Filtering Animation

To enable animation of the rows after filtering, set grid property animateRows=true.

Relation to Quick Filter and External Filter

Column filters work independent to Quick Filter and External Filter. If a quick filter and / or external filter are applied along with a column filter, then each filter type is considered and the row will only pass if it passes all three types.

Column filters are tied to a column. Quick filter and external filter are not tied to a column. This section of the documentation talks about column filters only. For quick filter and external filter, see the relevant sections of the documentation.

Provided Filters

There are four provided filters that come with the grid. The provided filters are as follows:

Filter Description
agNumberColumnFilter A Number Filter for number comparisons.
agTextColumnFilter A Text Filter for string comparisons.
agDateColumnFilter A Date Filter for date comparisons.
agSetColumnFilter A Set Filter, influenced by how filters work in Microsoft Excel. This is an ag-Grid-Enterprise feature.

The section Provided Filters for details on using them.