Percentage editor

Use ColumnPercentage when users should enter 12.5 or 12.5% while the source stores the ratio 0.125. It combines percentage display and a percentage-aware numeric editor. The live example also includes negative growth.

1. Store ratios and edit percentages

Use the grid element from Number setup:

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

grid.applyOnClose = true; // Save valid drafts when leaving the cell.
grid.columnTypes = { percent: ColumnPercentage };
grid.columns = [{
  prop: 'conversion', name: 'Conversion', columnType: 'percent',
  numberEditor: {
    locale: 'en-US', precision: 2,
    min: 0, max: 1, step: 0.0001, required: true,
    label: 'Conversion (%)',
  },
}];
grid.source = [{ conversion: 0.125 }];

Double-click the cell. Its draft uses percentage units; both 12.5 and 12.5% save 0.125. Enter, Tab, or leaving the cell commits a valid draft. Escape cancels the edit.

Editor input	Stored ratio	Display with precision 2
12.5 or 12.5%	0.125	12.50%
100	1	100.00%
0.25	0.0025	0.25%

Do not enter 0.125 expecting 12.5% in this editor: with sufficient precision it means 0.125%; the example’s two-digit precision rejects it. The stored source contract and the draft input unit are intentionally different.

2. Configure precision and bounds in the right units

precision counts fractional digits in the displayed percentage, not in the ratio. With precision: 2, input 12.345 has too many fractional digits and is rejected rather than silently rounded.

min, max, and step use source ratio units. The example permits 0% through 100%. A ratio step of 0.0001 makes ArrowUp/ArrowDown change the value by 0.01 percentage points. It does not impose a multiple-of-step validation rule on typed values. For growth, allow negative values or results above 100% deliberately:

const growthEditor = {
  locale: 'en-US', precision: 2,
  min: -1, max: 2, step: 0.0001,
  label: 'Growth (%)',
};
grid.columns = [{ prop: 'growth', columnType: 'percent', numberEditor: growthEditor }];

This configuration permits -100% through 200%. For localized decimal entry, choose a locale such as de-DE, where 12,5 means 12.5% and saves 0.125.

Clearing an optional cell saves null. Add required: true to reject an empty draft. Other options include useGrouping, label, partial validation text. The editor validates the complete input; arbitrary trailing text is not accepted.

3. Reuse an existing renderer

Import PercentageEditor from @revolist/revogrid-pro and assign editor: PercentageEditor with the same numberEditor options when your column already owns its display template. ColumnPercentage installs both the editor and renderer, without requiring DataGridFormattingPlugin.

This percentage-aware editor differs from the generic formatting save adapter, where a bare number does not imply percentage input. See percentages and rates for percentage points, basis points, and weighted aggregation.