@svgrid/grid 3.0.5 → 3.0.7

package/src/clipboard.test.ts

@@ -441,6 +441,25 @@ describe('onFillPointerUp / applyFillPattern', () => {
     expect(ctx.selectionRange.focus).toEqual({ rowIndex: 3, colIndex: 0 })
   })
 
+  it('turns the fill the other way when the release holds Ctrl, as Excel does', () => {
+    // A series becomes a copy of the block...
+    const ctx = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'number' }],
+      data: [{ a: 1 }, { a: 2 }, { a: 0 }, { a: 0 }, { a: 0 }],
+    })
+    ctx.fillDrag = { sourceMinRow: 0, sourceMaxRow: 1, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 4, targetCol: 0 }
+    createClipboard(ctx).onFillPointerUp({ ctrlKey: true } as PointerEvent)
+    expect([ctx.internalData[2].a, ctx.internalData[3].a, ctx.internalData[4].a]).toEqual([1, 2, 1])
+    // ...and one number, which copies on its own, becomes a series.
+    const one = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'number' }],
+      data: [{ a: 7 }, { a: 0 }, { a: 0 }],
+    })
+    one.fillDrag = { sourceMinRow: 0, sourceMaxRow: 0, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 2, targetCol: 0 }
+    createClipboard(one).onFillPointerUp({ ctrlKey: true } as PointerEvent)
+    expect([one.internalData[1].a, one.internalData[2].a]).toEqual([8, 9])
+  })
+
   it('records the drag as one grouped history entry, so Ctrl+Z takes it all back', () => {
     // The fill used to write through writeCellRaw and push nothing: a drag
     // over twenty rows was invisible to undo.
@@ -487,6 +506,38 @@ describe('onFillPointerUp / applyFillPattern', () => {
     expect(numeric.internalData[3].a).toBe(4)
   })
 
+  it('skips a collapsed row the consumer does not count, and moves the series over the rows that show', () => {
+    // A filtered row in a spreadsheet: not written, not a step of the
+    // number series, and the formula's delta is the real row distance.
+    const ctx = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'number' }],
+      data: [{ a: 10 }, { a: 20 }, { a: 0 }, { a: 0 }, { a: 0 }],
+    })
+    ctx.isRowCollapsed = (r: number) => r === 3
+    const deltas: number[] = []
+    ctx.props.processCellForFill = ({ delta }: { delta: { rows: number } }) => { deltas.push(delta.rows); return undefined }
+    ctx.fillDrag = { sourceMinRow: 0, sourceMaxRow: 1, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 4, targetCol: 0 }
+    createClipboard(ctx).onFillPointerUp()
+    // Row 3 is left holding its 0; the series 30, (skip), 40 lands on 2 and 4.
+    expect(ctx.internalData.map((r: any) => r.a)).toEqual([10, 20, 30, 0, 40])
+    // The hook saw the real row distance from the source cell each target
+    // cycled from: row 2 is 2 below source row 0, row 4 is 3 below source
+    // row 1, not the 1 and 2 a step count would have given.
+    expect(deltas).toEqual([2, 3])
+  })
+
+  it('includeCollapsedRows brings a collapsed row back into the fill', () => {
+    const ctx = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'number' }],
+      data: [{ a: 10 }, { a: 0 }, { a: 0 }],
+    })
+    ctx.isRowCollapsed = (r: number) => r === 1
+    ctx.props.includeCollapsedRows = (r: number) => r === 1
+    ctx.fillDrag = { sourceMinRow: 0, sourceMaxRow: 0, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 2, targetCol: 0 }
+    createClipboard(ctx).onFillPointerUp()
+    expect(ctx.internalData.map((r: any) => r.a)).toEqual([10, 10, 10])
+  })
+
   it('double-click fills down as far as the neighbouring column has data', () => {
     const ctx = makeCtx({
       columns: [
@@ -676,6 +727,45 @@ describe('copySelectionToClipboard', () => {
     expect(writeText).toHaveBeenCalledWith('a0\tb0\na1\tb1')
   })
 
+  // A QA pass on the spreadsheet shell: a filtered or hidden row is folded
+  // to nothing, and a copy that carried it put rows the user had filtered
+  // out into the paste.
+  it('leaves out a collapsed row, as a spreadsheet leaves out a filtered one', () => {
+    const ctx = makeCtx({
+      data: [
+        { a: 'a0', b: 'b0' },
+        { a: 'a1', b: 'b1' },
+        { a: 'a2', b: 'b2' },
+      ],
+    })
+    ctx.isRowCollapsed = (index: number) => index === 1
+    ctx.selectionRange = {
+      anchor: { rowIndex: 0, colIndex: 0 },
+      focus: { rowIndex: 2, colIndex: 1 },
+    }
+    const cb = createClipboard(ctx)
+    cb.copySelectionToClipboard()
+    expect(writeText).toHaveBeenCalledWith('a0\tb0\na2\tb2')
+  })
+
+  it('leaves out a collapsed column too, header row included', () => {
+    const ctx = makeCtx({
+      data: [
+        { a: 'a0', b: 'b0' },
+        { a: 'a1', b: 'b1' },
+      ],
+    })
+    ctx.collapsedColumns = { b: true }
+    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\na0\na1')
+  })
+
   it('prepends a header row when copyHeadersToClipboard is set', () => {
     const ctx = makeCtx({
       data: [
@@ -849,6 +939,23 @@ describe('clearSelectedCells', () => {
     expect(ctx.grid.store.setState).toHaveBeenCalled()
   })
 
+  // The same QA pass: Delete over a filtered block wiped the rows the
+  // filter had hidden, which is data the user could not even see.
+  it('leaves a collapsed row alone, as a spreadsheet leaves a filtered one', () => {
+    const ctx = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'text' }],
+      data: [{ a: 'one' }, { a: 'two' }, { a: 'three' }],
+    })
+    ctx.isRowCollapsed = (index: number) => index === 1
+    ctx.selectionRange = {
+      anchor: { rowIndex: 0, colIndex: 0 },
+      focus: { rowIndex: 2, colIndex: 0 },
+    }
+    const cb = createClipboard(ctx)
+    expect(cb.clearSelectedCells()).toBe(true)
+    expect(ctx.internalData.map((r: { a: string }) => r.a)).toEqual(['', 'two', ''])
+  })
+
   it('fires onCellValueChange per cleared cell (so formula engines recompute)', () => {
     const onCellValueChange = vi.fn()
     const ctx = makeCtx({

package/src/clipboard.ts

@@ -100,9 +100,9 @@ export function createClipboard<
     if (before !== value) steps.push({ rowId: row.id, columnId, field, before, after: value });
   }
 
-  function applyFillPattern() {
+  function applyFillPattern(toggled = false) {
     const steps: HistoryStep[] = [];
-    runHistoryGroup(ctx, () => applyFillCells(steps));
+    runHistoryGroup(ctx, () => applyFillCells(steps, toggled));
     if (steps.length) pushHistory(ctx, steps, nextGroupId());
   }
 
@@ -117,7 +117,7 @@ export function createClipboard<
     pattern: unknown[],
     i: number,
     sourceStart: number,
-    targetStart: number,
+    at: number,
     step: 1 | -1,
     axis: "rows" | "cols",
     rowIndex: number,
@@ -126,7 +126,10 @@ export function createClipboard<
     const hook = ctx.props.processCellForFill;
     if (hook && sources.length) {
       const k = i % sources.length;
-      const distance = (targetStart + step * i) - (sourceStart + step * k);
+      // The real distance to the cell being filled, which is not i when a
+      // row the fill skips lies between: a formula moves by the rows it
+      // actually travelled.
+      const distance = at - (sourceStart + step * k);
       const delta = axis === "rows" ? { rows: distance, cols: 0 } : { rows: 0, cols: distance };
       const decided = hook({ value: sources[k], delta, rowIndex, columnId });
       if (decided !== undefined) return decided;
@@ -169,7 +172,18 @@ export function createClipboard<
     applyFillPattern();
   }
 
-  function applyFillCells(steps: HistoryStep[]) {
+  /** The fill's values the other way round from the pattern's default. */
+  function toggledPattern(sources: unknown[], count: number): unknown[] {
+    if (sources.length === 1 && typeof sources[0] === 'number' && Number.isFinite(sources[0])) {
+      return Array.from({ length: count }, (_, i) => (sources[0] as number) + i + 1);
+    }
+    return Array.from({ length: count }, (_, i) => sources[i % sources.length]);
+  }
+
+  function applyFillCells(steps: HistoryStep[], toggled = false) {
+    const pattern = (sources: unknown[], count: number) => (toggled ? toggledPattern(sources, count) : buildFillPattern(sources, count));
+    const includeCollapsed = ctx.props.includeCollapsedRows as ((rowIndex: number) => boolean) | undefined;
+    const skipsRow = (r: number) => ctx.isRowCollapsed?.(r) === true && !(includeCollapsed?.(r) ?? false);
     const d = ctx.fillDrag;
     if (!d) return;
     // Clear fillDrag FIRST so a thrown error doesn't leave the grid
@@ -197,27 +211,30 @@ export function createClipboard<
         for (let r = d.sourceMinRow; r <= d.sourceMaxRow; r += 1) {
           sourceColValues.push(readCellRaw(r, column.id));
         }
+        // A collapsed row the consumer does not count (a filtered row in a
+        // spreadsheet) is neither written nor a step of the series: the
+        // pattern runs over the rows that are there, as Excel's does.
         if (newMaxRow > d.sourceMaxRow) {
-          const targetRows = newMaxRow - d.sourceMaxRow;
-          const fills = buildFillPattern(sourceColValues, targetRows);
-          for (let i = 0; i < targetRows; i += 1) {
-            const targetRow = d.sourceMaxRow + 1 + i;
+          const targets: number[] = [];
+          for (let r = d.sourceMaxRow + 1; r <= newMaxRow; r += 1) if (!skipsRow(r)) targets.push(r);
+          const fills = pattern(sourceColValues, targets.length);
+          targets.forEach((targetRow, i) => {
             if (ctx.isCellEditableAt(targetRow, c))
               writeFilled(steps, targetRow, column.id,
-                filledValue(sourceColValues, fills, i, d.sourceMinRow, d.sourceMaxRow + 1, 1, "rows", targetRow, column.id));
-          }
+                filledValue(sourceColValues, fills, i, d.sourceMinRow, targetRow, 1, "rows", targetRow, column.id));
+          });
         }
         if (newMinRow < d.sourceMinRow) {
           // Filling upward - reverse-extrapolate.
           const reversed = sourceColValues.slice().reverse();
-          const targetRows = d.sourceMinRow - newMinRow;
-          const fills = buildFillPattern(reversed, targetRows);
-          for (let i = 0; i < targetRows; i += 1) {
-            const targetRow = d.sourceMinRow - 1 - i;
+          const targets: number[] = [];
+          for (let r = d.sourceMinRow - 1; r >= newMinRow; r -= 1) if (!skipsRow(r)) targets.push(r);
+          const fills = pattern(reversed, targets.length);
+          targets.forEach((targetRow, i) => {
             if (ctx.isCellEditableAt(targetRow, c))
               writeFilled(steps, targetRow, column.id,
-                filledValue(reversed, fills, i, d.sourceMaxRow, d.sourceMinRow - 1, -1, "rows", targetRow, column.id));
-          }
+                filledValue(reversed, fills, i, d.sourceMaxRow, targetRow, -1, "rows", targetRow, column.id));
+          });
         }
       }
     } else if (horizontalExtension) {
@@ -232,25 +249,25 @@ export function createClipboard<
         }
         if (newMaxCol > d.sourceMaxCol) {
           const targetCols = newMaxCol - d.sourceMaxCol;
-          const fills = buildFillPattern(sourceRowValues, targetCols);
+          const fills = pattern(sourceRowValues, targetCols);
           for (let i = 0; i < targetCols; i += 1) {
             const targetCol = d.sourceMaxCol + 1 + i;
             const col = ctx.allColumns[targetCol];
             if (col && ctx.isCellEditableAt(r, targetCol))
               writeFilled(steps, r, col.id,
-                filledValue(sourceRowValues, fills, i, d.sourceMinCol, d.sourceMaxCol + 1, 1, "cols", r, col.id));
+                filledValue(sourceRowValues, fills, i, d.sourceMinCol, targetCol, 1, "cols", r, col.id));
           }
         }
         if (newMinCol < d.sourceMinCol) {
           const reversed = sourceRowValues.slice().reverse();
           const targetCols = d.sourceMinCol - newMinCol;
-          const fills = buildFillPattern(reversed, targetCols);
+          const fills = pattern(reversed, targetCols);
           for (let i = 0; i < targetCols; i += 1) {
             const targetCol = d.sourceMinCol - 1 - i;
             const col = ctx.allColumns[targetCol];
             if (col && ctx.isCellEditableAt(r, targetCol))
               writeFilled(steps, r, col.id,
-                filledValue(reversed, fills, i, d.sourceMaxCol, d.sourceMinCol - 1, -1, "cols", r, col.id));
+                filledValue(reversed, fills, i, d.sourceMaxCol, targetCol, -1, "cols", r, col.id));
           }
         }
       }
@@ -277,8 +294,10 @@ export function createClipboard<
       const minCol = Math.min(anchor.colIndex, focus.colIndex);
       const maxCol = Math.max(anchor.colIndex, focus.colIndex);
       for (let r = minRow; r <= maxRow; r += 1) {
+        if (ctx.isRowCollapsed?.(r)) continue;
         for (let c = minCol; c <= maxCol; c += 1) {
           const col = ctx.allColumns[c];
+          if (col && ctx.collapsedColumns?.[col.id]) continue;
           if (col?.columnDef.field && ctx.isCellEditableAt(r, c)) {
             writeCellRaw(r, col.id, null);
           }
@@ -448,9 +467,15 @@ export function createClipboard<
     ctx.fillDrag = { ...ctx.fillDrag, targetRow: hit.row, targetCol: hit.col };
   }
 
-  function onFillPointerUp() {
+  /**
+   * The release. Excel's Ctrl turns the fill the other way: a series
+   * becomes a copy of the block, and one number, which copies on its own,
+   * becomes a series stepping by one. The modifier is read here, at the
+   * release, so holding Ctrl only at the end still counts, as in Excel.
+   */
+  function onFillPointerUp(event?: PointerEvent) {
     if (!ctx.fillDrag) return;
-    applyFillPattern();
+    applyFillPattern(!!(event && (event.ctrlKey || event.metaKey)));
   }
 
   // ---- Range move / copy (drag the selection border) --------------------
@@ -837,6 +862,7 @@ export function createClipboard<
     const processCell = ctx.props.processCellForClipboard as
       | ((params: { value: unknown; column: unknown; row: unknown; rowIndex: number; columnId: string }) => unknown)
       | undefined;
+    const copyCollapsed = ctx.props.includeCollapsedRows as ((rowIndex: number) => boolean) | undefined;
     const blocks: Array<string> = [];
     for (const rect of rects) {
       const lines: Array<string> = [];
@@ -844,6 +870,7 @@ export function createClipboard<
         const header: Array<string> = [];
         for (let c = rect.minCol; c <= rect.maxCol; c += 1) {
           const column = ctx.allColumns[c];
+          if (column && ctx.collapsedColumns?.[column.id]) continue;
           header.push(column ? toolPanelHeaderLabel(column) : "");
         }
         lines.push(header.join("\t"));
@@ -851,6 +878,13 @@ export function createClipboard<
       for (let r = rect.minRow; r <= rect.maxRow; r += 1) {
         const row = ctx.allRows[r];
         if (!row || isGroupRow(row)) continue;
+        // A collapsed row is folded to nothing: the user cannot see it and
+        // the keyboard walks past it, so a copy leaves it out too. That is
+        // what a spreadsheet does with a filtered row, and it is what makes
+        // "filter, copy, paste" carry the rows that matched. A consumer that
+        // tells hidden from filtered answers per row (`includeCollapsedRows`):
+        // Excel copies a row hidden by hand.
+        if (ctx.isRowCollapsed?.(r) && !copyCollapsed?.(r)) continue;
         const cells: Array<string> = [];
         for (let c = rect.minCol; c <= rect.maxCol; c += 1) {
           const column = ctx.allColumns[c];
@@ -858,6 +892,7 @@ export function createClipboard<
             cells.push("");
             continue;
           }
+          if (ctx.collapsedColumns?.[column.id]) continue;
           const base = getColumnBaseValue(row, column);
           let value: unknown = ctx.getCellDisplayValue(row.id, column.id, base);
           if (processCell) {
@@ -916,6 +951,9 @@ export function createClipboard<
     for (let r = startRow; r <= endRow; r += 1) {
       const row = ctx.allRows[r];
       if (!row || isGroupRow(row)) continue;
+      // A collapsed row is not there as far as the user is concerned, and a
+      // Delete over a filtered block must not wipe what the filter hid.
+      if (ctx.isRowCollapsed?.(r)) continue;
       // By identity, not `Number(row.id)` - that is the array index only under
       // the default getRowId, so a custom one cleared the wrong row.
       const dataIndex = dataIndexOf(row);
@@ -929,6 +967,7 @@ export function createClipboard<
       for (let c = startCol; c <= endCol; c += 1) {
         const column = ctx.allColumns[c];
         if (!column?.columnDef.field) continue;
+        if (ctx.collapsedColumns?.[column.id]) continue;
         if (!ctx.isCellEditableAt(r, c)) continue;
         // Clear means: empty string for text, undefined for everything
         // else. parseEditorValue handles the per-type coercion.

package/src/columns.test.ts

@@ -57,14 +57,14 @@ describe('cellPinStyle', () => {
   it('returns a left sticky style when the column has a left offset', () => {
     const ctx = makeCtx({ pinnedOffsets: { left: { a: 0, b: 120 }, right: {} } })
     const h = createColumns(ctx)
-    expect(h.cellPinStyle('a')).toBe('position: sticky; left: 0px; z-index: 30;')
-    expect(h.cellPinStyle('b')).toBe('position: sticky; left: 120px; z-index: 30;')
+    expect(h.cellPinStyle('a')).toBe('position: sticky; inset-inline-start: 0px; z-index: 30;')
+    expect(h.cellPinStyle('b')).toBe('position: sticky; inset-inline-start: 120px; z-index: 30;')
   })
 
   it('returns a right sticky style when the column has a right offset', () => {
     const ctx = makeCtx({ pinnedOffsets: { left: {}, right: { d: 0 } } })
     const h = createColumns(ctx)
-    expect(h.cellPinStyle('d')).toBe('position: sticky; right: 0px; z-index: 30;')
+    expect(h.cellPinStyle('d')).toBe('position: sticky; inset-inline-end: 0px; z-index: 30;')
   })
 
   it('returns empty string for an unpinned column', () => {
@@ -75,7 +75,7 @@ describe('cellPinStyle', () => {
   it('prefers the left offset when a column appears in both maps', () => {
     const ctx = makeCtx({ pinnedOffsets: { left: { a: 5 }, right: { a: 9 } } })
     const h = createColumns(ctx)
-    expect(h.cellPinStyle('a')).toBe('position: sticky; left: 5px; z-index: 30;')
+    expect(h.cellPinStyle('a')).toBe('position: sticky; inset-inline-start: 5px; z-index: 30;')
   })
 })
 

package/src/columns.ts

@@ -16,13 +16,18 @@ export function createColumns<
     // context (z=20) so a selected cell in the scrollable middle never
     // bleeds over the pinned columns during horizontal scroll. Still
     // sits below dropdowns (z=900+) and the column menu.
+    // Logical insets, not `left` / `right`: the offsets are measured from the
+    // pinned side in READING order, so under `dir="rtl"` the left-pinned
+    // columns have to stick to the right edge. `inset-inline-start` is that
+    // edge in either direction; with `left` a right-to-left grid scrolls its
+    // pinned columns off the screen.
     const leftOffset = ctx.pinnedOffsets.left[columnId];
     if (leftOffset !== undefined) {
-      return `position: sticky; left: ${leftOffset}px; z-index: 30;`;
+      return `position: sticky; inset-inline-start: ${leftOffset}px; z-index: 30;`;
     }
     const rightOffset = ctx.pinnedOffsets.right[columnId];
     if (rightOffset !== undefined) {
-      return `position: sticky; right: ${rightOffset}px; z-index: 30;`;
+      return `position: sticky; inset-inline-end: ${rightOffset}px; z-index: 30;`;
     }
     return "";
   }

package/src/conditional-formatting.test.ts

@@ -83,6 +83,14 @@ describe('resolveCellFormat', () => {
     expect(resolveCellFormat(1, {}, 'c', fmts, null).background).toBeUndefined()
   })
 
+  it('rule carries its icon while it matches', () => {
+    const fmts: ConditionalFormat[] = [
+      { type: 'rule', when: ({ value }) => Number(value) > 100, background: '#dbeafe', icon: '!' },
+    ]
+    expect(resolveCellFormat(150, {}, 'c', fmts, null).icon).toBe('!')
+    expect(resolveCellFormat(50, {}, 'c', fmts, null).icon).toBeUndefined()
+  })
+
   it('respects the columns scope', () => {
     const fmts: ConditionalFormat[] = [
       { type: 'colorScale', min: '#000000', max: '#ffffff', columns: ['other'] },

package/src/conditional-formatting.ts

@@ -102,6 +102,8 @@ export type RuleFormat<TData = unknown> = {
   background?: string
   color?: string
   fontWeight?: string | number
+  /** A short glyph drawn before the value while the rule matches. */
+  icon?: string
 }
 
 export type ConditionalFormatSpec<TData = unknown> =
@@ -323,6 +325,7 @@ export function resolveCellFormat<TData = unknown>(
         }
         if (fmt.color) out.color = fmt.color
         if (fmt.fontWeight != null) out.fontWeight = fmt.fontWeight
+        if (fmt.icon) out.icon = fmt.icon
       }
       continue
     }

package/src/core.sort.test.ts

@@ -12,6 +12,10 @@
  * snapshot the new output, `referenceSort` below is a literal transcription of
  * the ORIGINAL comparator, and every case asserts the two agree. If the rewrite
  * ever diverges on any input, including the randomised ones, this fails.
+ *
+ * The oracle calls the pairwise `sortFns`, so it tracks their semantics: since
+ * #104 those put blanks and unparseable values first instead of returning NaN,
+ * and `auto` compares numbers numerically.
  */
 import { describe, expect, it } from 'vitest'
 // From './core' rather than './index': `createSvGridCore` is the runes-free
@@ -233,6 +237,88 @@ describe('createSortedRowModel - equivalence with the original comparator', () =
   })
 })
 
+describe('built-in comparators keep the Array.sort contract (#104)', () => {
+  it('number: non-numeric values sort together ahead of the numbers', () => {
+    expect([5, 'n/a', 3, 1, 'n/a', 4, 2].sort(sortFns.number)).toEqual(['n/a', 'n/a', 1, 2, 3, 4, 5])
+    expect(sortFns.number('n/a', 'x')).toBe(0)
+    expect(Number.isNaN(sortFns.number('n/a', 3))).toBe(false)
+  })
+
+  it('date: blanks and invalid dates sort first and never return NaN', () => {
+    // null, not undefined: Array.prototype.sort moves undefined to the end
+    // without calling the comparator.
+    const sorted = ['2021-01-01', null, 'junk', '2020-01-01'].sort(sortFns.date)
+    expect(sorted).toEqual([null, 'junk', '2020-01-01', '2021-01-01'])
+    expect(sortFns.date(undefined, 'junk')).toBe(0)
+  })
+
+  it('auto: numbers compare numerically, blanks come first', () => {
+    expect([2, 10, 1, 20, 100, 3].sort(sortFns.auto)).toEqual([1, 2, 3, 10, 20, 100])
+    expect(['oak', null, 'nuclear', '', 'apple'].sort(sortFns.auto)).toEqual([
+      null, '', 'apple', 'nuclear', 'oak',
+    ])
+  })
+
+  it('every built-in comparator is antisymmetric and transitive on mixed values', () => {
+    const pool: unknown[] = [
+      null, undefined, '', 0, -1, 2, 10, NaN, 1e21, '1a', '2', '10', 'n/a', 'apple', 'Apple',
+      true, '2020-01-01', 'junk', 1600000000000,
+    ]
+    for (const [name, cmp] of Object.entries(sortFns)) {
+      const sign = (a: unknown, b: unknown) => Math.sign(cmp(a, b))
+      for (const a of pool) {
+        for (const b of pool) {
+          const ab = sign(a, b)
+          expect(Number.isNaN(ab), `${name}(${String(a)}, ${String(b)}) is NaN`).toBe(false)
+          expect(ab, `${name} antisymmetry on ${String(a)}, ${String(b)}`).toBe(-sign(b, a) || 0)
+          for (const c of pool) {
+            if (ab <= 0 && sign(b, c) <= 0) {
+              expect(sign(a, c), `${name}: ${String(a)} <= ${String(b)} <= ${String(c)}`).toBeLessThanOrEqual(0)
+            }
+          }
+        }
+      }
+    }
+  })
+
+  it('sorts an untyped numeric column numerically in the row model', () => {
+    const rows: Row[] = [2, 10, null, 1, 20, 100, 3].map((qty) => ({ qty }))
+    const cols = [{ field: 'qty' }]
+    expect(actualSort(rows, cols, [{ id: 'qty', desc: false }]).map((r) => r.qty)).toEqual([
+      null, 1, 2, 3, 10, 20, 100,
+    ])
+    expect(actualSort(rows, cols, [{ id: 'qty', desc: true }]).map((r) => r.qty)).toEqual([
+      100, 20, 10, 3, 2, 1, null,
+    ])
+  })
+
+  it('sorts a number column with placeholder text in order', () => {
+    const rows: Row[] = [5, 'n/a', 3, 1, 'n/a', 4, 2].map((v) => ({ v }))
+    const sorted = actualSort(rows, [{ field: 'v', editorType: 'number' }], [{ id: 'v', desc: false }])
+    expect(sorted.map((r) => r.v)).toEqual(['n/a', 'n/a', 1, 2, 3, 4, 5])
+  })
+
+  it('orders a mixed number and text column by kind, then value', () => {
+    const rows: Row[] = [10, 'b', 2, null, 'a', 1].map((v) => ({ v }))
+    const sorted = actualSort(rows, [{ field: 'v' }], [{ id: 'v', desc: false }])
+    expect(sorted.map((r) => r.v)).toEqual([null, 1, 2, 10, 'a', 'b'])
+  })
+
+  it('lets the next clause decide when two blanks tie on a numeric clause', () => {
+    // Two -Infinity keys subtract to NaN; the multi-clause loop must see 0.
+    const rows: Row[] = [
+      { num: null, text: 'b' },
+      { num: 'n/a', text: 'a' },
+      { num: 1, text: 'c' },
+    ]
+    const sorted = actualSort(rows, COLUMNS, [
+      { id: 'num', desc: false },
+      { id: 'text', desc: false },
+    ])
+    expect(sorted.map((r) => r.text)).toEqual(['a', 'b', 'c'])
+  })
+})
+
 describe('createSortedRowModel - work budget', () => {
   /** Count `getAllColumns` calls the way tools/bench does, but in-process. */
   function countColumnLookups(rowCount: number, sorting: SortingState): number {