Skip to main content
Version: 4.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.

Good to know:

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
import { List, NumberField } from "@refinedev/mantine";
import { Table, Pagination } from "@mantine/core";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

const PostList: React.FC = () => {
const columns = React.useMemo<ColumnDef<IPost>[]>(
() => [
{
id: "id",
header: "ID",
accessorKey: "id",
},
{
id: "title",
header: "Title",
accessorKey: "title",
},
{
id: "hit",
header: "Hit",
accessorKey: "hit",
cell: function render({ getValue }) {
return (
<NumberField
value={getValue()}
options={{
notation: "compact",
}}
/>
);
},
},
],
[],
);

const {
getHeaderGroups,
getRowModel,
refineCore: { setCurrent, pageCount, current },
} = useTable({
columns,
});

return (
<List>
<Table>
<thead>
{getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</Table>
<br />
<Pagination
position="right"
total={pageCount}
page={current}
onChange={setCurrent}
/>
</List>
);
};

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

API Reference

Properties

PropertyTypeDescription
value

ReactChild

Number value

locale

string | string[]

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

options

NumberFormatOptions

Number formatting options. Passed as second argument to Intl.NumberFormat()

External Props:

It also accepts all props of Mantine Text.