react data grid · editing

React Grid: Editing

Type into a cell, edit a whole row as one transaction, or both on the same grid: the React component is a thin wrapper over the same edit pipeline the vanilla grid uses, so nothing about editing changes when you add React.

Also in: Angular Vue Svelte

Install and import

One package, no separate React package to version alongside it. createLatticeGrid is a named export of the react module and builds a component your JSX renders like any other; the licence line applies only once you deploy off localhost.

npm install @toclocoinc/lattice-grid
# free on localhost; a production domain needs a licence key (see /pricing/)

The files

lattice.ts

// lattice.ts, built once and shared by every component that mounts a grid
import React from 'react';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { createLatticeGrid } from '@toclocoinc/lattice-grid/modules/react';

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

CellEditing.tsx

// CellEditing.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { LatticeGrid } from './lattice';

// edit on the grid switches editing on; edit on a column says which columns
// take it. "circuit" carries no edit key below, so it stays read-only even
// though editing is on for the grid as a whole.
const columns = [
  { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
  { field: 'region', title: 'Region', edit: true },
  { field: 'status', title: 'Status', filter: { type: 'set' }, edit: true },
  { field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' }, edit: true },
  { field: 'charge', title: 'Monthly charge', type: 'number',
    format: { style: 'currency', currency: 'GBP' }, filter: { type: 'number' }, edit: true },
];

const rows = [/* circuit records, one per line */];

function CellEditing() {
  const ref = React.useRef<{ grid: any } | null>(null);
  return (
    <LatticeGrid
      ref={ref}
      rowKey="id"
      selection="multiple"
      edit
      columns={columns}
      rows={rows}
      style={{ height: '460px' }}
    />
  );
}

createRoot(document.getElementById('cell-editing')!).render(<CellEditing />);

RowEditing.tsx

// RowEditing.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { LatticeGrid } from './lattice';

// mode: 'row' opens the whole row for editing at once, as one transaction,
// rather than one cell at a time.
const columns = [
  { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
  { field: 'region', title: 'Region', edit: true },
  { field: 'status', title: 'Status', filter: { type: 'set' }, edit: true },
  { field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' }, edit: true },
  { field: 'charge', title: 'Monthly charge', type: 'number',
    format: { style: 'currency', currency: 'GBP' }, filter: { type: 'number' }, edit: true },
];

const rows = [/* circuit records, one per line */];

function RowEditing() {
  return (
    <LatticeGrid
      rowKey="id"
      selection="multiple"
      edit={{ enabled: true, mode: 'row' }}
      columns={columns}
      rows={rows}
      style={{ height: '460px' }}
    />
  );
}

createRoot(document.getElementById('row-editing')!).render(<RowEditing />);

See it running

The live grid below runs the same configuration shown above; the React tab under it is the shown code, copyable as it stands.

Building…

Loading a live grid…

Open the cell-editing demo in React →

Building…

Loading a live grid…

Open the row-editing demo in React →

Working in React

Reaching the grid. Forward a ref onto <LatticeGrid> and, after mount, ref.current.grid is the live instance createGrid itself would have returned, the same object for grid.export, grid.selection or an imperative commit outside the edit pipeline shown above.

Hold your props steady. Change detection is reference equality, not a deep compare of a possibly million-row array. Build columns once outside the component (as above) or memoise it, and hand back a new rows array only when the data actually changed; an edited cell updates the grid through its own store, not by you replacing the array.

StrictMode is handled. React 18's development double-mount destroys the first grid in the effect cleanup and builds a second, so nothing leaks and nothing double-edits.

TypeScript. Column and config types resolve from the package automatically; there is no separate @types package to add.

Read the docs React data grid overview Free on localhost. See pricing.