Vue Data GridNumber Cell Editor

ReactAngularVueJavascript

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

Next Up

Continue to the next section: Date Cell Editor.