Skip to content
ZenGrid

Notes

Enterprise

Introduction

Section titled “Introduction”

Notes let you pin a comment to an individual cell — a reviewer’s remark, a data caveat, a follow-up. A noted cell shows a small marker in its top-right corner; the note’s text appears in a floating popup on hover (or click), and with editable turned on a double-click opens an inline editor.

cellNotes() plugs into the grid’s cellStyleProvider slot and attaches to the grid, so it can both mark the noted cells and bind the popup to the viewport:

import { cellNotes } from '@zengrid/enterprise/grid';


const notes = cellNotes({ editable: true });


const grid = new Zengrid(el, {
  cellStyleProvider: notes,   // marks cells that carry a note
  columns,
});
notes.attach(grid);           // …and binds the hover / edit popup


notes.setNote(0, 2, 'Follow up with finance');  // display row, display col

cellNotes() is license-gated (it asserts the cell-notes feature). The marker and popup CSS ship in @zengrid/enterprise/styles.css.

The notes API

Section titled “The notes API”

Notes are addressed by display coordinates — the row and column as they sit on screen — exactly like the other cell providers:

  • setNote(row, col, text) — add or replace a cell’s note.
  • getNote(row, col) — read the current text, or undefined.
  • removeNote(row, col) — drop a cell’s note.
  • getNotes() — every stored note as { rowId, col, text }.
  • clearNotes() — remove them all.

By default a note is keyed to its position, which is right when row order is stable. Pass getRowId and a note sticks to its record instead, so it follows the row through sorting and filtering.

Customising notes

Section titled “Customising notes”

Everything about the presentation and interaction is configurable:

  • trigger — 'hover' (default) or 'click' to open the read-only popup.
  • editable — when true, double-clicking a cell opens a textarea: type to set the note, empty it to clear. Commits fire onChange.
  • markerColor — the colour of the corner marker (default #f2764e); sets the --zg-note-marker-color custom property on noted cells.
  • popupClass — an extra class on the popup, on top of zg-cell-note-popup, for restyling.
  • onChange(note) — called after any programmatic or edited change.

Hover a cell with a corner marker to read its note. Edit the setNote calls (display row, display col) to move or reword them.

Types

Section titled “Types”
interface CellNotesOptions {
  getRowId?: (rowData: unknown[]) => string | number;
  trigger?: 'hover' | 'click';                 // default 'hover'
  editable?: boolean;                          // default false
  markerColor?: string;                        // default '#f2764e'
  popupClass?: string;
  onChange?: (note: CellNote) => void;
}


interface CellNote { rowId: string | number; col: number; text: string }


function cellNotes(options?: CellNotesOptions): CellNotes;


interface CellNotes {
  attach(grid): void;                          // bind the popup to the viewport
  detach(): void;                              // remove listeners, close the popup
  setNote(row: number, col: number, text: string): void;
  getNote(row: number, col: number): string | undefined;
  removeNote(row: number, col: number): void;
  getNotes(): CellNote[];
  clearNotes(): void;
}

Notes

Section titled “Notes”
  • Set it as cellStyleProvider and attach() it. The provider marks the noted cells; attach() is what binds the hover / click / edit popup to the viewport.
  • One provider slot. cellStyleProvider holds a single provider, so cell notes and grid-wide cell styling or change highlighting can’t share it — pick the one the grid needs.
  • Positional by default. Notes are keyed by display position; pass getRowId to key by a stable record identity so a note follows its row through sorting and filtering.

Next

Section titled “Next”