demo D245
A mark that stays put
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
The configuration
'durable-annotations': () => ({
rows: wide(5_000),
config: {
rowKey: 'id',
selection: 'multiple',
annotate: true,
toolPanel: {
side: 'left',
panels: ['columns', 'filters'],
exportName: 'lattice-demo',
annotate: true,
actions: ['restore', 'maximise'],
},
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' },
],
},
columns: wideColumns().slice(0, 8),
},
foot: [
'the arrow and the band are seeded through state.annotations',
'scroll the grid: the marks travel with the cells, not the viewport',
],
})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.