vue data grid

Vue Data Grid: A Component For Every View

The Vue 3 data grid, licensed per domain. Lattice Grid gives Vue 3 a component for every view it draws: the grid, the stat tiles, a chart, the board, the plan, the dashboard layout and the tab strip. Millions of rows, virtualised columns, server-side and streaming sources, and a full editing surface, all behind a template rather than a page of mount and teardown hooks.

Add it to a Vue app

Install @toclocoinc/lattice-grid from npm and load the stylesheet with import '@toclocoinc/lattice-grid/css'. The whole grid is in the package, with no peer dependencies of its own.

// lattice.js, built once at module scope
import * as vue from 'vue';
import { createGrid } from '@toclocoinc/lattice-grid';
import { createKPI } from '@toclocoinc/lattice-grid/modules/kpi';
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
import { createLatticeVue } from '@toclocoinc/lattice-grid/modules/vue';

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

// Dashboard.vue
<script setup>
import { L } from './lattice.js';

L.provideLatticeGrids();
const rows = shallowRef([]);
</script>

<template>
  <component :is="L.LatticeGrid" name="quakes" v-bind="GRID_CONFIG" :rows="rows"
             @cell-changed="save" />
  <component :is="L.LatticeKPI" grid-name="quakes" :tiles="TILES" :columns="5" />
  <component :is="L.LatticeChart" grid-name="quakes" type="bar" x="region" y="count" />
</template>

A component per view, not a grid and a lifecycle hook for everything else

createLatticeVue builds the set your application uses from one call, and each view has a factory of its own if you would rather take them one at a time: createLatticeGrid, createLatticeKPI, createLatticeChart, createLatticeKanban, createLatticeGantt, createLatticeLayout and createLatticeTabs. Nothing is imported for you, so an application that never draws a board never downloads one.

A re-render costs you nothing

Each view is built once and takes a changed prop into the instance already on screen, so scroll position, selection, expansion and any open editor survive a re-render, and unmounting destroys it and leaves nothing on a timer or an event bus. A prop a view cannot take while it is running is named once in a warning rather than dropped in silence. Hold large row arrays in a shallowRef and assign a new array when the data changes: props are compared by identity, which is what keeps a million rows off Vue's reactivity system.

Views find their grid, whatever order they mount in

Call provideLatticeGrids() in a parent's setup, give a grid a name, and any grid-bound view takes that name through grid-name. A tile strip written above its grid fills the moment the grid arrives, which is the case a template ref cannot answer. A tab's content is a named slot, so a tab holds a real component with its own props, refs and injections, and configuration-driven tabs still work on the same strip. provideLatticeRouter scopes a data router to a component, so one feed drives every view beneath it and is torn down with that component.

Events are emits, and a live feed needs no ref

Grid events are re-emitted under dashed names, so cell:changed binds as @cell-changed, because a colon in a Vue template is directive syntax. Every event is declared in emits, so none of them falls through onto the host element, and @grid-ready hands you the live grid. For a moving screen, :row-updates is a keyed diff applied in place and :predicates are named filters that compose with whatever the reader has already set.

The integration reference lists every component, its props and its emits, and the module map shows what each view costs to add. Vue 3.3 and up, in the browser, with no template compiler needed in your build.

One grid, every framework

Lattice Grid is not framework-coupled. The same engine renders in Vue, in another framework, or on a plain HTML page, and behaves identically in each, so a team moving between them learns one API and tests one set of behaviours. What changes is only the way a view is declared: a Vue template, a React component, a Svelte component, an Angular template, or a <lattice-grid> tag on a page with no build step at all. Type declarations ship with the package, so TypeScript projects get full IntelliSense with no extra setup.

Priced per domain, not per developer

A licence covers the domain the grid runs on, not the person: add developers, contractors and agencies without adding cost, and without an audit conversation. Development on localhost is free and needs no key. Deployment is $1,000 per domain, or $10,000 for a wildcard covering every subdomain, both with a year of support and unlimited developers.

Read the docs See it running Free on localhost. See pricing.

By feature

Full source, a live embed and Vue-specific caveats for each:

• Editing
• Data router