`<NumberField>`

Displays a number formatted according to the browser locale, right aligned. Ideal for floats, currencies, percentages, units, etc.

NumberField

Usage

import { NumberField }  from 'react-admin';

<NumberField source="views" />
// renders the record { id: 1234, views: 2108 } as
<span>2 108</span>

<NumberField> uses Intl.NumberFormat() if available, passing the locales and options props as arguments. This allows a perfect display of decimals, currencies, percentages, etc. See Intl.NumberFormat documentation for the options prop syntax.

If Intl is not available, <NumberField> outputs numbers as is (and ignores the locales and options props).

Props

Prop	Required	Type	Default	Description
`locales`	Optional	string	’’	Locale to use for formatting. Passed as first argument to `Intl.NumberFormat()`.
`options`	Optional	Object	-	Number formatting options. Passed as second argument to `Intl.NumberFormat()`.
`textAlign`	Optional	`'left' \| 'right'`	`right`	Text alignment in a Datagrid

<NumberField> also accepts the common field props.

`locales`

Override the browser locale in the number formatting. Passed as first argument to Intl.NumberFormat().

import { NumberField }  from 'react-admin';

<NumberField source="price" locales="fr-FR" options={{ style: 'currency', currency: 'USD' }} />
// renders the record { id: 1234, price: 25.99 } as
<span>25,99 $US</span>

`options`

Options passed to Intl.NumberFormat(). See the Intl.NumberFormat documentation for the options prop syntax.

import { NumberField }  from 'react-admin';

<NumberField source="score" options={{ maximumFractionDigits: 2 }}/>
// renders the record { id: 1234, score: 567.3567458569 } as
<span>567.35</span>

<NumberField source="share" options={{ style: 'percent' }} />
// renders the record { id: 1234, share: 0.2545 } as
<span>25%</span>

<NumberField source="price" options={{ style: 'currency', currency: 'USD' }} />
// renders the record { id: 1234, price: 25.99 } as
<span>$25.99</span>

<NumberField source="volume" options={{ style: 'unit', unit: 'liter' }} />
// renders the record { id: 1234, volume: 3500 } as
<span>3,500 L</span>

Tip: If you need more formatting options than what Intl.NumberFormat() can provide, build your own field component leveraging a third-party library like numeral.js.

`textAlign`

By default, <NumberField> is right-aligned in a <Datagrid>. Change it by setting the textAlign prop to “left”:

import { NumberField }  from 'react-admin';

<NumberField source="score" textAlign="left" />