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.