Lattice Grid

Lattice is one typed, virtualised data layer in the browser and a family of views on it: data grid, Kanban board, Gantt chart, calendar, resource scheduler, form, shell layout, dashboards and the Designer, 38+ chart types, KPI tiles and map views, all reading the same rows, filters and theme. Vanilla JavaScript, no runtime dependencies, no build step; adapters for React, Vue, Svelte, Web Components and htmx, Angular compiled inside the package.

Version 1.100.0 · latticegrid.dev · TOCLOCO Inc

---

What's here

This repository is the distribution: the built library, its type declarations and the documentation. Everything is self-contained: nothing is fetched at runtime, not a CDN, not a font, not an icon sprite.

File	What it is
lattice-grid.min.js	The library. UMD: works with a <script> tag.
lattice-grid.esm.min.js	The same, as an ES module.
lattice-grid.min.css	The theme. Required.
lattice-grid.d.ts	TypeScript declarations.
angular/	The Angular components, compiled ahead of time: @toclocoinc/lattice-grid/angular.
docs/api/	The API reference, one page per module. Start at docs/api/index.html.
docs/API.html	The same reference, everything on one page.
docs/api-detail.html	The developer guide: what each part does, and why.

Every module is optional and none of them is loaded unless you import it.

Module	What it is
modules/charts.esm.min.js	Thirty-eight chart types drawn from the grid's data, including control and capability charts.
modules/data-router.esm.min.js	One stream split by property and routed to many grids and views.
modules/kanban.esm.min.js	Board view: rows as cards grouped into columns.
modules/gantt.esm.min.js	Editable, dependency-aware project plan with a computed critical path.
modules/calendar.esm.min.js	Month and week views of rows as cards, keyed by a date field.
modules/scheduler.esm.min.js	Resource scheduler: resources as rows and events as editable bars on a shared time axis.
modules/form.esm.min.js	An opt-in form: named fields in nested rows and columns, validation and rules, bound to a grid row or the data router.
modules/shell.esm.min.js	Cells nested as rows and columns to any depth, sized synchronously by CSS.
modules/layout.esm.min.js	A reconfigurable dashboard surface: windows on a cell grid.
modules/dashboard.esm.min.js	One JSON spec naming a layout, panels and links, built into a wired page.
modules/designer.esm.min.js	A designer over the dashboard spec, whose view mode is createDashboard.
modules/kpi.esm.min.js	A panel of stat tiles, each an aggregate over the dataset.
modules/mapview.esm.min.js	A 3D map of the grid's rows, linked to its filters and selection both ways.
modules/leaflet.esm.min.js	Your Leaflet map as one more viewer of a grid.
modules/deckgl.esm.min.js	Your deck.gl map as one more viewer of a grid.
modules/geometry.esm.min.js	The geometry column type, registered by import, with spatial operators.
modules/alarms.esm.min.js	Turns graded data into alarm events: level, clear and per-key identity.
modules/list.esm.min.js	The list column type, registered by import, with its own filter and editor.
modules/tabs.esm.min.js	A tab strip where each tab is its own full grid.
modules/presets.esm.min.js	Design-system presets: a variable file and a function over the theme-token contract.
modules/ai.esm.min.js	Bring-your-own-model narrative and insights grounded on computed figures.
modules/mock-socket.esm.min.js	A serverless stand-in for a live WebSocket feed.
modules/htmx.esm.min.js	htmx integration: survives htmx's DOM swaps, hydrates from a server-rendered <table>, and drives sort, filter and infinite scroll over plain htmx requests. UMD and CJS builds sit beside it.
modules/dhtmlx-compat.esm.min.js	A compatibility wrapper for an existing grid API, for moving an existing integration across without rewriting it.
modules/devtools.esm.min.js	The devtools panel, including the accessibility checks.
modules/react.esm.min.js	React adapter.
modules/vue.esm.min.js	Vue adapter.
modules/svelte.esm.min.js	Svelte adapter.
modules/webcomponent.esm.min.js	<lattice-grid> as a custom element.

This is the short list. Modules & entry points is the complete map — every framework adapter, feature module and chart-type extension, with its npm import, CDN path and browser global.

---

What it does

A short tour. The API reference has the whole of it; this is enough to know whether the grid covers what you need.

Data and scale

• Virtualised rows and columns. Hundreds of thousands of rows on a typed-array column store, with dictionary encoding and presence bitsets. Row height can be fixed, per-row, or measured from content.
• Sort, filter, group, pivot and aggregate, each as an independent stage over the same data. Multi-column sort, a filter grammar with typed operators, row grouping to any depth, full pivoting, and a totals row that reduces by any of the built-in kernels or one of your own.
• Live data. rows.apply({add, update, remove}) patches in place: the grid re-queries the stages a change actually touched and repaints the cells that moved. A feed can be paused and resumed with the queue held.
• Any source. Rows in memory, server-side paging, infinite scroll, streaming, or a grid derived from another grid. Sorting and filtering can be handed to the server or left to the grid.
• Pushdown adapters. One portable query, translated to whatever an engine speaks. An adapter declares what it can answer, the grid works out what to send and finishes the rest itself, and reports the split so a slow query can be diagnosed. Adapters ship for OData, an ordinary REST endpoint, DFQL and DuckDB.
• A full analytical engine, without carrying one. duckdbAdapter takes a DuckDB connection you created and imports nothing, so a grid can query a Parquet file of millions of rows in the browser while this package stays at zero dependencies. demo/duckdb.html does exactly that with no server at all.

Grids that read from other grids

• Derived grids. A grid whose rows are produced from another grid rather than loaded: grouped and aggregated, unnested, filtered, ranked or profiled, in its own element with its own columns. It follows the source live, and a change is patched into the last grouping rather than re-derived, so five hundred updates against a 200,000-row source cost under 300 ms in total.
• Cross-filtering. A derived panel can filter the grid it summarises. Clicking one row narrows the source without collapsing the panel that was clicked, so there is always something else to click, and several panels compose.
• Joins. Two grids holding their own data and a third showing where they meet. inner keeps what matched; left keeps everything and leaves the unmatched rows visible, which is the shape you want when the unmatched rows are the finding. Both sides stay live.
• Statistic tiles. createStat renders a headline figure over a grid, with a change indicator, threshold bands and its confidence interval.

Working with the data

• Editing. Cell, row and form editing, with twenty-three editors: text, number, date, time, select, multi-select, colour, rating, slider, segmented, code, password, icon picker and more. Validation, async commits, optimistic updates with rollback, and a full undo history.
• Selection and ranges. Cell, row, column and rectangular range selection, with clipboard behaviour that round-trips through Excel.
• Fill, copy and paste across a range, including formulas.
• Formulas. A closed, safe expression language, no eval, no host access, with maths, text, logic, date and statistical functions, evaluated against other columns.
• Export. CSV with fields sanitised against formula injection, real .xlsx written without a ZIP dependency, the clipboard as TSV with a matching paste parser, and print. All of them take the filters, sort and grouping the user is looking at, or the whole set.

Seeing the data

• Charts. modules/charts draws thirty-eight chart types from the grid's own data: line, bar, area, scatter, pie, donut, sunburst, treemap, radar, gauge, funnel, heatmap, histogram, box plot, candlestick, combo, geomap, sankey, chord, network, stream, violin, gantt, Q-Q, ECDF, Lorenz, correlogram, control and capability. They follow the grid's filters, and clicking a mark can filter it in turn. A scatter can carry its own least-squares fit, and any mark can carry a whisker for the uncertainty behind it.
• Statistics. grid.statistics profiles a column in one pass: count, missing, distinct, five-number summary, standard deviation, outliers and a histogram, and answers correlations, regressions and weighted averages. Thirty-eight reduction kernels are available to the totals row, and you can register your own. A profile also says what is worth looking at: a constant column, a key that is not unique, a fifth of the rows missing.
• Statistical process control. Cp and Cpk against short-term variation from the moving range, Pp and Ppk against overall, and the share of parts outside the customer's tolerance, which is declared once on the column so the indices, the charts and any cell rule cannot disagree about it. Control charts name their lines and number every rule break, under Western Electric's four rules or Nelson's eight. A capability report draws the readings against the tolerance with a curve for each of the two spreads, and a moving range chart completes the pair.
• Confidence intervals. On a mean using the t distribution, on a rate using the Wilson score, on a regression slope, and on a capability index. The line the product draws is that it quantifies uncertainty and does not adjudicate hypotheses: there are no p-values and no significance tests.
• Shadow columns. Values the grid maintains about itself: how many times a row has changed, what a value was when the page loaded, how fast it is moving, its rank, percentile or share of the total. Real columns: sortable, filterable, exportable, saved into a view.
• Conditional formatting as runtime state a user can change, with rules that either name a threshold or describe the data: the top decile, the outliers, two deviations above the mean.
• In-cell charts, sparklines, data bars, progress, ratings and pills.
• Header histograms that double as a filter.

Views on the same data

Every view below is a viewer of the same dataset, not a copy of it. Each reads rows through the same keyed-diff contract a grid exposes (rows.apply({ add, update, remove })), so a sort, filter, group or edit made in one is the sort, filter, group or edit the others already see, and a Data Router can drive a grid, a board, a chart and a map off one feed.

• Kanban. modules/kanban draws rows as cards grouped into columns by a configurable property, with workflow rules, swimlanes, sprints and an undo history. It binds to a live grid or takes rows directly.
• Gantt. modules/gantt turns a task list into a real schedule: a CPM engine computes each task's early/late start and finish, its slack and the zero-float critical path, recomputing on every edit. Map your own field names so the rows you already have arrive as they are.
• Calendar. modules/calendar lays rows out as cards on a month grid or a week day-grid, keyed by a date field, with rescheduling that writes back.
• Resource scheduler. modules/scheduler shows resources as rows in a real grid and each event as a bar on a shared time axis; events drag, resize and reassign, and every change writes back through events.apply as one undo step.
• Form. modules/form builds named items in nested rows and columns, and the whole form is already in the document and measurable the moment createForm returns.
• Shell and layout. modules/shell nests cells as rows and columns sized by pure CSS flexbox, and modules/layout puts movable, resizable windows on a cell grid for a reconfigurable dashboard surface.
• Dashboard and Designer. modules/dashboard describes a dashboard as one JSON spec (the layout, the panels and the links between them) and createDashboard builds the wired page; modules/designer edits that same spec, its view mode being createDashboard itself.
• KPI. modules/kpi renders a panel of stat tiles, each an aggregate over the routed rows.
• Maps. modules/mapview puts a 3D map beside the grid that is always a picture of the grid's current rows; modules/leaflet and modules/deckgl make your own Leaflet or deck.gl map one more viewer, linked both ways.

The interface

• Tool panels for columns, filters, views, quick filter, formatting and statistics, docked or as an icon rail.
• Saved views, the whole grid state as a named, shareable object, stored on your server or in the browser.
• Column menu, context menu and status bar, each extensible with your own items.
• Pinned columns and rows, column groups, resize, reorder, autosize, and a density control.
• Master–detail rows, tree data, and full-width rows.
• Presence: live cursors, selections and edit locks for collaborative use, carrying intent and never values.
• Comments threaded on cells, and an annotation layer for presenting.
• Full-screen mode, print, and image capture.

Built in, not bolted on

• Accessible. Keyboard operable throughout, ARIA grid semantics, a live region for announcements, honours reduced motion, forced colours and large target sizes. The devtools module runs the accessibility checks in place.
• Internationalised. Twenty-two complete locale catalogues across nineteen languages, right-to-left layout, and locale-aware number, date and currency formatting throughout.
• Themeable through CSS custom properties, with light and dark built in and a reset that keeps a host page's stylesheet out.
• Typed. Complete TypeScript declarations, checked against the runtime on every build.
• Zero runtime dependencies. Nothing is fetched at runtime, not a CDN, not a font, not an icon sprite.

---

Quick start

No build step

The script-tag path is a first-class target, not an afterthought. Two files:

<link rel="stylesheet" href="lattice-grid.min.css">
<script src="lattice-grid.min.js"></script>

<div id="grid" style="height: 600px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    columns: [
      { field: 'circuitId', title: 'Circuit' },
      { field: 'monthlyCharge', type: 'number', format: 'currency:GBP:2', total: 'sum' },
      { field: 'installedOn', type: 'date', format: 'date:dd MMM yyyy' },
    ],
    rows,
    rowKey: 'id',
  });
</script>

With a bundler

npm install @toclocoinc/lattice-grid

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

const grid = createGrid(element, { columns, rows, rowKey: 'id' });

React, Vue, Svelte and Web Components

Optional adapters, thin by design: the grid is created once against a host element, prop changes are pushed through the same public API you would call by hand, and it is destroyed on unmount.

You pass the framework in. Each adapter is a factory taking the framework and createGrid rather than importing either, so the package keeps its promise of no runtime dependencies, and an adapter can never disagree with the version of the grid you already loaded.

import React from 'react';
import { createGrid } from '@toclocoinc/lattice-grid';
import { createLatticeGrid } from '@toclocoinc/lattice-grid/modules/react';

const LatticeGrid = createLatticeGrid({ React, createGrid });

The web component is the exception: it carries the grid inside it, so use it or createGrid in a page, not both, two copies keep separate registries, and a renderer registered through one will not appear in the other.

The full setup for each framework is in the developer guide.

htmx and the compatibility wrapper

Two integrations that are not framework adapters.

htmx. modules/htmx lets a grid survive htmx's own DOM swaps, hydrate from a server-rendered <table>, and drive sort, filter and infinite scroll over plain htmx requests. It is a complete package rather than an add-on, createGrid, autoInit, hydrateTable, readTable, serialiseState and restoreState are re-exported alongside its own functions, so a page using it imports this and never the base package as well. A server-rendered <th data-type="number"> (any built-in type name, including the extended catalogue — bytes, date, and so on) sets that column's type; a sibling data-format sets format. An unknown data-type is warned about once and ignored, falling back to sampled shape typing. A config.columns entry passed to hydrateTable still wins over the markup for the same column.

Compatibility wrapper. modules/dhtmlx-compat exposes a Grid-shaped API over Lattice, for moving an existing integration across a piece at a time rather than rewriting it in one go. It shares the core the page already loads rather than carrying its own, so load lattice-grid alongside it — a bundler wires the shared import for you, and a <script src> page loads the global build first — and a licence set on that core applies to these grids too.

TypeScript

Declarations ship in the box and are wired up in package.json, so editors find them without configuration: autocomplete, inline documentation and type checking against the real API.

import type { Grid, GridConfig, ColumnDef } from '@toclocoinc/lattice-grid';

The declarations are checked against the running product on every build, so what your editor tells you and what the grid does cannot drift apart.

---

Modules & entry points

The package ships the core plus a set of optional modules, each as its own file. Nothing is loaded unless you import it, and a page that imports none of the modules pays for none of them. This section is the complete map: every public entry point, how to import it from npm, how to reach it on a CDN, and — for the <script>-tag builds — the browser global it leaves behind.

Three variants ship for every entry point, the chart-type extensions included. Pick the one your page loads by:

• ESM — *.esm.min.js. The default for a bundler or a native <script type="module">. This is what the bare @toclocoinc/lattice-grid and @toclocoinc/lattice-grid/modules/<name> specifiers resolve to.
• UMD — *.min.js. For a plain <script src> load; it defines a browser global (below). Reach it from npm with the explicit .js specifier (@toclocoinc/lattice-grid/modules/<name>.js).
• CJS — *.min.cjs. For require(). Reach it with the explicit .cjs specifier, or let require('@toclocoinc/lattice-grid') resolve it.

Alongside those: the stylesheet lattice-grid.min.css (required, imported as @toclocoinc/lattice-grid/css) and the TypeScript declarations lattice-grid.d.ts (wired through package.json, so no configuration).

On a CDN, every file below sits under the same base — jsDelivr serves the published package directly:

https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1/<file>

@1 pins the major: a page in production picks up fixes within 1.x and never a breaking release, where @latest would. To freeze a page on one exact build, replace @1 with the full version getVersion() reports. The <file> column in each table below is exactly what you append.

Core

npm import	CDN <file>	Browser global
@toclocoinc/lattice-grid (ESM)	lattice-grid.esm.min.js	—
@toclocoinc/lattice-grid (CJS require)	lattice-grid.min.cjs	—
@toclocoinc/lattice-grid/lattice-grid.min.js (UMD)	lattice-grid.min.js	LatticeGrid
@toclocoinc/lattice-grid/css	lattice-grid.min.css	— (stylesheet)
types	lattice-grid.d.ts	— (declarations)

Framework adapters

Each adapter ships all three variants (modules/<name>.esm.min.js, modules/<name>.min.js, modules/<name>.min.cjs). The npm ESM specifier is shown; append .js for the UMD build or .cjs for CommonJS.

Module	npm import (ESM)	CDN <file> (UMD)	Browser global	What it is
react	@toclocoinc/lattice-grid/modules/react	modules/react.min.js	LatticeGridReact	React adapter.
vue	@toclocoinc/lattice-grid/modules/vue	modules/vue.min.js	LatticeGridVue	Vue adapter.
svelte	@toclocoinc/lattice-grid/modules/svelte	modules/svelte.min.js	LatticeGridSvelte	Svelte adapter.
angular (compiled)	@toclocoinc/lattice-grid/angular	—	—	Angular components, compiled ahead of time: one standalone component per viewer, plus the Data Router as a service. A partial-Ivy library your build's Angular Linker handles like any other; no JIT compiler in the page. @angular/core and @angular/common are optional peers, so a non-Angular install pulls in nothing.
angular (deprecated)	@toclocoinc/lattice-grid/modules/angular	modules/angular.min.js	LatticeGridAngular	The old run-time adapter for the grid alone. Needs Angular's JIT compiler, which a production build does not ship; use @toclocoinc/lattice-grid/angular instead.
webcomponent	@toclocoinc/lattice-grid/modules/webcomponent	modules/webcomponent.min.js	LatticeGrid (extends it)	<lattice-grid> as a self-contained custom element.
htmx	@toclocoinc/lattice-grid/modules/htmx	modules/htmx.min.js	LatticeGridHtmx	htmx integration that survives DOM swaps and hydrates from a server-rendered <table>.

The framework adapters take the framework and createGrid handed in rather than importing either (see Quick start). The web component and htmx are self-contained: they carry the grid, so load them on their own, not beside the base package.

Feature modules

Each ships all three variants. The npm ESM specifier is shown; append .js for the UMD build or .cjs for CommonJS.

Module	npm import (ESM)	CDN <file> (UMD)	Browser global	What it is
charts	@toclocoinc/lattice-grid/modules/charts	modules/charts.min.js	LatticeGrid (extends it)	Charts bound to the grid's own result (createChart).
data-router	@toclocoinc/lattice-grid/modules/data-router	modules/data-router.min.js	LatticeGridDataRouter	One stream split by property and routed to many grids or charts.
kanban	@toclocoinc/lattice-grid/modules/kanban	modules/kanban.min.js	LatticeGridKanban	Board view: grid rows as cards grouped into columns (createKanban).
gantt	@toclocoinc/lattice-grid/modules/gantt	modules/gantt.min.js	LatticeGridGantt	Editable, dependency-aware project plan with a computed critical path (createGantt).
calendar	@toclocoinc/lattice-grid/modules/calendar	modules/calendar.min.js	LatticeGridCalendar	A month grid and a week day-grid of rows as cards, keyed by a date field (createCalendar).
scheduler	@toclocoinc/lattice-grid/modules/scheduler	modules/scheduler.min.js	LatticeGridScheduler	Resource scheduler: resources as grid rows and events as bars on a shared time axis; events drag, resize and reassign (createScheduler).
mapview	@toclocoinc/lattice-grid/modules/mapview	modules/mapview.min.js	LatticeGridMapView	A 3D map of the grid's rows over MapLibre with deck.gl layers, linked to the grid's filters and selection both ways (createMapView).
leaflet	@toclocoinc/lattice-grid/modules/leaflet	modules/leaflet.min.js	LatticeGridLeaflet	Your Leaflet L.Map and layer function become one more viewer of a grid, linked both ways (bindLeaflet).
deckgl	@toclocoinc/lattice-grid/modules/deckgl	modules/deckgl.min.js	LatticeGridDeck	Your deck.gl Deck and layer function become one more viewer of a grid, linked both ways (bindDeck).
geometry	@toclocoinc/lattice-grid/modules/geometry	modules/geometry.min.js	LatticeGrid (extends it)	The geometry column type, registered by import, with spatial operators and geometry-aware maps (geometryModule).
list	@toclocoinc/lattice-grid/modules/list	modules/list.min.js	LatticeGrid (extends it)	The list column type, registered by import, with its own filter and editor (listModule).
kpi	@toclocoinc/lattice-grid/modules/kpi	modules/kpi.min.js	LatticeGridKPI	A grid of stat tiles, each an aggregate over a dataset (createKPI).
alarms	@toclocoinc/lattice-grid/modules/alarms	modules/alarms.min.js	LatticeGridAlarms	Turns graded data into alarm events (level, clear and per-key identity) for a NOC wall, ticketing or an on-call rota; no UI of its own (createAlarms).
tabs	@toclocoinc/lattice-grid/modules/tabs	modules/tabs.min.js	LatticeGridTabs	A tab strip where each tab is its own full grid, optionally derived from another (createTabs).
layout	@toclocoinc/lattice-grid/modules/layout	modules/layout.min.js	LatticeGridLayout	A reconfigurable dashboard: windows on a cell grid, moved and resized by drag or keyboard (createLayout).
dashboard	@toclocoinc/lattice-grid/modules/dashboard	modules/dashboard.min.js	LatticeGridDashboard	One JSON spec naming a layout, panels and links, built into a wired page (createDashboard).
designer	@toclocoinc/lattice-grid/modules/designer	modules/designer.min.js	LatticeGridDesigner	A designer over the dashboard spec, with pages; its view mode is createDashboard (createDesigner).
shell	@toclocoinc/lattice-grid/modules/shell	modules/shell.min.js	LatticeGridShell	A flexbox shell: cells nested as rows and columns to any depth, sized synchronously by CSS (createShell).
form	@toclocoinc/lattice-grid/modules/form	modules/form.min.js	LatticeGridForm	An opt-in form: named items in nested rows and columns, basic controls, events and grid-token density (createForm).
ai	@toclocoinc/lattice-grid/modules/ai	modules/ai.min.js	LatticeGridAI	Bring-your-own-model narrative and insights grounded on computed figures (createAI).
presets	@toclocoinc/lattice-grid/modules/presets	modules/presets.min.js	LatticeGridPresets	Design-system presets: a variable file over the theme-token contract and a function that drives it from a real MUI theme (themeFromMui).
mock-socket	@toclocoinc/lattice-grid/modules/mock-socket	modules/mock-socket.min.js	LatticeGridMockSocket	A serverless stand-in for a live WebSocket feed (MockWebSocket, opsFeed).
devtools	@toclocoinc/lattice-grid/modules/devtools	modules/devtools.min.js	LatticeGrid (extends it)	The in-page diagnostic panel, including the accessibility checks (createDevtools).
dhtmlx-compat	@toclocoinc/lattice-grid/modules/dhtmlx-compat	modules/dhtmlx-compat.min.js	LatticeGrid (extends it)	A Grid-shaped API for moving an existing integration across.

The six modules that extend LatticeGrid (charts, devtools, dhtmlx-compat, webcomponent, geometry, list) fold their exports into the core global, so load the core <script> first and then the module, for example LatticeGrid.createChart(...) becomes available once both are loaded. With a bundler they share the one core the page already imported rather than carrying a second copy.

Chart-type extensions

Twenty-three additional chart types ship as separate, tree-shakeable modules. Each one self-registers its type onto the charts module's shared registry the moment it is loaded — so load the base charts module first, load the extension for its side effect, then name the type in createChart.

Each ships all three variants, like every other module: .esm.min.js for a bundler, .min.js (UMD) for a <script src> page, .min.cjs for require().

import '@toclocoinc/lattice-grid/modules/charts';       // the base registry
import '@toclocoinc/lattice-grid/modules/chart-alluvial'; // registers 'alluvial'
createChart({ grid, container, type: 'alluvial', source: 'from', target: 'to', value: 'count' });

<script src="lattice-grid.min.js"></script>
<script src="modules/charts.min.js"></script>          <!-- the base registry -->
<script src="modules/chart-alluvial.min.js"></script>  <!-- registers 'alluvial' -->
<script>LatticeGrid.createChart({ grid, container, type: 'alluvial', /* ... */ });</script>

The UMD build extends the LatticeGrid global, exactly as modules/charts.min.js does, so the order above is the order to load them in: an extension loaded before the base charts module throws rather than registering nothing.

Each is imported from @toclocoinc/lattice-grid/modules/chart-<type> (CDN <file>: modules/chart-<type>.esm.min.js, or modules/chart-<type>.min.js for the UMD build), and registers the type shown.

Import / type	What it draws
chart-alluvial → alluvial	Alluvial diagram: categorical flow from one dimension to another.
chart-arc → arc	Arc diagram: nodes on a line, links as arcs.
chart-bubblemap → bubblemap	Symbol / bubble map.
chart-bump → bump	Bump chart: rank over time.
chart-calendar → calendar	Calendar heatmap.
chart-decomposition → decomposition	Seasonal decomposition panel.
chart-diverging → diverging	Diverging bar chart.
chart-dumbbell → dumbbell	Dumbbell / connected-dot plot.
chart-fan → fan	Fan / forecast chart.
chart-hexbin → hexbin	Hexbin / 2D-density plot.
chart-forcetree → forceTree	Force-directed tree: a hierarchy as a settled graph, root at the centre.
chart-hexmap → hexmap	Hexbin map.
chart-icicle → icicle	Icicle chart.
chart-markermap → markermap	Marker map: a labelled figure per location, filled from the value column's conditional-formatting rules.
chart-pack → pack	Packed circles: a hierarchy as circles in circles, with zoom.
chart-parallel → parallel	Parallel coordinates.
chart-polararea → polarArea (also nightingale, rose)	Polar area / Nightingale rose: equal angles, the measure as the radius.
chart-polarscatter → polarScatter	Polar scatter: points by angle (degrees, category, hour, weekday or month) and radius.
chart-radialbar → radialBar	Radial bar: one ring per category, swept in proportion to its value.
chart-ridgeline → ridgeline	Ridgeline (joy) plot.
chart-roc → roc	ROC / PR / calibration curves.
chart-slope → slope	Slope chart.
chart-splom → splom	Scatter-plot matrix.
chart-tree → tree	Node-link tree: tidy, radial or dendrogram.
chart-voronoi → voronoiTreemap	Voronoi treemap: a hierarchy as nested cells whose areas are fitted to the values.
chart-waffle → waffle	Waffle / dot-matrix chart.
chart-pictorial → pictorial	Pictorial chart: one silhouette cut into bands by value, or an isotype row of icons per category.
chart-pyramid → pyramid	Funnel-family pyramid: ordered stages as slices of one triangle.
chart-serpentine → serpentine	Serpentine timeline: the time axis folded into rows joined by half-circle turns.
chart-spiral → spiral	Spiral timeline: one turn per day, week, year or duration, so the same phase lines up on one angle.
chart-wordcloud → wordCloud	Word cloud: words sized by frequency, from a word column or tokenised free text.
chart-venn → venn	Venn diagram: two or three sets with area-proportional circles and counted regions.
chart-barrace → barRace	Bar chart race: the top N categories per frame, animated, with play / pause / scrub.
chart-motion → motion	Motion chart: bubbles by x, y, size and colour moving through time.

---

Full-screen mode

A grid usually lives in whatever box the page layout gave it, and that box is usually too small for the job. The left rail's last button fills the browser window with the grid; clicking it again, or pressing Esc: puts it back exactly where it was.

grid.maximise.toggle();
grid.maximise.active();          // true while it fills the window

createGrid(el, { maximise: false });   // remove the button entirely

It is a real escape, not a restyle: the element is moved out to <body> so no ancestor's transform, overflow: hidden or stacking context can clip or shrink it, and a placeholder holds its place so the page behind neither reflows nor loses its scroll position. Every displaced style is handed back exactly as it was found.

---

Data types

Seven built-in types: text, number, boolean, date, dateString, object and lookup: cover ordinary business data and are inferred from your rows automatically.

Beyond those, Lattice Grid ships 88 technical field types for the data that usually ends up in a text column because the grid had nowhere to put it. Each is a complete type, not a display format: it brings its own parser, comparator, editor, filter, alignment, clipboard behaviour and Excel mapping.

Group	Types
Network	ipv4, ipv6, cidr: sort in address order, not lexically, so 10.0.0.9 comes before 10.0.0.10.
Time	time, datetime, duration: three things a single date type keeps being asked to be.
Radix	hex, hex8, hex16, hex32, binary, binary8, octal, the stored value stays a plain number; the base is presentation and input only.
Data	bytes, megabytes, gigabytes, bitrate, gigabits: shows 10 GB, accepts 10,000M typed in, stores 10. Decimal and binary ladders are both first class, because MB and MiB are different quantities.
Mechanical	length, mass, duration, speed, acceleration, area, volume, force, pressure, torque, density, energy, power, angle, rpm and angular velocity.
Fluid and thermal	volumetric flow, mass flow, dynamic and kinematic viscosity, thermal conductivity, specific heat, and temperature in celsius, fahrenheit and kelvin.
Electrical and SI	voltage, current, resistance, capacitance, inductance, charge, conductance, frequency, flux density, luminous flux, luminous intensity, illuminance and substance: all auto-prefixed across the SI range.
Chemistry and radiation	molarity, ppm, ppb, absorbed dose, equivalent dose, radioactivity and dose rate.
Finance and ratios	basisPoints, ratio, percentRate, and decibels, which are reduced logarithmically, not averaged.
Structured	json, secret: secret is write-only: editable, never displayed, never exported.

Units of your own

Three things define a unit family, and all three are yours to set: the symbols, where the symbol sits relative to the number, and how the rungs relate to each other.

import { registerUnitSystem, defineUnit, createUnitType } from '@toclocoinc/lattice-grid';

// The ladder. `factor` is how many base quantities one of this unit is, so the
// relationship between the rungs is simply their arithmetic.
registerUnitSystem('yarn', [
  defineUnit('tex', 1, ['tx']),
  defineUnit('ktex', 1e3, [], { prefix: 'k' }),
  defineUnit('den', 1 / 9, ['denier']),
]);

createGrid(el, {
  dataTypes: {
    linearDensity: createUnitType({ system: 'yarn', unit: 'tex', display: 'auto' }),
  },
  columns: [{ field: 'count', type: 'linearDensity' }],
});

display: 'auto' walks the ladder and picks the most readable rung, so 1,500 tex renders as 1.5 ktex. A unit given { auto: false } stays off that ladder while remaining accepted on input and available as an explicit display: which is how imperial units sit beside metric ones without an auto readout jumping between the two.

placement: 'prefix' puts the symbol in front of the number, for currency and the few notations that want it. It applies to input as well as display, and the trailing form is still accepted, because a column that renders $1,200 will be pasted into from somewhere that writes it the other way round.

createUnitType({ system: 'money', unit: '$', placement: 'prefix', decimals: 2 })
// renders  $1,200.00
// accepts  $1,200 · 1200 $ · k$1.2 · 1.2 k$

Whatever the display, the stored value is always a plain number in the column's base unit, so sorting, filtering, grouping, totals and the pivot all work on the number and never on the text.

---

Live demos

Twenty-five public demos run live on GitHub Pages, each an MIT-licensed repository with no build step, showing the grid on real open data.

• Demo gallery: every demo, browsable from the site.
• All demo repositories: the source for each one, ready to fork.

A few, chosen for breadth:

• Earthquakes: a live USGS feed through the Data Router.
• TfL arrivals: a real-time stream with a rolling window.
• Flights over DuckDB: a Parquet file queried in the browser.
• FRED economic data: every vintage of a series rewound across a whole dashboard.
• Earthquakes in React: the same feed through the React components.

---

Documentation

• API reference: every namespace, method, config key and event, one page per module.
• The whole reference on one page: the same thing as a single document, for searching.
• Developer guide: what each part does and why, with worked examples.
• Warnings reference: every [lattice] line the grid can print, by the identifier it de-duplicates on, with what it means and what to change. Data rather than a page, so a console line can be looked up by eye or from a script: import warnings from '@toclocoinc/lattice-grid/docs/warnings.json' with { type: 'json' }.

---

Licensing

There is one Lattice Grid and every copy is feature-identical. No community edition, no pro tier, no feature held back behind a key.

• Free to develop against. On localhost and other loopback hosts, no key is needed and no watermark is shown.
• Licensed to deploy. On any other host, an unlicensed grid renders everything and carries a small trial watermark.

Nothing is ever disabled, degraded or withheld, the failure to avoid is a production screen breaking because a licence lapsed over a weekend. A key removes the watermark; that is the whole of what it does.

Keys are issued per deployment rather than per developer or per seat, cover the domains you name including wildcards, and are checked locally with no licence server and no call home.

Get a key at latticegrid.dev. See LICENSE for terms.

---

Requirements

A current browser. Lattice Grid targets ES2022 and uses ResizeObserver; there is no IE11 build and no polyfill bundle.

---

Copyright © 2026 TOCLOCO Inc. All rights reserved.