Vue Data Grid

Number Filter

vue logo

Number Filters allow you to filter number data.

Enabling Number Filters

The Number Filter can be configured as shown below:

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.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:

  • The first column shows the default Number Filter behaviour.
  • The second column demonstrates Custom Number Support and uses commas for decimals and allows a dollar sign ($) to be included.
  • Floating filters are enabled and also react to the configuration of allowedCharPattern.

Number Filter Parameters

Number Filters are configured though the filterParams attribute of the column definition (INumberFilterParams interface):