Data types and units

A type is a whole behaviour

A column's type decides how it stores, sorts, parses, filters, aligns, renders, copies and exports. Beyond the seven built-ins (text, number, date, boolean, lookup, object, image), the grid ships eighty-eight technical types, grouped by domain: network (ipv4, cidr), time (duration, datetime), radix (hex, binary), data (bytes, bitrate), and unit families across mechanical, fluid and thermal, energy, electrical, chemistry and radiation.

See them side by side in the type catalogue demo.

The stored value never changes

A unit type stores one base number and only the display changes, which is the whole design: sorting, filtering, grouping, totals and the pivot all read the number, so 250mm sorts below 1.5 cm correctly rather than 1 sorting before 9. The editor accepts any unit on the ladder, 1.5 GB or a bare byte count, and resolves it to the base on entry.

Configuring a type

Every unit type is built with createUnitType and takes the same options.

dataTypes: {
  span: createUnitType({
    system: 'length',
    unit: 'm',            // what the column STORES
    display: 'auto',      // walk the ladder, or a fixed symbol like 'mm'
    placement: 'suffix',  // or 'prefix', for currencies
    decimals: 2,          // or minDecimals / maxDecimals / significantFigures
  }),
},
columns: [{ field: 'span', type: 'span' }],

A family of your own

Three things define a family and all three are yours: the symbols, where the symbol sits relative to the number, and how the rungs relate. The factor values are the ladder, sorted at load, so there is no separate ordering to declare and no way to get it wrong. Exactly one unit must have a factor of 1, the base.

import { registerUnitSystem, defineUnit, createUnitType } from '@toclocoinc/lattice-grid';

// factor is how many BASE units one of these is. Exactly one must be 1.
registerUnitSystem('yarn', [
  defineUnit('tex',  1,     ['tx']),
  defineUnit('ktex', 1e3,   [], { prefix: 'k' }),
  defineUnit('den',  1 / 9, ['denier']),
]);

createGrid(el, {
  dataTypes: { linearDensity: createUnitType({ system: 'yarn', unit: 'tex', display: 'auto' }) },
  columns: [{ field: 'count', type: 'linearDensity' }],
});

registerUnitSystem is global and throws on a duplicate name, so register once at startup rather than inside a component that may mount twice. See the custom units demo.

The type story runs into statistics, where a column that declares a spec drives process capability, and the rest of the developer guide.