demo D245
A mark that stays put in Angular
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 Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.
The configuration
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeGridComponent],
template: '<lattice-grid [config]="grid" style="display:block;height:520px"></lattice-grid>',
})
export class AppComponent {
grid = {
rowKey: 'id',
selection: 'multiple',
// The native drawing tools on the rail: pen, arrow, highlight and text.
annotate: true,
toolPanel: { side: 'left', panels: ['columns', 'filters'], annotate: true, actions: ['restore', 'maximise'] },
// 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.
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: [/* any columns; the marks are positioned in the grid's content space */],
rows: [/* row records */],
};
}
bootstrapApplication(AppComponent, {
providers: [provideLattice({ createGrid })],
});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.