Vue Data GridNumber Cell Editor

Simple number editor that uses the standard HTML number input.

The Number Cell Editor allows users to enter numeric values and to modify them using the keys.

Enabling Number Cell Editor

Edit any cell in the grid below to see the Number Cell Editor.

Enabled with agNumberCellEditor and configured with INumberCellEditorParams.

columnDefs: [
    {
        cellEditor: 'agNumberCellEditor',
        cellEditorParams: {
            min: 0,
            max: 100
        }
        // ...other props
    }
]

Customisation

Step and Precision

It is possible to configure the step and precision of the stepping behaviour that increments/decrements the cell value. Edit any cell in the grid below to see a customised stepping behaviour.

The stepping behaviour to increment/decrement the numeric value can be customised using the properties below:

columnDefs: [
    {
        cellEditor: 'agNumberCellEditor',
        cellEditorParams: {
            precision: 2,
            step: 0.25,
            showStepperButtons: true
        }
        // ...other props
    }
]

Prevent Stepping

The stepping behaviour can be disabled. Edit any cell in the grid below to see this.

The stepping behaviour to increment/decrement the numeric value can be disabled as shown below:

columnDefs: [
    {
        cellEditor: 'agNumberCellEditor',
        cellEditorParams: {
            preventStepping: true
        }
        // ...other props
    }
]

API Reference

Properties available on the INumberCellEditorParams<TData = any, TContext = any> interface.

min
number
Min allowed value.
max
number
Max allowed value.
precision
number
Number of digits allowed after the decimal point.
step
number
Size of the value change when stepping up/down, starting from min or the initial value if provided. Step is also the difference between valid values. If the user-provided value isn't a multiple of the step value from the starting value, it will be considered invalid. Defaults to any value allowed.
showStepperButtons
boolean
default: false
Display stepper buttons in editor. Note: Does not work when preventStepping is true.
preventStepping
boolean
default: false
Set to true to prevent key up/down from stepping the field's value.

Next Up

Continue to the next section: Date Cell Editor.