Number filters allow you to filter number data.
The Provided Filters and Simple Filters pages explain the parts of the Number Filter that the same as the other Provided Filters. This page builds on that and explains some details that are specific to the Number Filter.
Number Filter Parameters
Number Filters are configured though the
filterParams attribute of the column definition. All of the
parameters from Provided Filters are available:
|Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are: |
|If the Apply button is present, the filter popup will be closed immediately when the Apply or Reset button is clicked if this is set to |
|By default the Text and Number filters will debounce by 500ms. This is because these filters have text field inputs, so time is given to the user to type items in before the input is formatted and the filtering applied. The Set and Date will execute immediately (no debounce). To override these defaults, set |
|This property is for when using the Client Side Row Model only. When set to |
In addition, the following parameters are also available:
|By default, only one condition is shown, and a second is made visible once a first condition has been entered. Set this to |
|Array of Filter Options to present to the user.|
|The default Filter Option to be selected.|
|By default, the two conditions are combined using |
|When specified, the input field will be of type |
|Typically used alongside |
Custom Number Support
By default, the Number Filter uses HTML5
number inputs. However, these have mixed browser support,
particularly around locale-specific nuances, e.g. using commas rather than periods for decimal values. You might also
want to allow users to type other characters e.g. currency symbols, commas for thousands, etc, and still be able to
handle those values correctly.
For these reasons, the Number Filter allows you to control what characters the user is allowed to type, and provide
custom logic to parse the provided value into a number to be used in the filtering. In this case, a
Custom number support is enabled by specifying configuration similar to the following:
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 (all except Safari).
numberParser should take the user-entered text and return either a number if one can be interpreted,
null if not.
The example below shows custom number support in action. The first column shows the default behaviour, and the second column uses commas for decimals and allows a dollar sign ($) to be included.