@jh-grid/jhgrid-js 0.1.1 → 0.1.3

package/README.md

@@ -16,38 +16,18 @@ performance, editing, filtering, and frozen columns, running in your browser rig
 
 ## Features
 
-- Smooth rendering via `requestAnimationFrame` + Canvas 2D, synced to your display's native refresh rate (60Hz, 120Hz, 144Hz, etc.), not capped at 60fps
-- 2D virtual scrolling: only visible cells are drawn
-- Chunk-based async data loading with prefetch & cache
-- HiDPI / Retina display support (devicePixelRatio scaling)
-- Draggable scrollbars (vertical + horizontal)
-- Left/right frozen columns (`frozenCols` / `frozenColsRight`)
-- **Cell click**: single cell selection with blue border highlight
-- **Cell drag**: multi-cell range selection with fill overlay
-- **Row selection**: single/multi row selection (`rowSelection: 'single' | 'multi'`), with an optional select-all header checkbox (`columnDefs[].headerCheckbox`)
-- **Row drag reorder**: drag rows by the row-number gutter (`rowReorder: true`)
-- **Double-click to edit**: per-column editable/readonly control
-- **Ctrl+C / Ctrl+V**: copy & paste (single cell or range, TSV format)
-- **Ctrl+Z / Ctrl+Y**: undo / redo (cell edits, row/column add/delete)
-- **Column validation**: declarative required/pattern/min/max/length/custom rules with red-border + tooltip error display (`min`/`max` compare chronologically on a `type: 'date'` column)
-- **In-cell action buttons**: `type: 'button'` columns render a clickable pill per row (e.g. "Delete", "Approve") independent of `editableCols`
-- **Date / rich-text / image cell types**: `type: 'date'` opens a native date/datetime picker; `type: 'richtext'` opens an inline bold/italic/underline/strikethrough editor; `type: 'image'` renders a cell image (`fit: 'cover' | 'contain'`, size-aware decoding, shared LRU cache), plus a pluggable `CellEditors`/`CellRenderers` registry (`registerCellEditor()`/`registerCellRenderer()`) for fully custom editors and renderers
-- **Set filter**: checkbox list of a column's distinct values in the header filter panel (`setFilterValues()`)
-- **Quick filter**: global cross-column search term (`setQuickFilter()` / `getQuickFilter()` / `clearQuickFilter()`)
-- **Single-column sort**: `setSort()` / `removeSort()` / `clearSort()`
-- **Row / column CRUD**: `addRow()`/`deleteRow()`/`undeleteRow()`, `addColumn()`/`deleteColumn()`/`undeleteColumn()`, with matching `getNew*()`/`getDeleted*()` accessors for diff-based saves
-- **Column hide/show**: `hideColumn()` / `showColumn()` / `isColumnVisible()` / `getHiddenColumns()`, plus per-row/column resize (`setRowHeight()`, `autoFitColumns()`)
-- **Multi-level header groups**: `columnDefs[].group` (or explicit `headerRows`) merges header cells across levels
-- **Per-row / per-cell styling callbacks**: `rowHighlighter` / `cellBackground` for conditional formatting
-- **State snapshot/restore**: `getState()` / `setState()` for saving and restoring grid state (filters, sort, column order/visibility, edits)
-- **Built-in localization**: `locale` option with bundled `KO_I18N` / `JA_I18N` / `ZH_I18N` text packs, per-key `i18n` overrides, and locale-aware number/date/currency cell rendering
-- **Accessibility**: ARIA labeling, keyboard-navigable header/row focus, and automatic high-contrast (`forced-colors`) theme remapping
-- **CSV export + print preview**: `exportCsv()`, `printGrid()`
-- **Arrow key navigation**: keyboard-driven cell movement
-- **Enter / Tab**: commit edit and move to next row / column
-- Text overflow with ellipsis (`…`): O(log n) binary search
-- Fully themeable
-- Zero dependencies
+- **Canvas rendering + 2D virtualization** — smooth at 60/120/144Hz, HiDPI-aware
+- **Large-data loading** — chunk-based async loading with prefetch & cache
+- **Frozen columns & scrollbars** — left/right freezing with draggable vertical/horizontal scrollbars
+- **Selection & row operations** — cell/range selection, single/multi row selection, row drag reorder
+- **Editing** — inline editing, validation, undo/redo, TSV copy & paste
+- **Rich cell types** — dropdown, multiselect, checkbox, date, richtext, image, button, plus custom editors/renderers
+- **Filtering & sorting** — set filter, quick filter, single-column sort
+- **CRUD & change tracking** — row/column add/delete with diff-based persistence
+- **Headers & styling** — multi-level headers, conditional row/cell styling
+- **State & export** — state snapshot/restore, CSV export, print preview
+- **i18n & accessibility** — KO/JA/ZH localization, ARIA, keyboard navigation, high-contrast support
+- **Zero dependencies & theming** — fully themeable with no runtime dependencies
 
 ---
 

package/dist/jhgrid.esm.js

@@ -4,6 +4,14 @@ var DataManager = class {
   #chunkSize;
   #maxChunks;
   #cache = /* @__PURE__ */ new Map();
+  // 1-entry cache of the chunk getRow() touched last. A bulk row-major walk (e.g. clearing an
+  // entire selection) calls getRow() for every column of the same row back-to-back -- same
+  // chunkIdx every time -- and #chunkSize more rows after that before it changes, so this turns
+  // the overwhelming majority of getRow() calls into a single index comparison instead of a Map
+  // lookup plus the LRU delete+re-insert below. Must be invalidated everywhere #cache forgets a
+  // chunk (#evict, clear) so it can never serve an entry #cache itself no longer considers current.
+  #lastChunkIdx = -1;
+  #lastChunk = null;
   #fetching = /* @__PURE__ */ new Set();
   #failed = /* @__PURE__ */ new Set();
   #failedTimers = /* @__PURE__ */ new Set();
@@ -37,10 +45,13 @@ var DataManager = class {
   // re-request after onChunkLoaded).
   getRow(rowIndex) {
     const chunkIdx = Math.floor(rowIndex / this.#chunkSize);
+    if (chunkIdx === this.#lastChunkIdx) return this.#lastChunk[rowIndex % this.#chunkSize] ?? null;
     if (this.#cache.has(chunkIdx)) {
       const chunk = this.#cache.get(chunkIdx);
       this.#cache.delete(chunkIdx);
       this.#cache.set(chunkIdx, chunk);
+      this.#lastChunkIdx = chunkIdx;
+      this.#lastChunk = chunk;
       return chunk[rowIndex % this.#chunkSize] ?? null;
     }
     this.#request(chunkIdx);
@@ -201,6 +212,10 @@ var DataManager = class {
     while (this.#cache.size > this.#maxChunks) {
       const oldest = this.#cache.keys().next().value;
       this.#cache.delete(oldest);
+      if (oldest === this.#lastChunkIdx) {
+        this.#lastChunkIdx = -1;
+        this.#lastChunk = null;
+      }
     }
   }
   // Returning `false` from `callback` stops the walk. Callers that are looking for an answer
@@ -227,6 +242,8 @@ var DataManager = class {
     this.#failed.clear();
     this.#failedTimers.forEach(clearTimeout);
     this.#failedTimers.clear();
+    this.#lastChunkIdx = -1;
+    this.#lastChunk = null;
   }
 };
 
@@ -1347,7 +1364,9 @@ var Renderer = class _Renderer {
       colPositions,
       hiddenNeighbors,
       headerCheckboxCols,
-      sel
+      sel,
+      frozenWidth,
+      vpW
     );
     ctx.restore();
     if (frozenCount > 0) {
@@ -1375,7 +1394,9 @@ var Renderer = class _Renderer {
         colPositions,
         hiddenNeighbors,
         headerCheckboxCols,
-        sel
+        sel,
+        0,
+        frozenWidth
       );
       ctx.restore();
     }
@@ -1404,7 +1425,9 @@ var Renderer = class _Renderer {
         colPositions,
         hiddenNeighbors,
         headerCheckboxCols,
-        sel
+        sel,
+        rightX,
+        frozenRightWidth
       );
       ctx.restore();
     }
@@ -1869,7 +1892,7 @@ var Renderer = class _Renderer {
   #colX(c, frozenCount, frozenWidth, frozenRightCount, rightX, scrollLeft, colPositions) {
     return colScreenX(c, { frozenCount, frozenWidth, frozenRightCount, rightX, colPositions }, scrollLeft);
   }
-  #drawHeader(labels, aligns, columns, sorts, filters, startCol, endCol, scrollLeft, totalH, rowH, headerRows, theme, frozenCount, frozenWidth, frozenRightCount, rightX, colPositions, hiddenNeighbors, headerCheckboxCols, sel) {
+  #drawHeader(labels, aligns, columns, sorts, filters, startCol, endCol, scrollLeft, totalH, rowH, headerRows, theme, frozenCount, frozenWidth, frozenRightCount, rightX, colPositions, hiddenNeighbors, headerCheckboxCols, sel, clipX = 0, clipW = Infinity) {
     if (startCol > endCol) return;
     const ctx = this.#ctx;
     const padding = theme.cellPadding;
@@ -1943,6 +1966,13 @@ var Renderer = class _Renderer {
         const visEndCol = Math.min(cell.col + cell.colspan - 1, endCol);
         textCx = colPositions[visStartCol] + xOffset;
         textCw = colPositions[visEndCol + 1] - colPositions[visStartCol];
+        const clipRight = clipX + clipW;
+        if (textCx < clipX) {
+          textCw -= clipX - textCx;
+          textCx = clipX;
+        }
+        if (textCx + textCw > clipRight) textCw = clipRight - textCx;
+        textCw = Math.max(0, textCw);
       }
       const align = cell.isLeaf ? aligns?.[cell.col] ?? "left" : cell.align ?? "center";
       const iconRsv = cell.isLeaf ? FILTER_ICON_W + 4 : 0;
@@ -2322,7 +2352,7 @@ var Renderer = class _Renderer {
     }
     ctx.restore();
   }
-  #drawScrollbars({ v, h, SB, vSB = SB, hSB = SB, frozenWidth = 0, frozenRightWidth = 0, rightX = 0 }, theme, W, H) {
+  #drawScrollbars({ v, h, SB, vSB = SB, hSB = SB, frozenWidth = 0, frozenRightWidth = 0, rightX = 0, headerH = 0 }, theme, W, H) {
     if (!vSB && !hSB) return;
     const ctx = this.#ctx;
     const r = theme.scrollbarRadius;
@@ -2330,6 +2360,7 @@ var Renderer = class _Renderer {
     if (vSB > 0 && hSB > 0) ctx.fillRect(W - vSB, H - hSB, vSB, hSB);
     if (hSB > 0 && frozenWidth > 0) ctx.fillRect(0, H - hSB, frozenWidth, hSB);
     if (hSB > 0 && frozenRightWidth > 0) ctx.fillRect(rightX, H - hSB, frozenRightWidth, hSB);
+    if (vSB > 0 && headerH > 0) ctx.fillRect(W - vSB, 0, vSB, headerH);
     ctx.fillRect(v.x, v.y, v.w, v.h);
     ctx.fillStyle = theme.scrollbarThumb;
     this.#roundRect(v.x + 2, v.thumbY + 2, v.w - 4, v.thumbH - 4, r);
@@ -4785,7 +4816,11 @@ function buildFilterPanelEl({
       clearTimeout(debounce);
       seq++;
     });
-    readTags = () => state.contains !== null ? { contains: state.contains } : { values: [...state.tags] };
+    readTags = () => {
+      const pending = tagInput.value.trim();
+      if (pending && state.contains === null && state.tags.length === 0) setContains(pending);
+      return state.contains !== null ? { contains: state.contains } : { values: [...state.tags] };
+    };
   }
   let valuesSection = null;
   const valueCheckboxes = [];
@@ -4846,11 +4881,13 @@ function buildFilterPanelEl({
     });
     valueCheckboxes.forEach((cb) => cb.addEventListener("change", syncSelectAll));
     valuesSearch.addEventListener("input", () => {
+      const pristine = valueCheckboxes.every((cb) => cb.checked);
       const q = valuesSearch.value.trim().toLowerCase();
       let anyVisible = false;
       for (const r of valueRows) {
         const match = !q || r.text.toLowerCase().includes(q);
         r.row.style.display = match ? "flex" : "none";
+        if (pristine) r.cb.checked = match;
         anyVisible = anyVisible || match;
       }
       noMatch.style.display = anyVisible ? "none" : "block";
@@ -7392,7 +7429,14 @@ var JHGrid = class _JHGrid {
       this._pendingLocalState = null;
       return Promise.resolve();
     }
-    this._dm.setFetch((page, size) => this._opts.fetchData(page, size, state));
+    const fetchData = this._isLocalData ? /* @__PURE__ */ (() => {
+      let all = null;
+      return (page, size) => {
+        all ??= this._opts.fetchData(0, Number.MAX_SAFE_INTEGER, state).then((r) => r.rows);
+        return all.then((rows) => ({ rows: rows.slice(page * size, page * size + size) }));
+      };
+    })() : (page, size) => this._opts.fetchData(page, size, state);
+    this._dm.setFetch(fetchData);
     return this._boot(state);
   }
   // Where the sweep sits across the loading bars, 0..1, or null to leave them flat.
@@ -8786,19 +8830,19 @@ var JHGrid = class _JHGrid {
   }
   _clearSelection() {
     if (!this._sel) return;
-    const pairs = this._sel.type === "single" ? [[this._sel.row, this._sel.col]] : Array.from(
-      { length: this._sel.r2 - this._sel.r1 + 1 },
-      (_, ri) => Array.from(
-        { length: this._sel.c2 - this._sel.c1 + 1 },
-        (_2, ci) => [this._sel.r1 + ri, this._sel.c1 + ci]
-      )
-    ).flat();
+    const single = this._sel.type === "single";
+    const r1 = single ? this._sel.row : this._sel.r1;
+    const r2 = single ? this._sel.row : this._sel.r2;
+    const c1 = single ? this._sel.col : this._sel.c1;
+    const c2 = single ? this._sel.col : this._sel.c2;
+    const editableFields = [];
+    for (let c = c1; c <= c2; c++) {
+      if (this._isEditable(c)) editableFields.push(this._columns[c]);
+    }
     this._editTxnBegin();
-    pairs.forEach(([r, c]) => {
-      if (!this._isEditable(c)) return;
-      const field = this._columns[c];
-      this._setEdit(r, field, "");
-    });
+    for (let r = r1; r <= r2; r++) {
+      for (const field of editableFields) this._setEdit(r, field, "");
+    }
     this._editTxnCommit();
     this._draw();
   }
@@ -8983,11 +9027,15 @@ var JHGrid = class _JHGrid {
     const v = data[field];
     return v != null ? String(v) : "";
   }
-  // Re-runs validation for one cell and updates the validator's invalid-cell set.
+  // Re-runs validation for one cell and updates the validator's invalid-cell set. Takes a
+  // "row_field" key -- for callers that only have that (iterating an _edits-shaped Map). Callers
+  // that already have row/field apart (_setEdit, validateAll) should call _revalidateRowField()
+  // directly instead of paying to stringify them together here just to split them back apart.
   _revalidateKey(key) {
     const u = key.indexOf("_");
-    const row = Number(key.slice(0, u));
-    const field = key.slice(u + 1);
+    this._revalidateRowField(Number(key.slice(0, u)), key.slice(u + 1));
+  }
+  _revalidateRowField(row, field) {
     this._validator.revalidate(row, field, this._resolveCellStringValue(row, field));
   }
   // Rebuilds invalid-cell state from scratch based on the current _edits map —
@@ -9022,11 +9070,11 @@ var JHGrid = class _JHGrid {
     const validatedFields = this._columns.filter((f) => this._colDefMap.get(f)?.validation);
     if (validatedFields.length > 0) {
       this._dm.forEachLoaded((_, rowIndex) => {
-        validatedFields.forEach((field) => this._revalidateKey(`${rowIndex}_${field}`));
+        validatedFields.forEach((field) => this._revalidateRowField(rowIndex, field));
       });
       this._localRows.forEach((_, i) => {
         const r = this._rowPlan.visualOfLocal(i);
-        validatedFields.forEach((field) => this._revalidateKey(`${r}_${field}`));
+        validatedFields.forEach((field) => this._revalidateRowField(r, field));
       });
     }
     this._draw();
@@ -9053,7 +9101,7 @@ var JHGrid = class _JHGrid {
     this._edits.set(key, val);
     this._editedRows.add(row);
     this._opts.onCellChange?.({ row, field, newValue: val, oldValue });
-    this._revalidateKey(key);
+    this._revalidateRowField(row, field);
     this._growRowForMultilineValue(row, val);
   }
   // Excel grows a row's height the moment a cell picks up a line break -- typed (Alt+Enter) or
@@ -11917,7 +11965,7 @@ var JHGrid = class _JHGrid {
 JHGrid.use(RowSelectionPlugin);
 
 // index.js
-var VERSION = "0.1.1";
+var VERSION = "0.1.3";
 var SUPPORTED_BROWSERS = {
   chrome: 99,
   edge: 99,

package/dist/jhgrid.js

@@ -44,6 +44,14 @@ var JHGrid = (() => {
     #chunkSize;
     #maxChunks;
     #cache = /* @__PURE__ */ new Map();
+    // 1-entry cache of the chunk getRow() touched last. A bulk row-major walk (e.g. clearing an
+    // entire selection) calls getRow() for every column of the same row back-to-back -- same
+    // chunkIdx every time -- and #chunkSize more rows after that before it changes, so this turns
+    // the overwhelming majority of getRow() calls into a single index comparison instead of a Map
+    // lookup plus the LRU delete+re-insert below. Must be invalidated everywhere #cache forgets a
+    // chunk (#evict, clear) so it can never serve an entry #cache itself no longer considers current.
+    #lastChunkIdx = -1;
+    #lastChunk = null;
     #fetching = /* @__PURE__ */ new Set();
     #failed = /* @__PURE__ */ new Set();
     #failedTimers = /* @__PURE__ */ new Set();
@@ -77,10 +85,13 @@ var JHGrid = (() => {
     // re-request after onChunkLoaded).
     getRow(rowIndex) {
       const chunkIdx = Math.floor(rowIndex / this.#chunkSize);
+      if (chunkIdx === this.#lastChunkIdx) return this.#lastChunk[rowIndex % this.#chunkSize] ?? null;
       if (this.#cache.has(chunkIdx)) {
         const chunk = this.#cache.get(chunkIdx);
         this.#cache.delete(chunkIdx);
         this.#cache.set(chunkIdx, chunk);
+        this.#lastChunkIdx = chunkIdx;
+        this.#lastChunk = chunk;
         return chunk[rowIndex % this.#chunkSize] ?? null;
       }
       this.#request(chunkIdx);
@@ -241,6 +252,10 @@ var JHGrid = (() => {
       while (this.#cache.size > this.#maxChunks) {
         const oldest = this.#cache.keys().next().value;
         this.#cache.delete(oldest);
+        if (oldest === this.#lastChunkIdx) {
+          this.#lastChunkIdx = -1;
+          this.#lastChunk = null;
+        }
       }
     }
     // Returning `false` from `callback` stops the walk. Callers that are looking for an answer
@@ -267,6 +282,8 @@ var JHGrid = (() => {
       this.#failed.clear();
       this.#failedTimers.forEach(clearTimeout);
       this.#failedTimers.clear();
+      this.#lastChunkIdx = -1;
+      this.#lastChunk = null;
     }
   };
 
@@ -1387,7 +1404,9 @@ var JHGrid = (() => {
         colPositions,
         hiddenNeighbors,
         headerCheckboxCols,
-        sel
+        sel,
+        frozenWidth,
+        vpW
       );
       ctx.restore();
       if (frozenCount > 0) {
@@ -1415,7 +1434,9 @@ var JHGrid = (() => {
           colPositions,
           hiddenNeighbors,
           headerCheckboxCols,
-          sel
+          sel,
+          0,
+          frozenWidth
         );
         ctx.restore();
       }
@@ -1444,7 +1465,9 @@ var JHGrid = (() => {
           colPositions,
           hiddenNeighbors,
           headerCheckboxCols,
-          sel
+          sel,
+          rightX,
+          frozenRightWidth
         );
         ctx.restore();
       }
@@ -1909,7 +1932,7 @@ var JHGrid = (() => {
     #colX(c, frozenCount, frozenWidth, frozenRightCount, rightX, scrollLeft, colPositions) {
       return colScreenX(c, { frozenCount, frozenWidth, frozenRightCount, rightX, colPositions }, scrollLeft);
     }
-    #drawHeader(labels, aligns, columns, sorts, filters, startCol, endCol, scrollLeft, totalH, rowH, headerRows, theme, frozenCount, frozenWidth, frozenRightCount, rightX, colPositions, hiddenNeighbors, headerCheckboxCols, sel) {
+    #drawHeader(labels, aligns, columns, sorts, filters, startCol, endCol, scrollLeft, totalH, rowH, headerRows, theme, frozenCount, frozenWidth, frozenRightCount, rightX, colPositions, hiddenNeighbors, headerCheckboxCols, sel, clipX = 0, clipW = Infinity) {
       if (startCol > endCol) return;
       const ctx = this.#ctx;
       const padding = theme.cellPadding;
@@ -1983,6 +2006,13 @@ var JHGrid = (() => {
           const visEndCol = Math.min(cell.col + cell.colspan - 1, endCol);
           textCx = colPositions[visStartCol] + xOffset;
           textCw = colPositions[visEndCol + 1] - colPositions[visStartCol];
+          const clipRight = clipX + clipW;
+          if (textCx < clipX) {
+            textCw -= clipX - textCx;
+            textCx = clipX;
+          }
+          if (textCx + textCw > clipRight) textCw = clipRight - textCx;
+          textCw = Math.max(0, textCw);
         }
         const align = cell.isLeaf ? aligns?.[cell.col] ?? "left" : cell.align ?? "center";
         const iconRsv = cell.isLeaf ? FILTER_ICON_W + 4 : 0;
@@ -2362,7 +2392,7 @@ var JHGrid = (() => {
       }
       ctx.restore();
     }
-    #drawScrollbars({ v, h, SB, vSB = SB, hSB = SB, frozenWidth = 0, frozenRightWidth = 0, rightX = 0 }, theme, W, H) {
+    #drawScrollbars({ v, h, SB, vSB = SB, hSB = SB, frozenWidth = 0, frozenRightWidth = 0, rightX = 0, headerH = 0 }, theme, W, H) {
       if (!vSB && !hSB) return;
       const ctx = this.#ctx;
       const r = theme.scrollbarRadius;
@@ -2370,6 +2400,7 @@ var JHGrid = (() => {
       if (vSB > 0 && hSB > 0) ctx.fillRect(W - vSB, H - hSB, vSB, hSB);
       if (hSB > 0 && frozenWidth > 0) ctx.fillRect(0, H - hSB, frozenWidth, hSB);
       if (hSB > 0 && frozenRightWidth > 0) ctx.fillRect(rightX, H - hSB, frozenRightWidth, hSB);
+      if (vSB > 0 && headerH > 0) ctx.fillRect(W - vSB, 0, vSB, headerH);
       ctx.fillRect(v.x, v.y, v.w, v.h);
       ctx.fillStyle = theme.scrollbarThumb;
       this.#roundRect(v.x + 2, v.thumbY + 2, v.w - 4, v.thumbH - 4, r);
@@ -4825,7 +4856,11 @@ var JHGrid = (() => {
         clearTimeout(debounce);
         seq++;
       });
-      readTags = () => state.contains !== null ? { contains: state.contains } : { values: [...state.tags] };
+      readTags = () => {
+        const pending = tagInput.value.trim();
+        if (pending && state.contains === null && state.tags.length === 0) setContains(pending);
+        return state.contains !== null ? { contains: state.contains } : { values: [...state.tags] };
+      };
     }
     let valuesSection = null;
     const valueCheckboxes = [];
@@ -4886,11 +4921,13 @@ var JHGrid = (() => {
       });
       valueCheckboxes.forEach((cb) => cb.addEventListener("change", syncSelectAll));
       valuesSearch.addEventListener("input", () => {
+        const pristine = valueCheckboxes.every((cb) => cb.checked);
         const q = valuesSearch.value.trim().toLowerCase();
         let anyVisible = false;
         for (const r of valueRows) {
           const match = !q || r.text.toLowerCase().includes(q);
           r.row.style.display = match ? "flex" : "none";
+          if (pristine) r.cb.checked = match;
           anyVisible = anyVisible || match;
         }
         noMatch.style.display = anyVisible ? "none" : "block";
@@ -7432,7 +7469,14 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
         this._pendingLocalState = null;
         return Promise.resolve();
       }
-      this._dm.setFetch((page, size) => this._opts.fetchData(page, size, state));
+      const fetchData = this._isLocalData ? /* @__PURE__ */ (() => {
+        let all = null;
+        return (page, size) => {
+          all ??= this._opts.fetchData(0, Number.MAX_SAFE_INTEGER, state).then((r) => r.rows);
+          return all.then((rows) => ({ rows: rows.slice(page * size, page * size + size) }));
+        };
+      })() : (page, size) => this._opts.fetchData(page, size, state);
+      this._dm.setFetch(fetchData);
       return this._boot(state);
     }
     // Where the sweep sits across the loading bars, 0..1, or null to leave them flat.
@@ -8826,19 +8870,19 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
     }
     _clearSelection() {
       if (!this._sel) return;
-      const pairs = this._sel.type === "single" ? [[this._sel.row, this._sel.col]] : Array.from(
-        { length: this._sel.r2 - this._sel.r1 + 1 },
-        (_, ri) => Array.from(
-          { length: this._sel.c2 - this._sel.c1 + 1 },
-          (_2, ci) => [this._sel.r1 + ri, this._sel.c1 + ci]
-        )
-      ).flat();
+      const single = this._sel.type === "single";
+      const r1 = single ? this._sel.row : this._sel.r1;
+      const r2 = single ? this._sel.row : this._sel.r2;
+      const c1 = single ? this._sel.col : this._sel.c1;
+      const c2 = single ? this._sel.col : this._sel.c2;
+      const editableFields = [];
+      for (let c = c1; c <= c2; c++) {
+        if (this._isEditable(c)) editableFields.push(this._columns[c]);
+      }
       this._editTxnBegin();
-      pairs.forEach(([r, c]) => {
-        if (!this._isEditable(c)) return;
-        const field = this._columns[c];
-        this._setEdit(r, field, "");
-      });
+      for (let r = r1; r <= r2; r++) {
+        for (const field of editableFields) this._setEdit(r, field, "");
+      }
       this._editTxnCommit();
       this._draw();
     }
@@ -9023,11 +9067,15 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       const v = data[field];
       return v != null ? String(v) : "";
     }
-    // Re-runs validation for one cell and updates the validator's invalid-cell set.
+    // Re-runs validation for one cell and updates the validator's invalid-cell set. Takes a
+    // "row_field" key -- for callers that only have that (iterating an _edits-shaped Map). Callers
+    // that already have row/field apart (_setEdit, validateAll) should call _revalidateRowField()
+    // directly instead of paying to stringify them together here just to split them back apart.
     _revalidateKey(key) {
       const u = key.indexOf("_");
-      const row = Number(key.slice(0, u));
-      const field = key.slice(u + 1);
+      this._revalidateRowField(Number(key.slice(0, u)), key.slice(u + 1));
+    }
+    _revalidateRowField(row, field) {
       this._validator.revalidate(row, field, this._resolveCellStringValue(row, field));
     }
     // Rebuilds invalid-cell state from scratch based on the current _edits map —
@@ -9062,11 +9110,11 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       const validatedFields = this._columns.filter((f) => this._colDefMap.get(f)?.validation);
       if (validatedFields.length > 0) {
         this._dm.forEachLoaded((_, rowIndex) => {
-          validatedFields.forEach((field) => this._revalidateKey(`${rowIndex}_${field}`));
+          validatedFields.forEach((field) => this._revalidateRowField(rowIndex, field));
         });
         this._localRows.forEach((_, i) => {
           const r = this._rowPlan.visualOfLocal(i);
-          validatedFields.forEach((field) => this._revalidateKey(`${r}_${field}`));
+          validatedFields.forEach((field) => this._revalidateRowField(r, field));
         });
       }
       this._draw();
@@ -9093,7 +9141,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       this._edits.set(key, val);
       this._editedRows.add(row);
       this._opts.onCellChange?.({ row, field, newValue: val, oldValue });
-      this._revalidateKey(key);
+      this._revalidateRowField(row, field);
       this._growRowForMultilineValue(row, val);
     }
     // Excel grows a row's height the moment a cell picks up a line break -- typed (Alt+Enter) or
@@ -11957,7 +12005,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
   JHGrid.use(RowSelectionPlugin);
 
   // index.js
-  var VERSION = "0.1.1";
+  var VERSION = "0.1.3";
   var SUPPORTED_BROWSERS = {
     chrome: 99,
     edge: 99,