Lattice Grid Buy a licence

demo D126

Annotations in React

Draw over the grid while presenting, inert until a tool is chosen

grid.annotate

This lets a presenter draw over the grid while talking through it, marking a column or circling an outlier, with the surface inert until a tool is chosen. It supports a live walkthrough without touching the underlying data, so nothing is changed by accident.

Building…
Loading a live grid…

This is the React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.103.2/modules/react.esm.min.js';

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

  const columns = [
    { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
    { field: 'team', title: 'Team', filter: { type: 'set' } },
    { field: 'owner', title: 'Owner', filter: { type: 'set' } },
    { field: 'tier', title: 'Tier', cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
    { field: 'state', title: 'State', cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
    { field: 'active', title: 'Active', type: 'boolean' },
    { field: 'deprecated', title: 'Deprecated', type: 'boolean' },
  ];
  const rows = [/* wide service rows */];

  function App() {
    const onGridReady = (grid) => {
      // The annotation layer is inert until you choose a tool, and it is an
      // API rather than a config key. Pick a tool with a colour, and the
      // canvas appears.
      grid.annotate.use('pen', { colour: '#e0245e' });
      grid.annotate.use('arrow', { colour: '#1a6bc7' });
      grid.annotate.use('rect', { colour: '#0f9d58' });
      grid.annotate.use('highlight', { colour: '#f4b400' });

      grid.on('annotation:changed', (e) => {
        console.log('tool:', e.tool ?? 'none', 'marks:', e.count);
      });
    };

    return (
      <LatticeGrid
        rowKey="id"
        selection="multiple"
        toolPanel={{ side: 'left', panels: ['columns', 'filters'], exportName: 'lattice-demo', actions: ['restore', 'maximise'] }}
        columns={columns}
        rows={rows}
        onGridReady={onGridReady}
        style={{ height: '540px' }}
      />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</script>

Freehand drawing over the grid during a walkthrough

Annotations let a presenter draw over the grid surface while talking through a sheet, marking a column, circling an outlier or underlining a total without editing the underlying data. Reach for this in any JavaScript data grid used in demos, training sessions or live reviews, where the point being made is easier to draw than to describe. Lattice Grid exposes the feature through grid.annotate, which arms a drawing tool over the grid canvas; the layer is inert until a tool is chosen, so scrolling, selecting a range or resizing a column behaves as it does with annotations off. Marks sit on a layer separate from cell content, so clearing them leaves the grid, its sort order and its selection untouched. Picking a tool captures the grid for drawing and keeps that tool ready for several marks; the Cursor control or the Escape key hands the grid back so you can scroll and select again.

The annotation layer tracks the grid’s own coordinate space, so a mark drawn over a cell stays anchored to that cell through scrolling rather than drifting against the viewport. Because it renders independently of the virtualised cell grid beneath it, drawing over a wide sheet does not force extra cells to render, and clearing the layer is a single repaint rather than a re-render of the data. Drawing tools are reachable by keyboard, and the armed state is exposed to assistive technology, so a presenter driving the grid without a mouse can still mark it up during a walkthrough.

How do you draw or markup on top of a data grid?

Call grid.annotate to arm a drawing tool over the grid, then draw directly on the surface; the layer stays inert until a tool is selected. Lattice Grid keeps marks anchored to grid coordinates through scrolling and renders them separately from cell content, so annotations can be cleared without disturbing sort order, filters or selection.

Annotations keep their resolution when the display or the browser zoom changes: marks stay crisp when a laptop is plugged into a projector or the page is zoomed mid-talk, which is exactly when a presenter notices.

Related demos