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 allowed value. |
Max allowed value. |
Number of digits allowed after the decimal point. |
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.
|
Display stepper buttons in editor. Note: Does not work when preventStepping is true. |
Set to true to prevent key up/down from stepping the field's value. |
Next Up
Continue to the next section: Date Cell Editor.