svelte data grid

The Svelte data grid, licensed per domain.

Lattice Grid is a complete Svelte data grid: millions of rows, virtualised columns, server-side and streaming sources, and a full editing surface. In Svelte it is an action rather than a component, applied to a node you already own.

Add it to a Svelte 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.

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

  const lattice = createLatticeAction({ createGrid });
  let rows = [];
</script>

<div
  use:lattice={{ columns, rows, rowKey: 'id' }}
  on:cell-changed={(e) => save(e.detail)}
></div>

An action, not a component. Svelte's action contract is { update, destroy } over a node the caller owns, which is exactly the shape of the work: create, push changes, tear down. It needs nothing but createGrid, and grid events arrive as CustomEvents on the node.

One grid, every framework

Lattice Grid is not framework-coupled. The same engine renders in Svelte, 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. The Svelte layer is a thin adapter over createGrid; there is also a <lattice-grid> web component if you would rather write a tag. 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.