Lattice Grid Buy a licence

demo D126

Annotations

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

grid.annotate

Building…
Loading a live grid…

The configuration

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

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters'],
      exportName: 'lattice-demo',
      actions: ['restore', 'maximise'],
    },
    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' },
    ],
    rows,  // wide service rows
  });

  // 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' });        // draw freehand
  grid.annotate.use('arrow', { colour: '#1a6bc7' });      // drag from tail to point
  grid.annotate.use('rect', { colour: '#0f9d58' });       // drag a box round something
  grid.annotate.use('highlight', { colour: '#f4b400' });  // a wide translucent stroke

  grid.annotate.undo();   // remove the last mark
  grid.annotate.clear();  // remove every mark
  grid.annotate.use(null);  // put the tool down: the layer goes inert again

  // Marks are held in content coordinates, so they travel with the grid.
  const off = grid.on('annotation:changed', (e) => {
    console.log('tool:', e.tool ?? 'none', 'marks:', e.count);
  });
</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.

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