demo D207

Every type in Vue

A column per type, from every group, each sorting on its value not its text

type: 'voltage' · 'bytes' · 'ipv4' · …

This grid lays out one column of every type the grid ships, across every group, each sorting on its real value rather than its text. It is the quick reference for what a type buys you, so you can see the whole set behaving correctly in one place.

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: 500px; }
</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 } 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 });

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          rowKey: 'id',
          toolPanel: { side: 'left', panels: ['columns', 'filters'] },
          // One column per built-in type. Each brings its own parser, comparator,
          // editor, filter and alignment; each sorts on its stored value.
          columns: [
            { field: 'label', title: 'Sample', layout: { pin: 'start', width: 130 } },
            { field: 'address', title: 'ipv4', type: 'ipv4' },
            { field: 'subnet', title: 'cidr', type: 'cidr' },
            { field: 'elapsed', title: 'duration', type: 'duration' },
            { field: 'disk', title: 'bytes', type: 'bytes' },
            { field: 'link', title: 'bitrate', type: 'bitrate' },
            { field: 'status', title: 'hex', type: 'hex' },
            { field: 'temp', title: 'celsius', type: 'celsius' },
            { field: 'voltage', title: 'voltage', type: 'voltage' },
            { field: 'resistance', title: 'resistance', type: 'resistance' },
            { field: 'frequency', title: 'frequency', type: 'frequency' },
            { field: 'pressure', title: 'pressure', type: 'pressure' },
            { field: 'spindle', title: 'rpm', type: 'rpm' },
          ],
          rows,
        },
      };
    },
    template: '<lattice-grid v-bind="config" />',
  }).mount('#grid');
</script>