number

locale number / currency / percent.

Example source

import React from 'react'
import { BstTableMui } from '@bloomskill/table-mui'
import type { BstTableColumn } from '@bloomskill/table-engine'
import '@bloomskill/table-engine/styles.css'
const rows = [{ id:'1', item:'Revenue', v:1234.5 }, { id:'2', item:'Units', v:89 }]
const columns: BstTableColumn<any>[] = [
  { id: 'item', accessorKey: 'item', header: 'Item' },
  { id:'v', accessorKey:'v', header:'Number', meta:{ type:'number', cellMeta:{ currency:'USD', precision:2 } } },
]
export default function App() {
  return <BstTableMui data={rows} columns={columns} getRowId={(r) => r.id} pagination={false} />
}

Loading live example…

Guide

When to use it

Any numeric value — quantities, money, percentages, scores — that should render with locale-aware formatting while storing the raw number.

How it works

Reads a number (or null) and formats it via Intl.NumberFormat. Editing swaps in a number input; the raw number is stored and formatting is display-only, so sorting and maths stay correct.

Options

• cellMeta.currency (e.g. 'USD') with cellMeta.precision — money formatting.
• cellMeta.useGrouping — thousands separators.
• meta.format ('currency' / 'percent' / Intl.NumberFormatOptions) and meta.locale for finer control.
• cellMeta.required, cellMeta.pattern — validation.

At a glance

Renders	locale number / currency / percent
Value shape	number | null
Editable	✅ number input
Key cellMeta	precision, currency, useGrouping, required, pattern

Use it

const columns: BstTableColumn<Row>[] = [
  { id: 'x', accessorKey: 'x', header: 'X', meta: { type: 'number', /* cellMeta below */ } },
]

cellMeta options

number — also honours meta.format ('currency' / 'percent' / Intl.NumberFormatOptions) and meta.locale.

cellMeta	Type	Effect
precision	number	Fixed min+max fraction digits.
currency	string (ISO 4217)	Currency format, e.g. 'USD', 'INR'.
useGrouping	boolean	Thousands separators on/off.