Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Quick Filter

In addition to the column specific filtering, a 'quick filter' (influenced by how filtering is done in Google GMail) can also be applied. Set the quick filter text into the grid options and tell the grid, via the API, to filter the data (which will include the new quick filter).

How it Works

Each node gets a quick filter text attached to it by concatenating all the values for each column. For example, a {Employee Name, Job} table could have a row with quick filter text of 'Niall Crosby_Coffee Maker'. The grid then does a simple string search, so if you search for 'Niall', it will find our example text. Joining all the columns values into one string gives a huge performance boost. The values are joined after the quick filter is requested for the first time and stored in the rowNode - the original data that you provide is not changed.

Overriding the Quick Filter Value

If your data contains complex objects, then the quick filter will end up with [object,object] inside it instead of searchable string values. Or maybe you want to format string values for searching (eg take out accent characters, or take out commas from numbers). If you want to do this, then provide a getQuickFilterText to the column definition, eg:

colDef = {
    headerName: "D", field: "d",
    getQuickFilterText: function(params) {
        return params.value.name;
    }
}
Params contains {value, node, data, column, colDef}.

You only need to override the quick filter value if you have a problem. If you don't have a quick filter problem, you don't need to use it, quick filter will work 'out of the box' in most cases.

Reset Quick Filters

Quick filters can be reset in any of the following ways:

  • Each rowNode has a resetQuickFilterAggregateText method on it - call this to reset the quick filter
  • rowNode.setDataValue(colKey, newValue) will also reset the quick filter
  • Lastly, if using the grid editing features, when you update a cell, the quick filter will get reset.

Quick Filter Example

The example below shows the quick filter working on different data types. Each column demonstrates something different as follows:

  • A - Simple column, nothing complex.
  • B - Complex object with 'dot' in field, quick filter works fine.
  • C - Complex object and value getter used, again quick filter works fine.
  • D - Complex object, quick filter would call 'toString' on the complex object, so getQuickFilterText is provided.
  • E - Complex object, not getQuickFilterText provided, so the quick filter text ends up with '[object,object]' for this column.
To see the quick filter text attached to each node, click 'Print Quick Filter Texts' button after you execute the quick filter at least one. You will notice the quick filter text is correct for each column except E (which would be fixed by adding an appropriate getQuickFilterText method like D does).

Server Side Data

Quick Filters only make sense with client side data (i.e. when using the In Memory row model). For the other row models (pagination, infinite scrolling etc) you would need to implement your own server side sorting to replicate Quick Filter functionality.