Number Filters

Number filters allow you to filter number data.

Filter UI

Enabling Number Filters

The Number Filter can be configured as shown below:

columnDefs = [
    {
        'field': 'age',
        # configure column to use the Number Filter
        'filter': 'agNumberColumnFilter',
        'filterParams': {
            # pass in additional parameters to the Number Filter
        },
    },
]

Example: Number Filter

The example below shows the Number Filter in action:

View the JavaScript functions used for this example

These JavaScript functions must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.myNumberParser = (text) => {
    return text === null ? null : parseFloat(text.replace(",", ".").replace("$", ""));
}
dagfuncs.myNumberFormatter = (value) => {
    return value === null ? null : value.toString().replace(".", ",");
}

Number Filter Parameters

Number Filters are configured though the filterParams attribute of the column definition.

Custom Number Support

The default behaviour of the Number Filter is to use a number input, however this has mixed browser support and
behaviour. If you want to override the default behaviour, or allow users to type other characters (for example, currency
symbols, commas for thousands, etc.), the Number Filter allows you to control what characters the user is allowed to
type. In this case, a text input is used with JavaScript controlling what characters the user is allowed (rather than
the browser). You can also provide custom logic to parse the provided value into a number to be used in the filtering.

Custom number support is enabled by specifying configuration similar to the following:

columnDefs = [
    {
        'field': 'age',
        'filter': 'agNumberColumnFilter',
        "filterParams": {
            "allowedCharPattern": "\\d\\-\\,\\$",
            "numberParser": {"function": "myNumberParser(params)"},
            "numberFormatter": {"function": "myNumberFormatter(params)"},
        },
    }

]

Add the following to dashAgGridFunctions.js in the assets folder:

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.ageNumberParser = (text) => {
    return text === null ? null : parseFloat(text.replace(",", ".");
}
dagfuncs.ageNumberFormatter = (value) => {
    return value === null ? null : value.toString().replace(".", ",");
}

The allowedCharPattern is a regex of all the characters that are allowed to be typed. This is surrounded by square
brackets [ ] and used as a character class to be compared against each typed character individually and prevent the
character from appearing in the input if it does not match (in supported browsers).

The numberParser should take the user-entered text and return either a number if one can be interpreted, or null if
not.

The numberFormatter should take a number (for example, from the Filter Model) and convert it into the formatted text
to be displayed, or null if no value.

Custom number support can be seen in
the Number Filter example above.

An allowedCharPattern of \\d\\-\\. will give similar behaviour to the default number input.

Number Filter Model

See the Filter Model & Dash Callbacks section for
examples.

The Filter Model describes the current state of the applied Number Filter. If only
one Filter Condition is set, this will be
a NumberFilterModel:

If more than one Filter Condition is set, then multiple instances of the model are created and wrapped inside a Combined
Model.

Note that in AG Grid versions prior to 29.2, only two Filter Conditions were supported. These appeared in the Combined
Model as properties condition1 and condition2. The grid will still accept and supply models using these properties,
but this behaviour is deprecated. The conditions property should be used instead.

Here’s an example:


numberEquals18OrEquals20 = {
    'filterType': 'number',
    'operator': 'OR',
    'conditions': [
        {
            'filterType': 'number',
            'type': 'equals',
            'filter': 18
        },
        {
            'filterType': 'number',
            'type': 'equals',
            'filter': 20
        }
    ]
}

Number Filter Options

The Number Filter presents a list
of Filter Options to the user.

The list of options are as follows:

Option Name Option Key Included by Default
Equals <p>equals<p> Yes
Does not equal <p>notEqual<p> Yes
Greater than <p>greaterThan<p> Yes
Greater than or equal to <p>greaterThanOrEqual<p> Yes
Less than <p>lessThan<p> Yes
Less than or equal to <p>lessThanOrEqual<p> Yes
Between <p>inRange<p> Yes
Blank <p>blank<p> Yes
Not blank <p>notBlank<p> Yes
Choose one <p>empty<p> No

Note that the empty filter option is primarily used when
creating Custom Filter Options.
When ‘Choose one’ is displayed, the filter is not active.

The default option for the Number Filter is equals.

Number Filter Values

By default, the values supplied to the Number Filter are retrieved from the data based on the field attribute. This
can be overridden by providing a filterValueGetter in the Column Definition. This is similar to using
a Value Getter, but is specific to the filter.

Example Filter Value Getter

This example demonstrates customizing th Number Filter Values and Number Filter Options

Note the following in the “File Size (MB)” column :

Applying the Number Filter

To include Apply, Clear, Recent and Cancel buttons to the filter menu
see Applying Filters section.

Blank Cells

If the row data contains blanks, by default the row won’t be included in filter results. To change this, use the filter
params includeBlanksInEquals, includeBlanksInLessThan, includeBlanksInGreaterThan and includeBlanksInRange. For
example, the code snippet below configures a filter to include None for equals, but not for less than, greater than or
in range (between):

filterParams = {
    'includeBlanksInEquals': True,
    'includeBlanksInLessThan': False,
    'includeBlanksInGreaterThan': False,
    'includeBlanksInRange': False,
};

Data Updates

The Number Filter is not affected by data changes. When the grid data is updated, the filter value will remain unchanged
and the filter will be re-applied based on the updated data (for example, the displayed rows will update if necessary).