demo D209

A unit family of your own in Web Component

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…

This is the web component version. A lattice-grid custom element renders the grid with no build step, its configuration set as a property, so it works on a page that has no bundler at all.

The configuration

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

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/webcomponent.esm.min.js';
  defineLatticeGrid();
</script>

<lattice-grid row-key="id" style="display: block; height: 460px"></lattice-grid>

<script type="module">
  import { registerUnitSystem, createUnitType } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/webcomponent.esm.min.js';

  // A unit family of your own, from the element's own module so its columns
  // recognise the type. factor is how many base units one of these is; exactly
  // one must be 1. The factors are the ladder, sorted at load. aliases are the
  // extra spellings the parser accepts, prefix is the SI-style letter, and auto
  // keeps a unit on the display ladder.
  registerUnitSystem('yarn', [
    { symbol: 'tex',  factor: 1,     aliases: ['tx'],     binary: false, prefix: null, auto: true },
    { symbol: 'ktex', factor: 1e3,   aliases: [],         binary: false, prefix: 'k',  auto: true },
    { symbol: 'den',  factor: 1 / 9, aliases: ['denier'], binary: false, prefix: null, auto: true },
  ]);

  const grid = document.querySelector('lattice-grid');
  grid.config = {
    dataTypes: {
      linearDensity: 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' },
    ],
  };
  grid.rows = rows;  // 1500 tex renders as 1.5 ktex; typing "9 den" stores 1
</script>