@ornery/ui-grid-vanilla 0.1.8 → 0.1.9

package/dist/index.d.mts

@@ -169,6 +169,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private draggedColumnName;
     private dropTargetColumnName;
     private scrollPosition;
+    private horizontalScrollPosition;
     private scrollFrame;
     private suppressScrollEvent;
     private lastVirtualStartIndex;
@@ -178,6 +179,9 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private benchmarkAverage;
     private skipNextRender;
     private dataFrame;
+    private pendingPatchedRowIds;
+    private pendingDataRefreshMode;
+    private lastScrollActivityAt;
     static get observedAttributes(): string[];
     get options(): GridOptions;
     set options(value: GridOptions);
@@ -273,6 +277,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
      * (the fresh innerHTML already reflects the latest data).
      */
     setData(rows: GridRecord[]): void;
+    private flushPendingDataRefresh;
     private patchCells;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -296,11 +301,14 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private renderPagination;
     private renderSlotRegistry;
     private renderCellTemplate;
+    private renderCellTemplateFromMarkup;
     private renderExpandableTemplate;
     private getTemplateMarkup;
     private interpolateTemplate;
     private resolveTemplateValue;
     private rowIndexFor;
+    private classifyDataRefresh;
+    private getRenderedDisplayWindow;
     private cellSlotName;
     private downloadCsv;
     private renderControlIcon;

package/dist/index.d.ts

@@ -169,6 +169,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private draggedColumnName;
     private dropTargetColumnName;
     private scrollPosition;
+    private horizontalScrollPosition;
     private scrollFrame;
     private suppressScrollEvent;
     private lastVirtualStartIndex;
@@ -178,6 +179,9 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private benchmarkAverage;
     private skipNextRender;
     private dataFrame;
+    private pendingPatchedRowIds;
+    private pendingDataRefreshMode;
+    private lastScrollActivityAt;
     static get observedAttributes(): string[];
     get options(): GridOptions;
     set options(value: GridOptions);
@@ -273,6 +277,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
      * (the fresh innerHTML already reflects the latest data).
      */
     setData(rows: GridRecord[]): void;
+    private flushPendingDataRefresh;
     private patchCells;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -296,11 +301,14 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private renderPagination;
     private renderSlotRegistry;
     private renderCellTemplate;
+    private renderCellTemplateFromMarkup;
     private renderExpandableTemplate;
     private getTemplateMarkup;
     private interpolateTemplate;
     private resolveTemplateValue;
     private rowIndexFor;
+    private classifyDataRefresh;
+    private getRenderedDisplayWindow;
     private cellSlotName;
     private downloadCsv;
     private renderControlIcon;

package/dist/index.js

@@ -779,6 +779,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
   draggedColumnName = null;
   dropTargetColumnName = null;
   scrollPosition = 0;
+  horizontalScrollPosition = 0;
   scrollFrame = null;
   suppressScrollEvent = false;
   lastVirtualStartIndex = -1;
@@ -788,6 +789,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
   benchmarkAverage = "\u2014";
   skipNextRender = false;
   dataFrame = null;
+  pendingPatchedRowIds = null;
+  pendingDataRefreshMode = null;
+  lastScrollActivityAt = 0;
   static get observedAttributes() {
     return [
       // Scalar attributes
@@ -833,10 +837,14 @@ var UiGridStandaloneElement = class extends HTMLElement {
     ];
   }
   get options() {
-    return this.activeOptions ?? {
+    if (this.activeOptions !== null) {
+      return this.buildEffectiveOptions(this.activeOptions);
+    }
+    return {
       id: "__ui-grid-pending__",
       data: [],
-      columnDefs: []
+      columnDefs: [],
+      ...this.attributeOptions
     };
   }
   set options(value) {
@@ -959,8 +967,15 @@ var UiGridStandaloneElement = class extends HTMLElement {
     );
     if (paginationPageSizes !== void 0)
       this.attributeOptions.paginationPageSizes = paginationPageSizes;
-    if (this.activeOptions) {
+    if (this.activeOptions !== null) {
       this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+    } else {
+      this.ensureController({
+        id: "__ui-grid-pending__",
+        data: [],
+        columnDefs: [],
+        ...this.attributeOptions
+      });
     }
   }
   parseBooleanAttribute(name) {
@@ -1272,18 +1287,49 @@ var UiGridStandaloneElement = class extends HTMLElement {
     if (!controller) {
       return;
     }
+    const previousSnapshot = this.snapshot;
     this.skipNextRender = true;
     controller.refreshData(rows);
     this.skipNextRender = false;
+    const { mode, changedRowIds } = this.classifyDataRefresh(previousSnapshot, this.snapshot);
+    if (mode === null) {
+      return;
+    }
+    this.pendingDataRefreshMode = mode;
+    this.pendingPatchedRowIds = changedRowIds;
     if (this.dataFrame !== null) {
       cancelAnimationFrame(this.dataFrame);
     }
     this.dataFrame = requestAnimationFrame(() => {
-      this.dataFrame = null;
-      this.patchCells();
+      this.flushPendingDataRefresh();
     });
   }
-  patchCells() {
+  flushPendingDataRefresh() {
+    this.dataFrame = null;
+    const mode = this.pendingDataRefreshMode;
+    if (mode === null) {
+      return;
+    }
+    if (Date.now() - this.lastScrollActivityAt < 80) {
+      this.dataFrame = requestAnimationFrame(() => {
+        this.flushPendingDataRefresh();
+      });
+      return;
+    }
+    const changedRowIds = this.pendingPatchedRowIds;
+    this.pendingDataRefreshMode = null;
+    this.pendingPatchedRowIds = null;
+    if (mode === "patch") {
+      this.patchCells(changedRowIds ?? void 0);
+      return;
+    }
+    if (mode === "virtual") {
+      this.renderVirtualBody();
+      return;
+    }
+    this.render();
+  }
+  patchCells(changedRowIds) {
     const snapshot = this.snapshot;
     if (!snapshot) {
       return;
@@ -1293,30 +1339,37 @@ var UiGridStandaloneElement = class extends HTMLElement {
       return;
     }
     const rowMap = /* @__PURE__ */ new Map();
+    const rowIndexMap = /* @__PURE__ */ new Map();
     for (const row of snapshot.pipeline.visibleRows) {
       rowMap.set(row.id, row);
+      rowIndexMap.set(row.id, rowIndexMap.size);
     }
     const colMap = /* @__PURE__ */ new Map();
+    const templateMarkupMap = /* @__PURE__ */ new Map();
     for (const col of snapshot.visibleColumns) {
       colMap.set(col.name, col);
+      templateMarkupMap.set(col.name, this.getTemplateMarkup(this.cellSlotName(col)));
     }
     const cells = root.querySelectorAll("[data-row][data-column]");
     for (const cell of cells) {
       const rowId = cell.dataset["row"];
       const colName = cell.dataset["column"];
       if (!rowId || !colName) continue;
+      if (changedRowIds && !changedRowIds.has(rowId)) continue;
       const row = rowMap.get(rowId);
       const column = colMap.get(colName);
       if (!row || !column) continue;
-      const cellShell = cell.querySelector(".cell-shell");
-      if (!cellShell) continue;
-      const newContent = this.renderCellTemplate(row, column, 0);
-      const toggles = cellShell.querySelectorAll(".row-toggle");
-      if (toggles.length === 0) {
-        cellShell.innerHTML = newContent;
-      } else {
-        const toggleHtml = Array.from(toggles).map((t) => t.outerHTML).join("");
-        cellShell.innerHTML = toggleHtml + newContent;
+      if (cell.classList.contains("cell-editing")) continue;
+      const cellContent = cell.querySelector(".cell-content");
+      if (!cellContent) continue;
+      const newContent = this.renderCellTemplateFromMarkup(
+        row,
+        column,
+        rowIndexMap.get(rowId) ?? 0,
+        templateMarkupMap.get(colName) ?? null
+      );
+      if (cellContent.innerHTML !== newContent) {
+        cellContent.innerHTML = newContent;
       }
     }
   }
@@ -1668,7 +1721,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
         if (!target?.classList.contains("grid-table") || this.suppressScrollEvent) {
           return;
         }
+        this.lastScrollActivityAt = Date.now();
         this.scrollPosition = target.scrollTop;
+        this.horizontalScrollPosition = target.scrollLeft;
         if (!this.snapshot?.pipeline.virtualizationEnabled) {
           return;
         }
@@ -1749,6 +1804,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const previousGridTable = root.querySelector(".grid-table");
     if (previousGridTable && !this.suppressScrollEvent) {
       this.scrollPosition = previousGridTable.scrollTop;
+      this.horizontalScrollPosition = previousGridTable.scrollLeft;
     }
     if (!snapshot) {
       root.innerHTML = `<style>${import_ui_grid_core2.GRID_CORE_CSS}</style><section class="grid-shell ui-grid-shell"><div class="empty-state ui-grid-no-row-overlay"><strong>No grid options provided.</strong></div></section>`;
@@ -1795,12 +1851,18 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const bodyContent = itemsToRender.map((item, index) => this.renderDisplayItem(item, startIndex + index)).join("");
     const body = snapshot.pipeline.displayItems.length > 0 ? virtualizationEnabled ? `<div class="grid-virtual-spacer" style="height:${totalVirtualHeight}px"><div class="body-grid ui-grid-canvas grid-virtual-body" style="grid-template-columns:${templateColumns};top:${virtualOffset}px">${bodyContent}</div></div>` : `<div class="body-grid ui-grid-canvas" style="grid-template-columns:${templateColumns}">${bodyContent}</div>` : `<div class="empty-state ui-grid-no-row-overlay"><strong>${escapeHtml(options.emptyMessage ?? labels.emptyHeading)}</strong><p>${escapeHtml(labels.emptyDescription)}</p></div>`;
     const pagination = paginationEnabled && showPagination ? this.renderPagination(snapshot) : "";
-    const gridTableStyle = `${virtualizationEnabled ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
+    const hasViewportScroll = virtualizationEnabled || options.viewportHeight !== void 0;
+    const gridTableStyle = `${hasViewportScroll ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
     root.innerHTML = `<style>${import_ui_grid_core2.GRID_CORE_CSS}</style>${slotRegistry}<section class="grid-frame ui-grid" role="grid" aria-label="${escapeHtml(options.title ?? "Data grid")}"><div class="grid-table ui-grid-contents-wrapper" style="${gridTableStyle}"><div class="header-grid ui-grid-header ui-grid-header-canvas" style="grid-template-columns:${templateColumns}">${header}</div>${filterRow}${body}</div>${pagination}</section>`;
     const gridTable = root.querySelector(".grid-table");
-    if (gridTable && this.scrollPosition > 0 && virtualizationEnabled) {
+    if (gridTable && (this.scrollPosition > 0 || this.horizontalScrollPosition > 0)) {
       this.suppressScrollEvent = true;
-      gridTable.scrollTop = this.scrollPosition;
+      if (this.scrollPosition > 0) {
+        gridTable.scrollTop = this.scrollPosition;
+      }
+      if (this.horizontalScrollPosition > 0) {
+        gridTable.scrollLeft = this.horizontalScrollPosition;
+      }
       requestAnimationFrame(() => {
         this.suppressScrollEvent = false;
       });
@@ -1912,7 +1974,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
       editing ? "cell-editing" : ""
     ].filter(Boolean).join(" ");
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
-    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}${content}</div></div>`;
+    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}<div class="cell-content">${content}</div></div></div>`;
   }
   renderPagination(snapshot) {
     const pageSizes = snapshot.options.paginationPageSizes ?? [10, 25, 50, 100];
@@ -1926,6 +1988,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
   }
   renderCellTemplate(row, column, displayIndex) {
     const templateMarkup = this.getTemplateMarkup(this.cellSlotName(column));
+    return this.renderCellTemplateFromMarkup(row, column, displayIndex, templateMarkup);
+  }
+  renderCellTemplateFromMarkup(row, column, displayIndex, templateMarkup) {
     if (!templateMarkup) {
       return `<span class="cell-value">${escapeHtml(this.controller?.displayValue(row, column) ?? "")}</span>`;
     }
@@ -1978,6 +2043,79 @@ var UiGridStandaloneElement = class extends HTMLElement {
   rowIndexFor(row, fallback = 0) {
     return this.snapshot?.pipeline.visibleRows.findIndex((candidate) => candidate.id === row.id) ?? fallback;
   }
+  classifyDataRefresh(previousSnapshot, nextSnapshot) {
+    if (!nextSnapshot) {
+      return { mode: "full", changedRowIds: null };
+    }
+    if (!previousSnapshot) {
+      return {
+        mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+        changedRowIds: null
+      };
+    }
+    if (previousSnapshot.visibleColumns.length !== nextSnapshot.visibleColumns.length) {
+      return { mode: "full", changedRowIds: null };
+    }
+    for (let index = 0; index < previousSnapshot.visibleColumns.length; index += 1) {
+      if (previousSnapshot.visibleColumns[index]?.name !== nextSnapshot.visibleColumns[index]?.name) {
+        return { mode: "full", changedRowIds: null };
+      }
+    }
+    const previousWindow = this.getRenderedDisplayWindow(previousSnapshot);
+    const nextWindow = this.getRenderedDisplayWindow(nextSnapshot);
+    if (previousWindow.startIndex !== nextWindow.startIndex || previousWindow.items.length !== nextWindow.items.length) {
+      return {
+        mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+        changedRowIds: null
+      };
+    }
+    const changedRowIds = /* @__PURE__ */ new Set();
+    for (let index = 0; index < previousWindow.items.length; index += 1) {
+      const previousItem = previousWindow.items[index];
+      const nextItem = nextWindow.items[index];
+      if (!previousItem || !nextItem || previousItem.kind !== "row" || nextItem.kind !== "row") {
+        return {
+          mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+          changedRowIds: null
+        };
+      }
+      if (previousItem.row.id !== nextItem.row.id) {
+        return {
+          mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+          changedRowIds: null
+        };
+      }
+      if (previousItem.row.entity !== nextItem.row.entity) {
+        changedRowIds.add(nextItem.row.id);
+      }
+    }
+    return {
+      mode: changedRowIds.size > 0 ? "patch" : null,
+      changedRowIds: changedRowIds.size > 0 ? changedRowIds : null
+    };
+  }
+  getRenderedDisplayWindow(snapshot) {
+    if (!snapshot.pipeline.virtualizationEnabled) {
+      return {
+        startIndex: 0,
+        items: snapshot.pipeline.displayItems
+      };
+    }
+    const stickyChromeHeight = this.measuredHeaderStickyHeight + this.measuredFilterStickyHeight;
+    const viewportHeight = snapshot.options.viewportHeight ?? 560;
+    const bodyViewportHeight = Math.max(snapshot.rowSize, viewportHeight - stickyChromeHeight);
+    const bodyScrollTop = Math.max(0, this.scrollPosition - stickyChromeHeight);
+    const overscan = 4;
+    const startIndex = Math.max(0, Math.floor(bodyScrollTop / snapshot.rowSize) - overscan);
+    const visibleCount = Math.ceil(bodyViewportHeight / snapshot.rowSize) + overscan * 2;
+    return {
+      startIndex,
+      items: snapshot.pipeline.displayItems.slice(
+        startIndex,
+        Math.min(snapshot.pipeline.displayItems.length, startIndex + visibleCount)
+      )
+    };
+  }
   cellSlotName(column) {
     return `cell-${column.name}`;
   }

package/dist/index.mjs

@@ -821,6 +821,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
   draggedColumnName = null;
   dropTargetColumnName = null;
   scrollPosition = 0;
+  horizontalScrollPosition = 0;
   scrollFrame = null;
   suppressScrollEvent = false;
   lastVirtualStartIndex = -1;
@@ -830,6 +831,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
   benchmarkAverage = "\u2014";
   skipNextRender = false;
   dataFrame = null;
+  pendingPatchedRowIds = null;
+  pendingDataRefreshMode = null;
+  lastScrollActivityAt = 0;
   static get observedAttributes() {
     return [
       // Scalar attributes
@@ -875,10 +879,14 @@ var UiGridStandaloneElement = class extends HTMLElement {
     ];
   }
   get options() {
-    return this.activeOptions ?? {
+    if (this.activeOptions !== null) {
+      return this.buildEffectiveOptions(this.activeOptions);
+    }
+    return {
       id: "__ui-grid-pending__",
       data: [],
-      columnDefs: []
+      columnDefs: [],
+      ...this.attributeOptions
     };
   }
   set options(value) {
@@ -1001,8 +1009,15 @@ var UiGridStandaloneElement = class extends HTMLElement {
     );
     if (paginationPageSizes !== void 0)
       this.attributeOptions.paginationPageSizes = paginationPageSizes;
-    if (this.activeOptions) {
+    if (this.activeOptions !== null) {
       this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+    } else {
+      this.ensureController({
+        id: "__ui-grid-pending__",
+        data: [],
+        columnDefs: [],
+        ...this.attributeOptions
+      });
     }
   }
   parseBooleanAttribute(name) {
@@ -1314,18 +1329,49 @@ var UiGridStandaloneElement = class extends HTMLElement {
     if (!controller) {
       return;
     }
+    const previousSnapshot = this.snapshot;
     this.skipNextRender = true;
     controller.refreshData(rows);
     this.skipNextRender = false;
+    const { mode, changedRowIds } = this.classifyDataRefresh(previousSnapshot, this.snapshot);
+    if (mode === null) {
+      return;
+    }
+    this.pendingDataRefreshMode = mode;
+    this.pendingPatchedRowIds = changedRowIds;
     if (this.dataFrame !== null) {
       cancelAnimationFrame(this.dataFrame);
     }
     this.dataFrame = requestAnimationFrame(() => {
-      this.dataFrame = null;
-      this.patchCells();
+      this.flushPendingDataRefresh();
     });
   }
-  patchCells() {
+  flushPendingDataRefresh() {
+    this.dataFrame = null;
+    const mode = this.pendingDataRefreshMode;
+    if (mode === null) {
+      return;
+    }
+    if (Date.now() - this.lastScrollActivityAt < 80) {
+      this.dataFrame = requestAnimationFrame(() => {
+        this.flushPendingDataRefresh();
+      });
+      return;
+    }
+    const changedRowIds = this.pendingPatchedRowIds;
+    this.pendingDataRefreshMode = null;
+    this.pendingPatchedRowIds = null;
+    if (mode === "patch") {
+      this.patchCells(changedRowIds ?? void 0);
+      return;
+    }
+    if (mode === "virtual") {
+      this.renderVirtualBody();
+      return;
+    }
+    this.render();
+  }
+  patchCells(changedRowIds) {
     const snapshot = this.snapshot;
     if (!snapshot) {
       return;
@@ -1335,30 +1381,37 @@ var UiGridStandaloneElement = class extends HTMLElement {
       return;
     }
     const rowMap = /* @__PURE__ */ new Map();
+    const rowIndexMap = /* @__PURE__ */ new Map();
     for (const row of snapshot.pipeline.visibleRows) {
       rowMap.set(row.id, row);
+      rowIndexMap.set(row.id, rowIndexMap.size);
     }
     const colMap = /* @__PURE__ */ new Map();
+    const templateMarkupMap = /* @__PURE__ */ new Map();
     for (const col of snapshot.visibleColumns) {
       colMap.set(col.name, col);
+      templateMarkupMap.set(col.name, this.getTemplateMarkup(this.cellSlotName(col)));
     }
     const cells = root.querySelectorAll("[data-row][data-column]");
     for (const cell of cells) {
       const rowId = cell.dataset["row"];
       const colName = cell.dataset["column"];
       if (!rowId || !colName) continue;
+      if (changedRowIds && !changedRowIds.has(rowId)) continue;
       const row = rowMap.get(rowId);
       const column = colMap.get(colName);
       if (!row || !column) continue;
-      const cellShell = cell.querySelector(".cell-shell");
-      if (!cellShell) continue;
-      const newContent = this.renderCellTemplate(row, column, 0);
-      const toggles = cellShell.querySelectorAll(".row-toggle");
-      if (toggles.length === 0) {
-        cellShell.innerHTML = newContent;
-      } else {
-        const toggleHtml = Array.from(toggles).map((t) => t.outerHTML).join("");
-        cellShell.innerHTML = toggleHtml + newContent;
+      if (cell.classList.contains("cell-editing")) continue;
+      const cellContent = cell.querySelector(".cell-content");
+      if (!cellContent) continue;
+      const newContent = this.renderCellTemplateFromMarkup(
+        row,
+        column,
+        rowIndexMap.get(rowId) ?? 0,
+        templateMarkupMap.get(colName) ?? null
+      );
+      if (cellContent.innerHTML !== newContent) {
+        cellContent.innerHTML = newContent;
       }
     }
   }
@@ -1710,7 +1763,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
         if (!target?.classList.contains("grid-table") || this.suppressScrollEvent) {
           return;
         }
+        this.lastScrollActivityAt = Date.now();
         this.scrollPosition = target.scrollTop;
+        this.horizontalScrollPosition = target.scrollLeft;
         if (!this.snapshot?.pipeline.virtualizationEnabled) {
           return;
         }
@@ -1791,6 +1846,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const previousGridTable = root.querySelector(".grid-table");
     if (previousGridTable && !this.suppressScrollEvent) {
       this.scrollPosition = previousGridTable.scrollTop;
+      this.horizontalScrollPosition = previousGridTable.scrollLeft;
     }
     if (!snapshot) {
       root.innerHTML = `<style>${GRID_CORE_CSS}</style><section class="grid-shell ui-grid-shell"><div class="empty-state ui-grid-no-row-overlay"><strong>No grid options provided.</strong></div></section>`;
@@ -1837,12 +1893,18 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const bodyContent = itemsToRender.map((item, index) => this.renderDisplayItem(item, startIndex + index)).join("");
     const body = snapshot.pipeline.displayItems.length > 0 ? virtualizationEnabled ? `<div class="grid-virtual-spacer" style="height:${totalVirtualHeight}px"><div class="body-grid ui-grid-canvas grid-virtual-body" style="grid-template-columns:${templateColumns};top:${virtualOffset}px">${bodyContent}</div></div>` : `<div class="body-grid ui-grid-canvas" style="grid-template-columns:${templateColumns}">${bodyContent}</div>` : `<div class="empty-state ui-grid-no-row-overlay"><strong>${escapeHtml(options.emptyMessage ?? labels.emptyHeading)}</strong><p>${escapeHtml(labels.emptyDescription)}</p></div>`;
     const pagination = paginationEnabled && showPagination ? this.renderPagination(snapshot) : "";
-    const gridTableStyle = `${virtualizationEnabled ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
+    const hasViewportScroll = virtualizationEnabled || options.viewportHeight !== void 0;
+    const gridTableStyle = `${hasViewportScroll ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
     root.innerHTML = `<style>${GRID_CORE_CSS}</style>${slotRegistry}<section class="grid-frame ui-grid" role="grid" aria-label="${escapeHtml(options.title ?? "Data grid")}"><div class="grid-table ui-grid-contents-wrapper" style="${gridTableStyle}"><div class="header-grid ui-grid-header ui-grid-header-canvas" style="grid-template-columns:${templateColumns}">${header}</div>${filterRow}${body}</div>${pagination}</section>`;
     const gridTable = root.querySelector(".grid-table");
-    if (gridTable && this.scrollPosition > 0 && virtualizationEnabled) {
+    if (gridTable && (this.scrollPosition > 0 || this.horizontalScrollPosition > 0)) {
       this.suppressScrollEvent = true;
-      gridTable.scrollTop = this.scrollPosition;
+      if (this.scrollPosition > 0) {
+        gridTable.scrollTop = this.scrollPosition;
+      }
+      if (this.horizontalScrollPosition > 0) {
+        gridTable.scrollLeft = this.horizontalScrollPosition;
+      }
       requestAnimationFrame(() => {
         this.suppressScrollEvent = false;
       });
@@ -1954,7 +2016,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
       editing ? "cell-editing" : ""
     ].filter(Boolean).join(" ");
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
-    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}${content}</div></div>`;
+    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}<div class="cell-content">${content}</div></div></div>`;
   }
   renderPagination(snapshot) {
     const pageSizes = snapshot.options.paginationPageSizes ?? [10, 25, 50, 100];
@@ -1968,6 +2030,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
   }
   renderCellTemplate(row, column, displayIndex) {
     const templateMarkup = this.getTemplateMarkup(this.cellSlotName(column));
+    return this.renderCellTemplateFromMarkup(row, column, displayIndex, templateMarkup);
+  }
+  renderCellTemplateFromMarkup(row, column, displayIndex, templateMarkup) {
     if (!templateMarkup) {
       return `<span class="cell-value">${escapeHtml(this.controller?.displayValue(row, column) ?? "")}</span>`;
     }
@@ -2020,6 +2085,79 @@ var UiGridStandaloneElement = class extends HTMLElement {
   rowIndexFor(row, fallback = 0) {
     return this.snapshot?.pipeline.visibleRows.findIndex((candidate) => candidate.id === row.id) ?? fallback;
   }
+  classifyDataRefresh(previousSnapshot, nextSnapshot) {
+    if (!nextSnapshot) {
+      return { mode: "full", changedRowIds: null };
+    }
+    if (!previousSnapshot) {
+      return {
+        mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+        changedRowIds: null
+      };
+    }
+    if (previousSnapshot.visibleColumns.length !== nextSnapshot.visibleColumns.length) {
+      return { mode: "full", changedRowIds: null };
+    }
+    for (let index = 0; index < previousSnapshot.visibleColumns.length; index += 1) {
+      if (previousSnapshot.visibleColumns[index]?.name !== nextSnapshot.visibleColumns[index]?.name) {
+        return { mode: "full", changedRowIds: null };
+      }
+    }
+    const previousWindow = this.getRenderedDisplayWindow(previousSnapshot);
+    const nextWindow = this.getRenderedDisplayWindow(nextSnapshot);
+    if (previousWindow.startIndex !== nextWindow.startIndex || previousWindow.items.length !== nextWindow.items.length) {
+      return {
+        mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+        changedRowIds: null
+      };
+    }
+    const changedRowIds = /* @__PURE__ */ new Set();
+    for (let index = 0; index < previousWindow.items.length; index += 1) {
+      const previousItem = previousWindow.items[index];
+      const nextItem = nextWindow.items[index];
+      if (!previousItem || !nextItem || previousItem.kind !== "row" || nextItem.kind !== "row") {
+        return {
+          mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+          changedRowIds: null
+        };
+      }
+      if (previousItem.row.id !== nextItem.row.id) {
+        return {
+          mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+          changedRowIds: null
+        };
+      }
+      if (previousItem.row.entity !== nextItem.row.entity) {
+        changedRowIds.add(nextItem.row.id);
+      }
+    }
+    return {
+      mode: changedRowIds.size > 0 ? "patch" : null,
+      changedRowIds: changedRowIds.size > 0 ? changedRowIds : null
+    };
+  }
+  getRenderedDisplayWindow(snapshot) {
+    if (!snapshot.pipeline.virtualizationEnabled) {
+      return {
+        startIndex: 0,
+        items: snapshot.pipeline.displayItems
+      };
+    }
+    const stickyChromeHeight = this.measuredHeaderStickyHeight + this.measuredFilterStickyHeight;
+    const viewportHeight = snapshot.options.viewportHeight ?? 560;
+    const bodyViewportHeight = Math.max(snapshot.rowSize, viewportHeight - stickyChromeHeight);
+    const bodyScrollTop = Math.max(0, this.scrollPosition - stickyChromeHeight);
+    const overscan = 4;
+    const startIndex = Math.max(0, Math.floor(bodyScrollTop / snapshot.rowSize) - overscan);
+    const visibleCount = Math.ceil(bodyViewportHeight / snapshot.rowSize) + overscan * 2;
+    return {
+      startIndex,
+      items: snapshot.pipeline.displayItems.slice(
+        startIndex,
+        Math.min(snapshot.pipeline.displayItems.length, startIndex + visibleCount)
+      )
+    };
+  }
   cellSlotName(column) {
     return `cell-${column.name}`;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornery/ui-grid-vanilla",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Vanilla DOM wrapper for the Rust/WASM-backed @ornery/ui-grid-core custom element",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
     }
   },
   "dependencies": {
-    "@ornery/ui-grid-core": "^0.1.7"
+    "@ornery/ui-grid-core": "0.1.9"
   },
   "devDependencies": {
     "typescript": "~5.8.0",

package/src/index.integration.test.ts

@@ -6,6 +6,7 @@ import {
   clearRustWasmGridEngine,
 } from '@ornery/ui-grid-core';
 import {
+  defineStandaloneUiGridElement,
   mountVanillaUiGrid,
   registerVanillaUiGridRustModule,
   type GridOptions,
@@ -274,4 +275,34 @@ describe('mountVanillaUiGrid integration', () => {
 
     expect(detailCard.textContent).toContain('Owner Mina Patel');
   });
+
+  it('preserves declarative attribute data when augmenting options imperatively', async () => {
+    // Use the already-registered 'ui-grid-element-vanilla-test' tag (from mountVanillaUiGrid
+    // in prior tests) to avoid the jsdom constraint of not registering the same class twice.
+    const grid = document.createElement('ui-grid-element-vanilla-test') as HTMLElement & {
+      options: GridOptions;
+    };
+    document.getElementById('app')!.appendChild(grid);
+
+    grid.setAttribute('grid-id', 'declarative-test');
+    grid.setAttribute('column-defs', JSON.stringify([{ name: 'name', displayName: 'Customer' }]));
+    grid.setAttribute('data', JSON.stringify([{ id: 'row-1', name: 'Gamma' }]));
+
+    // Flush the attributeChangedCallback microtask so attributeOptions are populated.
+    await new Promise<void>((r) => setTimeout(r, 0));
+
+    // Before any imperative assignment, the getter must surface attribute-derived data.
+    expect((grid.options.data as Array<{ id: string; name: string }>)[0].name).toBe('Gamma');
+    expect(grid.options.columnDefs[0].name).toBe('name');
+
+    // Simulate the bridge pattern: augment without losing attribute-derived data.
+    grid.options = {
+      ...grid.options,
+      viewportHeight: 999,
+    };
+
+    expect((grid.options.data as Array<{ id: string; name: string }>)[0].name).toBe('Gamma');
+    expect(grid.options.viewportHeight).toBe(999);
+  });
+
 });

package/src/index.test.ts

@@ -40,7 +40,7 @@ describe('mountVanillaUiGrid', () => {
     expect(registerRustWasmGridEngine).toHaveBeenCalledTimes(1);
     expect(customElements.get('ui-grid-element')).toBeDefined();
     expect(grid.tagName.toLowerCase()).toBe('ui-grid-element');
-    expect(grid.options).toBe(options);
+    expect(grid.options).toStrictEqual(options);
     expect(target.firstElementChild).toBe(grid);
   });
 

package/src/ui-grid-standalone.element.ts

@@ -112,6 +112,7 @@ export class UiGridStandaloneElement extends HTMLElement {
   private draggedColumnName: string | null = null;
   private dropTargetColumnName: string | null = null;
   private scrollPosition = 0;
+  private horizontalScrollPosition = 0;
   private scrollFrame: number | null = null;
   private suppressScrollEvent = false;
   private lastVirtualStartIndex = -1;
@@ -121,6 +122,9 @@ export class UiGridStandaloneElement extends HTMLElement {
   private benchmarkAverage = '—';
   private skipNextRender = false;
   private dataFrame: number | null = null;
+  private pendingPatchedRowIds: Set<string> | null = null;
+  private pendingDataRefreshMode: 'patch' | 'virtual' | 'full' | null = null;
+  private lastScrollActivityAt = 0;
 
   static get observedAttributes(): string[] {
     return [
@@ -168,13 +172,16 @@ export class UiGridStandaloneElement extends HTMLElement {
   }
 
   get options(): GridOptions {
-    return (
-      this.activeOptions ?? {
-        id: '__ui-grid-pending__',
-        data: [],
-        columnDefs: [],
-      }
-    );
+    if (this.activeOptions !== null) {
+      return this.buildEffectiveOptions(this.activeOptions);
+    }
+    // No imperative options set yet: safe defaults with attributes taking priority.
+    return {
+      id: '__ui-grid-pending__',
+      data: [],
+      columnDefs: [],
+      ...this.attributeOptions,
+    } as GridOptions;
   }
 
   set options(value: GridOptions) {
@@ -347,8 +354,16 @@ export class UiGridStandaloneElement extends HTMLElement {
       this.attributeOptions.paginationPageSizes = paginationPageSizes;
 
     // Re-render with the merged options.
-    if (this.activeOptions) {
+    if (this.activeOptions !== null) {
       this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+    } else {
+      // Purely declarative path: attributes drive the grid without an imperative bridge.
+      this.ensureController({
+        id: '__ui-grid-pending__',
+        data: [],
+        columnDefs: [],
+        ...this.attributeOptions,
+      } as VanillaGridOptions);
     }
   }
 
@@ -707,22 +722,63 @@ export class UiGridStandaloneElement extends HTMLElement {
       return;
     }
 
+    const previousSnapshot = this.snapshot;
+
     // Update the pipeline synchronously (cheap, no DOM work).
     this.skipNextRender = true;
     controller.refreshData(rows);
     this.skipNextRender = false;
 
+    const { mode, changedRowIds } = this.classifyDataRefresh(previousSnapshot, this.snapshot);
+    if (mode === null) {
+      return;
+    }
+
+    this.pendingDataRefreshMode = mode;
+    this.pendingPatchedRowIds = changedRowIds;
+
     // Schedule DOM patching on the next paint — latest call wins.
     if (this.dataFrame !== null) {
       cancelAnimationFrame(this.dataFrame);
     }
     this.dataFrame = requestAnimationFrame(() => {
-      this.dataFrame = null;
-      this.patchCells();
+      this.flushPendingDataRefresh();
     });
   }
 
-  private patchCells(): void {
+  private flushPendingDataRefresh(): void {
+    this.dataFrame = null;
+
+    const mode = this.pendingDataRefreshMode;
+    if (mode === null) {
+      return;
+    }
+
+    if (Date.now() - this.lastScrollActivityAt < 80) {
+      this.dataFrame = requestAnimationFrame(() => {
+        this.flushPendingDataRefresh();
+      });
+      return;
+    }
+
+    const changedRowIds = this.pendingPatchedRowIds;
+    this.pendingDataRefreshMode = null;
+    this.pendingPatchedRowIds = null;
+
+    if (mode === 'patch') {
+      this.patchCells(changedRowIds ?? undefined);
+      return;
+    }
+
+    if (mode === 'virtual') {
+      this.renderVirtualBody();
+      return;
+    }
+
+    this.render();
+  }
+
+  private patchCells(changedRowIds?: ReadonlySet<string>): void {
     const snapshot = this.snapshot;
     if (!snapshot) {
       return;
@@ -735,12 +791,16 @@ export class UiGridStandaloneElement extends HTMLElement {
 
     // Build O(1) lookup maps from the current pipeline snapshot.
     const rowMap = new Map<string, GridRow>();
+    const rowIndexMap = new Map<string, number>();
     for (const row of snapshot.pipeline.visibleRows) {
       rowMap.set(row.id, row);
+      rowIndexMap.set(row.id, rowIndexMap.size);
     }
     const colMap = new Map<string, GridColumnDef>();
+    const templateMarkupMap = new Map<string, string | null>();
     for (const col of snapshot.visibleColumns) {
       colMap.set(col.name, col);
+      templateMarkupMap.set(col.name, this.getTemplateMarkup(this.cellSlotName(col)));
     }
 
     // Patch every rendered body cell in-place.
@@ -749,23 +809,24 @@ export class UiGridStandaloneElement extends HTMLElement {
       const rowId = cell.dataset['row'];
       const colName = cell.dataset['column'];
       if (!rowId || !colName) continue;
+      if (changedRowIds && !changedRowIds.has(rowId)) continue;
 
       const row = rowMap.get(rowId);
       const column = colMap.get(colName);
       if (!row || !column) continue;
+      if (cell.classList.contains('cell-editing')) continue;
 
-      const cellShell = cell.querySelector<HTMLElement>('.cell-shell');
-      if (!cellShell) continue;
+      const cellContent = cell.querySelector<HTMLElement>('.cell-content');
+      if (!cellContent) continue;
 
-      const newContent = this.renderCellTemplate(row, column, 0);
-      const toggles = cellShell.querySelectorAll<HTMLElement>('.row-toggle');
-      if (toggles.length === 0) {
-        cellShell.innerHTML = newContent;
-      } else {
-        const toggleHtml = Array.from(toggles)
-          .map((t) => t.outerHTML)
-          .join('');
-        cellShell.innerHTML = toggleHtml + newContent;
+      const newContent = this.renderCellTemplateFromMarkup(
+        row,
+        column,
+        rowIndexMap.get(rowId) ?? 0,
+        templateMarkupMap.get(colName) ?? null,
+      );
+      if (cellContent.innerHTML !== newContent) {
+        cellContent.innerHTML = newContent;
       }
     }
   }
@@ -1203,7 +1264,9 @@ export class UiGridStandaloneElement extends HTMLElement {
           return;
         }
 
+        this.lastScrollActivityAt = Date.now();
         this.scrollPosition = target.scrollTop;
+        this.horizontalScrollPosition = target.scrollLeft;
         if (!this.snapshot?.pipeline.virtualizationEnabled) {
           return;
         }
@@ -1301,6 +1364,7 @@ export class UiGridStandaloneElement extends HTMLElement {
     const previousGridTable = root.querySelector<HTMLElement>('.grid-table');
     if (previousGridTable && !this.suppressScrollEvent) {
       this.scrollPosition = previousGridTable.scrollTop;
+      this.horizontalScrollPosition = previousGridTable.scrollLeft;
     }
 
     if (!snapshot) {
@@ -1368,14 +1432,20 @@ export class UiGridStandaloneElement extends HTMLElement {
         : `<div class="empty-state ui-grid-no-row-overlay"><strong>${escapeHtml(options.emptyMessage ?? labels.emptyHeading)}</strong><p>${escapeHtml(labels.emptyDescription)}</p></div>`;
 
     const pagination = paginationEnabled && showPagination ? this.renderPagination(snapshot) : '';
-    const gridTableStyle = `${virtualizationEnabled ? `height:${viewportHeight}px;overflow-y:auto;` : ''}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
+    const hasViewportScroll = virtualizationEnabled || options.viewportHeight !== undefined;
+    const gridTableStyle = `${hasViewportScroll ? `height:${viewportHeight}px;overflow-y:auto;` : ''}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
 
     root.innerHTML = `<style>${GRID_CORE_CSS}</style>${slotRegistry}<section class="grid-frame ui-grid" role="grid" aria-label="${escapeHtml(options.title ?? 'Data grid')}"><div class="grid-table ui-grid-contents-wrapper" style="${gridTableStyle}"><div class="header-grid ui-grid-header ui-grid-header-canvas" style="grid-template-columns:${templateColumns}">${header}</div>${filterRow}${body}</div>${pagination}</section>`;
 
     const gridTable = root.querySelector<HTMLElement>('.grid-table');
-    if (gridTable && this.scrollPosition > 0 && virtualizationEnabled) {
+    if (gridTable && (this.scrollPosition > 0 || this.horizontalScrollPosition > 0)) {
       this.suppressScrollEvent = true;
-      gridTable.scrollTop = this.scrollPosition;
+      if (this.scrollPosition > 0) {
+        gridTable.scrollTop = this.scrollPosition;
+      }
+      if (this.horizontalScrollPosition > 0) {
+        gridTable.scrollLeft = this.horizontalScrollPosition;
+      }
       requestAnimationFrame(() => {
         this.suppressScrollEvent = false;
       });
@@ -1537,7 +1607,7 @@ export class UiGridStandaloneElement extends HTMLElement {
       .join(' ');
 
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : '';
-    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}${content}</div></div>`;
+    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}<div class="cell-content">${content}</div></div></div>`;
   }
 
   private renderPagination(snapshot: GridControllerSnapshot): string {
@@ -1559,6 +1629,15 @@ export class UiGridStandaloneElement extends HTMLElement {
 
   private renderCellTemplate(row: GridRow, column: GridColumnDef, displayIndex: number): string {
     const templateMarkup = this.getTemplateMarkup(this.cellSlotName(column));
+    return this.renderCellTemplateFromMarkup(row, column, displayIndex, templateMarkup);
+  }
+
+  private renderCellTemplateFromMarkup(
+    row: GridRow,
+    column: GridColumnDef,
+    displayIndex: number,
+    templateMarkup: string | null,
+  ): string {
     if (!templateMarkup) {
       return `<span class="cell-value">${escapeHtml(this.controller?.displayValue(row, column) ?? '')}</span>`;
     }
@@ -1624,6 +1703,101 @@ export class UiGridStandaloneElement extends HTMLElement {
     );
   }
 
+  private classifyDataRefresh(
+    previousSnapshot: GridControllerSnapshot | null,
+    nextSnapshot: GridControllerSnapshot | null,
+  ): { mode: 'patch' | 'virtual' | 'full' | null; changedRowIds: Set<string> | null } {
+    if (!nextSnapshot) {
+      return { mode: 'full', changedRowIds: null };
+    }
+
+    if (!previousSnapshot) {
+      return {
+        mode: nextSnapshot.pipeline.virtualizationEnabled ? 'virtual' : 'full',
+        changedRowIds: null,
+      };
+    }
+
+    if (previousSnapshot.visibleColumns.length !== nextSnapshot.visibleColumns.length) {
+      return { mode: 'full', changedRowIds: null };
+    }
+
+    for (let index = 0; index < previousSnapshot.visibleColumns.length; index += 1) {
+      if (previousSnapshot.visibleColumns[index]?.name !== nextSnapshot.visibleColumns[index]?.name) {
+        return { mode: 'full', changedRowIds: null };
+      }
+    }
+
+    const previousWindow = this.getRenderedDisplayWindow(previousSnapshot);
+    const nextWindow = this.getRenderedDisplayWindow(nextSnapshot);
+    if (
+      previousWindow.startIndex !== nextWindow.startIndex ||
+      previousWindow.items.length !== nextWindow.items.length
+    ) {
+      return {
+        mode: nextSnapshot.pipeline.virtualizationEnabled ? 'virtual' : 'full',
+        changedRowIds: null,
+      };
+    }
+
+    const changedRowIds = new Set<string>();
+    for (let index = 0; index < previousWindow.items.length; index += 1) {
+      const previousItem = previousWindow.items[index];
+      const nextItem = nextWindow.items[index];
+
+      if (!previousItem || !nextItem || previousItem.kind !== 'row' || nextItem.kind !== 'row') {
+        return {
+          mode: nextSnapshot.pipeline.virtualizationEnabled ? 'virtual' : 'full',
+          changedRowIds: null,
+        };
+      }
+
+      if (previousItem.row.id !== nextItem.row.id) {
+        return {
+          mode: nextSnapshot.pipeline.virtualizationEnabled ? 'virtual' : 'full',
+          changedRowIds: null,
+        };
+      }
+
+      if (previousItem.row.entity !== nextItem.row.entity) {
+        changedRowIds.add(nextItem.row.id);
+      }
+    }
+
+    return {
+      mode: changedRowIds.size > 0 ? 'patch' : null,
+      changedRowIds: changedRowIds.size > 0 ? changedRowIds : null,
+    };
+  }
+
+  private getRenderedDisplayWindow(snapshot: GridControllerSnapshot): {
+    startIndex: number;
+    items: readonly DisplayItem[];
+  } {
+    if (!snapshot.pipeline.virtualizationEnabled) {
+      return {
+        startIndex: 0,
+        items: snapshot.pipeline.displayItems,
+      };
+    }
+
+    const stickyChromeHeight = this.measuredHeaderStickyHeight + this.measuredFilterStickyHeight;
+    const viewportHeight = snapshot.options.viewportHeight ?? 560;
+    const bodyViewportHeight = Math.max(snapshot.rowSize, viewportHeight - stickyChromeHeight);
+    const bodyScrollTop = Math.max(0, this.scrollPosition - stickyChromeHeight);
+    const overscan = 4;
+    const startIndex = Math.max(0, Math.floor(bodyScrollTop / snapshot.rowSize) - overscan);
+    const visibleCount = Math.ceil(bodyViewportHeight / snapshot.rowSize) + overscan * 2;
+
+    return {
+      startIndex,
+      items: snapshot.pipeline.displayItems.slice(
+        startIndex,
+        Math.min(snapshot.pipeline.displayItems.length, startIndex + visibleCount),
+      ),
+    };
+  }
+
   private cellSlotName(column: GridColumnDef): string {
     return `cell-${column.name}`;
   }