currency Renderer

renderAs: 'currency' renders a numeric value as a locale-aware formatted currency amount using Intl.NumberFormat. Supports colorization, compact notation, and parenthetical negative formatting.

Core Examples

Basic Currency

Budget as plain USD. Spend with colorize: true — negative red, positive green.

Name	Budget	Spend
Aurora Chen	$4,200.00	$3,870.00
Mateo Silva	$7,800.00	-$320.00
Priya Nair	$1,500.00	$1,500.00

{ key: 'budget', renderAs: 'currency', renderAsOptions: { locale: 'en-US', currency: 'USD' } }
{ key: 'spend',  renderAs: 'currency', renderAsOptions: { locale: 'en-US', currency: 'USD', colorize: true } }

Locale and Currency Code

Pass any BCP 47 locale and ISO 4217 currency code. The symbol position and decimal separator adapt automatically.

Same value formatted as USD, EUR, and GBP with their respective locales.

Name	USD (en-US)	EUR (de-DE)	GBP (en-GB)
Aurora Chen	$4,200.00	€4.200,00	£4,200.00
Mateo Silva	$7,800.00	€7.800,00	£7,800.00
Priya Nair	$1,500.00	€1.500,00	£1,500.00

{ renderAsOptions: { locale: 'en-US', currency: 'USD' } }  // $4,200.00
{ renderAsOptions: { locale: 'de-DE', currency: 'EUR' } }  // 4.200,00 €
{ renderAsOptions: { locale: 'en-GB', currency: 'GBP' } }  // £4,200.00

Compact Notation

compact: true switches to compact notation when the value meets compactThreshold (default: 1,000,000). Set a lower threshold to compact smaller values.

Revenue in full format vs compact notation (threshold set to 1000 for demonstration).

Name	Revenue (full)	Revenue (compact)
Aurora Chen	$1,420,000.00	$1.42M
Mateo Silva	$980,000.00	$980.00K
Priya Nair	$3,250,000.00	$3.25M

{ renderAsOptions: { locale: 'en-US', currency: 'USD', compact: true, compactThreshold: 1000 } }
// → $1.42M

Negative Format

negativeFormat: 'parentheses' wraps negative values in (parens) — standard accounting notation.

Negative delta shown with minus sign vs accounting parentheses. Colorize applied to both.

Name	Delta (minus)	Delta (parens)
Aurora Chen	$420.50	$420.50
Mateo Silva	-$1,250.00	($1,250.00)
Priya Nair	$0.00	$0.00

{ renderAsOptions: { colorize: true, negativeFormat: 'minus' } }        // -$1,250.00
{ renderAsOptions: { colorize: true, negativeFormat: 'parentheses' } }  // ($1,250.00)

Options Reference

Option	Type	Default	Effect
currency	string	'USD'	ISO 4217 currency code.
locale	string	'en-US'	BCP 47 locale for number formatting.
minimumFractionDigits	number	2	Minimum decimal places.
maximumFractionDigits	number	2	Maximum decimal places.
showSymbol	boolean	true	Show the currency symbol.
symbolPosition	'prefix' | 'suffix'	locale default	Override symbol position.
compact	boolean	false	Use compact notation (K, M, B) when value reaches compactThreshold.
compactThreshold	number	1000000	Minimum absolute value to trigger compact notation.
colorize	boolean	false	Color positive values green, negative red, zero neutral.
positiveColor	string	theme green	Override for positive values.
negativeColor	string	theme red	Override for negative values.
zeroColor	string	theme neutral	Override for zero values.
negativeFormat	'minus' | 'parentheses'	'minus'	How to display negative values.
decimalAlign	boolean	false	Aligns decimal points vertically in table columns.
className	string	unset	Additional CSS class on the root element.

Caveats

• Non-numeric values and NaN render 'Invalid'.
• compact uses Intl.NumberFormat notation: 'compact' — output depends on locale (e.g. 1.4M in en-US, 1,4 Mio. in de-DE).
• decimalAlign uses CSS ch units — reliable in monospace columns but may drift in proportional fonts.

See Also

• deltaValue Renderer — signed directional change values
• number Field Type
• Field Config