developer guide

Using <lattice-grid> as a custom element

One script, one tag, no build step. For Rails, Django, Laravel or any page without a bundler.

One script, one tag

The web component is a self-contained module that registers a custom element when it loads. Add the stylesheet and the module, then write the tag. Scalar settings go on as attributes; columns and rows can be JSON attributes for a small static grid.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/modules/webcomponent.esm.min.js"></script>

<lattice-grid
  row-key="id"
  columns='[{"field":"circuit","title":"Circuit"},{"field":"charge","title":"Charge","type":"number"}]'
  rows='[{"id":1,"circuit":"ETH-LON-1","charge":465.32}]'
></lattice-grid>

Attributes for scalars, properties for data

A JSON attribute is fine for a handful of rows, but real data goes on as a property, which carries a live value rather than a string the element has to parse. The grid instance is on .grid once the element has upgraded, so the whole public API is one property away.

const el = document.querySelector('lattice-grid');

// Structured values go on as properties, not attributes.
el.columns = columns;
el.rows = rows;

// The real grid instance is on .grid once the element has upgraded.
el.grid.export.csv({ download: true });

It carries the grid inside it

Use the web component or createGrid, never both on one page. The web component bundle carries its own copy of the grid, so loading it beside the main build, or beside a framework adapter, puts two grids in one document. Two copies keep separate registries: a renderer, type or theme registered through one is invisible to the other, and the failure is the kind that looks like a bug in your code. Pick one entry point per page and stay on it.

When to reach for it

Reach for the element on a page that has no bundler, a server-rendered template from Rails, Django or Laravel, a CMS block, a plain HTML file, where an import is not available and a script tag is. On a page that already bundles, the base build or a framework adapter is lighter, because it does not ship a second copy of the grid.

See the web component demo and the developer guide.