demo D245
A mark that stays put in React
Seed a durable arrow and highlight at load, stored in content coordinates so they travel with the cells as you scroll
state.annotations · grid.annotate.add
This grid opens already marked up, with an arrow and a highlight seeded at load and stored in content coordinates so the marks travel with the cells as you scroll. It keeps annotations as real, persisted marks rather than strokes drawn over the screen and lost.
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 = [/* any columns; the marks are positioned in the grid's content space */];
const rows = [/* row records */];
// Seeded marks, drawn on first paint. Points are in content coordinates, so
// an arrow and a highlight band travel with the cells as the grid scrolls
// rather than hanging over the viewport, and round-trip through a saved view.
const state = {
annotations: [
{ type: 'highlight', points: [{ x: 150, y: 128 }, { x: 470, y: 156 }] },
{ type: 'arrow', points: [{ x: 560, y: 70 }, { x: 360, y: 138 }], colour: '#e0245e' },
],
};
function App() {
return (
<LatticeGrid
rowKey="id"
selection="multiple"
annotate
toolPanel={{ side: 'left', panels: ['columns', 'filters'], annotate: true, actions: ['restore', 'maximise'] }}
state={state}
columns={columns}
rows={rows}
style={{ height: '520px' }}
/>
);
}
createRoot(document.getElementById('grid')).render(<App />);
</script>Seeding a mark that stays with the data
A durable annotation is a mark the grid stores and paints, not a stroke drawn over the screen and forgotten. This demo seeds an arrow and a highlight band at construction, through state.annotations, so the grid opens already marked up. Each mark is a small descriptor, an arrow or a highlight or a rectangle or a freehand trail, with its points in the grid’s content coordinates. Because the points are content coordinates rather than screen positions, a mark travels with the cells it sits over: scroll the grid and the arrow and the band move with the rows instead of hanging in place over the viewport. This is the mark you reach for in a JavaScript data grid used for a walkthrough or a review, where the point you are making needs to survive a scroll.
Marks add at runtime as well, through grid.annotate.add, which puts a descriptor straight into the model and paints it without synthesising any pointer input, so a mark is exactly what its descriptor says. The four drawing tools on the rail store what a presenter draws the same way. Every mark, seeded or drawn or added in code, reads back out through the grid’s state, so a marked-up grid round-trips through a saved view like any other layout.
How do you add a permanent annotation to a data grid?
Seed marks through state.annotations at construction, or call grid.annotate.add at runtime with a descriptor giving the mark type and its points in content coordinates. Lattice Grid stores the mark in the model and paints it, and because the points are content coordinates the mark tracks scroll and resize. Read the marks back through the grid’s state to persist them in a saved view.