numberFormat
The look of the numbers in a number column.
| Type | NumberFormatSpec |
|---|---|
| Default | not set |
Live update (update()) | Yes — give the columns again (update({ columns })) |
| Declared in | packages/core/src/columns/defs.ts |
What it does
Section titled “What it does”Its keys are the browser’s number format’s: style ('decimal', 'percent', 'currency'), currency
('EUR'), minimumFractionDigits, maximumFractionDigits and useGrouping. Digits and separators follow the
grid’s locale and numerals. Without decimals given (and not a
currency), a number shows up to 15 significant digits, so 0.1 + 0.2 shows 0.3. A percent multiplies by 100: 0.25
shows 25%.
It changes what the cell shows only: sorting and filtering use the number itself.
Example
Section titled “Example”import { createGrid } from '@dzgrid/dom';import { EN } from '@dzgrid/dom/locales/en';
type Fund = { id: string; name: string; price: number; change: number };
createGrid<Fund>(document.getElementById('funds')!, { rows: [{ id: 'f1', name: 'Green Valley', price: 1234.5, change: 0.042 }], columns: [ { id: 'name', header: 'Fund' }, { id: 'price', header: 'Price', type: 'number', numberFormat: { style: 'currency', currency: 'EUR' } }, { id: 'change', header: 'Change', type: 'number', numberFormat: { style: 'percent', maximumFractionDigits: 1 } }, ], getRowId: (r) => r.id, messages: EN,});