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">
<style>
  #grid > div { height: 460px; }
</style>
<div id="grid"></div>

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

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

  // 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. Register
  // each system once at startup rather than inside a component that may mount twice.
  registerUnitSystem('yarn', [
    defineUnit('tex',  1,     ['tx']),
    defineUnit('ktex', 1e3,   [], { prefix: 'k' }),
    defineUnit('den',  1 / 9, ['denier']),
  ]);

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          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,  // 1,500 tex renders as 1.5 ktex; typing "9 den" stores 1
        },
      };
    },
    template: '<lattice-grid v-bind="config" />',
  }).mount('#grid');
</script>