This is documentation for Refine 4.xx.xx , which is no longer actively maintained.
This field is used to display a number formatted according to the browser locale, right aligned. and uses Intl
to display date format.
Good to know :
You can swizzle this component with the Refine CLI to customize it.
Usage <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).
Live previews only work with the latest documentation.
Show Code Hide Code import { useDataGrid , List , NumberField , } from "@refinedev/mui" ; import { DataGrid , GridColDef } from "@mui/x-data-grid" ; const columns : GridColDef [ ] = [ { field : "id" , headerName : "ID" , type : "number" } , { field : "title" , headerName : "Title" , minWidth : 100 , flex : 1 } , { field : "hit" , headerName : "Hit" , display : "flex" , renderCell : function render ( { row } ) { return ( < NumberField value = { row . hit } options = { { notation : "compact" , } } /> ) ; } , minWidth : 100 , flex : 1 , } , ] ; const PostsList : React . FC = ( ) => { const { dataGridProps } = useDataGrid < IPost > ( ) ; return ( < List > < DataGrid { ... dataGridProps } columns = { columns } /> </ List > ) ; } ; interface IPost { id : number ; title : string ; hit : number ; }
API Reference Properties Property Type Description Number value
locale
Override the browser locale in the date formatting. Passed as first argument to Intl.NumberFormat()
options
Number formatting options. Passed as second argument to Intl.NumberFormat()
External Props :
It also accepts all props of Material UI Text .