valueRenderer

valueRenderer(type) turns a compact type string into a reusable renderer for displaying a value — localized number / currency / byte formatting, scientific or engineering notation, fixed precision, or a boolean-as-icon — each with a sensible default alignment. <tosi-table> uses it for column type, and it's exported so you can render a typed value consistently anywhere.

A renderer exposes three things:

format(value) → a string (numeric types) or a Node (icon types), locale-reactive.
toDOM(element, value) → writes the formatted value into an element.
align → the type's default alignment ('right' numeric, 'center' boolean, else undefined).

Type strings

Arguments go in parentheses, comma-separated.

type	renders	align
`number`	localized number	right
`currency` / `currency(USD)`	localized currency (default `USD`)	right
`fixed` / `fixed(2)`	localized, N decimals (`fixed` = `fixed(2)`)	right
`percent` / `percent(1)`	localized percent of a fraction (`0.5` → `50%`; `percent` = 0 decimals)	right
`sci`	scientific notation	right
`eng`	engineering notation	right
`bytes` / `bytes(iec)`	SI byte units (`kB`, `MB`, …; ÷1000), or IEC binary (`KiB`, `MiB`, …; ÷1024)	right
`boolean` / `boolean(t)` / `boolean(t,f)`	icons via the `icons` proxy (default `checkSquare`/`square`; `boolean(t)` shows nothing when false)	center

Formatting follows the app's current locale (i18n.locale, i.e. setLocale()); it falls back to the runtime default.

Numeric cells also get a -negative or -zero state class by value sign, so you can style them in CSS without a custom cell — e.g. .-negative { color: #d32f2f } for red negatives. The renderer only marks the sign; CSS decides the look.

import { valueRenderer } from 'tosijs-ui'

const money = valueRenderer('currency(EUR)')
const size = valueRenderer('bytes')
preview.append(
  document.createTextNode(`${money.format(1234.5)} · ${size.format(1500000)}`)
)