Editing and validation

Choose the source contract first: for example quantity is a required nonnegative integer, price is major currency units, and rate is a fraction. Display formatting does not enforce these rules.

For a ready-made validated editor, use Number Editor, Currency Editor, or Percentage Editor. These edit directly in the cell with localized parsing, precision, bounds and ArrowUp/ArrowDown stepping. Enter, Tab, or leaving the cell saves valid values; Escape cancels the edit. Use Masked Editor for fixed-format string identifiers.

What the built-in paths save

Path	Editing behavior
Core default text editor	Do not assume edited text becomes a number
Pro numeric presets	Save adapter converts nonempty strings with Number; finite results become numbers, other input remains text
Pro percent preset	A trailing % is divided by 100: 12.5% saves 0.125; bare 12.5 saves 12.5
Pro code format	Does not enable numeric-preset conversion
Numeral column	Uses Numeral’s unformat rules and active locale; see mask guide

Pro numeric presets are number, currency, accounting, percent, and scientific. Their adapter can also wrap an authored editor; an existing editor is otherwise preserved unless replacement is explicitly configured. Empty input is passed through, so define a blank policy yourself. The adapter uses Number, which also accepts JavaScript numeric syntax such as hexadecimal; use a stricter parser if your product allows only decimal input.

Validate and highlight edits with Pro plugins

The live grid uses the existing Pro plugin pipeline:

• CellValidatePlugin rejects invalid Quantity edits, keeps the previous source value, and marks the cell. Hover the invalid indicator for the rejected value and rule.
• CellFlashPlugin highlights accepted changes in the cell and its row. It respects reduced-motion preferences and can announce updates through an ARIA live region.
• HistoryPlugin adds undo/redo for accepted edits; rejected values do not enter history. Use Ctrl/Cmd+Z to undo and Ctrl/Cmd+Shift+Z to redo while the grid is focused.
• DataGridFormattingPlugin displays numbers and converts nonempty numeric editor text to source numbers. Validation is a separate column rule.

Register EventManager first so validation resolves before normal edit consumers see the transaction. Register formatting before validation so validation feedback wraps the formatted display:

import {
  EventManagerPlugin, DataGridFormattingPlugin,
  CellValidatePlugin, CellFlashPlugin, HistoryPlugin,
  validateNumber, validateInteger, validateRange, type CellFlashConfig,
} from '@revolist/revogrid-pro';

grid.plugins = [
  EventManagerPlugin, DataGridFormattingPlugin,
  CellValidatePlugin, CellFlashPlugin, HistoryPlugin,
];
grid.eventManager = { applyEventsToSource: true };
Object.assign(grid, { cellFlash: {
  duration: 1800, rowDuration: 1200,
  mode: 'cell-and-row', queue: 'merge', aria: { enabled: true },
} satisfies CellFlashConfig });
grid.columns = [{
  prop: 'quantity', name: 'Quantity', flash: true,
  dataGridFormat: { value: {
    kind: 'preset', preset: 'number', locale: 'en-US', decimalPlaces: 0,
  } },
  validate: value => validateNumber(value)
    && validateInteger(value) && validateRange(value, 0, 10000),
  validationTooltip: () => 'Enter a whole quantity from 0 to 10000.',
}];
grid.source = [{ quantity: 12 }];

Composing validateNumber with integer/range validators rejects blanks and unparsed strings instead of coercing them to zero. decimalPlaces: 0 only formats display; validate enforces the actual whole-number rule. Strict rejection is highlighted even though the previous valid number remains stored. A subsequent valid edit clears the error.

The live example also reports the accepted/rejected gridedit transaction in plain text. That listener reports feedback; the validation plugin owns rejection, markers and tooltips, and the flash plugin owns change highlighting.

Save advisory values with warning highlights

The Reorder column demonstrates soft validation for a data-cleanup workflow. Its initial -5 is already marked as a warning. Invalid edits are saved for review rather than blocked:

const advisoryColumn = {
  prop: 'reorder', name: 'Reorder', flash: true,
  softValidation: true,
  validate: value => validateNumber(value)
    && validateInteger(value) && validateRange(value, 0, 100),
  validationSeverity: () => 'warning' as const,
  validationTooltip: () => 'Recommended reorder level: a whole number from 0 to 100.',
};

Use strict validation for hard limits and softValidation for advisory rules. Validation provides persistent warning/error markers; flashing provides temporary feedback for accepted changes. Keep descriptive messages so color is not the only signal.

Validation also participates in range and clipboard edits. Plain-text paste can carry strings rather than numbers; define a parsing policy before applying this strict numeric rule to imported text. Paste is atomic by default; clipboard validation resolution can accept valid cells from a mixed paste. Assignments to grid.source and server imports still need boundary validation: importing an invalid value can mark it, but is not a validated edit transaction.

See Input Validation, Flashing Cells, and Undo/Redo for the full configuration.

Localized entry and decimal editing

For decimal amounts choose the accepted syntax, bounds and scale explicitly. Do not infer a parser from the current display. For example, 1.234,50 needs a locale-aware parser before it can become 1234.5. Removing punctuation can silently multiply an amount. parseFloat('1,234') returns 1, so it is not a strict validator.

Use a custom editor when you need draft validation, unit/currency controls, locale-specific entry or precise error feedback. The Numeral editor supplies a ready-made alternative when its global locale and parsing policy fit the application. Counter and Slider support bounded visual input.

Finance and analytics policies

• Decide whether blank means missing, zero, or invalid. Keep 0 distinct from missing observations in BI averages.
• Apply business rounding in the calculation/storage layer. Display decimals are not settlement, tax or cash-rounding rules.
• Keep large IDs as text and exact financial calculations in a suitable precision layer; formatting cannot repair lost digits.
• Validate on the server too, using the same units and bounds as the client.

The underlying JavaScript rules are specified in Number safe integers and parseFloat.