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 Copy Link
Edit any cell in the grid below to see the Number Cell Editor.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
INumberCellEditorParams,
ModuleRegistry,
NumberEditorModule,
enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, NumberEditorModule]);
const data = Array.from(Array(20).keys()).map((val: any, index: number) => ({
number: index,
}));
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
headerName: "Number Editor",
field: "number",
cellEditor: "agNumberCellEditor",
cellEditorParams: {
min: 0,
max: 100,
} as INumberCellEditorParams,
},
]);
const defaultColDef = ref<ColDef>({
width: 200,
editable: true,
});
const rowData = ref<any[] | null>(data);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
Enabled with agNumberCellEditor and configured with INumberCellEditorParams.
columnDefs: [
{
cellEditor: 'agNumberCellEditor',
cellEditorParams: {
min: 0,
max: 100
}
// ...other props
}
] Customisation Copy Link
Step and Precision Copy Link
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.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
INumberCellEditorParams,
ModuleRegistry,
NumberEditorModule,
enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, NumberEditorModule]);
const data = Array.from(Array(20).keys()).map((val: any, index: number) => ({
number: index,
}));
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
headerName: "Number Editor",
field: "number",
cellEditor: "agNumberCellEditor",
cellEditorParams: {
precision: 2,
step: 0.25,
showStepperButtons: true,
} as INumberCellEditorParams,
},
]);
const defaultColDef = ref<ColDef>({
width: 200,
editable: true,
});
const rowData = ref<any[] | null>(data);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
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 Copy Link
The stepping behaviour can be disabled. Edit any cell in the grid below to see this.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
INumberCellEditorParams,
ModuleRegistry,
NumberEditorModule,
enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, NumberEditorModule]);
const data = Array.from(Array(20).keys()).map((val: any, index: number) => ({
number: index,
}));
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
headerName: "Number Editor",
field: "number",
cellEditor: "agNumberCellEditor",
cellEditorParams: {
preventStepping: true,
} as INumberCellEditorParams,
},
]);
const defaultColDef = ref<ColDef>({
width: 200,
editable: true,
});
const rowData = ref<any[] | null>(data);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
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 Copy Link
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. |