A unit family of your own

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.min.css">

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/webcomponent.esm.js';
  defineLatticeGrid();
</script>

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

<script type="module">
  import { registerUnitSystem, defineUnit, createUnitType } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/webcomponent.esm.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.
  registerUnitSystem('yarn', [
    defineUnit('tex',  1,     ['tx']),
    defineUnit('ktex', 1e3,   [], { prefix: 'k' }),
    defineUnit('den',  1 / 9, ['denier']),
  ]);

  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>