Skip to content

Currency editor

Use ColumnCurrency for editable prices, invoice amounts, and financial inputs stored as numeric major units. The live grid includes USD, EUR, and JPY columns with explicit locales and precision. The raw columns show the numeric values saved by the in-cell editor.

Use the grid element from Number setup:

import { ColumnCurrency } from '@revolist/revogrid-pro';
grid.applyOnClose = true; // Save valid drafts when leaving the cell.
grid.columnTypes = { money: ColumnCurrency };
grid.columns = [{
prop: 'amount', name: 'Amount (EUR)', columnType: 'money',
numberEditor: {
currency: 'EUR', locale: 'de-DE', precision: 2,
min: 0, max: 100000, step: 0.01, required: true,
},
}];
grid.source = [{ amount: 1234.5 }];

The source 1234.5 means 1,234.50 euros. It is not an amount in cents. Locale changes input punctuation and display conventions; currency chooses the monetary identity. Neither performs exchange-rate conversion.

Double-click the amount and enter a localized decimal such as 1234,50 for de-DE. Enter, Tab, or leaving the cell saves the number 1234.5. Escape cancels the edit. Use ArrowUp/ArrowDown to step the amount.

The parser validates the complete localized input. Out-of-range values, invalid text, and excess fractional digits are rejected. An optional empty draft saves null; required: true rejects clearing. min, max, and step refer to the stored major units: step: 0.01 means one hundredth of that currency unit.

// Whole yen.
const yenEditor = {
currency: 'JPY', locale: 'ja-JP', precision: 0,
min: 0, step: 1,
};
// Three decimal places for this KWD data contract.
const dinarEditor = {
currency: 'KWD', locale: 'en-GB', precision: 3,
min: 0, step: 0.001,
};
grid.columns = [
{ prop: 'yen', columnType: 'money', numberEditor: yenEditor },
{ prop: 'dinar', columnType: 'money', numberEditor: dinarEditor },
];

The editor’s precision defaults to 2; configure it for your currency and application policy. Precision limits valid input, while display formatting alone can round without changing the source. For credits or adjustments, allow a negative min deliberately.

Other options are useGrouping, label, partial validation text. For an existing custom renderer, assign editor: CurrencyEditor and the same numberEditor configuration instead of registering ColumnCurrency. The editor and column type are public exports from @revolist/revogrid-pro; they do not require DataGridFormattingPlugin.

Keep exact monetary arithmetic in your application calculation layer. This editor saves JavaScript numbers and does not implement settlement rounding, exchange rates, or currency conversion. If an API stores integer minor units, adapt explicitly at that boundary rather than silently changing the meaning of the displayed amount.

See currency and accounting formats for accounting negatives, mixed-currency display, and aggregation decisions.