svelte data grid · editing

Svelte Grid: Editing

Type into a cell, or edit a whole row as one transaction: both run through the same Grid.svelte component, shipped as source your own toolchain compiles, with every configuration key taken as a prop.

Also in: React Angular Vue

Install and import

Grid.svelte lives at @toclocoinc/lattice-grid/svelte/Grid.svelte, compiled by whichever Svelte your application already runs.

npm install @toclocoinc/lattice-grid
# svelte is an optional peer dependency: nothing extra installs
# on a project that is not using it
# free on localhost; a production domain needs a licence key (see /pricing/)

The files

CellEditing.svelte

<!-- CellEditing.svelte -->
<script>
  import Grid from '@toclocoinc/lattice-grid/svelte/Grid.svelte';
  import '@toclocoinc/lattice-grid/css';

  // 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 },
  ];

  let rows = $state.raw([]); // circuit records
  let grid;
</script>

<Grid bind:this={grid} rowKey="id" selection="multiple" edit={true} {columns} {rows} style="height: 460px" />

RowEditing.svelte

<!-- RowEditing.svelte -->
<script>
  import Grid from '@toclocoinc/lattice-grid/svelte/Grid.svelte';

  // 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 },
  ];

  let rows = $state.raw([]); // circuit records
  const editConfig = { enabled: true, mode: 'row' };
</script>

<Grid rowKey="id" selection="multiple" edit={editConfig} {columns} {rows} style="height: 460px" />

See it running

Building…

Loading a live grid…

Open the plain-JS cell-editing demo →

Building…

Loading a live grid…

Open the plain-JS row-editing demo →

Working in Svelte

Reaching the grid. bind:this={grid} plus the component's own grid() export hands you the live instance, the same object createGrid itself would return; it is null until the component has mounted.

class, style and id go on the host; everything else is configuration. Every other prop you pass is diffed with Object.is and pushed through setAll on change, so hold rows in $state.raw (or a plain variable) and assign a new array when the data actually changes, never a deep $state proxy over it.

The use:lattice action still works. If you already own the element, use:lattice={config} is unchanged and does the same job with no component wrapper at all.

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