@svgrid/grid 1.0.2 → 1.1.0

package/src/spreadsheet.ts

@@ -0,0 +1,246 @@
+/**
+ * Spreadsheet-style layout helpers — cell merging + per-cell borders.
+ *
+ * These are *layout-only* augmentations on top of `<SvGrid>`. They don't
+ * change the grid's data model, sorting, or filtering — they just decorate
+ * the rendered body cells. Bind the action to the wrapper around your
+ * SvGrid and pass merge / border specs; the helper observes DOM mutations
+ * and re-applies the layout whenever the grid re-renders.
+ *
+ * Limitations (worth knowing up front):
+ *   - Merges + borders index into the CURRENTLY-DISPLAYED rows (after
+ *     sort / filter), via the `data-svgrid-row` index the grid sets on
+ *     every body cell. If your data sorts or filters, recompute the
+ *     specs against the new display order.
+ *   - Merges use real `colspan` / `rowspan` plus `display:none` on
+ *     covered TDs. Column widths come from the inline styles SvGrid
+ *     emits on each TD; we don't fight those.
+ *   - For long row-merges across a virtualised window, only rows that
+ *     are actually rendered get the rowspan applied. Disable
+ *     virtualisation on grids that need a continuous merge.
+ */
+
+/** A single edge of a cell border. */
+export type BorderSpec = {
+  /** Thickness in pixels. Default 2. */
+  width?: number
+  /** CSS border-style. Default 'solid'. */
+  style?: 'solid' | 'dashed' | 'dotted' | 'double'
+  /** CSS color. Falls back to currentColor (i.e. text color). */
+  color?: string
+}
+
+/** A merge declaration. The cell at (rowIndex, columnId) is the ORIGIN;
+ *  it spans `colspan` columns to the right + `rowspan` rows downward.
+ *  Covered cells are hidden so the origin visually fills the region. */
+export type MergeSpec = {
+  /** Display-row index — the same value the grid puts on
+   *  `data-svgrid-row`. After sorting/filtering, recompute the spec
+   *  against the new display order. */
+  rowIndex: number
+  columnId: string
+  /** Default 1. */
+  rowspan?: number
+  /** Default 1. */
+  colspan?: number
+}
+
+/** Borders for one cell. Edges left unset render as the default
+ *  cell border (i.e. no override). */
+export type CellBorderSpec = {
+  rowIndex: number
+  columnId: string
+  top?: BorderSpec
+  right?: BorderSpec
+  bottom?: BorderSpec
+  left?: BorderSpec
+}
+
+/** What the Svelte action receives. Pass new values to update; pass
+ *  `null` / empty arrays to clear. */
+export type SpreadsheetActionOptions = {
+  merges?: ReadonlyArray<MergeSpec> | null
+  borders?: ReadonlyArray<CellBorderSpec> | null
+  /** Column id order the grid uses, in left-to-right order. Required
+   *  to translate `colspan` into the right set of covered column ids.
+   *  Pass `columns.map((c) => c.id)` from the consumer. */
+  columnOrder: ReadonlyArray<string>
+}
+
+const BORDER_KEYS = ['top', 'right', 'bottom', 'left'] as const
+type EdgeKey = (typeof BORDER_KEYS)[number]
+const MARK = 'data-svgrid-sheet'
+
+function borderCss(spec: BorderSpec | undefined): string | null {
+  if (!spec) return null
+  const w = spec.width ?? 2
+  const s = spec.style ?? 'solid'
+  const c = spec.color ?? 'currentColor'
+  return `${w}px ${s} ${c}`
+}
+
+/** Look up a body cell by its display-row + column id. Falls back to
+ *  null if the cell isn't in the current render window (virtualisation,
+ *  scrolled out, or filtered away). */
+function findCell(
+  root: HTMLElement,
+  rowIndex: number,
+  columnId: string,
+): HTMLTableCellElement | null {
+  return root.querySelector<HTMLTableCellElement>(
+    `td[data-svgrid-row="${rowIndex}"][data-col-id="${CSS.escape(columnId)}"]`,
+  )
+}
+
+const OVERLAY_CLASS = 'sv-cell-border-overlay'
+
+/** Apply / re-apply layout decorations. Called once on mount, again on
+ *  every relevant DOM mutation inside the grid, and whenever the action
+ *  options update. */
+function apply(root: HTMLElement, opts: SpreadsheetActionOptions): void {
+  // ---- 1. Clean up anything the LAST run added -----------------------
+  for (const td of root.querySelectorAll<HTMLTableCellElement>(`td[${MARK}]`)) {
+    td.removeAttribute('colspan')
+    td.removeAttribute('rowspan')
+    if (td.style.display === 'none') td.style.display = ''
+    // Remove the overlay child we previously injected for borders.
+    const overlay = td.querySelector(`:scope > .${OVERLAY_CLASS}`)
+    if (overlay) overlay.remove()
+    td.classList.remove('sv-merge-edge-right', 'sv-merge-edge-bottom', 'sv-merge-in-range')
+    td.removeAttribute(MARK)
+  }
+
+  const colOrder = opts.columnOrder
+  const colIndexOf = new Map<string, number>()
+  for (let i = 0; i < colOrder.length; i += 1) colIndexOf.set(colOrder[i]!, i)
+
+  // ---- 2. Merges -----------------------------------------------------
+  for (const m of opts.merges ?? []) {
+    const startCol = colIndexOf.get(m.columnId)
+    if (startCol === undefined) continue
+    const rs = Math.max(1, m.rowspan ?? 1)
+    const cs = Math.max(1, m.colspan ?? 1)
+    const origin = findCell(root, m.rowIndex, m.columnId)
+    if (!origin) continue
+    if (cs > 1) origin.setAttribute('colspan', String(cs))
+    if (rs > 1) origin.setAttribute('rowspan', String(rs))
+    origin.setAttribute(MARK, '')
+    for (let dr = 0; dr < rs; dr += 1) {
+      for (let dc = 0; dc < cs; dc += 1) {
+        if (dr === 0 && dc === 0) continue
+        const colId = colOrder[startCol + dc]
+        if (!colId) continue
+        const td = findCell(root, m.rowIndex + dr, colId)
+        if (!td) continue
+        td.style.display = 'none'
+        td.setAttribute(MARK, '')
+      }
+    }
+
+    // Selection-edge inheritance:
+    // The grid sets `data-range-*` per cell. The merge's RIGHTMOST /
+    // BOTTOMMOST covered cells are `display:none`, so the borders
+    // they would draw never render. Mirror those edge flags onto the
+    // origin via dedicated CSS classes (so we can toggle them
+    // independently of Svelte's own data-range-* updates without a
+    // ping-pong loop).
+    const lastColId  = colOrder[startCol + cs - 1]
+    const rightCell  = lastColId ? findCell(root, m.rowIndex, lastColId) : null
+    const bottomCell = findCell(root, m.rowIndex + rs - 1, m.columnId)
+    const farCell    = lastColId ? findCell(root, m.rowIndex + rs - 1, lastColId) : null
+
+    const wantRight  =
+      rightCell?.getAttribute('data-range-right') === 'true' ||
+      farCell  ?.getAttribute('data-range-right') === 'true'
+    const wantBottom =
+      bottomCell?.getAttribute('data-range-bottom') === 'true' ||
+      farCell   ?.getAttribute('data-range-bottom') === 'true'
+    const inRange =
+      rightCell ?.getAttribute('data-selected-range') === 'true' ||
+      bottomCell?.getAttribute('data-selected-range') === 'true' ||
+      farCell   ?.getAttribute('data-selected-range') === 'true' ||
+      origin.getAttribute('data-selected-range')      === 'true'
+
+    origin.classList.toggle('sv-merge-edge-right',   wantRight)
+    origin.classList.toggle('sv-merge-edge-bottom',  wantBottom)
+    origin.classList.toggle('sv-merge-in-range',     inRange)
+  }
+
+  // ---- 3. Borders ---------------------------------------------------
+  // Use an absolute-positioned overlay div so each edge renders
+  // independently of the grid's own border-collapse rules. Adjacent
+  // TDs no longer "eat" the right / bottom edges of a bordered cell.
+  for (const b of opts.borders ?? []) {
+    const td = findCell(root, b.rowIndex, b.columnId)
+    if (!td) continue
+    let any = false
+    const overlay = document.createElement('div')
+    overlay.className = OVERLAY_CLASS
+    overlay.style.cssText =
+      'position:absolute;inset:0;pointer-events:none;box-sizing:border-box;z-index:1;'
+    for (const e of BORDER_KEYS) {
+      const css = borderCss(b[e as EdgeKey])
+      if (!css) continue
+      overlay.style.setProperty(`border-${e}`, css)
+      any = true
+    }
+    if (!any) continue
+    // Ensure the TD is a positioning context for the overlay.
+    if (getComputedStyle(td).position === 'static') td.style.position = 'relative'
+    td.appendChild(overlay)
+    td.setAttribute(MARK, '')
+  }
+}
+
+/** Svelte action. Attach to the element that hosts your `<SvGrid>` so
+ *  the action can watch its DOM for re-renders.
+ *
+ * ```svelte
+ * <div use:spreadsheetLayout={{ merges, borders, columnOrder }}>
+ *   <SvGrid {data} {columns} ... />
+ * </div>
+ * ```
+ *
+ * The action re-applies the layout whenever the grid's body mutates
+ * (new rows, column reorder, virtualization scroll) and whenever the
+ * options change. */
+export function spreadsheetLayout(node: HTMLElement, opts: SpreadsheetActionOptions) {
+  let current = opts
+  let frame = 0
+  // The MutationObserver fires for EVERY DOM change inside the grid -
+  // batch them into one rAF so a big virtualization scroll doesn't run
+  // apply() dozens of times in a tick.
+  function schedule() {
+    if (frame) return
+    frame = requestAnimationFrame(() => {
+      frame = 0
+      apply(node, current)
+    })
+  }
+  const observer = new MutationObserver(schedule)
+  observer.observe(node, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: [
+      'data-svgrid-row', 'data-col-id', 'style',
+      // Watch selection-range attrs so we can transfer them from
+      // hidden covered cells to merge origins.
+      'data-range-top', 'data-range-bottom', 'data-range-left',
+      'data-range-right', 'data-selected-range',
+    ],
+  })
+  // First-paint pass: schedule the same way so we don't run before the
+  // grid's initial render landed.
+  schedule()
+  return {
+    update(next: SpreadsheetActionOptions) {
+      current = next
+      schedule()
+    },
+    destroy() {
+      observer.disconnect()
+      if (frame) cancelAnimationFrame(frame)
+    },
+  }
+}

package/src/summaries.ts

@@ -0,0 +1,204 @@
+// summaries handlers extracted from the controller. Imperative event handlers
+// reading/writing controller state via the `ctx` handle; the reactive core
+// ($state/$derived/$effect) stays in the controller.
+import {
+  applyExcelFilter,
+  normalizeForFilter,
+  createColumnVirtualizer,
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSvelteVirtualizer,
+  createSortedRowModel,
+  createSvGrid,
+  filterFns,
+  getGridCellA11yProps,
+  getGridCellDomId,
+  getGridHeaderA11yProps,
+  getGridRootA11yProps,
+  getGridRowA11yProps,
+  parseEditorValue,
+  normalizeEditorOptions,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  type CellContext,
+  type EditorContext,
+  type CellEditorOption,
+  type CellEditorType,
+  type CellFormatter,
+  type CellFormatConfig,
+  type Column,
+  type ColumnDef,
+  type Row,
+  type RowData,
+  type SvGridApi,
+  type TableFeatures,
+} from "./index";
+import "./sv-grid-scrollbar";
+import type { Snippet } from "svelte";
+import { getKeyboardIntent, getNextActiveCell } from "./keyboard";
+import {
+  formatNumericWithConfig,
+  getDateFormatter,
+  resolveDatePattern,
+} from "./cell-formatting";
+import {
+  RenderSnippetConfig,
+  RenderComponentConfig,
+} from "./render-component";
+import { buildFillPattern } from "./fill-patterns";
+import { buildSparkline, toSparklineValues } from "./sparkline";
+import {
+  resolveCellFormat,
+  computeColumnStat,
+  formatsNeedingStats,
+  type ColumnStat,
+  type ResolvedCellFormat,
+} from "./conditional-formatting";
+import SvGridDropdown from "./SvGridDropdown.svelte";
+import type {
+  Props,
+  SelectionPoint,
+  SelectionRange,
+  CellEditState,
+  FilterOperator,
+  FilterOption,
+  MenuPosition,
+} from "./SvGrid.types";
+import {
+  cfTextStyle,
+  fmtStat,
+  getCellKey,
+  resolveClassList,
+  toDateInputValue,
+  toDateTimeLocalInputValue,
+  getEditableInputValue,
+  getEditorInputType,
+  toValueArray,
+  getOptionLabel,
+  getOptionColor,
+  colorfulChipStyle,
+  getEditorClass,
+  asDate,
+  clampMenuX,
+  cssEscape,
+  rawToNumber,
+  formatFacetNumber,
+  formatFacetDate,
+} from "./SvGrid.helpers";
+import { createMenus } from "./menus";
+import { createCellRender } from "./cell-render";
+import { createEditing } from "./editing";
+import { createSelection } from "./selection";
+import { createColumns } from "./columns";
+import { createGridApi } from "./build-api";
+import { createClipboard } from "./clipboard";
+import {
+  filterOperatorOptions,
+  fallbackOperatorOption,
+  TEXT_OPERATORS,
+  NUMBER_OPERATORS,
+  DATE_OPERATORS,
+  CHECKBOX_OPERATORS,
+  operatorOption,
+  operatorsForColumn,
+  defaultOperatorFor,
+  operatorLabelFor,
+} from "./filter-operators";
+import {
+  type FacetBucket,
+  isBucketableColumn,
+  buildBuckets,
+  isInBucket,
+} from "./facet-buckets";
+import {
+  getColumnBaseValue,
+  isGroupRow,
+  toolPanelHeaderLabel,
+  formatSummaryNumeric,
+  getColumnAlign,
+  getPinnedCellValue,
+  getColumnAccessorValue,
+  columnDefMatchesId,
+} from "./cell-values";
+
+export function createSummaries<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+>(ctx: any) {
+  /**
+   * Aggregate every row into a per-column footer summary (sum for numeric
+   * columns, `Count: N` otherwise). This loop is the hottest path on a
+   * large grid - it is rows x columns iterations - so two things keep the
+   * constant factor down:
+   *
+   *   1. The edited-cell overlay is only consulted when an edit actually
+   *      exists. `key in editedCellValues` hits a reactive-proxy `has`
+   *      trap for every cell otherwise - 5M no-op trap calls on a
+   *      100k x 50 grid. Skipping it when the map is empty is the single
+   *      biggest win here.
+   *   2. The column's accessor (`accessorFn` / `field`) is resolved once
+   *      per column, not re-read off `columnDef` for every cell.
+   */
+  function computeSummaries(
+    rows: ReadonlyArray<Row<TData>>,
+    columns: ReadonlyArray<Column<TData>>,
+  ): Record<string, string> {
+    const summary: Record<string, string> = {};
+    const rowCount = rows.length;
+    const hasEdits = Object.keys(ctx.editedCellValues).length > 0;
+    for (const column of columns) {
+      const def = column.columnDef;
+      const accessorFn = def.accessorFn;
+      const field = def.field;
+      const columnId = column.id;
+      let numericSum = 0;
+      let numericCount = 0;
+      for (let i = 0; i < rowCount; i += 1) {
+        const row = rows[i]!;
+        let value: unknown;
+        const base = accessorFn
+          ? accessorFn(row.original)
+          : field
+            ? (row.original as Record<string, unknown>)[field]
+            : row.getCellValueByColumnId(columnId);
+        if (hasEdits) {
+          const key = getCellKey(row.id, columnId);
+          value = key in ctx.editedCellValues ? ctx.editedCellValues[key] : base;
+        } else {
+          value = base;
+        }
+        const asNumber = Number(value);
+        if (Number.isFinite(asNumber)) {
+          numericSum += asNumber;
+          numericCount += 1;
+        }
+      }
+      summary[columnId] =
+        numericCount > 0
+          ? formatSummaryNumeric(column, numericSum)
+          : `Count: ${rowCount}`;
+    }
+    return summary;
+  }
+
+  function hasRenderedColumn(entry: {
+    item: (typeof ctx.renderedColumnItems)[number];
+    column: (typeof ctx.allColumns)[number] | undefined;
+  }): entry is {
+    item: (typeof ctx.renderedColumnItems)[number];
+    column: (typeof ctx.allColumns)[number];
+  } {
+    return entry.column !== undefined;
+  }
+
+  return {
+    computeSummaries,
+    hasRenderedColumn,
+  };
+}

package/src/sv-grid-scrollbar.ts

@@ -34,7 +34,11 @@ const STYLE_TEMPLATE = `
     display: flex;
     user-select: none;
     background: var(--sg-scrollbar-bg, #eef2f8);
-    box-shadow: inset 0 0 0 1px var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
+    /* The 1px separator is drawn on the INNER edge only (the edge facing
+       the grid body) via the orientation rules below. A full inset box
+       here doubled up with the grid's own frame border on the outer edge,
+       reading as a 2px border - most visible in dense-gridline themes
+       like Excel, which should show a single 1px line. */
     /* Start hidden + non-interactive - viewport/content sizes are 0 until
        after the first layout pass, so without this default the scrollbar
        paints visible for one frame and then JS hides it on mount. That
@@ -48,10 +52,18 @@ const STYLE_TEMPLATE = `
   :host([orientation="vertical"]) {
     flex-direction: column;
     width: ${ARROW_SIZE}px;
+    /* LTR: vertical scrollbar sits at the right, inner edge is the left. */
+    box-shadow: inset 1px 0 0 0 var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
+  }
+  :host([orientation="vertical"]:dir(rtl)) {
+    /* RTL flips the scrollbar to the left, so the inner edge is the right. */
+    box-shadow: inset -1px 0 0 0 var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
   }
   :host([orientation="horizontal"]) {
     flex-direction: row;
     height: ${ARROW_SIZE}px;
+    /* Horizontal scrollbar sits at the bottom, inner edge is the top. */
+    box-shadow: inset 0 1px 0 0 var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
   }
   .arrow {
     flex: none;

package/src/svgrid-wrapper.types.ts

@@ -196,6 +196,15 @@ export type SvGridApi<
    * default. Useful for "save view" + URL persistence.
    */
   getColumnWidths(): Record<string, number>
+  /**
+   * Snap one column's width to its widest visible cell (header text +
+   * any rendered body cell). Equivalent to double-clicking the column's
+   * resize handle. The grid also exposes this through the column menu's
+   * "Autosize" item.
+   */
+  autosizeColumn(columnId: string): void
+  /** Run `autosizeColumn` on every column. */
+  autosizeAllColumns(): void
   /**
    * Replace the column-pinning state in one call. Each entry is a
    * column id; the order in the array becomes the visible order along
@@ -366,7 +375,9 @@ export type SvGridWrapperProps<
   showRowSelection?: boolean
   showPagination?: boolean
   virtualization?: boolean
-  rowHeight?: number
+  /** Row height in pixels. Pass a function `(rowIndex) => px` for per-row
+   *  variable heights (e.g. when wiring up an interactive row-resize). */
+  rowHeight?: number | ((rowIndex: number) => number)
   overscan?: number
   containerHeight?: number
   columnVirtualization?: boolean

package/src/svgrid.behavior.test.ts

@@ -441,6 +441,28 @@ describe('SvGrid - column add / remove / visibility', () => {
       destroy()
     }
   })
+
+  it('columns marked `visible: false` start hidden but stay listed', async () => {
+    const columns: ColumnDef<typeof fullFeatures, Person>[] = personColumns.map(
+      (c) => (c.field === 'team' ? { ...c, visible: false } : c),
+    )
+    const { api, destroy } = await mountGrid({ columns })
+    try {
+      // Starts hidden...
+      expect(api.isColumnVisible('team')).toBe(false)
+      // ...but is still listed in getColumns() (so a Choose Columns UI
+      // can offer it), just with visible=false.
+      const team = api.getColumns().find((c) => c.id === 'team')
+      expect(team).toBeDefined()
+      expect(team?.visible).toBe(false)
+      // A later user toggle wins over the initial flag.
+      api.setColumnVisible('team', true)
+      await tick()
+      expect(api.isColumnVisible('team')).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
 })
 
 describe('SvGrid - row add / remove', () => {

package/src/svgrid.comments-autocomplete.test.ts

@@ -0,0 +1,112 @@
+/**
+ * Track C: free-text autocomplete cell type + editable cell comments.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { createCoreRowModel, tableFeatures } from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string; city: string }
+const features = tableFeatures({})
+const rows: Row[] = [
+  { id: 1, name: 'Ann', city: 'Paris' },
+  { id: 2, name: 'Bo', city: 'Berlin' },
+]
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid(extraCols: ColumnDef<typeof features, Row>[], props: Record<string, unknown> = {}) {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
+    (res) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: rows,
+          columns: [{ field: 'name', header: 'Name', width: 160, editorType: 'text' }, ...extraCols],
+          features,
+          _rowModels: { coreRowModel: createCoreRowModel() },
+          rowHeight: 32,
+          containerHeight: 360,
+          virtualization: false,
+          enableInlineEditing: true,
+          enableCellSelection: true,
+          onApiReady(api: SvGridApi<typeof features, Row>) {
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+          ...props,
+        } as any,
+      })
+    },
+  )
+}
+
+function dataCell(target: HTMLElement, col: number) {
+  return target.querySelectorAll('.sv-grid-cell[data-svgrid-row]')[col] as HTMLElement
+}
+
+describe('autocomplete cell type', () => {
+  it('filters suggestions as you type and commits the picked option', async () => {
+    const { api, target, destroy } = await mountGrid([
+      {
+        field: 'city',
+        header: 'City',
+        width: 200,
+        editorType: 'autocomplete',
+        editorOptions: ['Paris', 'Berlin', 'Boston', 'Brussels'],
+      },
+    ])
+    await tick()
+    // city is the 2nd column => index 1 in the first row's cells
+    const cell = target.querySelectorAll('.sv-grid-cell[data-svgrid-row="0"]')[1] as HTMLElement
+    cell.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    await tick()
+    const input = target.querySelector('.sv-grid-cell-editor-autocomplete') as HTMLInputElement
+    expect(input).not.toBeNull()
+    input.value = 'B'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    await tick()
+    const opts = [...target.querySelectorAll('.sv-grid-autocomplete-option')].map((b) => b.textContent?.trim())
+    // 'B' matches Berlin, Boston, Brussels - not Paris
+    expect(opts).toEqual(['Berlin', 'Boston', 'Brussels'])
+    const berlin = [...target.querySelectorAll('.sv-grid-autocomplete-option')].find(
+      (b) => b.textContent?.trim() === 'Boston',
+    ) as HTMLElement
+    berlin.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    await tick()
+    expect(api.getCellValue(0, 'city')).toBe('Boston')
+    destroy()
+  })
+})
+
+describe('editable comments', () => {
+  it('adds a comment via the context menu and emits onNoteChange', async () => {
+    const changes: Array<{ rowId: string; columnId: string; note: string }> = []
+    const { target, destroy } = await mountGrid(
+      [{ field: 'city', header: 'City', width: 200, editorType: 'text' }],
+      { contextMenu: true, editableComments: true, onNoteChange: (e: any) => changes.push(e) },
+    )
+    await tick()
+    const cell = dataCell(target, 0)
+    cell.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true }))
+    await tick()
+    const editItem = [...target.querySelectorAll('.sv-grid-context-menu .sv-grid-menu-item')].find(
+      (b) => b.textContent?.trim() === 'Edit comment',
+    ) as HTMLElement
+    expect(editItem).toBeTruthy()
+    editItem.click()
+    await tick()
+    const ta = target.querySelector('.sv-grid-comment-textarea') as HTMLTextAreaElement
+    expect(ta).not.toBeNull()
+    ta.value = 'Needs review'
+    ta.dispatchEvent(new Event('input', { bubbles: true }))
+    await tick()
+    ;(target.querySelector('.sv-grid-comment-save') as HTMLElement).click()
+    await tick()
+    expect(changes.length).toBe(1)
+    expect(changes[0]!.note).toBe('Needs review')
+    expect(target.querySelector('.sv-grid-comment-editor')).toBeNull()
+    destroy()
+  })
+})