Angular Data Grid: Number Filter

Number filters allow you to filter number data.

The Provided Filters and Simple Filters pages explain the parts of the Number Filter that are 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 (INumberFilterParams interface):

buttons: FilterButtonType[];

type FilterButtonType = 
      'apply' 
    | 'clear' 
    | 'reset' 
    | 'cancel'

defaultJoinOperator: JoinOperator;

type JoinOperator = 'AND' | 'OR'

filterOptions: (IFilterOptionDef | ISimpleFilterModelType)[];

interface IFilterOptionDef {
  // A unique key that does not clash with the built-in filter keys. 
  displayKey: string;
  // Display name for the filter. Can be replaced by a locale-specific value using a `localeTextFunc`. 
  displayName: string;
  // Custom filter logic that returns a boolean based on the `filterValues` and `cellValue`. 
  predicate?: (filterValues: any[], cellValue: any) => boolean;
  // Number of inputs to display for this option. Defaults to `1` if unspecified. 
  numberOfInputs?: 0 | 1 | 2;
}

type ISimpleFilterModelType = 
      'empty' 
    | 'equals' 
    | 'notEqual' 
    | 'lessThan' 
    | 'lessThanOrEqual' 
    | 'greaterThan' 
    | 'greaterThanOrEqual' 
    | 'inRange' 
    | 'contains' 
    | 'notContains' 
    | 'startsWith' 
    | 'endsWith' 
    | 'blank' 
    | 'notBlank'

filterPlaceholder: FilterPlaceholderFunction | string;

type FilterPlaceholderFunction = 
      (params: IFilterPlaceholderFunctionParams) => string


interface IFilterPlaceholderFunctionParams {
  // The filter option key
  filterOptionKey: ISimpleFilterModelType;
  // The filter option name as localised text
  filterOption: string;
  // The default placeholder text
  placeholder: string;
}

type ISimpleFilterModelType = 
      'empty' 
    | 'equals' 
    | 'notEqual' 
    | 'lessThan' 
    | 'lessThanOrEqual' 
    | 'greaterThan' 
    | 'greaterThanOrEqual' 
    | 'inRange' 
    | 'contains' 
    | 'notContains' 
    | 'startsWith' 
    | 'endsWith' 
    | 'blank' 
    | 'notBlank'

numberParser = (text: string | null) => number | null;

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 text input is used with JavaScript controlling what characters the user is allowed (rather than the browser).

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

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

this.columnDefs = [
    {
        field: 'age',
        filter: 'agNumberColumnFilter',
        filterParams: {
            allowedCharPattern: '\\d\\-\\,', // note: ensure you escape as if you were creating a RegExp from a string
            numberParser: text => {
                return text == null ? null : parseFloat(text.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 (all except Safari).

The numberParser should take the user-entered text and return either a number if one can be interpreted, or 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.
• Floating filters are enabled and also react to the configuration of allowedCharPattern.

// Loading...