Skip to main content
Version: 3.xx.xx
Swizzle Ready

Number

This field is used to display a number formatted according to the browser locale, right aligned. and uses Intl to display date format.

Swizzle
Swizzle

You can swizzle this component to customize it with the refine CLI

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).

localhost:3000/posts
Live previews only work with the latest documentation.
import {
useDataGrid,
DataGrid,
GridColumns,
List,
NumberField,
} from "@pankod/refine-mui";

const columns: GridColumns = [
{ field: "id", headerName: "ID", type: "number" },
{ field: "title", headerName: "Title", minWidth: 100, flex: 1 },
{
field: "hit",
headerName: "Hit",
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} autoHeight />
</List>
);
};

interface IPost {
id: number;
title: string;
hit: number;
}

API Reference

Properties

External Props
External Props

It also accepts all props of Material UI Text.