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

Text Filter

Text filters allow users to filter data based on the text contained in the column where this filter is defined. To create a new text filter in a column, all you need to do is:

  1. Enable filtering on that column
  2. Set the filter type to text

In order to set the filter type to text you need to add the following to your column definition

colDef:{
    filter:'text'
}

Enterprise users have Set Filter as the default type

Non enterprise users have text filter as the default filter type. If you are not enterprise user, you don't need to specify filter:'text' since it is your default filter type

Text Filter Parameters

A text filter can take the following parameters:

  • newRowsAction: What to do when new rows are loaded. The default is to reset the filter. If you want to keep the filter status between row loads, then set this value to 'keep'.
  • applyButton: Set to true to include an 'Apply' button with the filter and not filter automatically as the selection changes.
  • clearButton: Set to true to include a 'Clear' button with the filter which when cliked will remove the filter conditions to this filter.
The parameters for the filter must be specified in the property filterParams inside the column definition object

colDef:{
    filter:'text',
    filterParams:{
        ...
    }
}

Text Filter Model

Get and set the state of the text filter by getting and setting the model on the filter instance.

// get filter instance
var athleteFilterComponent = gridOptions.api.getFilterInstance('athlete');

// get filter model
var model = athleteFilterComponent.getModel();

// OR set filter model and update
athleteFilterComponent.setModel({
    type:'endsWith',
    filter:'thing'
});
athleteFilterComponent.onFilterChanged()

The text filter model has the following attributes:

  • type: The type of text filter to apply. One of: {equals, notEquals, contains, notContains, startsWith, endsWith}
  • filter: The actual filter text to apply.

Floating Text Filter

If your grid has floatingFilter enabled, your columns with text filter will automatically show below the header a new column that will show two elements:

  • Filter input box: This input box serves two purposes:
    1. Lets the user change directly the filtering text that will be used for filtering.
    2. It reflects any change made to the filtering text from anywhere within the application. This includes changes on the rich filter for this column made by the user directly or changes made to the filter through a call to setModel to this filter component
  • Filter button: This button is a shortcut to show the rich filter editor

Common Column Filtering Functionality And Examples

The following can be found in the column filtering documentation page

  • Common filtering params
  • Enabling/Disabling filtering in a column
  • Enabling/Disabling floating filter
  • Adding apply and clear button to a column filter
  • Filtering animation
  • Examples