Number Filter

Number filters allow users to filter data based on the numbers 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 number

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

colDef: { filter:'agNumberColumnFilter' }

Number Filter Parameters

A number 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.
  • inRangeInclusive: Set to true so that when doing inRange number filters it will include the numbers you specify as minimum and maximum, otherwise it selects only the numbers in between.
  • filterOptions: If specified, limits the amount of options presented in the filter UI, it must be a string array containing some of the following values {equals, notEqual, lessThanOrEqual, greaterThan, greaterThanOrEqual, inRange}
  • defaultOption: If specified, changes the default filter option to one of {equals, notEqual, lessThanOrEqual, greaterThan, greaterThanOrEqual, inRange}. If not specified the default type is {equals}, if {equals} is not available because is removed using filterOptions, then the default is the first item in the filterOptions
  • debounceMs: If specified, the filter will wait this amount of ms after the user stops entering any characters in the input box before is triggered. If not specified this value is 500ms, if the value specified is 0 the filter will be immediately triggered
  • nullComparator: If specified, it will be used to specify if null values should be included when filtering. See: Null filtering
  • suppressAndOrCondition If true, the filter won't offer the ability to add an additional filter condition

The parameters for the filter must be specified in the property filterParams inside the column definition object

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

Number Filter Model

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

// get filter instance var ageFilterComponent = gridOptions.api.getFilterInstance('age'); // get filter model var model = ageFilterComponent.getModel(); // OR set filter model and update ageFilterComponent.setModel({ type:'lessThan', filter:35 }); ageFilterComponent.onFilterChanged() // NOTE number filter allows for ranges ageFilterComponent.setModel({ type:'inRange', filter:30, filterTo:35 }); ageFilterComponent.onFilterChanged()

The number filter model has the following attributes:

  • type: The type of number filter to apply. One of: {equals, notEqual, lessThanOrEqual, greaterThan, greaterThanOrEqual, inRange}
  • filter: The actual filter number to apply, or the start of the range if the filter type is inRange
  • filterTo: The end range of the filter if the filter type is inRange, otherwise has no effect.

Combined filter AND/OR

The number filter supports specifying an additional filter condition, if that is the case, then the filter model looks like this

{ condition1:{ type:'lessThan', filter:'30' }, condition2:{ type:'greaterThan', filter:'60' }, // one of 'AND' / 'OR' operator:'AND' )

Note that in this scenario, condition1 and condition2 each contains the individual model for the filter condition and operator takes one of 'AND' or 'OR'

It can be forced for a column to only ever have one condition for filtering by passing to the column filterParams.suppressAndOrCondition = true

Floating Number Filter

If your grid has floatingFilter enabled, your columns with number 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 number that will be used for filtering, if the filter type is inRange, the filterTo property will only be accessible from the filter rich menu or by setting the model htrough the code.
    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