svelte data grid

Svelte Data Grid: A Component For Every View

The Svelte data grid, licensed per domain. Lattice Grid gives Svelte 5 a component for every view it draws: the grid, the stat tiles, a chart, the board, the plan, the dashboard layout and the tab strip. Millions of rows, virtualised columns, server-side and streaming sources, and a full editing surface, all declared in your markup rather than wired up in a mount hook.

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.

<!-- Dashboard.svelte -->
<script>
  import Provider from '@toclocoinc/lattice-grid/svelte/GridProvider.svelte';
  import Grid from '@toclocoinc/lattice-grid/svelte/Grid.svelte';
  import KPI from '@toclocoinc/lattice-grid/svelte/KPI.svelte';
  import Chart from '@toclocoinc/lattice-grid/svelte/Chart.svelte';

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

<Provider>
  <Grid name="quakes" {...GRID_CONFIG} {rows} onCellChanged={(e) => save(e)} />
  <KPI gridName="quakes" tiles={TILES} columns={5} />
  <Chart gridName="quakes" type="bar" x="region" y="count" />
</Provider>

Components you compile, the way Svelte packages ship

Grid.svelte, KPI.svelte, Chart.svelte, Kanban.svelte, Gantt.svelte, Layout.svelte, Tabs.svelte, GridProvider.svelte and Router.svelte live under @toclocoinc/lattice-grid/svelte/ as source your own toolchain compiles, so they are built by the same Svelte your application runs. svelte is an optional peer dependency, so nothing extra is installed for anyone who is not using it.

One instance, kept

Each component builds its view once and pushes changed props into it, so a prop change, or a block toggled twice, never throws away scroll position, selection, expansion or an open editor. bind:this plus grid() or instance() hands you the live instance, the same object the plain factory returns. Hold large row arrays in $state.raw and assign a new array when the data changes: the components compare by identity, which is what keeps a million rows out of a deep proxy.

Views find their grid, and tabs hold real components

Wrap a subtree in GridProvider, give a grid a name, and any grid-bound view takes that name through gridName, so a tile strip written above its grid fills the moment the grid arrives. A tab's content is a snippet named after the tab, rendered inside the strip with the surrounding context intact, so a grid in one tab is findable by a chart in another, and configuration-driven tabs still work on the same strip. Router.svelte scopes a data router to a component, so one feed drives every view beneath it.

Events are callback props, and a live feed is a prop too

Svelte 5 removed component events, so cell:changed arrives as onCellChanged, with the all-lowercase oncellchanged accepted for anyone who prefers the DOM attribute style. rowUpdates is a keyed diff applied in place and predicates are named filters that compose with whatever the reader has already set. The use:lattice action is unchanged and still supported for a node you already own.

The integration reference lists every component, its props and its callbacks, and the module map shows what each view costs to add. Svelte 5 and the browser: the components are written in runes and snippets, and nothing is built during server rendering.

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. What changes is only the way a view is declared: Svelte markup, a React component, a Vue component, an Angular template, or a <lattice-grid> tag on a page with no build step at all. 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.

By feature

Full source, a live embed and Svelte-specific caveats for each:

• Editing
• Data router