Using Lattice Grid with Vue

Install and build the component

Install @toclocoinc/lattice-grid, then call the adapter factory with your Vue and the grid's createGrid. It returns a Vue 3 component definition.

import * as vue from 'vue';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { createLatticeGrid } from '@toclocoinc/lattice-grid/modules/vue';

// A Vue 3 component definition, bound to your Vue and the grid.
const LatticeGrid = createLatticeGrid({ vue, createGrid });

Vue and the grid are passed in rather than imported by the adapter, so it takes no dependency on Vue and carries no second copy of the grid: one Vue, one grid, the versions you installed, and an adapter that cannot disagree with either.

Reactive props and events

Bind :columns and :rows and the grid updates through its public API as they change, keeping scroll, selection and open editors across a re-render rather than rebuilding. Grid events arrive as emits: @cell-changed, @selection-changed and the rest, kebab-cased from the grid's own event names.

<template>
  <LatticeGrid
    row-key="id"
    :columns="columns"
    :rows="rows"
    :style="{ height: '520px' }"
    @cell-changed="onCellChanged"
  />
</template>

<script setup>
const columns = [
  { field: 'circuit', title: 'Circuit', layout: { pin: 'start', width: 190 } },
  { field: 'region', title: 'Region', filter: { type: 'set' } },
  { field: 'charge', title: 'Monthly charge', type: 'number',
    format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
];
</script>

Reaching the grid instance

A template ref exposes .grid, the real instance, for anything the props do not cover.

<LatticeGrid ref="grid" row-key="id" :columns="columns" :rows="rows" />

// grid.value.grid is the real instance: the whole public API.
grid.value.grid.export.csv({ download: true });

Cleanup, and one grid per page

The adapter destroys the grid when the component unmounts, so there is nothing to release by hand. Use the Vue adapter or the web component, not both on one page: the web component carries its own copy of the grid, and two copies keep separate registries.

See also the Vue data grid overview and the developer guide.