셀 메모

셀에 메모 달기: 우클릭 메뉴로 추가·편집·삭제하고, 빨간 모서리 표시와 마우스 오버로 보며, 실행 취소·상태 저장·엑셀 메모 내보내기까지.

실행 예제셀 메모

셀을 우클릭해 메모 추가, 마우스를 올려 읽기, 엑셀로 내보내기.

이 데모의 코드

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;
}

메모는 스프레드시트의 메모처럼 셀에 붙이는 짧은 글입니다. "전화로 가격 합의", "재고 다시 확인" 같은 것이죠. 셀 값은 바뀌지 않으므로 정렬·필터·수식에 영향이 없습니다.

메모 켜기

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
});

사용 방법

셀을 우클릭하고 메모 추가…를 고릅니다. 창이 열리면 메모를 쓰고 저장이나 Ctrl+Enter를 누릅니다.
셀 오른쪽 위에 빨간 삼각형이 생깁니다.
셀에 마우스를 올리면 노란 툴팁에 메모가 보입니다(줄바꿈 유지).
다시 우클릭하면 메모 편집…·메모 삭제가 있고, 모두 Ctrl+Z로 되돌릴 수 있습니다.

메모 항목은 기본 셀 메뉴에 들어 있습니다. contextMenu를 직접 만든다면 note와 deleteNote 키를 원하는 자리에 넣으세요. 우클릭 메뉴는 유료 기능이고, 메모 API는 없어도 동작합니다.

API

이름	타입	설명
`cellNotes`	`boolean`	셀 우클릭 메뉴에 메모 항목을 넣습니다.
`notes`	`{ rowId, colId, note }[]`	처음에 넣을 메모.
`setCellNote(row \| rowId, colId, note \| null)`	`void`	메모 추가·변경·삭제(null이나 빈 글). 실행 취소됩니다.
`getCellNote(row \| rowId, colId)`	`string \| null`	셀의 메모.
`getCellNotes()`	`{ rowId, colId, note }[]`	모든 메모.
`editCellNote(row \| rowId, colId)`	`void`	셀의 메모 창을 엽니다(직접 만든 버튼·메뉴에서).
`cellNoteChange (event)`	`{ rowId, colId, note }`	메모가 추가·변경·삭제됨(삭제면 note null). 실행 취소·다시 실행에도 발생.

메모 저장

// 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'] });

엑셀

엑셀로 내보내면 메모가 셀 메모(엑셀의 빨간 삼각형)로 들어갑니다. 내보내기 옵션 notes: false로 끌 수 있습니다.

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

이 페이지에 대한 질문

엑셀처럼 셀에 메모를 달 수 있나요?

네. cellNotes: true를 켜면 우클릭 메뉴로 메모를 추가·편집·삭제하고, 셀 모서리에 빨간 표시가 생기며, 마우스를 올리면 보이고, 엑셀로 내보내면 메모가 됩니다.

메모는 어디에 저장되나요?

그리드 안에 행 id와 컬럼별로 저장됩니다. cellNoteChange나 getCellNotes()로 직접 저장하거나 getState()·stateKey로 보관하세요. 올바른 행을 따라가도록 getRowId를 지정하세요.