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">

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

<script type="module">
  import { registerUnitSystem, defineUnit, createGrid, createUnitType } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';

  // 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.
  registerUnitSystem('yarn', [
    defineUnit('tex',  1,     ['tx']),
    defineUnit('ktex', 1e3,   [], { prefix: 'k' }),
    defineUnit('den',  1 / 9, ['denier']),
  ]);

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