Number editor

Use ColumnNumber when the source must stay a number after editing. It combines numeric display with an in-cell editor that validates a draft before saving. The live example includes required integer quantities and optional decimal measurements.

1. Register the column type

Use the grid element from Number setup:

import { ColumnNumber } from '@revolist/revogrid-pro';

grid.applyOnClose = true; // Save valid drafts when leaving the cell.
grid.columnTypes = { number: ColumnNumber };
grid.columns = [{
  prop: 'quantity', name: 'Quantity', columnType: 'number',
  numberEditor: {
    precision: 0, min: 0, max: 10000, step: 1, required: true,
  },
}];
grid.source = [{ quantity: 12 }];

Double-click a cell. Enter, Tab, or leaving the cell saves a valid draft. Escape cancels the edit. Use ArrowUp/ArrowDown to step the value. An invalid draft remains in the editor with validation feedback. Read-only cells cannot be edited.

precision: 0 accepts integer input. For decimal input, set a positive precision:

const numberEditor = {
  locale: 'de-DE', precision: 2,
  min: 0, max: 100, step: 0.25,
  label: 'Measurement',
};
grid.columns = [{ prop: 'measurement', columnType: 'number', numberEditor }];

Here 12,5 is localized input for the source number 12.5. 12,345 has too many fractional digits and is rejected rather than silently rounded. Choose the locale explicitly when every user must use the same syntax.

2. Choose a source contract

Option	Meaning
kind	number, currency, or percent; the matching column/editor supplies its default
precision	Maximum input fractional digits, an integer from 0 to 20; defaults to 2
locale	Locale for number presentation and strict localized parsing
currency	Uppercase three-letter currency code for currency mode; defaults to USD
useGrouping	Whether displayed numbers use grouping separators
min, max	Inclusive bounds in source units
step	Increment for ArrowUp/ArrowDown, in source units
required	Rejects an empty draft when true
label	Accessible field label
text	Partial localized validation messages

A valid nonempty save stores a JavaScript number. Clearing an optional cell stores null; clearing a required cell shows an error. Keep missing values distinct from zero in calculations and reports. Grouped/localized strings are parsed as complete inputs; numeric prefixes followed by arbitrary text are not accepted. step controls increment actions; it does not require typed values to be multiples of the step.

Keep source values finite numbers or null. Typed exponential and hexadecimal notation are not part of this decimal input grammar. Values beyond Number.MAX_SAFE_INTEGER and underflow to zero are rejected. Invalid options, such as an unsupported locale, a nonpositive step, or min greater than max, produce configuration feedback. A step must be representable at the configured display precision.

Without an explicit step, ArrowUp/ArrowDown use the smallest displayed precision unit: 1 at precision 0, 0.01 at precision 2. For percent mode, the corresponding source step is divided by 100.

3. Use an editor without replacing your renderer

If the column already has an authored display template, assign the editor directly:

import { NumberEditor } from '@revolist/revogrid-pro';

grid.columns = [{
  prop: 'quantity', name: 'Quantity', editor: NumberEditor,
  numberEditor: { precision: 0, min: 0, step: 1 },
}];

ColumnNumber supplies both renderer and editor; NumberEditor supplies only editing. Neither requires DataGridFormattingPlugin.

These constraints protect this editor’s saves. Validate server imports, direct source assignments, formulas, and bulk data changes at their owning boundary too. Display precision does not make binary floating-point arithmetic exact.

Continue with the currency editor, percentage editor, or masked text editor.