Cell notes

Notes on cells: add, edit and delete them from the context menu, see them on hover with a red corner mark, undo them, keep them in saved state and export them as Excel comments.

Live demoCell notes

Right-click a cell to add a note; hover to read it; export to Excel.

Code for this demo

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'id', header: 'ID', type: 'number', width: 70 },
      { field: 'name', header: h('Name', '이름'), width: 160 },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 120 },
      { field: 'country', header: h('Country', '국가'), width: 140 },
    ],
    data: makeRows(200), locale: ctx.lang,
    getRowId: r => String(r.id), cellNotes: true,
    notes: [{ rowId: '2', colId: 'q1', note: h('Includes the March return.', '3월 반품 포함.') }, { rowId: '4', colId: 'name', note: h('VIP: call before shipping', 'VIP: 출고 전 전화') }],
  });
  grid.on('cellNoteChange', e => ctx.log(`note ${e.rowId}/${e.colId}: ${e.note ?? '(deleted)'}`));
  text(ctx, h('Right-click a cell: Add note… A red corner marks it; hover to read. Ctrl+Z undoes.',
    '셀을 우클릭해 메모 추가…를 고르세요. 빨간 모서리가 생기고 마우스를 올리면 보입니다. Ctrl+Z로 되돌립니다.'));
  separator(ctx);
  button(ctx, h('All notes', '모든 메모'), () => ctx.log(JSON.stringify(grid.getCellNotes())));
  button(ctx, h('Excel with notes', '메모 포함 엑셀'), () => grid.exportXlsx('notes.xlsx'));
  return grid;
}

Notes are short texts attached to a cell, like comments in a spreadsheet: "price agreed by phone", "check stock again". They do not change the cell value, so sorting, filters and formulas are not affected.

Turning notes on

const grid = createGrid(el, {
  columns,
  data,
  getRowId: row => String(row.id),        // notes are kept by row id
  cellNotes: true,                        // right-click: Add note… / Edit note… / Delete note
  notes: [{ rowId: '7', colId: 'price', note: 'Price agreed by phone' }],   // notes to start with
});

How people use them

Right-click a cell and choose Add note…. A dialog opens; write the note and press Save or Ctrl+Enter.
A red triangle appears in the top-right corner of the cell.
Hovering the cell shows the note in a yellow tooltip (line breaks kept).
Right-click again for Edit note… or Delete note. Ctrl+Z undoes any of them.

The note entries are in the built-in cell menu. If you build your own contextMenu list, add the keys note and deleteNote where you want them. The context menu is a paid feature; the notes API works without it.

API

Name	Type	Description
`cellNotes`	`boolean`	Add the note entries to the cell context menu.
`notes`	`{ rowId, colId, note }[]`	Notes to start with.
`setCellNote(row \| rowId, colId, note \| null)`	`void`	Add, change or remove (null or empty) a note; undoable.
`getCellNote(row \| rowId, colId)`	`string \| null`	The note of a cell.
`getCellNotes()`	`{ rowId, colId, note }[]`	Every note.
`editCellNote(row \| rowId, colId)`	`void`	Open the note dialog for a cell (from your own button or menu).
`cellNoteChange (event)`	`{ rowId, colId, note }`	A note was added, changed or removed (note null). Fires for undo and redo too.

Saving notes

// to your server, one by one
grid.on('cellNoteChange', ({ rowId, colId, note }) =>
  fetch('/api/notes', { method: 'POST', body: JSON.stringify({ rowId, colId, note }) }));

// or all at once, and back on the next visit
localStorage.setItem('notes', JSON.stringify(grid.getCellNotes()));
grid.setState({ notes: JSON.parse(localStorage.getItem('notes') ?? '[]') });

// stateKey keeps them in the browser automatically when 'notes' is one of its parts
createGrid(el, { columns, data, getRowId, cellNotes: true, stateKey: 'orders', stateParts: ['columns', 'sort', 'notes'] });

Excel

Excel export writes every note as a cell comment (the red triangle in Excel). Turn it off with notes: false in the export options.

grid.exportXlsx('orders.xlsx');                    // notes included
grid.exportXlsx('orders.xlsx', { notes: false });  // without them

Questions about this page

Can I add comments to cells like in Excel?

Yes. With cellNotes: true the context menu adds, edits and deletes notes; a red corner marks the cell, the note shows on hover, and Excel export writes it as a comment.

Where are notes saved?

In the grid, by row id and column. Save them yourself from cellNoteChange or getCellNotes(), or keep them with getState() / stateKey; give the grid a getRowId so they follow the right rows.