vue data grid · editing

Vue Grid: Editing

Type into a cell, or edit a whole row as one transaction: both run through the same LatticeGrid component, built once at module scope from createLatticeGrid and used like any other Vue component in your template.

Also in: React Angular Svelte

Install and import

createLatticeGrid is a named export of the vue module, built once and reused everywhere you need a grid; the licence line applies only once you deploy off localhost.

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 { createLatticeGrid } from '@toclocoinc/lattice-grid/modules/vue';

export const LatticeGrid = createLatticeGrid({ vue, createGrid });

CellEditing.vue

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

// edit on the grid switches editing on; edit on a column says which columns
// take it. "circuit" carries no edit key below, so it stays read-only even
// though editing is on for the grid as a whole.
const columns = [
  { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
  { field: 'region', title: 'Region', edit: true },
  { field: 'status', title: 'Status', filter: { type: 'set' }, edit: true },
  { field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' }, edit: true },
  { field: 'charge', title: 'Monthly charge', type: 'number',
    format: { style: 'currency', currency: 'GBP' }, filter: { type: 'number' }, edit: true },
];

const rows = []; // circuit records
</script>

<template>
  <LatticeGrid
    row-key="id"
    selection="multiple"
    edit
    :columns="columns"
    :rows="rows"
    style="height: 460px"
  />
</template>

RowEditing.vue

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

// mode: 'row' opens the whole row for editing at once, as one transaction,
// rather than one cell at a time.
const columns = [
  { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
  { field: 'region', title: 'Region', edit: true },
  { field: 'status', title: 'Status', filter: { type: 'set' }, edit: true },
  { field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' }, edit: true },
  { field: 'charge', title: 'Monthly charge', type: 'number',
    format: { style: 'currency', currency: 'GBP' }, filter: { type: 'number' }, edit: true },
];

const rows = []; // circuit records
const editConfig = { enabled: true, mode: 'row' };
</script>

<template>
  <LatticeGrid
    row-key="id"
    selection="multiple"
    :edit="editConfig"
    :columns="columns"
    :rows="rows"
    style="height: 460px"
  />
</template>

See it running

Building…

Loading a live grid…

Open this demo's Vue tab →

Building…

Loading a live grid…

Open this demo's Vue tab →

Working in Vue

Reaching the grid. A template ref on <LatticeGrid> exposes a grid() getter: this.$refs.grid.grid().export.toCsv() (or gridRef.value.grid() under <script setup>) is the live instance createGrid itself would have returned.

Props are diffed by identity. An inline :columns="[{ field: 'a' }]" is a new array every render and reconfigures the grid every render; hold columns at module scope or behind a computed, as the files above do.

Events are re-emitted under dashed names. cell:changed arrives as @cell-changed, because a colon in a Vue template binding is directive syntax, and every event is declared in emits, so none of them falls through to the host element.

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