@humanspeak/svelte-headless-table 6.0.4 → 6.0.5

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2024-2025 Humanspeak, Inc.
+Copyright (c) 2024-2026 Humanspeak, Inc.
 
 Copyright (c) 2022-2024 Bryan Lee
 

package/dist/bodyRows.js

@@ -242,17 +242,12 @@ export const getColumnedBodyRows = (rows, columnIdOrder) => {
             clonedCell.row = columnedRows[rowIdx];
             return clonedCell;
         });
-        const visibleCells = columnIdOrder
-            .map((cid) => {
-            return cells.find((c) => c.id === cid);
-        })
-            .filter(nonUndefined);
+        const cellById = new Map(cells.map((c) => [c.id, c]));
+        const visibleCells = columnIdOrder.map((cid) => cellById.get(cid)).filter(nonUndefined);
         columnedRows[rowIdx].cells = visibleCells;
         // Include hidden cells in `cellForId` to allow row transformations on
         // hidden cells.
-        cells.forEach((cell) => {
-            columnedRows[rowIdx].cellForId[cell.id] = cell;
-        });
+        columnedRows[rowIdx].cellForId = Object.fromEntries(cellById);
     });
     return columnedRows;
 };

package/dist/createViewModel.js

@@ -162,27 +162,22 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         rows = fn(rows);
     });
+    const pluginEntries = Object.entries(pluginInstances);
     const injectedRows = derived(rows, ($rows) => {
         derivationCalls.injectedRows++;
-        // Inject state.
         $rows.forEach((row) => {
             row.injectState(tableState);
-            row.cells.forEach((cell) => {
-                cell.injectState(tableState);
-            });
-        });
-        // Apply plugin component hooks.
-        Object.entries(pluginInstances).forEach(([pluginName, pluginInstance]) => {
-            $rows.forEach((row) => {
-                if (pluginInstance.hooks?.['tbody.tr'] !== undefined) {
-                    row.applyHook(pluginName, pluginInstance.hooks['tbody.tr'](row));
+            row.cells.forEach((cell) => cell.injectState(tableState));
+            for (const [pluginName, pluginInstance] of pluginEntries) {
+                const trHook = pluginInstance.hooks?.['tbody.tr'];
+                if (trHook !== undefined) {
+                    row.applyHook(pluginName, trHook(row));
                 }
-                row.cells.forEach((cell) => {
-                    if (pluginInstance.hooks?.['tbody.tr.td'] !== undefined) {
-                        cell.applyHook(pluginName, pluginInstance.hooks['tbody.tr.td'](cell));
-                    }
-                });
-            });
+                const tdHook = pluginInstance.hooks?.['tbody.tr.td'];
+                if (tdHook !== undefined) {
+                    row.cells.forEach((cell) => cell.applyHook(pluginName, tdHook(cell)));
+                }
+            }
         });
         _rows.set($rows);
         return $rows;
@@ -196,53 +191,29 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         pageRows = fn(pageRows);
     });
+    // Page rows are a subset of the same object references already processed
+    // by injectedRows — no need to re-inject state or re-apply hooks.
     const injectedPageRows = derived(pageRows, ($pageRows) => {
         derivationCalls.injectedPageRows++;
-        // Inject state.
-        $pageRows.forEach((row) => {
-            row.injectState(tableState);
-            row.cells.forEach((cell) => {
-                cell.injectState(tableState);
-            });
-        });
-        // Apply plugin component hooks.
-        Object.entries(pluginInstances).forEach(([pluginName, pluginInstance]) => {
-            $pageRows.forEach((row) => {
-                if (pluginInstance.hooks?.['tbody.tr'] !== undefined) {
-                    row.applyHook(pluginName, pluginInstance.hooks['tbody.tr'](row));
-                }
-                row.cells.forEach((cell) => {
-                    if (pluginInstance.hooks?.['tbody.tr.td'] !== undefined) {
-                        cell.applyHook(pluginName, pluginInstance.hooks['tbody.tr.td'](cell));
-                    }
-                });
-            });
-        });
         _pageRows.set($pageRows);
         return $pageRows;
     });
     const headerRows = derived(injectedColumns, ($injectedColumns) => {
         derivationCalls.headerRows++;
         const $headerRows = getHeaderRows(columns, $injectedColumns.map((c) => c.id));
-        // Inject state.
         $headerRows.forEach((row) => {
             row.injectState(tableState);
-            row.cells.forEach((cell) => {
-                cell.injectState(tableState);
-            });
-        });
-        // Apply plugin component hooks.
-        Object.entries(pluginInstances).forEach(([pluginName, pluginInstance]) => {
-            $headerRows.forEach((row) => {
-                if (pluginInstance.hooks?.['thead.tr'] !== undefined) {
-                    row.applyHook(pluginName, pluginInstance.hooks['thead.tr'](row));
+            row.cells.forEach((cell) => cell.injectState(tableState));
+            for (const [pluginName, pluginInstance] of pluginEntries) {
+                const trHook = pluginInstance.hooks?.['thead.tr'];
+                if (trHook !== undefined) {
+                    row.applyHook(pluginName, trHook(row));
                 }
-                row.cells.forEach((cell) => {
-                    if (pluginInstance.hooks?.['thead.tr.th'] !== undefined) {
-                        cell.applyHook(pluginName, pluginInstance.hooks['thead.tr.th'](cell));
-                    }
-                });
-            });
+                const thHook = pluginInstance.hooks?.['thead.tr.th'];
+                if (thHook !== undefined) {
+                    row.cells.forEach((cell) => cell.applyHook(pluginName, thHook(cell)));
+                }
+            }
         });
         _headerRows.set($headerRows);
         return $headerRows;

package/dist/plugins/addColumnOrder.js

@@ -25,15 +25,20 @@ export const addColumnOrder = ({ initialColumnIdOrder = [], hideUnspecifiedColum
     const pluginState = { columnIdOrder };
     const deriveFlatColumns = (flatColumns) => {
         return derived([flatColumns, columnIdOrder], ([$flatColumns, $columnIdOrder]) => {
-            const _flatColumns = [...$flatColumns];
+            const colById = new Map($flatColumns.map((c) => [c.id, c]));
             const orderedFlatColumns = [];
             $columnIdOrder.forEach((id) => {
-                const colIdx = _flatColumns.findIndex((c) => c.id === id);
-                orderedFlatColumns.push(..._flatColumns.splice(colIdx, 1));
+                const col = colById.get(id);
+                if (col !== undefined) {
+                    orderedFlatColumns.push(col);
+                    colById.delete(id);
+                }
             });
             if (!hideUnspecifiedColumns) {
-                // Push the remaining unspecified columns.
-                orderedFlatColumns.push(..._flatColumns);
+                // Remaining entries preserve original $flatColumns order.
+                for (const col of colById.values()) {
+                    orderedFlatColumns.push(col);
+                }
             }
             return orderedFlatColumns;
         });

package/dist/plugins/addGroupBy.js

@@ -59,8 +59,12 @@ export const getGroupedRows = (rows, groupByIds, columnOptions, { repeatCellIds,
         if (typeof groupOnValue === 'function' || typeof groupOnValue === 'object') {
             console.warn(`Missing \`getGroupOn\` column option to aggregate column "${groupById}" with object values`);
         }
-        const subRows = subRowsForGroupOnValue.get(groupOnValue) ?? [];
-        subRowsForGroupOnValue.set(groupOnValue, [...subRows, row]);
+        let subRows = subRowsForGroupOnValue.get(groupOnValue);
+        if (subRows === undefined) {
+            subRows = [];
+            subRowsForGroupOnValue.set(groupOnValue, subRows);
+        }
+        subRows.push(row);
     }
     const groupedRows = [];
     let groupRowIdx = 0;

package/dist/plugins/addVirtualScroll.js

@@ -59,10 +59,18 @@ export const addVirtualScroll = ({ onLoadMore, hasMore: hasMoreConfig, loadMoreT
     let scrollContainer = null;
     // Cache for row lookup (set by derivePageRows)
     let allRowsCache = [];
-    // Visible range calculation
-    const visibleRange = derived([rowIds, scrollTop, viewportHeight], ([$rowIds, $scrollTop, $viewportHeight]) => {
-        return heightManager.getVisibleRange($rowIds, $scrollTop, $viewportHeight, bufferSize);
-    });
+    // Visible range calculation.
+    // Return the same object reference when the range hasn't changed to avoid
+    // unnecessary downstream store updates (spacer heights, rendered rows).
+    let currentRange = { start: 0, end: 0 };
+    const visibleRange = derived([rowIds, scrollTop, viewportHeight], ([$rowIds, $scrollTop, $viewportHeight], set) => {
+        const range = heightManager.getVisibleRange($rowIds, $scrollTop, $viewportHeight, bufferSize);
+        if (range.start === currentRange.start && range.end === currentRange.end) {
+            return;
+        }
+        currentRange = range;
+        set(range);
+    }, currentRange);
     // Total height of all rows
     const totalHeight = derived(rowIds, ($rowIds) => {
         return heightManager.getTotalHeight($rowIds);
@@ -110,8 +118,7 @@ export const addVirtualScroll = ({ onLoadMore, hasMore: hasMoreConfig, loadMoreT
      */
     const handleScroll = (event) => {
         const target = event.target;
-        const newScrollTop = target.scrollTop;
-        scrollTop.set(newScrollTop);
+        scrollTop.set(target.scrollTop);
         checkLoadMore();
     };
     /**
@@ -119,6 +126,11 @@ export const addVirtualScroll = ({ onLoadMore, hasMore: hasMoreConfig, loadMoreT
      */
     const virtualScroll = (node) => {
         scrollContainer = node;
+        // Disable overflow-anchor to prevent the browser from adjusting
+        // scrollTop when spacer heights change. Without this, a feedback
+        // loop occurs: spacer change → browser adjusts scrollTop → scroll
+        // event → new visible range → spacer change → cascades to bottom.
+        node.style.overflowAnchor = 'none';
         // Set initial viewport height
         const initialHeight = node.clientHeight;
         viewportHeight.set(initialHeight);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-headless-table",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "description": "A powerful, headless table library for Svelte that provides complete control over table UI while handling complex data operations like sorting, filtering, pagination, grouping, and row expansion. Build custom, accessible data tables with zero styling opinions.",
   "keywords": [
     "svelte",
@@ -58,47 +58,46 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
-    "@humanspeak/memory-cache": "^1.0.4",
+    "@humanspeak/memory-cache": "^1.0.5",
     "@humanspeak/svelte-keyed": "^5.0.1",
     "@humanspeak/svelte-render": "^5.1.1",
     "@humanspeak/svelte-subscribe": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.2",
-    "@eslint/js": "^9.39.2",
-    "@faker-js/faker": "^10.2.0",
-    "@playwright/test": "^1.58.1",
-    "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.50.2",
+    "@eslint/js": "^10.0.1",
+    "@faker-js/faker": "^10.3.0",
+    "@playwright/test": "^1.58.2",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.53.4",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@types/eslint": "9.6.1",
-    "@types/node": "^25.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^8.54.0",
+    "@types/node": "^25.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
     "@vitest/coverage-v8": "^4.0.18",
-    "concurrently": "^9.2.1",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.2",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-svelte": "3.14.0",
-    "eslint-plugin-unused-imports": "4.3.0",
-    "globals": "^17.3.0",
+    "eslint-plugin-svelte": "3.15.0",
+    "eslint-plugin-unused-imports": "4.4.1",
+    "globals": "^17.4.0",
     "husky": "^9.1.7",
     "prettier": "^3.8.1",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-sort-json": "^4.2.0",
-    "prettier-plugin-svelte": "^3.4.1",
+    "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "publint": "^0.3.17",
-    "svelte": "^5.49.1",
-    "svelte-check": "^4.3.6",
+    "publint": "^0.3.18",
+    "svelte": "^5.53.7",
+    "svelte-check": "^4.4.4",
     "tslib": "^2.8.1",
-    "type-fest": "^5.4.3",
+    "type-fest": "^5.4.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"
   },
@@ -106,7 +105,7 @@
     "svelte": "^5.30.0"
   },
   "volta": {
-    "node": "24.12.0"
+    "node": "24.14.0"
   },
   "scripts": {
     "build": "vite build && npm run package",
@@ -114,7 +113,7 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "dev": "vite dev",
-    "dev:all": "concurrently -k -n pkg,docs,sitemap -c green,cyan,magenta \"pnpm -w -r --filter @humanspeak/svelte-headless-table run dev:pkg\" \"pnpm --filter docs run dev\" \"pnpm --filter docs run sitemap:watch\"",
+    "dev:all": "mprocs",
     "dev:pkg": "svelte-kit sync && svelte-package --watch",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",