react data grid

The React data grid, licensed per domain.

Lattice Grid is a complete React data grid: millions of rows, virtualised columns, server-side and streaming sources, and a full editing surface. The React adapter is a thin factory over createGrid, so the component you mount behaves exactly as the grid does everywhere else.

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

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

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

function Circuits({ rows }) {
  const ref = React.useRef(null);
  return (
    <LatticeGrid
      ref={ref}
      columns={columns}
      rows={rows}
      rowKey="id"
      sort={[{ col: 'name', dir: 'asc' }]}
      onCellChanged={(e) => save(e.key, e.colId, e.value)}
    />
  );
}

// ref.current.grid is the live grid, for anything without a prop.

Hold your props steady. Change detection is reference equality, because deep-comparing a million-row array on every render would cost more than the reload it avoids. Build columns once outside the component, or memoise it, and hand back a new rows array only when the data actually changes. React 18 StrictMode is handled: the effect cleanup destroys the first grid, so the development double-mount leaks nothing.

One grid, every framework

Lattice Grid is not framework-coupled. The same engine renders in React, 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 React 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.