@svgrid/grid 1.1.1 → 1.2.1

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/column-types.ts

@@ -67,7 +67,7 @@ export function resolveColumnTypes(
     if (!dt && infer && !hasExplicitEditor && sampleRow != null) {
       const field = col.field;
       const raw =
-        col.accessorFn?.(sampleRow) ??
+        col.fieldFn?.(sampleRow) ??
         (typeof field === "string" ? (sampleRow as Record<string, unknown>)[field] : undefined);
       dt = inferCellDataType(raw);
     }

package/src/core.performance.test.ts

@@ -1,30 +1,30 @@
-import { describe, expect, it } from 'vitest'
-import { createCoreRowModel, createSortedRowModel, createSvGrid, sortFns, tableFeatures } from './index'
-
-describe('core performance smoke', () => {
-  it('handles large synthetic shape with bounded row model call', () => {
-    const columns = Array.from({ length: 50 }, (_, index) => ({
-      field: `c${index}`,
-      editorType: 'number' as const,
-    }))
-    const data = Array.from({ length: 5000 }, (_, rowIndex) => {
-      const row: Record<string, number> = {}
-      for (let col = 0; col < 50; col += 1) row[`c${col}`] = rowIndex + col
-      return row
-    })
-    const grid = createSvGrid({
-      _features: tableFeatures({}),
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-        sortedRowModel: createSortedRowModel(sortFns),
-      },
-      columns,
-      data,
-      state: { sorting: [{ id: 'c0', desc: true }, { id: 'c1', desc: false }] },
-    })
-
-    const rows = grid.getRowModel().rows
-    expect(rows.length).toBe(5000)
-    expect(rows[0]?.getCellValueByColumnId('c0')).toBe(4999)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { createCoreRowModel, createSortedRowModel, createSvGrid, sortFns, tableFeatures } from './index'
+
+describe('core performance smoke', () => {
+  it('handles large synthetic shape with bounded row model call', () => {
+    const columns = Array.from({ length: 50 }, (_, index) => ({
+      field: `c${index}`,
+      editorType: 'number' as const,
+    }))
+    const data = Array.from({ length: 5000 }, (_, rowIndex) => {
+      const row: Record<string, number> = {}
+      for (let col = 0; col < 50; col += 1) row[`c${col}`] = rowIndex + col
+      return row
+    })
+    const grid = createSvGrid({
+      _features: tableFeatures({}),
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+      },
+      columns,
+      data,
+      state: { sorting: [{ id: 'c0', desc: true }, { id: 'c1', desc: false }] },
+    })
+
+    const rows = grid.getRowModel().rows
+    expect(rows.length).toBe(5000)
+    expect(rows[0]?.getCellValueByColumnId('c0')).toBe(4999)
+  })
+})