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 by using the Grid's API:
api.setQuickFilter('new filter text');
If you are using a framework such as Angular or React, you can set bind the quick filter text to the
quickFilter attribute.

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.

Quick Filter Cache

By default, the quick filter checks each columns value, including running it's value getters
if present, each time the quick filter is executed. If your data set is large, you may wish
to enable the quick filter cache by setting cacheQuickFilter=true.

When the cache is enabled, 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\nCOFFEE 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.

Reset Cache Text

Quick filter cache text 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.

If you are not using the cache setting, then you can ignore all this.

Quick Filter Example

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

E - Complex object, not getQuickFilterText provided, so the quick filter text ends up with '[object,object]' for this column.

The example also demonstrates using the cache vs not using the cache. Selecting one of the following
will reset the grid and work as follows:

Normal Quick Filter: The cache is not used. Value getters are executed on each node each
time the filter is executed.

Cache Quick Filter: The cache is used. Value getters are executed first time the quick
filter is run.

To see the quick filter text attached to each node while using the cache, 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.

Welcome to ag-Grid

Niall Crosby spent years building Enterprise Web Applications and found the JavaScript
data grid choice frustrating. That frustration led to Niall quitting his job and
setting up the ag-Grid project.
Read more about ag-Grid →