Data in ag-Grid can be filtered in the following ways:
You have two options for filtering, one is use one of the default built-in filters (easy but restricted to what's provided), or bake your own custom filters (no restrictions, build what you want, but takes more time).
Enable filtering by setting grid property enableFilter=true. This turns on filtering on all columns. To turn off filtering for particular columns, set suppressFilter=true on the individual column definition.
When a filter is active on a column, the filter icon appears before the column name in the header.
The following filter options can be set for a column definition:
|number||A Number Filter for number comparisons.|
|text||A Text Filter for string comparisons.|
|date||A Date Filter for date comparisons.|
|set||A Set Filter, influenced by how filters work in Microsoft Excel. This is an ag-Grid-Enterprise feature.|
|-custom-||A Filter Component where you can provide you own filter written in a framework of your choice.|
If no filter type is specified, the default is 'text' for ag-Grid (free versions) and 'set' for ag-Grid Enterprise.
Each filter can take additional filter params by setting colDef.filterParams. What parameters each filter type takes is explained in the section on each filter. As an example, the following sets parameters for the text filter.
The example below demonstrates:
If you want the user to hit an 'Apply' button before the filter is actioned, add apply=true to the filter parameters. The example below shows this in action for the first three columns.
This is handy if the filtering operation is taking a long time (usually it doesn't), or if doing server side filtering (thus preventing unnecessary calls to the server).
Filtering results in the following events getting emitted:
|filterChanged||Filter has changed.|
|filterModified||Gets called when filter has been modified but filterChanged not necessarily called. This is useful when using an apply button inside the filter, as this event fires when the filter is modified, and then filterChanged is fired when the apply button is pressed.|
The example below also demonstrates using the apply button and filter events as follows:
To enable animation of the rows after filtering, set grid property animateRows=true.
It is possible to access the filter components directly if you want to interact with the specific
filter. This also works for your own custom filters, where you can
get a reference to the underlying filtering instance (ie what was created after ag-Grid called 'new'
on your filter). You get a reference to the filter instance by calling
All of the methods of the IFilter interface are present, assuming the underlying filter implements the method. Your custom filters can add their own methods here that ag-Grid will not use but your application can use. What these extra methods do is up to you and between your customer filter and your application.
The example below shows controlling the country and age filters via the API.
The example also shows 'gridApi.destroyFilter(col)' which completely destroys a filter. Use this is if you want a filter to be created again with new initialisation values.
(Note: the example uses the enterprise set filter).
You can reset a filter to its original state by getting the filter instance and then performing the action that makes sense for the filter type.
For all the filter types the sequence would be:
var filterComponent = gridOptions.api.getFilterInstance('filter_name');
The following are the appropriate methods for the corresponding filter types:
You can reset all filters by doing the following:
It is possible to get and set the state of all the filters via the api methods api.getFilterModel() and api.setFilterModel(). These methods manage the filters states via the getModel() and setModel() methods of the individual filters.
This is useful if you want to save the filter state and apply it at a later state. It is also useful for server side filtering, where you want to pass the filter state to the server.
The example below shows getting and setting all the filter models in action. The 'save' and 'restore' buttons mimic what you would do to save and restore the state of the filters. The big button (Name = 'Mich%'... etc) shows how you can hand craft a model and then set that into the filters.
(Note: the example uses the enterprise set filter).
Floating Filters are an additional row under the column headers where the user will be able to see and optionally edit the filters associated to each column.
Floating filters are activated by setting grid property floatingFilter=true:
Floating filters are an accessory to the main column filters. They do not contain their own state, rather they display the state of the main filter, and if editable they set state on the main filter. Underneath the hood this is done by using the main filters getModel() and setModel() methods. For this reason, there is no api for getting or setting state of the floating filters.
All the default filters provided by ag-Grid provide their own implementation of a floating filter. All you need to do to enable these floating filters is set the floatingFilter=true grid property.
Every floating filter also takes a parameter to show/hide automatically a button that will open the main filter.
To see the specifics on what are all the parameters and the interface for a floating filter check out the docs for floating filter components.
The following example shows the following features of floating filters:
Some of the row models (pagination and infinite scrolling) have further information on how to implement server side filtering. For details on this, see the the sections pagination and infinite scrolling.
If your underlying data representation for a row contains
null it won't be included in the filter results. If
you want to change this behaviour, you can configure the property
The null comparator is an object used to tell if nulls should be included when filtering data, its interface it's like
If any of this properties is specified as true, the grid will include
null values when doing the according filtering.
In the following example you can filter by age or date and see how
null values are included in the filter based
on the combination of filter type and your
inRange will never include