Using Lattice Grid with Svelte

The adapter is an action

The Svelte adapter is a use: action rather than a component, which is why its factory takes only createGrid: Svelte compiles away, so there is no framework runtime to hand in. The action still carries no second copy of the grid, and cannot disagree with the version you installed.

import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { createLatticeAction } from '@toclocoinc/lattice-grid/modules/svelte';

// An action, so nothing but createGrid is passed in.
const lattice = createLatticeAction({ createGrid });

Applying it to an element

Put the action on a sized div and pass the grid's configuration as its parameter. Update the parameter and the grid updates through its public API, keeping scroll and selection. Grid events arrive as Svelte CustomEvents, so on:cell-changed carries the payload on event.detail.

<script>
  import { createGrid } from '@toclocoinc/lattice-grid';
  import { createLatticeAction } from '@toclocoinc/lattice-grid/modules/svelte';

  const lattice = createLatticeAction({ createGrid });

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

  export let rows;
</script>

<div
  use:lattice={{ columns, rows, rowKey: 'id' }}
  on:cell-changed={(e) => console.log('changed', e.detail)}
  style="height: 520px"
></div>

Cleanup, and one grid per page

An action's destroy runs when the element leaves the DOM, and the adapter destroys the grid there, so cleanup is automatic. Use the Svelte adapter or the web component, not both on one page: two copies of the grid keep separate registries.

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