Lattice Grid Buy a licence

demo D123

A web component

<lattice-grid> in a page with no framework at all

customElements

Building…
Loading a live grid…

The configuration

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

<lattice-grid row-key="invoice" selection="multiple" style="display: block; height: 540px"></lattice-grid>

<script type="module">
  const grid = document.querySelector('lattice-grid');
  grid.columns = [
    { field: 'invoice', title: 'Invoice', layout: { width: 150 } },
    { field: 'supplier', title: 'Supplier', layout: { flex: 1, min: 180 } },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
    { field: 'qty', title: 'Qty', type: 'number', layout: { width: 90 } },
    { field: 'amount', title: 'Amount', type: 'number', total: 'sum', layout: { width: 140 } },
  ];
  grid.rows = rows;  // your data
</script>

Using Lattice Grid as a <lattice-grid> custom element with no framework

A web component wraps the grid as a standard custom element, <lattice-grid>, registered through the browser’s own customElements registry rather than a framework’s component model. A developer reaches for it on a page built without React, Vue or any build step: a server-rendered admin screen, a static report, or a legacy application where adding a framework just to host one grid is not worth the dependency. Registration happens once, via customElements.define, after which the element can be dropped into markup like any other tag, with columns and rows supplied as attributes or set on the element instance from a script tag. Because the underlying implementation is the same JavaScript data grid used in the framework wrappers, behaviour such as virtual scrolling, sorting and column resize carries over unchanged; the custom element is a thin shell around the existing engine rather than a separate build. The element participates in the standard custom element lifecycle, so it connects and tears down its listeners and its virtualised row window when added to or removed from the DOM, which keeps a page that mounts and unmounts grids repeatedly free of leaked scroll or resize handlers.

Can I use a JavaScript data grid without React, Vue or Angular?

Yes. Lattice Grid ships as a standard custom element, <lattice-grid>, registered through customElements, so it works in plain HTML and vanilla JavaScript with no framework runtime. The same element also drops into a React, Vue or Angular page unchanged, since custom elements are native browser objects rather than framework-specific components.

Related demos