Angular Data GridNumber Cell Editor
angular logo

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.

Next Up

Continue to the next section: Date Cell Editor.