Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Vue Data Grid: Filter API

You can access and set the models for filters through the grid API, or access individual filter instances directly for more control. This page details how to do both.

Get / Set All Filter Models

It is possible to get the state of all filters using the grid API method getFilterModel(), and to set the state using setFilterModel(). These methods manage the filters states via the getModel() and setModel() methods of the individual filters.

Gets the current state of all the advanced filters. Used for saving filter state.
getFilterModel = () => { [key: string]: any; };
Sets the state of all the advanced filters. Provide it with what you get from getFilterModel() to restore filter state.
setFilterModel = (model: any) => void;
// Gets filter model via the grid API
const model = this.gridApi.getFilterModel(); 

// Sets the filter model via the grid API

The filter model represents the state of filters for all columns and has the following structure:

// Sample filter model via getFilterModel()
    athlete: {
        filterType: 'text',
        type: 'startsWith',
        filter: 'mich'
    age: {
        filterType: 'number',
        type: 'lessThan',
        filter: 30

This is useful if you want to save the global filter state and apply it at a later stage. It is also useful for server-side filtering, where you want to pass the filter state to the server.

Reset All Filters

You can reset all filters by doing the following:


Example: Get / Set All Filter Models

The example below shows getting and setting all the filter models in action.

  • Save Filter Model saves the current filter state, which will then be displayed.
  • Restore Saved Filter Model restores the saved filter state back into the grid.
  • Set Custom Filter Model takes a custom hard-coded filter model and applies it to the grid.
  • Reset Filters will clear all active filters.
  • Destroy Filter destroys the filter for the Athlete column by calling gridApi.destroyFilter('athlete'). This removes any active filter from that column, and will cause the filter to be created with new initialisation values the next time it is interacted with.

(Note: the example uses the Enterprise-only Set Filter).

Accessing Individual Filter Component Instances

It is also possible to access the filter components directly if you want to interact with a specific filter. This also works for your own custom filters, where you can get a reference to the underlying filtering instance (i.e. what was created when AG Grid called new on your filter). Calling api.getFilterInstance(colKey) will return a reference to the filter instance for the column with key colKey.

Returns the filter component instance for a column. key can be a string field name or a ColDef object (matches on object reference, useful if field names are not unique). If your filter is created asynchronously, getFilterInstance will return null so you will need to use the callback to access the filter instance instead.
getFilterInstance = (
    key: string | Column,
    callback?: (filter: IFilter | null) => void
) => IFilter | null | undefined;

interface IFilter {
  // Returns `true` if the filter is currently active, otherwise `false`. 
  // If active then 1) the grid will show the filter icon in the column header 
  // and 2) the filter will be included in the filtering of the data. 
  isFilterActive(): boolean;
  // The grid will ask each active filter, in turn, whether each row in the grid passes. If any
  // filter fails, then the row will be excluded from the final set. The method is provided a
  // params object with attributes node (the rodNode the grid creates that wraps the data) and data
  // (the data object that you provided to the grid for that row). 
  doesFilterPass(params: IDoesFilterPassParams): boolean;
  // Returns a model representing the current state of the filter, or `null` if the filter is
  // not active. The grid calls `getModel()` on all active filters when `gridApi.getFilterModel()` is called. 
  getModel(): any;
  // Sets the state of the filter using the supplied model. Providing `null` as the model will
  // de-activate the filter. 
  setModel(model: any): void | AgPromise<void>;
  // Gets called when new rows are inserted into the grid. If the filter needs to change its
  // state after rows are loaded, it can do it here. For example the set filters uses this
  // to update the list of available values to select from (e.g. 'Ireland', 'UK' etc for
  // Country filter). To get the list of available values from within this method from the
  // Client Side Row Model, use `gridApi.forEachLeafNode(callback)`. 
  onNewRowsLoaded?(): void;
  // Called whenever any filter is changed. 
  onAnyFilterChanged?(): void;
  // Optional method used by AG Grid when rendering floating filters and there isn't a floating filter
  // associated for this filter, this will happen if you create a custom filter and NOT a custom floating
  // filter. 
  getModelAsString?(model: any): string;
  // A hook to perform any necessary operation just after the GUI for this component has been rendered on the screen.
  // If a parent popup is closed and reopened (e.g. for filters), this method is called each time the component is shown.
  // This is useful for any logic that requires attachment before executing, such as putting focus on a particular DOM element. 
  afterGuiAttached?(params?: IAfterGuiAttachedParams): void;

interface IDoesFilterPassParams {
  // The row node in question. 
  node: RowNode;
  // The data part of the row node in question. 
  data: any;

interface IAfterGuiAttachedParams {
  // Where this component is attached to. 
  container?: ContainerType;
  // Call this to hide the popup. 
  // i.e useful if your component has an action button and you want to hide the popup after it is pressed. 
  hidePopup?: () => void;
  // Set to `true` to not have the component focus its default item. 
  suppressFocus?: boolean;

type ContainerType = 
    | 'contextMenu' 
    | 'toolPanel' 
    | 'floatingFilter'
// Get a reference to the 'name' filter instance
const filterInstance = this.gridApi.getFilterInstance('name');

All of the methods of the filter are available on the instance. If using a custom filter, any other methods you have added will also be present, allowing bespoke behaviour to be added to your filter.

For filters that are created asynchronously, including React 16+ components, getFilterInstance will return null if the filter has not already been created. If your app uses asynchronous components, use the optional callback function which will be invoked with the filter instance when it is available.

// Get a reference to an asynchronously created filter instance
this.gridApi.getFilterInstance('name', filterInstance => {
    // ... use filterInstance here

Re-running Grid Filtering

After filters have been changed via their API, you must ensure the method gridApi.onFilterChanged() is called to tell the grid to filter the rows again. If gridApi.onFilterChanged() is not called, the grid will still show the data relevant to the filters before they were updated through the API.

// Get a reference to the filter instance
const filterInstance = this.gridApi.getFilterInstance('name'); 

// Set the filter model
    filterType: 'text',
    type: 'startsWith',
    filter: 'abc',

// Tell grid to run filter operation again

Reset Individual Filters

You can reset a filter to its original state by getting the filter instance and setting the model to null.

// Get a reference to the filter instance
const filterInstance = this.gridApi.getFilterInstance('name'); 

// Set the model to null

// Tell grid to run filter operation again

Example: Accessing Individual Filters

The example below shows how you can interact with an individual filter instance, using the Set Filter as an example.

  • Get Mini Filter Text will print the text from the Set Filter's Mini Filter to the console.
  • Save Mini Filter Text will save the Mini Filter text.
  • Restore Mini Filter Text will restore the Mini Filter text from the saved state.
  • Reset Filter will reset the filter.

(Note: the example uses the Enterprise-only Set Filter).

Read-only Filter UI

Sometimes it maybe useful to strictly control the filters used by the grid via API, whilst still exposing filter settings in-use to users. The readOnly filter parameter changes the behaviour of all provided column filters so their UI is read-only. In this mode, API filter changes are still honoured and reflected in the UI:

    /* other grid options ... */>

this.columnDefs = [
        field: 'age',
        filter: true,
        filterParams: {
            readOnly: true

The following example demonstrates all of the provided filters with readOnly: true enabled:

  • Simple Column Filters have a read-only display with no buttons; if there is no 2nd condition set then the join operator and 2nd condition are hidden:

  • Set Filter allows Mini Filter searching of values, but value inclusion/exclusion cannot be toggled; buttons are also hidden, and pressing enter in the Mini Filter input has no effect:

    • country, gold, silver and bronze columns demonstrate Set Filter.
  • Multi Filter has no direct behaviour change, sub-filters need to be individually made read-only. readOnly: true is needed to affect any associated Floating Filters.

  • Floating Filters are enabled and inherit readOnly: true from their parent, disabling any UI input.
  • Buttons above the grid provide API interactions to configure the filters.