Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes new

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
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 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:

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

The example also demonstrates using the quick filter cache vs not using the quick filter cache. The grid works very fast even when the cache is turned off - so you probably don't need it. However for those with very large data sets (eg over 10,000 rows), turning the cache on will improve quick filter speed. The cache is demonstrated as follows:

  • Normal Quick Filter: The cache is not used. Value getters are executed on each node each time the filter is executed. Hitting 'Print Quick Filter Texts' will always return back 'undefined' for every row because the cache is not used.
  • Cache Quick Filter: The cache is used. Value getters are executed first time the quick filter is run. Hitting 'Print Quick Filter Texts' will return back the quick filter text for each row which will initially be undefined and then set the the quick filter text after the quick filter is executed for the first time. 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.