Scientific notation and units

Use scientific notation for measurements across large orders of magnitude, unit labels for operations data, and compact notation for summary dashboards. Keep a canonical numeric value and unit in the source. Start with Number setup for the formatting plugin used by the first example.

1. Scientific notation

grid.columns = [{
  prop: 'measurement', name: 'Measurement',
  dataGridFormat: { value: {
    kind: 'preset', preset: 'scientific',
    locale: 'en-US', decimalPlaces: 2,
  } },
}];
grid.source = [{ measurement: 1200 }, { measurement: 0.000012 }];

The cells display 1.20E+03 and 1.20E-05. decimalPlaces controls the fraction of the mantissa: two decimal places gives three significant digits here. This changes display precision only. Calculations retain 1200 and 0.000012.

2. Engineering notation and significant digits

The preset does not expose engineering notation or significant-digit options. Use a Core cellTemplate and construct the formatter once, outside the renderer:

const engineering = new Intl.NumberFormat('en-GB', {
  notation: 'engineering', maximumSignificantDigits: 4,
});

grid.columns = [{
  prop: 'resistance', name: 'Resistance (Ω)', readonly: true,
  cellTemplate: (_h, { model, prop }) =>
    model[prop] == null ? '' : engineering.format(model[prop]),
}];
grid.source = [{ resistance: 12000 }, { resistance: 0.01234 }];

Engineering exponents occur in multiples of three; it does not automatically replace exponents with SI prefix labels. The raw unit here remains ohms. To require four significant digits, set both minimumSignificantDigits and maximumSignificantDigits to 4.

3. Localized measurement units

For logistics or sensor tables, Intl.NumberFormat can attach supported units:

const temperature = new Intl.NumberFormat('de-DE', {
  style: 'unit', unit: 'celsius', unitDisplay: 'short',
  maximumFractionDigits: 1,
});

grid.columns = [{
  prop: 'temperature', name: 'Temperature', readonly: true,
  cellTemplate: (_h, { model, prop }) =>
    model[prop] == null ? '' : temperature.format(model[prop]),
}];
grid.source = [{ temperature: 21.5 }, { temperature: null }];

The first cell displays 21,5 °C. Supported unit identifiers include kilogram, meter, liter, byte, and compounds such as kilometer-per-hour. Formatting adds a label; converting Celsius to Fahrenheit or meters to feet remains an application operation. Unit names and scientific/engineering notation are defined by ECMA-402 NumberFormat.

4. Compact BI summaries

For a count such as 1250000, use a custom formatter with { notation: 'compact', maximumFractionDigits: 1 } in the same template pattern. In en-US this displays 1.3M; other locales use their own abbreviations. Put full precision in a detail table when users need exact values. Compact display is not a new storage type.

Keep presentation and data compatible

• cellTemplate is a Core API and the custom renderer examples do not require the Pro formatting plugin. They are read-only to keep editing policy explicit; add the numeric editor for editable measurements.
• Do not apply a non-Automatic dataGridFormat.value preset to the same custom-template column: it replaces the authored display. Keep one owner for value presentation.
• Store missing measurements as null; the examples keep them blank instead of coercing them to zero. Validate nonfinite measurements before displaying them.
• Keep units consistent before sorting, charting, or aggregating: 1 kg and 1000 g are equal only after conversion.
• Display precision is not measurement uncertainty, numerical precision, or a rounding rule for calculations. Put the unit and precision policy in the data contract.
• Custom templates do not automatically define spreadsheet export formats. See Format Cells for the formatting/export contract.

Next: time and durations for latency, elapsed work, and clock values.