demo D209

A unit family of your own: JavaScript Data Grid Demo

registerUnitSystem · createUnitType

This grid registers a unit family of your own from its symbols and their conversion factors, then uses it like any built-in unit type. It lets a column speak a domain's own units, parsed and converted correctly, without waiting for the unit to be built in.

Building…

Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.js"></script>

<div id="grid" style="height: 460px"></div>

<script>
  // A unit family of your own. factor is how many base units one of these is;
  // exactly one must be 1. The factors are the ladder, sorted at load.
  LatticeGrid.registerUnitSystem('yarn', [
    LatticeGrid.defineUnit('tex',  1,     ['tx']),
    LatticeGrid.defineUnit('ktex', 1e3,   [], { prefix: 'k' }),
    LatticeGrid.defineUnit('den',  1 / 9, ['denier']),
  ]);

  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    dataTypes: {
      linearDensity: LatticeGrid.createUnitType({ system: 'yarn', unit: 'tex', display: 'auto' }),
    },
    columns: [
      { field: 'yarn', title: 'Yarn', layout: { pin: 'start', width: 130 } },
      { field: 'count', title: 'Linear density', type: 'linearDensity', total: 'median' },
    ],
    rows,  // 1500 tex renders as 1.5 ktex; typing "9 den" stores 1
  });
</script>