@ornery/ui-grid-vanilla 5.0.2 → 5.0.3

package/src/group-row.test.ts

@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { mountVanillaUiGrid, type UiGridApi } from './index';
+
+async function waitFor<T>(resolve: () => T | null | undefined, timeoutMs = 5000): Promise<T> {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    const value = resolve();
+    if (value) return value;
+    await new Promise((next) => window.setTimeout(next, 20));
+  }
+  throw new Error('Timed out waiting for expected element state');
+}
+
+describe('group row', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('shows the column header, the grouped value and a singular suffix', async () => {
+    let api: UiGridApi | undefined;
+    const grid = await mountVanillaUiGrid(
+      document.getElementById('app')!,
+      {
+        id: 'group-row',
+        enableGrouping: true,
+        grouping: { groupBy: ['current_status'] },
+        data: [
+          { id: 'a', done: true },
+          { id: 'b', done: false },
+          { id: 'c', done: false },
+        ],
+        columnDefs: [
+          {
+            name: 'current_status',
+            displayName: 'Status',
+            valueGetter: (row) => (row['done'] ? 'Finished <b>' : 'Open'),
+          },
+        ],
+        onRegisterApi: (registered) => {
+          api = registered as UiGridApi;
+        },
+      },
+      undefined,
+      'ui-grid-element-group-row-test',
+    );
+    await waitFor(() => api);
+    const rows = await waitFor(() => {
+      const found = [...(grid.shadowRoot?.querySelectorAll('ui-grid-group-row') ?? [])];
+      return found.length === 2 && found.every((row) => row.shadowRoot?.textContent) ? found : null;
+    });
+
+    const text = rows.map((row) => [
+      row.shadowRoot!.querySelector('strong')!.textContent,
+      row.shadowRoot!.querySelector('strong + span')!.textContent,
+    ]);
+    expect(text).toEqual([
+      ['Status: Finished <b>', '1 row'],
+      ['Status: Open', '2 rows'],
+    ]);
+    expect(rows[0].shadowRoot!.querySelector('b')).toBeNull();
+  });
+});

package/src/index.integration.test.ts

@@ -181,9 +181,24 @@ describe('mountVanillaUiGrid integration', () => {
     ]);
   });
 
-  it('lazy-loads the wasm engine once and refreshes through it when ready', async () => {
-    const enableSpy = vi.spyOn(core, 'enableUiGridWasmEngine').mockImplementation(async () => {
-      core.registerWasmCoreModule({});
+  it('never loads the wasm engine on its own', async () => {
+    const enableSpy = vi.spyOn(core, 'enableUiGridWasmEngine');
+    const controller = createVanillaGridController({
+      id: 'controller-wasm-opt-in',
+      data: [{ id: 'r1', name: 'Gamma' }],
+      columnDefs: [{ name: 'name' }],
+    });
+
+    controller.setFilter('name', 'Gamma');
+    await new Promise((resolveNext) => window.setTimeout(resolveNext, 20));
+
+    expect(enableSpy).not.toHaveBeenCalled();
+    expect(core.getWasmCoreInitializationState()).toBe('idle');
+    enableSpy.mockRestore();
+  });
+
+  it('switches to the wasm engine when a load the app started finishes', async () => {
+    const fakeRustEngine = () =>
       core.registerRustWasmGridEngine({
         buildPipeline(context) {
           return {
@@ -200,7 +215,17 @@ describe('mountVanillaUiGrid integration', () => {
           };
         },
       });
-    });
+    let finishLoad: (module: object) => void = () => undefined;
+    core.setUiGridWasmPackageLoader(
+      () =>
+        new Promise((resolveLoad) => {
+          finishLoad = (module) => {
+            fakeRustEngine();
+            resolveLoad(module);
+          };
+        }),
+    );
+    const enabled = core.enableUiGridWasmEngine();
 
     const controller = createVanillaGridController({
       id: 'controller-wasm-bootstrap',
@@ -212,22 +237,16 @@ describe('mountVanillaUiGrid integration', () => {
       enableSorting: true,
       enableFiltering: true,
     });
+    expect(controller.getSnapshot().pipeline.pipelineMs).not.toBe(123);
 
-    expect(enableSpy).toHaveBeenCalledTimes(1);
-
+    finishLoad({});
+    await enabled;
     await waitFor(() => {
       const snapshot = controller.getSnapshot();
       return activeGridEngineBackend() === 'rust-wasm' && snapshot.pipeline.pipelineMs === 123
         ? snapshot
         : null;
     });
-
-    controller.setFilter('name', 'Alpha');
-    controller.sortColumn('name', SORT_DIRECTIONS.asc);
-
-    expect(enableSpy).toHaveBeenCalledTimes(1);
-    expect(controller.getSnapshot().pipeline.pipelineMs).toBe(123);
-    enableSpy.mockRestore();
   });
 
   it('applies overridable SVG icons for controls', async () => {

package/src/pagination-range-label.test.ts

@@ -0,0 +1,85 @@
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { clearRustWasmGridEngine } from '@ornery/ui-grid-core';
+
+import { mountVanillaUiGrid, type GridOptions, type VanillaUiGridElement } from './index';
+import { formatPaginationRangeLabel } from './pagination-range-label';
+
+const TAG = 'ui-grid-element-vanilla-pagination-label-test';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+}
+
+async function waitFor<T>(resolve: () => T | null | undefined, timeoutMs = 5000): Promise<T> {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    const value = resolve();
+    if (value) return value;
+    await new Promise((r) => window.setTimeout(r, 10));
+  }
+  throw new Error('Timed out waiting for expected state');
+}
+
+function externalPagedOptions(data: Row[], totalItems: number): GridOptions {
+  return {
+    id: 'pagination-label-grid',
+    data,
+    totalItems,
+    columnDefs: [{ name: 'name', displayName: 'Name' }],
+    enablePagination: true,
+    useExternalPagination: true,
+    paginationPageSizes: [10],
+    rowIdentity: (entity) => String((entity as Row).id),
+  };
+}
+
+function paginationLabel(grid: VanillaUiGridElement): string | null {
+  const pagination = grid.shadowRoot?.querySelector('ui-grid-pagination');
+  return pagination?.getAttribute('data-range-label') ?? null;
+}
+
+describe('pager range label', () => {
+  afterEach(() => {
+    clearRustWasmGridEngine();
+    document.body.replaceChildren();
+  });
+
+  it('reads "0 of 0" after the grid updates from rows to zero rows', async () => {
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+    const grid = await mountVanillaUiGrid(
+      target,
+      externalPagedOptions(
+        [
+          { id: 'r1', name: 'Alpha' },
+          { id: 'r2', name: 'Beta' },
+        ],
+        2,
+      ),
+      undefined,
+      TAG,
+    );
+    await waitFor(() => grid.shadowRoot?.querySelector('ui-grid-pagination'));
+    expect(paginationLabel(grid)).toBe('1-2 of 2');
+
+    grid.options = externalPagedOptions([], 0);
+
+    const label = await waitFor(() => {
+      const current = paginationLabel(grid);
+      return current && current !== '1-2 of 2' ? current : null;
+    });
+    expect(label).toBe('0 of 0');
+  });
+});
+
+describe('formatPaginationRangeLabel', () => {
+  it('formats a populated page as a 1-based range', () => {
+    expect(formatPaginationRangeLabel({ firstRowIndex: 10, lastRowIndex: 19, totalItems: 42 })).toBe('11-20 of 42');
+  });
+
+  it('formats an empty result as "0 of 0"', () => {
+    expect(formatPaginationRangeLabel({ firstRowIndex: 0, lastRowIndex: 0, totalItems: 0 })).toBe('0 of 0');
+  });
+});

package/src/pagination-range-label.ts

@@ -0,0 +1,10 @@
+/** Pager range label ("1-10 of 42"). Shared by the initial render and the
+ * patch path so both show the same text for empty results ("0 of 0"). */
+export function formatPaginationRangeLabel(range: {
+  firstRowIndex: number;
+  lastRowIndex: number;
+  totalItems: number;
+}): string {
+  if (range.totalItems === 0) return '0 of 0';
+  return `${range.firstRowIndex + 1}-${range.lastRowIndex + 1} of ${range.totalItems}`;
+}

package/src/pagination-range.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import { createVanillaGridController } from './grid-controller';
+
+const page = (n: number) => Array.from({ length: n }, (_, i) => ({ id: `r${i}`, name: `Row ${i}` }));
+
+describe('pagination range', () => {
+  it('describes the server page within totalItems under external pagination', () => {
+    const controller = createVanillaGridController({
+      id: 'external-range',
+      data: page(10),
+      columnDefs: [{ name: 'name' }],
+      enablePagination: true,
+      useExternalPagination: true,
+      paginationPageSize: 10,
+      totalItems: 12,
+    });
+
+    let snapshot = controller.getSnapshot();
+    expect([snapshot.firstRowIndex, snapshot.lastRowIndex]).toEqual([0, 9]);
+
+    controller.setOptions({ ...controller.getSnapshot().options, data: page(2) });
+    controller.seekPage(2);
+    snapshot = controller.getSnapshot();
+    expect([snapshot.firstRowIndex, snapshot.lastRowIndex]).toEqual([10, 11]);
+    expect(snapshot.pipeline.visibleRows).toHaveLength(2);
+  });
+
+  it('honors a declarative server page while preserving interactive page changes', () => {
+    const options = {
+      id: 'controlled-range', data: page(2), columnDefs: [{ name: 'name' }],
+      enablePagination: true, useExternalPagination: true, paginationPageSize: 10,
+      paginationCurrentPage: 2, totalItems: 32,
+    };
+    const controller = createVanillaGridController(options);
+    expect(controller.getSnapshot().firstRowIndex).toBe(10);
+    expect(controller.gridApi.pagination.getFirstRowIndex()).toBe(10);
+    controller.seekPage(3);
+    controller.setOptions({ ...options, data: page(10) });
+    expect(controller.getSnapshot().firstRowIndex).toBe(20);
+    controller.setOptions({ ...options, paginationCurrentPage: 4 });
+    expect(controller.getSnapshot().firstRowIndex).toBe(30);
+    expect(controller.gridApi.pagination.getLastRowIndex()).toBe(31);
+    controller.dispose();
+  });
+
+  it('keeps client-side ranges unchanged', () => {
+    const controller = createVanillaGridController({
+      id: 'client-range',
+      data: page(12),
+      columnDefs: [{ name: 'name' }],
+      enablePagination: true,
+      paginationPageSize: 10,
+    });
+    controller.seekPage(2);
+    const snapshot = controller.getSnapshot();
+    expect([snapshot.firstRowIndex, snapshot.lastRowIndex]).toEqual([10, 11]);
+    expect(snapshot.pipeline.visibleRows).toHaveLength(2);
+  });
+});

package/src/patch.ts

@@ -31,9 +31,11 @@ import {
 import {
   bodyStaticMarkup,
   bodyVirtualMarkup,
+  virtualSpacerStyle,
   emptyDataMarkup,
 } from './templates';
 import type { UiGridStandaloneElement } from './ui-grid-standalone.element';
+import { formatPaginationRangeLabel } from './pagination-range-label';
 import { bodyCellClass } from './utils/cell-class';
 import { asGroupItem, isRowItem } from './utils/display-items';
 import {
@@ -239,6 +241,7 @@ export function reconcileBodyRoot(
   templateColumns: string,
   virtualOffset: number,
   totalVirtualHeight: number,
+  rowSize: number,
 ): HTMLElement | null {
   const bodyViewport = root.querySelector<HTMLElement>('.grid-body-viewport');
   if (!bodyViewport) return null;
@@ -283,7 +286,7 @@ export function reconcileBodyRoot(
       return currentVirtual.querySelector<HTMLElement>('.grid-virtual-body');
     }
     const fresh = createFromMarkup(
-      bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, ''),
+      bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, '', rowSize),
     );
     if (fresh) swapBodyChild(bodyViewport, currentNode, fresh);
     return fresh?.querySelector<HTMLElement>('.grid-virtual-body') ?? null;
@@ -342,16 +345,29 @@ export function patchFilterCells(
 ): void {
   const controller = el.controller!;
   const existing = new Map<string, HTMLElement>();
-  for (const e of filterGrid.querySelectorAll<HTMLElement>('ui-grid-filter-cell[data-column]')) {
+  for (const e of filterGrid.querySelectorAll<HTMLElement>(
+    'ui-grid-filter-cell[data-column], .ui-grid-filter-container[data-column]',
+  )) {
     const column = e.dataset['column'];
     if (column) existing.set(column, e);
   }
 
   for (const column of snapshot.visibleColumns) {
-    const target = existing.get(column.name);
-    if (!target) continue;
     const value = snapshot.activeFilters[column.name] ?? '';
     const canFilter = controller.isColumnFilterable(column);
+    if (el.frameworkSlots.hasFilter(column.name)) {
+      // Framework-rendered filter cells keep their <slot> placeholder; re-stage
+      // so the flush does not report the slot as removed.
+      el.frameworkSlots.stageFilter(column, value, controller.filterPlaceholder(column), !canFilter);
+      const target = existing.get(column.name);
+      const pinOffset = controller.isPinned(column) ? controller.pinnedOffset(column) : null;
+      if (target) {
+        setAttr(target, 'style', pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : '');
+      }
+      continue;
+    }
+    const target = existing.get(column.name);
+    if (!target) continue;
     const pinOffset = controller.isPinned(column) ? controller.pinnedOffset(column) : null;
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : '';
     setAttr(target, 'data-value', value);
@@ -398,6 +414,7 @@ export function patchBodyRegion(
     templateColumns,
     virtualOffset,
     totalVirtualHeight,
+    snapshot.rowSize,
   );
 
   if (!hasRows) {
@@ -409,8 +426,9 @@ export function patchBodyRegion(
 
   if (virtualizationEnabled) {
     const spacer = root.querySelector<HTMLElement>('.grid-virtual-spacer');
-    if (spacer && totalVirtualHeight !== el.lastTotalVirtualHeight) {
-      spacer.setAttribute('style', `height:${totalVirtualHeight}px`);
+    const spacerStyle = virtualSpacerStyle(totalVirtualHeight, snapshot.rowSize);
+    if (spacer && spacer.getAttribute('style') !== spacerStyle) {
+      spacer.setAttribute('style', spacerStyle);
       el.lastTotalVirtualHeight = totalVirtualHeight;
     }
     if (bodyContainer) {
@@ -685,19 +703,19 @@ export function patchGroupRow(
   target: HTMLElement,
   group: GroupItem,
 ): void {
-  const snapshot = el.snapshot!;
   const controller = el.controller!;
   const iconKey = group.collapsed ? 'groupCollapsed' : 'groupExpanded';
   const icon = el.icons.resolve(iconKey);
   setAttr(target, 'data-collapsed', group.collapsed ? 'true' : 'false');
   setAttr(target, 'data-field', group.field);
+  setAttr(target, 'data-column-label', controller.groupColumnLabel(group));
   setAttr(target, 'data-label', group.label);
   setAttr(target, 'data-count', String(group.count));
   setAttr(target, 'data-depth', String(group.depth));
   setAttr(target, 'data-disclosure-label', controller.groupDisclosureLabel(group));
   setAttr(target, 'data-icon-path', icon.path);
   setAttr(target, 'data-icon-view-box', icon.viewBox ?? '0 0 24 24');
-  setAttr(target, 'data-rows-suffix', snapshot.labels.groupRowsSuffix);
+  setAttr(target, 'data-rows-suffix', controller.groupRowsSuffix(group));
 }
 
 /** Patch a body-cell element in place: class, sticky style, data-attrs,
@@ -811,7 +829,11 @@ export function patchPagination(
   setAttr(
     paginationEl,
     'data-range-label',
-    `${snapshot.firstRowIndex + 1}-${snapshot.lastRowIndex + 1} of ${snapshot.pipeline.totalItems}`,
+    formatPaginationRangeLabel({
+      firstRowIndex: snapshot.firstRowIndex,
+      lastRowIndex: snapshot.lastRowIndex,
+      totalItems: snapshot.pipeline.totalItems,
+    }),
   );
   setAttr(paginationEl, 'data-current-page', String(snapshot.currentPage));
   setAttr(paginationEl, 'data-total-pages', String(snapshot.totalPages));

package/src/render.pagination.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+import type { GridControllerSnapshot } from './grid-controller';
+import type { UiGridStandaloneElement } from './ui-grid-standalone.element';
+import { renderPagination } from './render';
+
+const icon = { path: 'M0 0', viewBox: '0 0 24 24' };
+const el = { icons: { resolve: () => icon } } as unknown as UiGridStandaloneElement;
+
+function snapshotWith(overrides: Partial<GridControllerSnapshot>): GridControllerSnapshot {
+  return {
+    options: { enablePagination: true, useExternalPagination: true, paginationPageSizes: [10] },
+    labels: {
+      paginationPage: 'Page',
+      paginationOf: 'of',
+      paginationPrevious: 'Previous',
+      paginationNext: 'Next',
+      paginationRows: 'Rows',
+    },
+    pipeline: { totalItems: 0 },
+    currentPage: 1,
+    totalPages: 1,
+    firstRowIndex: 0,
+    lastRowIndex: 0,
+    pageSize: 10,
+    ...overrides,
+  } as unknown as GridControllerSnapshot;
+}
+
+describe('renderPagination range label', () => {
+  it('shows "0 of 0" with previous and next disabled when there are no rows', () => {
+    const markup = renderPagination(el, snapshotWith({}));
+
+    expect(markup).toContain('data-range-label="0 of 0"');
+    expect(markup).toContain('data-prev-disabled="true"');
+    expect(markup).toContain('data-next-disabled="true"');
+  });
+});

package/src/render.ts

@@ -42,6 +42,7 @@ import {
   slotRegistryMarkup,
   treeToggleMarkup,
 } from './templates';
+import { formatPaginationRangeLabel } from './pagination-range-label';
 import type { UiGridStandaloneElement } from './ui-grid-standalone.element';
 import { bodyCellClass, headerCellClass } from './utils/cell-class';
 import { asGroupItem, isRowItem } from './utils/display-items';
@@ -70,7 +71,12 @@ export function renderHeaderCell(
     const inner = showSelectAll
       ? `<button type="button" class="ui-grid-selection-select-all" data-action="select-all" aria-label="Select all rows"${selectAll ? ' aria-checked="true"' : ' aria-checked="false"'}><span class="ui-grid-selection-checkbox${selectAll ? ' ui-grid-selection-checkbox-checked' : ''}"></span></button>`
       : '';
-    return `<ui-grid-header-cell class="header-cell ui-grid-selection-row-header" data-column="selectionRowHeaderCol">${inner}</ui-grid-header-cell>`;
+    const pinOffset = controller.isPinned(column) ? controller.pinnedOffset(column) : null;
+    const pinClass = pinOffset
+      ? ` is-pinned${controller.isPinnedLeftLast(column) ? ' is-pinned-left-last' : ''}`
+      : '';
+    const stickyStyle = pinOffset ? ` style="${escapeHtml(`${pinOffset.side}:${pinOffset.offset};`)}"` : '';
+    return `<ui-grid-header-cell part="header-cell" class="header-cell ui-grid-selection-row-header${pinClass}"${stickyStyle} data-column="selectionRowHeaderCol">${inner}</ui-grid-header-cell>`;
   }
 
   // Framework-rendered header: emit a bare cell with a slot placeholder.
@@ -82,7 +88,16 @@ export function renderHeaderCell(
     const isPinned = controller.isPinned(column);
     const pinOffset = isPinned ? controller.pinnedOffset(column) : null;
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : '';
-    return `<ui-grid-header-cell class="header-cell"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''} data-column="${escapeHtml(column.name)}" data-pinned="${isPinned}" data-sticky-style="${escapeHtml(stickyStyle)}"><slot name="${escapeHtml(slotName)}"></slot></ui-grid-header-cell>`;
+    const slotClassName = headerCellClass(
+      false,
+      isPinned,
+      controller.isPinnedLeftLast(column),
+      controller.isPinnedRightFirst(column),
+      false,
+      false,
+      false,
+    );
+    return `<ui-grid-header-cell part="header-cell" class="${slotClassName}"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''} data-column="${escapeHtml(column.name)}" data-pinned="${isPinned}" data-sticky-style="${escapeHtml(stickyStyle)}"><slot name="${escapeHtml(slotName)}"></slot></ui-grid-header-cell>`;
   }
 
   const sortDirection = controller.getSortDirection(column);
@@ -128,7 +143,7 @@ export function renderHeaderCell(
   );
   // className/style/draggable are pre-computed here so the <ui-grid-header-cell>
   // upgrade is a no-op at parse time. `data-*` stay for event delegation.
-  return `<ui-grid-header-cell class="${className}"${isDraggable ? ' draggable="true"' : ''}${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''} data-column="${escapeHtml(column.name)}" data-sort-active="${sortDirection !== SORT_DIRECTIONS.none}" data-pinned="${isPinned}" data-pinned-left-last="${isPinnedLeftLast}" data-pinned-right-first="${isPinnedRightFirst}" data-pin-menu-open="${isPinMenuOpen}" data-drag-target="${isDragTarget}" data-dragging="${isDragging}" data-draggable="${isDraggable}" data-sticky-style="${escapeHtml(stickyStyle)}"><span class="header-label">${headerValue}</span><span class="header-actions">${canSort ? `<button type="button" class="header-action" data-action="sort" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(sortLabel)}">${el.icons.renderControlIcon(sortIconKey)}<span class="sr-only">${escapeHtml(sortLabel)}</span></button>` : ''}${canGroup ? `<button type="button" class="chip-action${controller.isColumnGrouped(column) ? ' chip-action-active' : ''}" data-action="group" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(groupingLabel)}">${el.icons.renderControlIcon('group')}<span class="sr-only">${escapeHtml(groupingLabel)}</span></button>` : ''}${canPin ? `<div class="pin-control${isPinMenuOpen ? ' 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)}">${el.icons.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(el.snapshot?.labels.pinLeft ?? 'Pin left')}">${el.icons.renderIconWithClass('control-icon', 'pinLeft')}<span class="sr-only">${escapeHtml(el.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(el.snapshot?.labels.pinRight ?? 'Pin right')}">${el.icons.renderIconWithClass('control-icon', 'pinRight')}<span class="sr-only">${escapeHtml(el.snapshot?.labels.pinRight ?? 'Pin right')}</span></button></div></div>` : ''}</span>${resizerHtml}</ui-grid-header-cell>`;
+  return `<ui-grid-header-cell part="header-cell" class="${className}"${isDraggable ? ' draggable="true"' : ''}${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''} data-column="${escapeHtml(column.name)}" data-sort-active="${sortDirection !== SORT_DIRECTIONS.none}" data-pinned="${isPinned}" data-pinned-left-last="${isPinnedLeftLast}" data-pinned-right-first="${isPinnedRightFirst}" data-pin-menu-open="${isPinMenuOpen}" data-drag-target="${isDragTarget}" data-dragging="${isDragging}" data-draggable="${isDraggable}" data-sticky-style="${escapeHtml(stickyStyle)}"><span class="header-label" part="header-label">${headerValue}</span><span class="header-actions" part="header-actions">${canSort ? `<button type="button" class="header-action" data-action="sort" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(sortLabel)}">${el.icons.renderControlIcon(sortIconKey)}<span class="sr-only">${escapeHtml(sortLabel)}</span></button>` : ''}${canGroup ? `<button type="button" class="chip-action${controller.isColumnGrouped(column) ? ' chip-action-active' : ''}" data-action="group" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(groupingLabel)}">${el.icons.renderControlIcon('group')}<span class="sr-only">${escapeHtml(groupingLabel)}</span></button>` : ''}${canPin ? `<div class="pin-control${isPinMenuOpen ? ' 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)}">${el.icons.renderControlIcon('pin')}<span class="sr-only">${escapeHtml(pinLabel)}</span></button><div class="pin-menu" part="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(el.snapshot?.labels.pinLeft ?? 'Pin left')}">${el.icons.renderIconWithClass('control-icon', 'pinLeft')}<span class="sr-only">${escapeHtml(el.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(el.snapshot?.labels.pinRight ?? 'Pin right')}">${el.icons.renderIconWithClass('control-icon', 'pinRight')}<span class="sr-only">${escapeHtml(el.snapshot?.labels.pinRight ?? 'Pin right')}</span></button></div></div>` : ''}</span>${resizerHtml}</ui-grid-header-cell>`;
 }
 
 /** Render the filter-row cell for one column. Selection column gets a bare
@@ -138,7 +153,8 @@ export function renderFilterCell(el: UiGridStandaloneElement, column: GridColumn
   if (column.name === 'selectionRowHeaderCol') {
     const pinOffset = el.controller!.isPinned(column) ? el.controller!.pinnedOffset(column) : null;
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : '';
-    return `<div class="filter-cell ui-grid-selection-row-header" data-column="selectionRowHeaderCol"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''}></div>`;
+    const pinClass = pinOffset ? ' is-pinned' : '';
+    return `<div part="filter-cell" class="filter-cell ui-grid-selection-row-header${pinClass}" data-column="selectionRowHeaderCol"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''}></div>`;
   }
   const value = el.snapshot?.activeFilters[column.name] ?? '';
   const controller = el.controller!;
@@ -149,10 +165,13 @@ export function renderFilterCell(el: UiGridStandaloneElement, column: GridColumn
   if (el.frameworkSlots.hasFilter(column.name)) {
     el.frameworkSlots.stageFilter(column, value, controller.filterPlaceholder(column), !canFilter);
     const slotName = filterSlotName(column);
-    return `<div class="filter-cell ui-grid-filter-container" data-column="${escapeHtml(column.name)}"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''}><slot name="${escapeHtml(slotName)}"></slot></div>`;
+    const pinClass = pinOffset
+      ? ` is-pinned${controller.isPinnedLeftLast(column) ? ' is-pinned-left-last' : ''}${controller.isPinnedRightFirst(column) ? ' is-pinned-right-first' : ''}`
+      : '';
+    return `<div part="filter-cell" class="filter-cell ui-grid-filter-container${pinClass}" data-column="${escapeHtml(column.name)}"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''}><slot name="${escapeHtml(slotName)}"></slot></div>`;
   }
 
-  return `<ui-grid-filter-cell data-column="${escapeHtml(column.name)}" data-value="${escapeHtml(value)}" data-placeholder="${escapeHtml(controller.filterPlaceholder(column))}" data-disabled="${!canFilter}" data-pinned="${controller.isPinned(column)}" data-pinned-left-last="${controller.isPinnedLeftLast(column)}" data-pinned-right-first="${controller.isPinnedRightFirst(column)}" data-sticky-style="${escapeHtml(stickyStyle)}"></ui-grid-filter-cell>`;
+  return `<ui-grid-filter-cell part="filter-cell" data-column="${escapeHtml(column.name)}" data-value="${escapeHtml(value)}" data-placeholder="${escapeHtml(controller.filterPlaceholder(column))}" data-disabled="${!canFilter}" data-pinned="${controller.isPinned(column)}" data-pinned-left-last="${controller.isPinnedLeftLast(column)}" data-pinned-right-first="${controller.isPinnedRightFirst(column)}" data-sticky-style="${escapeHtml(stickyStyle)}"></ui-grid-filter-cell>`;
 }
 
 /** Render one display-item: group row, expandable row, or the cells of a
@@ -169,12 +188,12 @@ export function renderDisplayItem(
     if (el.frameworkSlots.hasGroupRow()) {
       el.frameworkSlots.stageGroupRow(group);
       const slotName = groupRowSlotName(group);
-      return `<div class="group-row ui-grid-row ui-grid-group-row" data-group="${escapeHtml(group.id)}" style="grid-column:1 / -1"><slot name="${escapeHtml(slotName)}"></slot></div>`;
+      return `<div part="group-row" class="group-row ui-grid-row ui-grid-group-row" data-group="${escapeHtml(group.id)}" style="grid-column:1 / -1"><slot name="${escapeHtml(slotName)}"></slot></div>`;
     }
     const iconKey = group.collapsed ? 'groupCollapsed' : 'groupExpanded';
     const icon = el.icons.resolve(iconKey);
     const disclosureLabel = el.controller.groupDisclosureLabel(group);
-    return `<ui-grid-group-row data-action="toggle-group" data-group="${escapeHtml(group.id)}" data-collapsed="${group.collapsed ? 'true' : 'false'}" data-field="${escapeHtml(group.field)}" data-label="${escapeHtml(group.label)}" data-count="${group.count}" data-depth="${group.depth}" data-disclosure-label="${escapeHtml(disclosureLabel)}" data-icon-path="${icon.path}" data-icon-view-box="${icon.viewBox ?? '0 0 24 24'}" data-rows-suffix="${escapeHtml(el.snapshot.labels.groupRowsSuffix)}"></ui-grid-group-row>`;
+    return `<ui-grid-group-row part="group-row" data-action="toggle-group" data-group="${escapeHtml(group.id)}" data-collapsed="${group.collapsed ? 'true' : 'false'}" data-field="${escapeHtml(group.field)}" data-column-label="${escapeHtml(el.controller.groupColumnLabel(group))}" data-label="${escapeHtml(group.label)}" data-count="${group.count}" data-depth="${group.depth}" data-disclosure-label="${escapeHtml(disclosureLabel)}" data-icon-path="${icon.path}" data-icon-view-box="${icon.viewBox ?? '0 0 24 24'}" data-rows-suffix="${escapeHtml(el.controller.groupRowsSuffix(group))}"></ui-grid-group-row>`;
   }
 
   if (item.kind === 'expandable') {
@@ -268,7 +287,7 @@ export function renderBodyCell(
   const titleAttr = isCellInvalid
     ? ` title="${escapeHtml(controller.gridApi.validate.getTitleFormattedErrors(row.entity, column))}"`
     : '';
-  return `<ui-grid-body-cell class="${className}" tabindex="0"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''}${titleAttr} data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" data-odd="${displayIndex % 2 !== 0}" data-align="${escapeHtml(align)}" data-pinned="${isPinned}" data-pinned-left-last="${isPinnedLeftLast}" data-pinned-right-first="${isPinnedRightFirst}" data-focused="${isFocused}" data-editing="${editing}" data-sticky-style="${escapeHtml(stickyStyle)}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}<div class="cell-content">${content}</div></div></ui-grid-body-cell>`;
+  return `<ui-grid-body-cell part="body-cell" class="${className}" tabindex="0"${stickyStyle ? ` style="${escapeHtml(stickyStyle)}"` : ''}${titleAttr} data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" data-odd="${displayIndex % 2 !== 0}" data-align="${escapeHtml(align)}" data-pinned="${isPinned}" data-pinned-left-last="${isPinnedLeftLast}" data-pinned-right-first="${isPinnedRightFirst}" data-focused="${isFocused}" data-editing="${editing}" data-sticky-style="${escapeHtml(stickyStyle)}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}<div class="cell-content">${content}</div></div></ui-grid-body-cell>`;
 }
 
 /** Render the contents of `.cell-shell` (tree/expand toggles + the
@@ -331,7 +350,12 @@ export function renderPagination(
   const pageSizes = snapshot.options.paginationPageSizes ?? [10, 25, 50, 100];
   const prevIcon = el.icons.resolve('paginationPrev');
   const nextIcon = el.icons.resolve('paginationNext');
-  return `<ui-grid-pagination data-range-label="${escapeHtml(`${snapshot.firstRowIndex + 1}-${snapshot.lastRowIndex + 1} of ${snapshot.pipeline.totalItems}`)}" data-current-page="${snapshot.currentPage}" data-total-pages="${snapshot.totalPages}" data-page-label="${escapeHtml(snapshot.labels.paginationPage)}" data-of-label="${escapeHtml(snapshot.labels.paginationOf)}" data-prev-label="${escapeHtml(snapshot.labels.paginationPrevious)}" data-next-label="${escapeHtml(snapshot.labels.paginationNext)}" data-rows-label="${escapeHtml(snapshot.labels.paginationRows)}" data-prev-icon-path="${prevIcon.path}" data-prev-icon-view-box="${prevIcon.viewBox ?? '0 0 24 24'}" data-next-icon-path="${nextIcon.path}" data-next-icon-view-box="${nextIcon.viewBox ?? '0 0 24 24'}" data-page-sizes="${escapeHtml(JSON.stringify(pageSizes))}" data-page-size="${snapshot.pageSize}" data-prev-disabled="${snapshot.currentPage <= 1}" data-next-disabled="${snapshot.currentPage >= snapshot.totalPages}"></ui-grid-pagination>`;
+  const rangeLabel = formatPaginationRangeLabel({
+    firstRowIndex: snapshot.firstRowIndex,
+    lastRowIndex: snapshot.lastRowIndex,
+    totalItems: snapshot.pipeline.totalItems,
+  });
+  return `<ui-grid-pagination part="pagination" data-range-label="${escapeHtml(rangeLabel)}" data-current-page="${snapshot.currentPage}" data-total-pages="${snapshot.totalPages}" data-page-label="${escapeHtml(snapshot.labels.paginationPage)}" data-of-label="${escapeHtml(snapshot.labels.paginationOf)}" data-prev-label="${escapeHtml(snapshot.labels.paginationPrevious)}" data-next-label="${escapeHtml(snapshot.labels.paginationNext)}" data-rows-label="${escapeHtml(snapshot.labels.paginationRows)}" data-prev-icon-path="${prevIcon.path}" data-prev-icon-view-box="${prevIcon.viewBox ?? '0 0 24 24'}" data-next-icon-path="${nextIcon.path}" data-next-icon-view-box="${nextIcon.viewBox ?? '0 0 24 24'}" data-page-sizes="${escapeHtml(JSON.stringify(pageSizes))}" data-page-size="${snapshot.pageSize}" data-prev-disabled="${snapshot.currentPage <= 1}" data-next-disabled="${snapshot.currentPage >= snapshot.totalPages}"></ui-grid-pagination>`;
 }
 
 /** Hidden `<slot>` registry block so the element's shadow DOM exposes a

package/src/row-height.test.ts

@@ -0,0 +1,52 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { GRID_CORE_CSS } from '@ornery/ui-grid-core';
+import { mountVanillaUiGrid, type UiGridApi } from './index';
+
+async function waitFor<T>(resolve: () => T | null | undefined, timeoutMs = 5000): Promise<T> {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    const value = resolve();
+    if (value) return value;
+    await new Promise((next) => window.setTimeout(next, 20));
+  }
+  throw new Error('Timed out waiting for expected element state');
+}
+
+describe('virtual row height', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('holds virtualized rows to rowHeight', async () => {
+    let api: UiGridApi | undefined;
+    const grid = await mountVanillaUiGrid(
+      document.getElementById('app')!,
+      {
+        id: 'row-height',
+        rowHeight: 60,
+        virtualizationThreshold: 5,
+        data: Array.from({ length: 50 }, (_, i) => ({ id: `r${i}`, name: `Row ${i}` })),
+        columnDefs: [{ name: 'name' }],
+        onRegisterApi: (registered) => {
+          api = registered as UiGridApi;
+        },
+      },
+      undefined,
+      'ui-grid-element-row-height-test',
+    );
+    await waitFor(() => api);
+    const spacer = await waitFor(() =>
+      grid.shadowRoot?.querySelector<HTMLElement>('.grid-virtual-spacer'),
+    );
+
+    expect(spacer.style.getPropertyValue('--ui-grid-row-height')).toBe('60px');
+    expect(spacer.style.height).toBe('3000px');
+    expect(GRID_CORE_CSS).toMatch(
+      /\.grid-virtual-body > :not\(\.expandable-row\) \{[^}]*height: var\(--ui-grid-row-height\)/,
+    );
+  });
+});