@ornery/ui-grid-vanilla 0.1.8 → 0.1.10

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

@@ -5,8 +5,11 @@ import {
   canGridMoveColumns,
   downloadGridCsvFile,
   exportCsvRows,
+  findNextGridCell,
   formatGridHeaderDisplayValue,
   getCellValue,
+  isGridNavigationKey,
+  isPrintableGridKey,
   sanitizeDownloadFilename,
   type DisplayItem,
   type GridColumnDef,
@@ -112,6 +115,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 +125,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 +175,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) {
@@ -276,6 +286,10 @@ export class UiGridStandaloneElement extends HTMLElement {
     if (enableColumnMoving !== undefined)
       this.attributeOptions.enableColumnMoving = enableColumnMoving;
 
+    const enableColumnResizing = this.parseBooleanAttribute('enable-column-resizing');
+    if (enableColumnResizing !== undefined)
+      this.attributeOptions.enableColumnResizing = enableColumnResizing;
+
     const enableCellEdit = this.parseBooleanAttribute('enable-cell-edit');
     if (enableCellEdit !== undefined) this.attributeOptions.enableCellEdit = enableCellEdit;
 
@@ -347,8 +361,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);
     }
   }
 
@@ -565,6 +587,14 @@ export class UiGridStandaloneElement extends HTMLElement {
     this.ensureController(this.buildEffectiveOptions(this.activeOptions as VanillaGridOptions));
   }
 
+  get enableColumnResizing(): boolean {
+    return (this.options as any).enableColumnResizing ?? true;
+  }
+  set enableColumnResizing(value: boolean) {
+    this.activeOptions = { ...this.activeOptions, enableColumnResizing: value } as any;
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions as VanillaGridOptions));
+  }
+
   get enableCellEdit(): boolean {
     return this.options.enableCellEdit ?? false;
   }
@@ -707,22 +737,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 +806,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 +824,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;
       }
     }
   }
@@ -1023,12 +1099,65 @@ export class UiGridStandaloneElement extends HTMLElement {
       }
     });
 
+    root.addEventListener('mousedown', (event) => {
+      const target = event.target as HTMLElement | null;
+      if (!target || !this.controller) return;
+
+      const resizer = target.closest<HTMLElement>('.column-resizer[data-column]');
+      if (!resizer || !this.controller.canResizeColumns()) return;
+
+      const columnName = resizer.dataset['column'];
+      if (!columnName) return;
+
+      const headerCell = resizer.closest<HTMLElement>('.header-cell');
+      if (!headerCell) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const startX = (event as MouseEvent).clientX;
+      const startWidth = headerCell.getBoundingClientRect().width;
+      let lastWidth = startWidth;
+
+      const handleMove = (moveEvent: MouseEvent): void => {
+        lastWidth = Math.max(88, startWidth + (moveEvent.clientX - startX));
+
+        // Write directly to DOM — skip full refresh while dragging.
+        const newTemplate = this.controller!.buildTemplateColumnsWithOverride(columnName, lastWidth);
+        const root = this.shadowRoot ?? this;
+        (root as ShadowRoot | HTMLElement).querySelectorAll<HTMLElement>('.header-grid, .filter-grid, .body-grid').forEach((el) => {
+          el.style.gridTemplateColumns = newTemplate;
+        });
+      };
+
+      const handleUp = (): void => {
+        window.removeEventListener('mousemove', handleMove);
+        window.removeEventListener('mouseup', handleUp);
+        // Commit final width once — triggers one full refresh.
+        this.controller!.setColumnWidthOverride(columnName, lastWidth);
+      };
+
+      window.addEventListener('mousemove', handleMove);
+      window.addEventListener('mouseup', handleUp);
+    });
+
     root.addEventListener('dblclick', (event) => {
       const target = event.target as HTMLElement | null;
       if (!target || !this.controller) {
         return;
       }
 
+      const resizer = target.closest<HTMLElement>('.column-resizer[data-column]');
+      if (resizer && this.controller.canResizeColumns()) {
+        const columnName = resizer.dataset['column'];
+        if (columnName) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.controller.setColumnWidthOverride(columnName, this.measureAutoColumnWidth(columnName));
+          return;
+        }
+      }
+
       const cell = target.closest<HTMLElement>('.body-cell');
       if (!cell) {
         return;
@@ -1203,7 +1332,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 +1432,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 +1500,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;
       });
@@ -1450,9 +1588,13 @@ export class UiGridStandaloneElement extends HTMLElement {
     const pinLabel = isPinned
       ? (this.snapshot?.labels.unpin ?? 'Unpin')
       : (this.snapshot?.labels.pinColumn ?? 'Pin');
+    const canResize = controller.canResizeColumns();
     const headerValue = escapeHtml(formatGridHeaderDisplayValue(buildGridHeaderContext(column)));
+    const resizerHtml = canResize
+      ? `<button type="button" class="column-resizer" data-action="resize" data-column="${escapeHtml(column.name)}" aria-label="Resize ${escapeHtml(headerValue)} column" title="Drag to resize, double-click to auto fit"></button>`
+      : '';
 
-    return `<div class="${classes}" data-column="${escapeHtml(column.name)}" ${draggable} style="${stickyStyle}"><span class="header-label">${headerValue}</span><span class="header-actions">${sortEnabled ? `<button type="button" class="header-action" data-action="sort" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(sortLabel)}" ${canSort ? '' : 'disabled'}>${this.renderControlIcon(sortIconKey)}<span class="sr-only">${escapeHtml(sortLabel)}</span></button>` : ''}${groupingEnabled ? `<button type="button" class="chip-action${controller.isColumnGrouped(column) ? ' chip-action-active' : ''}" data-action="group" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(groupingLabel)}" ${canGroup ? '' : 'disabled'}>${this.renderControlIcon('group')}<span class="sr-only">${escapeHtml(groupingLabel)}</span></button>` : ''}${canPin ? `<div class="pin-control${this.openPinMenuColumn === column.name ? ' pin-control-open' : ''}"><button type="button" class="chip-action pin-trigger${isPinned ? ' chip-action-active' : ''}" data-action="pin-trigger" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(pinLabel)}">${this.renderControlIcon('pin')}<span class="sr-only">${escapeHtml(pinLabel)}</span></button><div class="pin-menu" role="menu" aria-label="${escapeHtml(pinLabel)}"><button type="button" class="pin-menu-action" data-action="pin-left" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(this.snapshot?.labels.pinLeft ?? 'Pin left')}">${this.renderIconWithClass('control-icon', 'pinLeft')}<span class="sr-only">${escapeHtml(this.snapshot?.labels.pinLeft ?? 'Pin left')}</span></button><button type="button" class="pin-menu-action" data-action="pin-right" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(this.snapshot?.labels.pinRight ?? 'Pin right')}">${this.renderIconWithClass('control-icon', 'pinRight')}<span class="sr-only">${escapeHtml(this.snapshot?.labels.pinRight ?? 'Pin right')}</span></button></div></div>` : ''}</span></div>`;
+    return `<div class="${classes}" data-column="${escapeHtml(column.name)}" ${draggable} style="${stickyStyle}"><span class="header-label">${headerValue}</span><span class="header-actions">${sortEnabled ? `<button type="button" class="header-action" data-action="sort" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(sortLabel)}" ${canSort ? '' : 'disabled'}>${this.renderControlIcon(sortIconKey)}<span class="sr-only">${escapeHtml(sortLabel)}</span></button>` : ''}${groupingEnabled ? `<button type="button" class="chip-action${controller.isColumnGrouped(column) ? ' chip-action-active' : ''}" data-action="group" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(groupingLabel)}" ${canGroup ? '' : 'disabled'}>${this.renderControlIcon('group')}<span class="sr-only">${escapeHtml(groupingLabel)}</span></button>` : ''}${canPin ? `<div class="pin-control${this.openPinMenuColumn === column.name ? ' pin-control-open' : ''}"><button type="button" class="chip-action pin-trigger${isPinned ? ' chip-action-active' : ''}" data-action="pin-trigger" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(pinLabel)}">${this.renderControlIcon('pin')}<span class="sr-only">${escapeHtml(pinLabel)}</span></button><div class="pin-menu" role="menu" aria-label="${escapeHtml(pinLabel)}"><button type="button" class="pin-menu-action" data-action="pin-left" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(this.snapshot?.labels.pinLeft ?? 'Pin left')}">${this.renderIconWithClass('control-icon', 'pinLeft')}<span class="sr-only">${escapeHtml(this.snapshot?.labels.pinLeft ?? 'Pin left')}</span></button><button type="button" class="pin-menu-action" data-action="pin-right" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(this.snapshot?.labels.pinRight ?? 'Pin right')}">${this.renderIconWithClass('control-icon', 'pinRight')}<span class="sr-only">${escapeHtml(this.snapshot?.labels.pinRight ?? 'Pin right')}</span></button></div></div>` : ''}</span>${resizerHtml}</div>`;
   }
 
   private renderFilterCell(column: GridColumnDef): string {
@@ -1472,6 +1614,24 @@ export class UiGridStandaloneElement extends HTMLElement {
     return `<label class="${classes}" style="${stickyStyle}"><input class="ui-grid-filter-input" data-role="filter" data-column="${escapeHtml(column.name)}" placeholder="${escapeHtml(controller.filterPlaceholder(column))}" value="${escapeHtml(value)}" ${canFilter ? '' : 'disabled'}></label>`;
   }
 
+  private measureAutoColumnWidth(columnName: string): number {
+    const root = this.shadowRoot;
+    if (root == null) return 176;
+    const escaped = CSS.escape ? CSS.escape(columnName) : columnName.replace(/([\\".#:[\](){}+~> ])/g, '\\$1');
+    const selectors = [
+      `.header-cell[data-column="${escaped}"]`,
+      `.filter-cell[data-column="${escaped}"]`,
+      `.body-cell[data-column="${escaped}"] .cell-shell`,
+    ];
+    let maxWidth = 0;
+    for (const selector of selectors) {
+      for (const el of root.querySelectorAll<HTMLElement>(selector)) {
+        maxWidth = Math.max(maxWidth, el.scrollWidth);
+      }
+    }
+    return maxWidth + 12;
+  }
+
   private renderDisplayItem(item: DisplayItem, displayIndex: number): string {
     if (!this.snapshot || !this.controller) {
       return '';
@@ -1537,7 +1697,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 +1719,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 +1793,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}`;
   }