vue data grid · data router

Vue Grid: Data Router

One feed, split across as many grids as you want by a key on each record, provided from one setup call. Neither grid below owns its own fetch or its own WebSocket; each just names the route it wants.

Also in: React Angular Svelte

Install and import

npm install @toclocoinc/lattice-grid
# free on localhost; a production domain needs a licence key (see /pricing/)

The files

lattice.js

// lattice.js, built once at module scope
import * as vue from 'vue';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { createDataRouter } from '@toclocoinc/lattice-grid/modules/data-router';
import { createLatticeVue } from '@toclocoinc/lattice-grid/modules/vue';

export const L = createLatticeVue({ vue, createGrid, createDataRouter });

Orders.vue

<!-- Orders.vue -->
<script setup>
import { L } from './lattice';

// Scoped to this component: built once on first use, destroyed with it -
// rebuilding on every render would drop every attached grid and every row
// it holds.
L.provideLatticeRouter({ key: 'type', rowKey: 'id' });

const MONEY = { style: 'currency', currency: 'USD', decimals: 0 };
const orderColumns = [
  { field: 'id', title: 'Ref', layout: { width: 110, pin: 'start' } },
  { field: 'region', title: 'Region', filter: { type: 'set' } },
  { field: 'service', title: 'Service', filter: { type: 'set' } },
  { field: 'value', title: 'Value', type: 'number', format: MONEY, total: 'sum' },
];
const returnColumns = orderColumns.map((c) => (c.field === 'value' ? { ...c, title: 'Refund' } : c));
</script>

<template>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
    <component :is="L.LatticeGrid" route="order" row-key="id" selection="multiple"
               :highlight-on-change="{ duration: 500 }" :columns="orderColumns" :rows="[]"
               style="height: 320px" />
    <component :is="L.LatticeGrid" route="return" row-key="id"
               :highlight-on-change="{ duration: 500 }" :columns="returnColumns" :rows="[]"
               style="height: 320px" />
  </div>
</template>

See it running

Building…

Loading a live grid…

Open this demo's Vue tab →

Working in Vue

The router belongs to the component that provides it. L.provideLatticeRouter(config) is called once in setup (or the top level of <script setup>); the router is built lazily by the first <component :is="L.LatticeGrid" route="…"> beneath it and destroyed when this component's scope is disposed.

The config is read once. Rebuilding the router would drop every attached grid and every row it holds, so it is not reactive: pass a plain object, not a ref you intend to mutate.

<component :is="…">, not a named import. Because createLatticeVue builds its components dynamically from the factories you pass, they are referenced as L.LatticeGrid through the dynamic component binding rather than imported directly by name.

Read the docs Vue data grid overview Free on localhost. See pricing.