demo D209

A unit family of your own in Vue

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 Vue 3 version. A createLatticeGrid component takes the configuration through v-bind, and reactive data flows straight into the grid, so it updates the way the rest of your Vue app does.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.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/dist/vue.esm-browser.prod.js';
  import { createGrid, registerUnitSystem, defineUnit, createUnitType } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.107.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>