@svgrid/grid 3.0.8 → 3.0.9

package/src/SvGrid.types.ts

@@ -1851,13 +1851,17 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * `virtualization`. **On by default**, which is what makes a 100-column grid
    * scroll smoothly.
    *
-   * It recycles column DOM nodes, so it cannot coexist with sticky pinned
-   * columns - turn it off if you need pinning to survive horizontal scrolling.
+   * Pinned columns stay rendered while it is on: the pinned-left and
+   * pinned-right columns are drawn as their own runs either side of the
+   * virtual window, so a wide grid with pinned edges still renders only the
+   * columns in view plus the pinned ones.
    */
   columnVirtualization?: boolean;
   /**
-   * Extra columns rendered either side of the viewport when
-   * `columnVirtualization` is on. Defaults to 3.
+   * Columns kept rendered beyond the viewport when `columnVirtualization`
+   * is on: this many ahead of a horizontal scroll at all times, one behind
+   * it. The rendered columns move three at a time, so right after a move up
+   * to `columnOverscan + 2` are rendered ahead. Defaults to 3.
    */
   columnOverscan?: number;
   /**
@@ -1870,9 +1874,7 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * column id (matches `ColumnDef.field` when no explicit id is set).
    * The internal pinning state is seeded once at mount; user-driven
    * pinning via the column menu still works and overrides this default.
-   * Requires `columnVirtualization={false}` to be visible in the menu
-   * UI (sticky positioning can't co-exist with column virtualization
-   * since the virtualizer recycles DOM nodes).
+   * Works with column virtualization on (the default).
    */
   initialColumnPinning?: {
     left?: ReadonlyArray<string>;
@@ -2302,6 +2304,12 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * triangles by threshold), and `rule` (apply a style when a predicate
    * matches). Scope a format to specific columns with `columns: [...]`,
    * or omit it to apply to every column. Later entries win on conflict.
+   *
+   * `colorScale` and `dataBar` apply to data rows only: group, footer and
+   * grand-total rows carry subtotals on a different scale, so they keep the
+   * `rule` and `iconSet` formats and drop the scaled ones. On a server row
+   * model, give scaled formats `minValue` / `maxValue`; the grid does not
+   * scan rows it has not loaded for a range.
    */
   conditionalFormats?: ReadonlyArray<ConditionalFormat<TData>>;
   /**
@@ -2600,6 +2608,15 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * through the column's `editable`.
    */
   mergedCells?: ReadonlyArray<{ rowIndex: number; colIndex: number; rowSpan: number; colSpan: number }>;
+  /**
+   * How rows are laid out. `'flex'` (the default) draws each row as a line
+   * of fixed-width cells, so adding or removing cells in one row - what a
+   * horizontal scroll does every frame - lays out that row only. `'table'`
+   * uses the HTML table algorithm, which re-lays every row on such a change
+   * but can draw a merged cell spanning rows; the grid switches to it on its
+   * own when `mergedCells` has one.
+   */
+  rowLayout?: "flex" | "table";
   /**
    * Rows to pin to the BOTTOM of the grid - rendered below the regular
    * rows and sticky-positioned (sticks to the bottom of the viewport

package/src/cell-render.ts

@@ -29,6 +29,7 @@ import {
 } from "./SvGrid.helpers";
 import {
   getPinnedCellValue,
+  isGroupRow,
 } from "./cell-values";
 import { parseEditorValue } from "./editors/cell-editors";
 
@@ -36,13 +37,34 @@ export function createCellRender<
   TFeatures extends TableFeatures = TableFeatures,
   TData extends RowData = RowData,
 >(ctx: any) {
+  // `colorScale` and `dataBar` are scaled to the data rows. A group, footer or
+  // grand-total row carries a subtotal on a different scale (a sum of a million
+  // rows against a range drawn from one), so those rows keep only the rule and
+  // icon formats. Filtered once per formats array.
+  let rowLevelFormatsFor: unknown = null;
+  let rowLevelFormats: ReadonlyArray<any> = [];
+  function aggregateRowFormats(formats: ReadonlyArray<any>): ReadonlyArray<any> {
+    if (formats !== rowLevelFormatsFor) {
+      rowLevelFormats = formats.filter((f) => f.type !== "colorScale" && f.type !== "dataBar");
+      rowLevelFormatsFor = formats;
+    }
+    return rowLevelFormats;
+  }
+  function isAggregateRow(row: Row<TData>): boolean {
+    const kind = (row.original as { __group?: { kind?: string } } | null)?.__group?.kind;
+    if (kind) return kind !== "leaf" && kind !== "detail";
+    return isGroupRow(row);
+  }
+
   function cellConditionalFormat(
     row: Row<TData>,
     column: Column<TData>,
     value: unknown,
   ): ResolvedCellFormat | null {
-    const formats = ctx.props.conditionalFormats;
-    if (!formats?.length) return null;
+    const all = ctx.props.conditionalFormats;
+    if (!all?.length) return null;
+    const formats = isAggregateRow(row) ? aggregateRowFormats(all) : all;
+    if (!formats.length) return null;
     return resolveCellFormat(
       value,
       row.original,

package/src/columns.ts

@@ -157,10 +157,25 @@ export function createColumns<
     );
   }
 
+  // id -> column for the current column list. Width math asks for every
+  // column's width in loops, so a linear `find` per call made those loops
+  // quadratic: ~1.2 s of a 5,000-column mount. Rebuilt when the list changes.
+  let columnsById: Map<string, any> = new Map();
+  let columnsByIdFor: unknown = null;
+  function columnById(columnId: string) {
+    const all = ctx.grid.getAllColumns();
+    if (all !== columnsByIdFor) {
+      columnsById = new Map();
+      for (const c of all as any[]) columnsById.set(c.id, c);
+      columnsByIdFor = all;
+    }
+    return columnsById.get(columnId);
+  }
+
   /** Width before fitColumns scaling - what the columnDef/user actually set. */
   function getColumnBaseWidth(columnId: string) {
     if (ctx.columnWidths[columnId] !== undefined) return ctx.columnWidths[columnId];
-    const column = ctx.grid.getAllColumns().find((c: any) => c.id === columnId);
+    const column = columnById(columnId);
     if (column?.columnDef.width !== undefined) return column.columnDef.width;
     return ctx.props.columnWidth ?? 140;
   }

package/src/conditional-formatting.ts

@@ -386,10 +386,12 @@ export function resolveCellFormat<TData = unknown>(
  * on the same row (`compareColumn`) - those read the row, not column stats.
  */
 export function formatNeedsStats(f: ConditionalFormat<any>): boolean {
-  return (
-    (f.type === 'colorScale' || f.type === 'dataBar') &&
-    !('compareColumn' in f && f.compareColumn)
-  )
+  if (f.type !== 'colorScale' && f.type !== 'dataBar') return false
+  if ('compareColumn' in f && f.compareColumn) return false
+  // Both ends fixed in absolute units: the column's range is never read, so
+  // there is nothing to scan (and on a server-backed grid no way to scan it).
+  if (f.minValue != null && f.maxValue != null && (f.bounds ?? 'absolute') === 'absolute') return false
+  return true
 }
 
 export function formatsNeedingStats(

package/src/core.sort.test.ts

@@ -201,6 +201,67 @@ describe('createSortedRowModel - equivalence with the original comparator', () =
       }
     })
 
+    // From 20,000 rows a one-column numeric sort orders indices with a radix
+    // sort over the float bits (and ranked text with a counting sort) instead
+    // of a comparator. Same order, ties included.
+    describe('large numeric columns (the radix path)', () => {
+      const values: unknown[] = [0, -0, -1, 1, 2.5, -2.5, 1e9, -1e9, null, undefined, '', 'n/a', Infinity, -Infinity, 7, 7, 7, 0.1, -0.1, '12']
+      const big = (count: number): Row[] =>
+        Array.from({ length: count }, (_, i) => ({ text: 't', num: values[(i * 31) % values.length], when: null, tie: i }))
+      for (const desc of [false, true]) {
+        it(`matches the comparator sort, desc=${desc}`, () => {
+          const rows = big(25_000)
+          const sorting: SortingState = [{ id: 'num', desc }]
+          expectSameOrder(actualSort(rows, COLUMNS, sorting), referenceSort(rows, COLUMNS, sorting))
+        })
+      }
+      it('matches on date keys', () => {
+        const dates = ['2020-01-01', '2021-05-05', null, 'junk', 1600000000000, '1999-12-31', '2020-01-01']
+        const rows: Row[] = Array.from({ length: 25_000 }, (_, i) => ({ text: 't', num: 0, when: dates[(i * 13) % dates.length], tie: i }))
+        for (const desc of [false, true]) {
+          const sorting: SortingState = [{ id: 'when', desc }]
+          expectSameOrder(actualSort(rows, COLUMNS, sorting), referenceSort(rows, COLUMNS, sorting))
+        }
+      })
+    })
+
+    // Past 2,048 rows the choice is made from a sample. A 256-row sample used
+    // to miss repetition at this shape - every value a dozen times over, but
+    // spread thin enough that 256 rows hardly repeat - so a 1M-row column of
+    // 80k values was collated row by row (20M collator calls, 1.75 s).
+    describe('sampled columns (more rows than the sample)', () => {
+      const tag = (i: number) => `w${(i * 7919) % 2500}`
+      function countCollations<T>(run: () => T): { result: T; calls: number } {
+        const original = String.prototype.localeCompare
+        let calls = 0
+        String.prototype.localeCompare = function (this: string, ...args: Parameters<typeof original>) {
+          calls++
+          return original.apply(this, args)
+        }
+        try {
+          return { result: run(), calls }
+        } finally {
+          String.prototype.localeCompare = original
+        }
+      }
+
+      it('ranks a column of repeated values, and the order is unchanged', () => {
+        // 30,000 rows over 2,500 values, each about 12 times.
+        const rows: Row[] = Array.from({ length: 30_000 }, (_, i) => ({ text: tag(i), num: i, when: null, tie: 'x' }))
+        const sorting: SortingState = [{ id: 'text', desc: false }]
+        const { result, calls } = countCollations(() => actualSort(rows, COLUMNS, sorting))
+        expectSameOrder(result, referenceSort(rows, COLUMNS, sorting))
+        // Ranked: the 2,500 distinct values are collated, not the 30,000 rows.
+        expect(calls).toBeLessThan(rows.length)
+      })
+
+      it('collates a mostly-unique column row by row, in the same order', () => {
+        const rows: Row[] = Array.from({ length: 30_000 }, (_, i) => ({ text: `u${(i * 7919) % 29_000}`, num: i, when: null, tie: 'x' }))
+        const sorting: SortingState = [{ id: 'text', desc: true }]
+        expectSameOrder(actualSort(rows, COLUMNS, sorting), referenceSort(rows, COLUMNS, sorting))
+      })
+    })
+
     it('agrees with the direct path on the same data at both cardinalities', () => {
       // 22 rows over 11 values takes the rank path (11 * 2 <= 22); 20 rows over
       // the same 11 values does not (11 * 2 > 20). Same inputs, same order.