Number & date formatting

Values travel over the wire as raw numerics — correct for sorting, aggregation, and a smaller payload — and are formatted in the browser from a per-column format string. A single grammar covers numbers, currency, percentages, and dates: kind[:arg][:flag][;modifier].

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "cost": "sum", "qty": "sum", "margin": "mean"},
    "formats": {
        "revenue": "currency:USD",          # $1,234
        "cost": "currency:USD:compact",     # $1.2K
        "qty": "number:0;unit=u",           # 1,234 u
        "margin": "percentage:1",           # 12.3%
        # A date column: "order_date": "date:YYYY-MM-DD" or "date:MMM D YYYY"
    },
})
TensorGrid(id="grid", row_data=payload["row_data"], column_defs=payload["column_defs"])

React

<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', cost: 'sum', qty: 'sum', margin: 'mean' }}
  formats={{
    revenue: 'currency:USD',
    cost: 'currency:USD:compact',
    margin: 'percentage:1',
    // Numeral patterns work too: '$0,0', '0.0%', '0.0a'
  }}
/>;

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum', cost: 'sum', qty: 'sum', margin: 'mean' }"
  :formats="{
    revenue: 'currency:USD',
    cost: 'currency:USD:compact',
    margin: 'percentage:1',
  }"
/>

Vanilla JS

mountTensorGrid(el, {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', cost: 'sum', qty: 'sum', margin: 'mean' },
  formats: {
    revenue: 'currency:USD',
    cost: 'currency:USD:compact',
    margin: 'percentage:1',
  },
});

The grammar

kind[:arg][:flag][;modifier] — auto-detected and shared by every surface (Dash and the adapters):

• number — number:2 (2 fraction digits), number:0. currency — currency:USD, the colon-arg is the ISO code. percentage — percentage:1 (the raw value is a fraction; it is multiplied by 100). date — a style (date:short / medium / long / full) or a token pattern.
• Flags — compact (1.2M), accounting (negatives in parens), sign (force +/-), and unit=<suffix> (append a unit). Combine them: number:0;accounting, currency:USD:compact, number:2;sign.
• Date token patterns — date:YYYY-MM-DD, date:MMM D YYYY, date:YYYY-MM-DD HH:mm. Tokens: YYYY YY (year), MMMM MMM MM M (month, full / short name or number), dddd ddd (weekday), DD D (day), HH H mm m ss s (time). Dates serialize as epoch-ms or ISO-8601 on the wire.

Notes

• Numeral patterns are also accepted by the adapters — '$0,0', '0,0.00', '0.0%', '($0,0)' (accounting), '0.0a' (abbreviated), '+0,0' (force sign). The engine’s makeColumnDefs emits these, and they format identically to the DSL.
• NaN / Inf / null render the null token (—) rather than crashing the cell; an empty format renders the raw value.
• Set the locale (locale: 'de-DE') to localize grouping, decimals, and month / weekday names. Derived window columns take their own format.