@svgrid/grid 1.1.0 → 1.1.2

package/src/build-api.ts

@@ -133,8 +133,8 @@ export function createGridApi<
         const row = ctx.internalData[rowIndex];
         const column = findColumn(columnId);
         if (!row || !column) return undefined;
-        if (column.columnDef.accessorFn)
-          return column.columnDef.accessorFn(row);
+        if (column.columnDef.fieldFn)
+          return column.columnDef.fieldFn(row);
         if (column.columnDef.field)
           return (row as Record<string, unknown>)[column.columnDef.field];
         return undefined;
@@ -147,40 +147,49 @@ export function createGridApi<
         next[rowIndex] = { ...row, [column.columnDef.field]: value } as TData;
         ctx.internalData = next;
       },
+      startEditing(rowIndex, columnId) {
+        return ctx.startEditing(rowIndex, columnId);
+      },
+      stopEditing(cancel) {
+        return ctx.stopEditing(cancel ?? false);
+      },
       selectCells(ranges) {
-        // Engine supports a single anchor/focus rectangle today. Honour
-        // the first entry; ignore the rest. Empty array clears.
+        // Multiple rectangles are supported. Empty array clears everything.
         if (!ranges || ranges.length === 0) {
           ctx.selectionRange = { anchor: null, focus: null };
+          ctx.selectionRanges = [];
           return;
         }
-        const [r1, c1, r2, c2] = ranges[0]!;
         const rowCount = ctx.internalData.length;
         const colCount = ctx.allColumns.length;
         if (rowCount === 0 || colCount === 0) return;
         // Clamp to the visible grid bounds so callers can pass open-ended
         // values like `[0, 0, Infinity, Infinity]` to mean "select all".
-        const aRow = Math.max(0, Math.min(rowCount - 1, Math.min(r1, r2)));
-        const fRow = Math.max(0, Math.min(rowCount - 1, Math.max(r1, r2)));
-        const aCol = Math.max(0, Math.min(colCount - 1, Math.min(c1, c2)));
-        const fCol = Math.max(0, Math.min(colCount - 1, Math.max(c1, c2)));
-        ctx.selectionRange = {
-          anchor: { rowIndex: aRow, colIndex: aCol },
-          focus:  { rowIndex: fRow, colIndex: fCol },
-        };
-        // Move the active cell to the range's top-left so keyboard
+        const toRange = ([r1, c1, r2, c2]: readonly [number, number, number, number]) => ({
+          anchor: {
+            rowIndex: Math.max(0, Math.min(rowCount - 1, Math.min(r1, r2))),
+            colIndex: Math.max(0, Math.min(colCount - 1, Math.min(c1, c2))),
+          },
+          focus: {
+            rowIndex: Math.max(0, Math.min(rowCount - 1, Math.max(r1, r2))),
+            colIndex: Math.max(0, Math.min(colCount - 1, Math.max(c1, c2))),
+          },
+        });
+        const built = ranges.map(toRange);
+        // Last range is the active one; the rest are committed extras.
+        ctx.selectionRanges = built.slice(0, -1);
+        const active = built[built.length - 1]!;
+        ctx.selectionRange = active;
+        // Move the active cell to the last range's top-left so keyboard
         // navigation continues from there.
-        ctx.setActiveCell(aRow, aCol);
+        ctx.setActiveCell(active.anchor.rowIndex, active.anchor.colIndex);
       },
       getSelected() {
-        const a = ctx.selectionRange.anchor;
-        const f = ctx.selectionRange.focus;
-        if (!a || !f) return [];
-        const r1 = Math.min(a.rowIndex, f.rowIndex);
-        const r2 = Math.max(a.rowIndex, f.rowIndex);
-        const c1 = Math.min(a.colIndex, f.colIndex);
-        const c2 = Math.max(a.colIndex, f.colIndex);
-        return [[r1, c1, r2, c2]];
+        return ctx
+          .getSelectionRects()
+          .map((r: { minRow: number; minCol: number; maxRow: number; maxCol: number }) =>
+            [r.minRow, r.minCol, r.maxRow, r.maxCol] as [number, number, number, number],
+          );
       },
       addRow(row, position = "bottom") {
         this.addRows([row], position);
@@ -313,6 +322,17 @@ export function createGridApi<
             ...(filter.operator === "between"
               ? { valueTo: filter.valueTo ?? "" }
               : {}),
+            // Optional second condition + join (multi-condition filtering).
+            ...(filter.operator2
+              ? {
+                  operator2: filter.operator2,
+                  value2: filter.value2 ?? "",
+                  join: filter.join ?? "AND",
+                  ...(filter.operator2 === "between"
+                    ? { valueTo2: filter.valueTo2 ?? "" }
+                    : {}),
+                }
+              : {}),
           },
         };
       },

package/src/cell-formatting.ts

@@ -1,169 +1,169 @@
-/**
- * Helpers for SvGrid column `format` presets (numbers, currency, percent, date patterns).
- */
-
-/** Map shortcut date patterns to Intl options (merged with caller `options`). */
-export function resolveDatePattern(
-  pattern: string | undefined,
-  kind: 'date' | 'datetime',
-): Intl.DateTimeFormatOptions | undefined {
-  if (!pattern) return undefined
-
-  const p = pattern.trim()
-
-  switch (p) {
-    /** Short numeric local date (no weekday). */
-    case 'd':
-      return kind === 'datetime'
-        ? {
-            year: 'numeric',
-            month: 'numeric',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-          }
-        : { year: 'numeric', month: 'numeric', day: 'numeric' }
-    /** Long spelled-out date (+ time if datetime). */
-    case 'D':
-      return kind === 'datetime'
-        ? {
-            weekday: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-          }
-        : { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
-    /** ISO-friendly yyyy-mm-dd (with time when datetime). */
-    case 'y-m-d':
-      return kind === 'datetime'
-        ? {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false,
-          }
-        : { year: 'numeric', month: '2-digit', day: '2-digit' }
-    case 'medium':
-      return { dateStyle: 'medium', timeStyle: kind === 'datetime' ? 'short' : undefined }
-    case 'short':
-      return { dateStyle: 'short', timeStyle: kind === 'datetime' ? 'short' : undefined }
-    case 'long':
-      return { dateStyle: 'long', timeStyle: kind === 'datetime' ? 'short' : undefined }
-    default:
-      return undefined
-  }
-}
-
-type NumericFormatInput = {
-  type: 'number' | 'currency' | 'percent'
-  locales?: string | string[]
-  currency?: string
-  /** When type is percent: treat value as 0–100 instead of Intl’s 0–1 fraction */
-  valueIsPercentPoints?: boolean
-  options?: Intl.NumberFormatOptions
-}
-
-/**
- * `Intl.NumberFormat` is one of the most expensive constructors in the
- * platform - building one per cell on every scroll makes large grids
- * noticeably stutter. Cache instances by config signature (locale + style
- * + currency + options).
- */
-const numberFormatterCache = new Map<string, Intl.NumberFormat>()
-function getNumberFormatter(
-  locales: string | string[] | undefined,
-  options: Intl.NumberFormatOptions,
-): Intl.NumberFormat {
-  // Stable key - for normal column configs the options object is reused
-  // (declared in module scope), so this stringifies a small static shape.
-  const key =
-    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
-    '|' +
-    (options.style ?? '') +
-    '|' +
-    (options.currency ?? '') +
-    '|' +
-    (options.minimumFractionDigits ?? '') +
-    '|' +
-    (options.maximumFractionDigits ?? '') +
-    '|' +
-    (options.useGrouping ?? '') +
-    '|' +
-    (options.currencyDisplay ?? '') +
-    '|' +
-    (options.notation ?? '')
-  let fmt = numberFormatterCache.get(key)
-  if (!fmt) {
-    fmt = new Intl.NumberFormat(locales, options)
-    numberFormatterCache.set(key, fmt)
-  }
-  return fmt
-}
-
-/** Cache of `Intl.DateTimeFormat` by `(locale, options)` signature. */
-const dateFormatterCache = new Map<string, Intl.DateTimeFormat>()
-export function getDateFormatter(
-  locales: string | string[] | undefined,
-  options: Intl.DateTimeFormatOptions,
-): Intl.DateTimeFormat {
-  const key =
-    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
-    '|' +
-    (options.dateStyle ?? '') +
-    '|' +
-    (options.timeStyle ?? '') +
-    '|' +
-    (options.year ?? '') +
-    '|' +
-    (options.month ?? '') +
-    '|' +
-    (options.day ?? '') +
-    '|' +
-    (options.hour ?? '') +
-    '|' +
-    (options.minute ?? '') +
-    '|' +
-    (options.second ?? '') +
-    '|' +
-    (options.weekday ?? '') +
-    '|' +
-    (options.hour12 ?? '')
-  let fmt = dateFormatterCache.get(key)
-  if (!fmt) {
-    fmt = new Intl.DateTimeFormat(locales, options)
-    dateFormatterCache.set(key, fmt)
-  }
-  return fmt
-}
-
-/** Format a numeric value for number / currency / percent column formats. */
-export function formatNumericWithConfig(value: unknown, config: NumericFormatInput): string {
-  const n = typeof value === 'number' ? value : Number(value)
-  if (!Number.isFinite(n)) return String(value ?? '')
-
-  const locales = config.locales
-
-  if (config.type === 'currency') {
-    return getNumberFormatter(locales, {
-      style: 'currency',
-      currency: config.currency ?? 'USD',
-      ...config.options,
-    }).format(n)
-  }
-
-  if (config.type === 'percent') {
-    const frac = config.valueIsPercentPoints === true ? n / 100 : n
-    return getNumberFormatter(locales, {
-      style: 'percent',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2,
-      ...config.options,
-    }).format(frac)
-  }
-
-  return getNumberFormatter(locales, config.options ?? {}).format(n)
-}
+/**
+ * Helpers for SvGrid column `format` presets (numbers, currency, percent, date patterns).
+ */
+
+/** Map shortcut date patterns to Intl options (merged with caller `options`). */
+export function resolveDatePattern(
+  pattern: string | undefined,
+  kind: 'date' | 'datetime',
+): Intl.DateTimeFormatOptions | undefined {
+  if (!pattern) return undefined
+
+  const p = pattern.trim()
+
+  switch (p) {
+    /** Short numeric local date (no weekday). */
+    case 'd':
+      return kind === 'datetime'
+        ? {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+          }
+        : { year: 'numeric', month: 'numeric', day: 'numeric' }
+    /** Long spelled-out date (+ time if datetime). */
+    case 'D':
+      return kind === 'datetime'
+        ? {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+          }
+        : { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+    /** ISO-friendly yyyy-mm-dd (with time when datetime). */
+    case 'y-m-d':
+      return kind === 'datetime'
+        ? {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+          }
+        : { year: 'numeric', month: '2-digit', day: '2-digit' }
+    case 'medium':
+      return { dateStyle: 'medium', timeStyle: kind === 'datetime' ? 'short' : undefined }
+    case 'short':
+      return { dateStyle: 'short', timeStyle: kind === 'datetime' ? 'short' : undefined }
+    case 'long':
+      return { dateStyle: 'long', timeStyle: kind === 'datetime' ? 'short' : undefined }
+    default:
+      return undefined
+  }
+}
+
+type NumericFormatInput = {
+  type: 'number' | 'currency' | 'percent'
+  locales?: string | string[]
+  currency?: string
+  /** When type is percent: treat value as 0–100 instead of Intl’s 0–1 fraction */
+  valueIsPercentPoints?: boolean
+  options?: Intl.NumberFormatOptions
+}
+
+/**
+ * `Intl.NumberFormat` is one of the most expensive constructors in the
+ * platform - building one per cell on every scroll makes large grids
+ * noticeably stutter. Cache instances by config signature (locale + style
+ * + currency + options).
+ */
+const numberFormatterCache = new Map<string, Intl.NumberFormat>()
+function getNumberFormatter(
+  locales: string | string[] | undefined,
+  options: Intl.NumberFormatOptions,
+): Intl.NumberFormat {
+  // Stable key - for normal column configs the options object is reused
+  // (declared in module scope), so this stringifies a small static shape.
+  const key =
+    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
+    '|' +
+    (options.style ?? '') +
+    '|' +
+    (options.currency ?? '') +
+    '|' +
+    (options.minimumFractionDigits ?? '') +
+    '|' +
+    (options.maximumFractionDigits ?? '') +
+    '|' +
+    (options.useGrouping ?? '') +
+    '|' +
+    (options.currencyDisplay ?? '') +
+    '|' +
+    (options.notation ?? '')
+  let fmt = numberFormatterCache.get(key)
+  if (!fmt) {
+    fmt = new Intl.NumberFormat(locales, options)
+    numberFormatterCache.set(key, fmt)
+  }
+  return fmt
+}
+
+/** Cache of `Intl.DateTimeFormat` by `(locale, options)` signature. */
+const dateFormatterCache = new Map<string, Intl.DateTimeFormat>()
+export function getDateFormatter(
+  locales: string | string[] | undefined,
+  options: Intl.DateTimeFormatOptions,
+): Intl.DateTimeFormat {
+  const key =
+    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
+    '|' +
+    (options.dateStyle ?? '') +
+    '|' +
+    (options.timeStyle ?? '') +
+    '|' +
+    (options.year ?? '') +
+    '|' +
+    (options.month ?? '') +
+    '|' +
+    (options.day ?? '') +
+    '|' +
+    (options.hour ?? '') +
+    '|' +
+    (options.minute ?? '') +
+    '|' +
+    (options.second ?? '') +
+    '|' +
+    (options.weekday ?? '') +
+    '|' +
+    (options.hour12 ?? '')
+  let fmt = dateFormatterCache.get(key)
+  if (!fmt) {
+    fmt = new Intl.DateTimeFormat(locales, options)
+    dateFormatterCache.set(key, fmt)
+  }
+  return fmt
+}
+
+/** Format a numeric value for number / currency / percent column formats. */
+export function formatNumericWithConfig(value: unknown, config: NumericFormatInput): string {
+  const n = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(n)) return String(value ?? '')
+
+  const locales = config.locales
+
+  if (config.type === 'currency') {
+    return getNumberFormatter(locales, {
+      style: 'currency',
+      currency: config.currency ?? 'USD',
+      ...config.options,
+    }).format(n)
+  }
+
+  if (config.type === 'percent') {
+    const frac = config.valueIsPercentPoints === true ? n / 100 : n
+    return getNumberFormatter(locales, {
+      style: 'percent',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+      ...config.options,
+    }).format(frac)
+  }
+
+  return getNumberFormatter(locales, config.options ?? {}).format(n)
+}

package/src/cell-values.ts

@@ -13,7 +13,7 @@ import { formatNumericWithConfig } from "./cell-formatting";
 
 export function getColumnBaseValue<TData extends RowData>(row: Row<TData>, column: Column<TData>) {
   const def = column.columnDef;
-  if (def.accessorFn) return def.accessorFn(row.original);
+  if (def.fieldFn) return def.fieldFn(row.original);
   if (def.field) return row.original[def.field];
   return row.getCellValueByColumnId(column.id);
 }
@@ -85,7 +85,7 @@ export function getColumnAlign<TData extends RowData>(column: Column<TData>): "l
 /**
  * Read a cell value from a PINNED row. Pinned rows aren't bound to a
  * TanStack Row<TData>, so we resolve the value directly off the raw
- * TData via `accessorFn` or `field`. Mirrors `getColumnBaseValue`'s
+ * TData via `fieldFn` or `field`. Mirrors `getColumnBaseValue`'s
  * lookup path minus the Row indirection.
  */
 export function getPinnedCellValue<TData extends RowData>(
@@ -93,7 +93,7 @@ export function getPinnedCellValue<TData extends RowData>(
   column: Column<TData>,
 ): unknown {
   const def = column.columnDef;
-  if (def.accessorFn) return def.accessorFn(rowData);
+  if (def.fieldFn) return def.fieldFn(rowData);
   const field = def.field as string | undefined;
   if (!field) return undefined;
   return (rowData as unknown as Record<string, unknown>)[field];
@@ -101,7 +101,7 @@ export function getPinnedCellValue<TData extends RowData>(
 
 export function getColumnAccessorValue<TData extends RowData>(rowData: TData, column: Column<TData>) {
   const def = column.columnDef;
-  if (def.accessorFn) return def.accessorFn(rowData);
+  if (def.fieldFn) return def.fieldFn(rowData);
   if (def.field) return rowData[def.field];
   return undefined;
 }

package/src/clipboard.test.ts

@@ -63,6 +63,24 @@ function makeCtx(opts: FakeOptions = {}) {
     },
     _rows: buildRows(),
     selectionRange: { anchor: null, focus: null },
+    selectionRanges: [] as Array<{ anchor: any; focus: any }>,
+    // Mirrors the real controller's getSelectionRects: committed ranges + active.
+    getSelectionRects(): Array<{ minRow: number; maxRow: number; minCol: number; maxCol: number }> {
+      const rects: Array<{ minRow: number; maxRow: number; minCol: number; maxCol: number }> = []
+      const norm = (r: { anchor: any; focus: any }) =>
+        r?.anchor && r?.focus
+          ? {
+              minRow: Math.min(r.anchor.rowIndex, r.focus.rowIndex),
+              maxRow: Math.max(r.anchor.rowIndex, r.focus.rowIndex),
+              minCol: Math.min(r.anchor.colIndex, r.focus.colIndex),
+              maxCol: Math.max(r.anchor.colIndex, r.focus.colIndex),
+            }
+          : null
+      for (const r of ctx.selectionRanges) { const n = norm(r); if (n) rects.push(n) }
+      const active = norm(ctx.selectionRange)
+      if (active) rects.push(active)
+      return rects
+    },
     fillDrag: null,
     editedCellValues: {},
     userHasActivatedCell: false,
@@ -528,6 +546,37 @@ describe('copySelectionToClipboard', () => {
     expect(writeText).toHaveBeenCalledWith('a0\tb0\na1\tb1')
   })
 
+  it('prepends a header row when copyHeadersToClipboard is set', () => {
+    const ctx = makeCtx({
+      data: [
+        { a: 'a0', b: 'b0' },
+        { a: 'a1', b: 'b1' },
+      ],
+    })
+    ctx.props.copyHeadersToClipboard = true
+    ctx.selectionRange = {
+      anchor: { rowIndex: 0, colIndex: 0 },
+      focus: { rowIndex: 1, colIndex: 1 },
+    }
+    const cb = createClipboard(ctx)
+    cb.copySelectionToClipboard()
+    expect(writeText).toHaveBeenCalledWith('a\tb\na0\tb0\na1\tb1')
+  })
+
+  it('runs each value through processCellForClipboard', () => {
+    const ctx = makeCtx({
+      data: [{ a: 'a0', b: 'b0' }],
+    })
+    ctx.props.processCellForClipboard = ({ value }: { value: unknown }) => `[${value}]`
+    ctx.selectionRange = {
+      anchor: { rowIndex: 0, colIndex: 0 },
+      focus: { rowIndex: 0, colIndex: 1 },
+    }
+    const cb = createClipboard(ctx)
+    cb.copySelectionToClipboard()
+    expect(writeText).toHaveBeenCalledWith('[a0]\t[b0]')
+  })
+
   it('emits empty strings for missing columns and nullish values', () => {
     const ctx = makeCtx({
       columns: [{ id: 'a', field: 'a' }],

package/src/clipboard.ts

@@ -415,32 +415,60 @@ export function createClipboard<
   }
 
   function copySelectionToClipboard() {
-    const anchor = ctx.selectionRange.anchor;
-    const focus = ctx.selectionRange.focus;
-    if (!anchor || !focus) return;
-    const minRow = Math.min(anchor.rowIndex, focus.rowIndex);
-    const maxRow = Math.max(anchor.rowIndex, focus.rowIndex);
-    const minCol = Math.min(anchor.colIndex, focus.colIndex);
-    const maxCol = Math.max(anchor.colIndex, focus.colIndex);
-    const lines: Array<string> = [];
-    for (let r = minRow; r <= maxRow; r += 1) {
-      const row = ctx.allRows[r];
-      if (!row || isGroupRow(row)) continue;
-      const cells: Array<string> = [];
-      for (let c = minCol; c <= maxCol; c += 1) {
-        const column = ctx.allColumns[c];
-        if (!column) {
-          cells.push("");
-          continue;
+    // Copy every selected rectangle. Each range becomes a TSV block; multiple
+    // ranges are stacked and separated by a blank line (Sheets-style).
+    const rects = ctx.getSelectionRects() as Array<{
+      minRow: number;
+      maxRow: number;
+      minCol: number;
+      maxCol: number;
+    }>;
+    if (!rects.length) return;
+    // Optional: prepend a header row (Excel "copy with headers") and/or run
+    // each value through a consumer hook before it hits the clipboard.
+    const withHeaders = ctx.props.copyHeadersToClipboard === true;
+    const processCell = ctx.props.processCellForClipboard as
+      | ((params: { value: unknown; column: unknown; row: unknown; rowIndex: number; columnId: string }) => unknown)
+      | undefined;
+    const blocks: Array<string> = [];
+    for (const rect of rects) {
+      const lines: Array<string> = [];
+      if (withHeaders) {
+        const header: Array<string> = [];
+        for (let c = rect.minCol; c <= rect.maxCol; c += 1) {
+          const column = ctx.allColumns[c];
+          header.push(column ? toolPanelHeaderLabel(column) : "");
+        }
+        lines.push(header.join("\t"));
+      }
+      for (let r = rect.minRow; r <= rect.maxRow; r += 1) {
+        const row = ctx.allRows[r];
+        if (!row || isGroupRow(row)) continue;
+        const cells: Array<string> = [];
+        for (let c = rect.minCol; c <= rect.maxCol; c += 1) {
+          const column = ctx.allColumns[c];
+          if (!column) {
+            cells.push("");
+            continue;
+          }
+          const base = getColumnBaseValue(row, column);
+          let value: unknown = ctx.getCellDisplayValue(row.id, column.id, base);
+          if (processCell) {
+            value = processCell({
+              value,
+              column,
+              row: row.original,
+              rowIndex: r,
+              columnId: column.id,
+            });
+          }
+          cells.push(String(value ?? ""));
         }
-        const base = getColumnBaseValue(row, column);
-        const display = ctx.getCellDisplayValue(row.id, column.id, base);
-        cells.push(String(display ?? ""));
+        lines.push(cells.join("\t"));
       }
-      lines.push(cells.join("\t"));
+      blocks.push(lines.join("\n"));
     }
-    const text = lines.join("\n");
-    writeClipboardText(text);
+    writeClipboardText(blocks.join("\n\n"));
   }
 
   /**