@ornery/ui-grid-vanilla 0.1.7 → 0.1.8

package/dist/index.mjs

@@ -5,9 +5,11 @@ import { registerRustWasmGridEngine } from "@ornery/ui-grid-core";
 import {
   GRID_CORE_CSS,
   SORT_DIRECTIONS as SORT_DIRECTIONS2,
+  buildGridHeaderContext,
   canGridMoveColumns as canGridMoveColumns2,
   downloadGridCsvFile,
   exportCsvRows,
+  formatGridHeaderDisplayValue,
   getCellValue as getCellValue2,
   sanitizeDownloadFilename
 } from "@ornery/ui-grid-core";
@@ -198,6 +200,29 @@ var VanillaGridController = class {
     this.apiRegistered = false;
     this.refresh();
   }
+  /**
+   * Fast-path: swap only the row data and rebuild the pipeline without
+   * touching column state. Emits the new snapshot. The element uses this to
+   * patch cell content in-place without rebuilding the full shadow DOM.
+   */
+  refreshData(data) {
+    this.options = { ...this.options, data };
+    this.pipeline = defaultGridEngine.buildPipeline({
+      options: this.options,
+      columns: this.visibleColumns,
+      activeFilters: this.activeFilters,
+      sortState: this.sortState,
+      groupByColumns: this.groupByColumns,
+      collapsedGroups: this.collapsedGroups,
+      hiddenRowReasons: this.hiddenRowReasons,
+      expandedRows: this.expandedRows,
+      expandedTreeRows: this.expandedTreeRows,
+      currentPage: this.currentPage,
+      pageSize: this.pageSize,
+      rowSize: this.getRowSize()
+    });
+    this.emit();
+  }
   subscribe(subscriber) {
     this.subscribers.add(subscriber);
     subscriber(this.getSnapshot());
@@ -787,6 +812,8 @@ var UiGridStandaloneElement = class extends HTMLElement {
   snapshot = null;
   unsubscribe = null;
   activeOptions = null;
+  attributeOptions = {};
+  attributeSyncScheduled = false;
   iconOverrides = {};
   templateObserver = null;
   openPinMenuColumn = null;
@@ -801,6 +828,52 @@ var UiGridStandaloneElement = class extends HTMLElement {
   measuredFilterStickyHeight = 0;
   stickyHeightRelayoutQueued = false;
   benchmarkAverage = "\u2014";
+  skipNextRender = false;
+  dataFrame = null;
+  static get observedAttributes() {
+    return [
+      // Scalar attributes
+      "grid-id",
+      "title",
+      "row-height",
+      "header-row-height",
+      "viewport-height",
+      "pagination-page-size",
+      "pagination-current-page",
+      "total-items",
+      "virtualization-threshold",
+      "tree-children-field",
+      "tree-indent",
+      "expandable-row-height",
+      "expandable-row-header-width",
+      "empty-message",
+      "infinite-scroll-rows-from-end",
+      // JSON attributes
+      "column-defs",
+      "data",
+      "grouping",
+      "pagination-page-sizes",
+      // Boolean flags
+      "enable-sorting",
+      "enable-filtering",
+      "enable-grouping",
+      "enable-pinning",
+      "enable-column-moving",
+      "enable-cell-edit",
+      "enable-cell-edit-on-focus",
+      "enable-pagination",
+      "enable-pagination-controls",
+      "use-external-pagination",
+      "enable-expandable",
+      "enable-tree-view",
+      "show-tree-expand-no-children",
+      "tree-row-header-always-visible",
+      "enable-auto-resize",
+      "enable-virtualization",
+      "infinite-scroll-up",
+      "infinite-scroll-down"
+    ];
+  }
   get options() {
     return this.activeOptions ?? {
       id: "__ui-grid-pending__",
@@ -813,6 +886,144 @@ var UiGridStandaloneElement = class extends HTMLElement {
     this.iconOverrides = this.activeOptions.iconOverrides ?? {};
     this.ensureController(this.buildEffectiveOptions(this.activeOptions));
   }
+  attributeChangedCallback(_name, _oldValue, _newValue) {
+    if (!this.attributeSyncScheduled) {
+      this.attributeSyncScheduled = true;
+      queueMicrotask(() => {
+        this.attributeSyncScheduled = false;
+        this.syncAttributesToOptions();
+      });
+    }
+  }
+  syncAttributesToOptions() {
+    this.attributeOptions = {};
+    const gridId = this.getAttribute("grid-id");
+    if (gridId !== null) this.attributeOptions.id = gridId;
+    const title = this.getAttribute("title");
+    if (title !== null) this.attributeOptions.title = title;
+    const emptyMessage = this.getAttribute("empty-message");
+    if (emptyMessage !== null) this.attributeOptions.emptyMessage = emptyMessage;
+    const treeChildrenField = this.getAttribute("tree-children-field");
+    if (treeChildrenField !== null) this.attributeOptions.treeChildrenField = treeChildrenField;
+    const rowHeight = this.parseNumberAttribute("row-height");
+    if (rowHeight !== void 0) this.attributeOptions.rowHeight = rowHeight;
+    const headerRowHeight = this.parseNumberAttribute("header-row-height");
+    if (headerRowHeight !== void 0)
+      this.attributeOptions.headerRowHeight = headerRowHeight;
+    const viewportHeight = this.parseNumberAttribute("viewport-height");
+    if (viewportHeight !== void 0) this.attributeOptions.viewportHeight = viewportHeight;
+    const paginationPageSize = this.parseNumberAttribute("pagination-page-size");
+    if (paginationPageSize !== void 0)
+      this.attributeOptions.paginationPageSize = paginationPageSize;
+    const paginationCurrentPage = this.parseNumberAttribute("pagination-current-page");
+    if (paginationCurrentPage !== void 0)
+      this.attributeOptions.paginationCurrentPage = paginationCurrentPage;
+    const totalItems = this.parseNumberAttribute("total-items");
+    if (totalItems !== void 0) this.attributeOptions.totalItems = totalItems;
+    const virtualizationThreshold = this.parseNumberAttribute("virtualization-threshold");
+    if (virtualizationThreshold !== void 0)
+      this.attributeOptions.virtualizationThreshold = virtualizationThreshold;
+    const treeIndent = this.parseNumberAttribute("tree-indent");
+    if (treeIndent !== void 0) this.attributeOptions.treeIndent = treeIndent;
+    const expandableRowHeight = this.parseNumberAttribute("expandable-row-height");
+    if (expandableRowHeight !== void 0)
+      this.attributeOptions.expandableRowHeight = expandableRowHeight;
+    const expandableRowHeaderWidth = this.parseNumberAttribute(
+      "expandable-row-header-width"
+    );
+    if (expandableRowHeaderWidth !== void 0)
+      this.attributeOptions.expandableRowHeaderWidth = expandableRowHeaderWidth;
+    const infiniteScrollRowsFromEnd = this.parseNumberAttribute(
+      "infinite-scroll-rows-from-end"
+    );
+    if (infiniteScrollRowsFromEnd !== void 0)
+      this.attributeOptions.infiniteScrollRowsFromEnd = infiniteScrollRowsFromEnd;
+    const enableSorting = this.parseBooleanAttribute("enable-sorting");
+    if (enableSorting !== void 0) this.attributeOptions.enableSorting = enableSorting;
+    const enableFiltering = this.parseBooleanAttribute("enable-filtering");
+    if (enableFiltering !== void 0) this.attributeOptions.enableFiltering = enableFiltering;
+    const enableGrouping = this.parseBooleanAttribute("enable-grouping");
+    if (enableGrouping !== void 0) this.attributeOptions.enableGrouping = enableGrouping;
+    const enablePinning = this.parseBooleanAttribute("enable-pinning");
+    if (enablePinning !== void 0) this.attributeOptions.enablePinning = enablePinning;
+    const enableColumnMoving = this.parseBooleanAttribute("enable-column-moving");
+    if (enableColumnMoving !== void 0)
+      this.attributeOptions.enableColumnMoving = enableColumnMoving;
+    const enableCellEdit = this.parseBooleanAttribute("enable-cell-edit");
+    if (enableCellEdit !== void 0) this.attributeOptions.enableCellEdit = enableCellEdit;
+    const enableCellEditOnFocus = this.parseBooleanAttribute("enable-cell-edit-on-focus");
+    if (enableCellEditOnFocus !== void 0)
+      this.attributeOptions.enableCellEditOnFocus = enableCellEditOnFocus;
+    const enablePagination = this.parseBooleanAttribute("enable-pagination");
+    if (enablePagination !== void 0)
+      this.attributeOptions.enablePagination = enablePagination;
+    const enablePaginationControls = this.parseBooleanAttribute(
+      "enable-pagination-controls"
+    );
+    if (enablePaginationControls !== void 0)
+      this.attributeOptions.enablePaginationControls = enablePaginationControls;
+    const useExternalPagination = this.parseBooleanAttribute("use-external-pagination");
+    if (useExternalPagination !== void 0)
+      this.attributeOptions.useExternalPagination = useExternalPagination;
+    const enableExpandable = this.parseBooleanAttribute("enable-expandable");
+    if (enableExpandable !== void 0) this.attributeOptions.enableExpandable = enableExpandable;
+    const enableTreeView = this.parseBooleanAttribute("enable-tree-view");
+    if (enableTreeView !== void 0) this.attributeOptions.enableTreeView = enableTreeView;
+    const showTreeExpandNoChildren = this.parseBooleanAttribute(
+      "show-tree-expand-no-children"
+    );
+    if (showTreeExpandNoChildren !== void 0)
+      this.attributeOptions.showTreeExpandNoChildren = showTreeExpandNoChildren;
+    const treeRowHeaderAlwaysVisible = this.parseBooleanAttribute(
+      "tree-row-header-always-visible"
+    );
+    if (treeRowHeaderAlwaysVisible !== void 0)
+      this.attributeOptions.treeRowHeaderAlwaysVisible = treeRowHeaderAlwaysVisible;
+    const enableAutoResize = this.parseBooleanAttribute("enable-auto-resize");
+    if (enableAutoResize !== void 0) this.attributeOptions.enableAutoResize = enableAutoResize;
+    const enableVirtualization = this.parseBooleanAttribute("enable-virtualization");
+    if (enableVirtualization !== void 0)
+      this.attributeOptions.enableVirtualization = enableVirtualization;
+    const infiniteScrollUp = this.parseBooleanAttribute("infinite-scroll-up");
+    if (infiniteScrollUp !== void 0) this.attributeOptions.infiniteScrollUp = infiniteScrollUp;
+    const infiniteScrollDown = this.parseBooleanAttribute("infinite-scroll-down");
+    if (infiniteScrollDown !== void 0)
+      this.attributeOptions.infiniteScrollDown = infiniteScrollDown;
+    const columnDefs = this.parseJsonAttribute("column-defs");
+    if (columnDefs !== void 0) this.attributeOptions.columnDefs = columnDefs;
+    const data = this.parseJsonAttribute("data");
+    if (data !== void 0) this.attributeOptions.data = data;
+    const grouping = this.parseJsonAttribute("grouping");
+    if (grouping !== void 0 && grouping !== null)
+      this.attributeOptions.grouping = grouping;
+    const paginationPageSizes = this.parseJsonAttribute(
+      "pagination-page-sizes"
+    );
+    if (paginationPageSizes !== void 0)
+      this.attributeOptions.paginationPageSizes = paginationPageSizes;
+    if (this.activeOptions) {
+      this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+    }
+  }
+  parseBooleanAttribute(name) {
+    return this.hasAttribute(name) ? true : void 0;
+  }
+  parseNumberAttribute(name) {
+    const raw = this.getAttribute(name);
+    if (raw === null) return void 0;
+    const parsed = Number(raw);
+    return Number.isFinite(parsed) ? parsed : void 0;
+  }
+  parseJsonAttribute(name) {
+    const raw = this.getAttribute(name);
+    if (raw === null) return void 0;
+    try {
+      return JSON.parse(raw);
+    } catch (e) {
+      console.warn(`<ui-grid-element>: invalid JSON in "${name}" attribute`, e);
+      return void 0;
+    }
+  }
   get controlIcons() {
     return this.iconOverrides;
   }
@@ -820,12 +1031,337 @@ var UiGridStandaloneElement = class extends HTMLElement {
     this.iconOverrides = { ...value };
     this.render();
   }
+  // ─────────────────────────────────────────────────────────────────
+  // Individual property accessors (mirrors of HTML attributes)
+  // ─────────────────────────────────────────────────────────────────
+  get gridId() {
+    return this.options.id ?? "";
+  }
+  set gridId(value) {
+    this.activeOptions = { ...this.activeOptions, id: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  // @ts-ignore: Intentional override of HTMLElement.title
+  get title() {
+    return this.options.title ?? "";
+  }
+  // @ts-ignore: Intentional override of HTMLElement.title
+  set title(value) {
+    this.activeOptions = { ...this.activeOptions, title: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get rowHeight() {
+    return this.options.rowHeight ?? 40;
+  }
+  set rowHeight(value) {
+    this.activeOptions = { ...this.activeOptions, rowHeight: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get headerRowHeight() {
+    return this.options.headerRowHeight ?? 50;
+  }
+  set headerRowHeight(value) {
+    this.activeOptions = { ...this.activeOptions, headerRowHeight: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get viewportHeight() {
+    return this.options.viewportHeight ?? 560;
+  }
+  set viewportHeight(value) {
+    this.activeOptions = { ...this.activeOptions, viewportHeight: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get paginationPageSize() {
+    return this.options.paginationPageSize ?? 25;
+  }
+  set paginationPageSize(value) {
+    this.activeOptions = { ...this.activeOptions, paginationPageSize: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get paginationCurrentPage() {
+    return this.options.paginationCurrentPage ?? 1;
+  }
+  set paginationCurrentPage(value) {
+    this.activeOptions = { ...this.activeOptions, paginationCurrentPage: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get totalItems() {
+    return this.options.totalItems;
+  }
+  set totalItems(value) {
+    this.activeOptions = { ...this.activeOptions, totalItems: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get virtualizationThreshold() {
+    return this.options.virtualizationThreshold ?? 40;
+  }
+  set virtualizationThreshold(value) {
+    this.activeOptions = { ...this.activeOptions, virtualizationThreshold: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get treeChildrenField() {
+    return this.options.treeChildrenField ?? "children";
+  }
+  set treeChildrenField(value) {
+    this.activeOptions = { ...this.activeOptions, treeChildrenField: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get treeIndent() {
+    return this.options.treeIndent ?? 20;
+  }
+  set treeIndent(value) {
+    this.activeOptions = { ...this.activeOptions, treeIndent: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get expandableRowHeight() {
+    return this.options.expandableRowHeight ?? 150;
+  }
+  set expandableRowHeight(value) {
+    this.activeOptions = { ...this.activeOptions, expandableRowHeight: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get expandableRowHeaderWidth() {
+    return this.options.expandableRowHeaderWidth ?? 40;
+  }
+  set expandableRowHeaderWidth(value) {
+    this.activeOptions = { ...this.activeOptions, expandableRowHeaderWidth: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get emptyMessage() {
+    return this.options.emptyMessage ?? "No data available.";
+  }
+  set emptyMessage(value) {
+    this.activeOptions = { ...this.activeOptions, emptyMessage: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get infiniteScrollRowsFromEnd() {
+    return this.options.infiniteScrollRowsFromEnd ?? 10;
+  }
+  set infiniteScrollRowsFromEnd(value) {
+    this.activeOptions = { ...this.activeOptions, infiniteScrollRowsFromEnd: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get columnDefs() {
+    return this.options.columnDefs;
+  }
+  set columnDefs(value) {
+    this.activeOptions = { ...this.activeOptions, columnDefs: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get data() {
+    return this.options.data;
+  }
+  set data(value) {
+    this.activeOptions = { ...this.activeOptions, data: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableSorting() {
+    return this.options.enableSorting ?? true;
+  }
+  set enableSorting(value) {
+    this.activeOptions = { ...this.activeOptions, enableSorting: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableFiltering() {
+    return this.options.enableFiltering ?? true;
+  }
+  set enableFiltering(value) {
+    this.activeOptions = { ...this.activeOptions, enableFiltering: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableGrouping() {
+    return this.options.enableGrouping ?? true;
+  }
+  set enableGrouping(value) {
+    this.activeOptions = { ...this.activeOptions, enableGrouping: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enablePinning() {
+    return this.options.enablePinning ?? true;
+  }
+  set enablePinning(value) {
+    this.activeOptions = { ...this.activeOptions, enablePinning: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableColumnMoving() {
+    return this.options.enableColumnMoving ?? true;
+  }
+  set enableColumnMoving(value) {
+    this.activeOptions = { ...this.activeOptions, enableColumnMoving: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableCellEdit() {
+    return this.options.enableCellEdit ?? false;
+  }
+  set enableCellEdit(value) {
+    this.activeOptions = { ...this.activeOptions, enableCellEdit: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableCellEditOnFocus() {
+    return this.options.enableCellEditOnFocus ?? false;
+  }
+  set enableCellEditOnFocus(value) {
+    this.activeOptions = { ...this.activeOptions, enableCellEditOnFocus: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enablePagination() {
+    return this.options.enablePagination ?? false;
+  }
+  set enablePagination(value) {
+    this.activeOptions = { ...this.activeOptions, enablePagination: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enablePaginationControls() {
+    return this.options.enablePaginationControls ?? true;
+  }
+  set enablePaginationControls(value) {
+    this.activeOptions = { ...this.activeOptions, enablePaginationControls: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get useExternalPagination() {
+    return this.options.useExternalPagination ?? false;
+  }
+  set useExternalPagination(value) {
+    this.activeOptions = { ...this.activeOptions, useExternalPagination: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableExpandable() {
+    return this.options.enableExpandable ?? false;
+  }
+  set enableExpandable(value) {
+    this.activeOptions = { ...this.activeOptions, enableExpandable: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableTreeView() {
+    return this.options.enableTreeView ?? false;
+  }
+  set enableTreeView(value) {
+    this.activeOptions = { ...this.activeOptions, enableTreeView: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get showTreeExpandNoChildren() {
+    return this.options.showTreeExpandNoChildren ?? false;
+  }
+  set showTreeExpandNoChildren(value) {
+    this.activeOptions = { ...this.activeOptions, showTreeExpandNoChildren: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get treeRowHeaderAlwaysVisible() {
+    return this.options.treeRowHeaderAlwaysVisible ?? false;
+  }
+  set treeRowHeaderAlwaysVisible(value) {
+    this.activeOptions = { ...this.activeOptions, treeRowHeaderAlwaysVisible: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableAutoResize() {
+    return this.options.enableAutoResize ?? false;
+  }
+  set enableAutoResize(value) {
+    this.activeOptions = { ...this.activeOptions, enableAutoResize: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get enableVirtualization() {
+    return this.options.enableVirtualization ?? true;
+  }
+  set enableVirtualization(value) {
+    this.activeOptions = { ...this.activeOptions, enableVirtualization: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get infiniteScrollUp() {
+    return this.options.infiniteScrollUp ?? false;
+  }
+  set infiniteScrollUp(value) {
+    this.activeOptions = { ...this.activeOptions, infiniteScrollUp: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get infiniteScrollDown() {
+    return this.options.infiniteScrollDown ?? false;
+  }
+  set infiniteScrollDown(value) {
+    this.activeOptions = { ...this.activeOptions, infiniteScrollDown: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get grouping() {
+    return this.options.grouping;
+  }
+  set grouping(value) {
+    this.activeOptions = { ...this.activeOptions, grouping: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get paginationPageSizes() {
+    return this.options.paginationPageSizes;
+  }
+  set paginationPageSizes(value) {
+    this.activeOptions = { ...this.activeOptions, paginationPageSizes: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
   getState() {
     return this.controller?.getState() ?? null;
   }
   setState(state) {
     this.controller?.setState(state);
   }
+  /**
+   * Fast-path: update only row data without rebuilding the shadow DOM.
+   * The pipeline is updated synchronously; DOM patching is deferred to the
+   * next animation frame so it never interrupts an in-progress scroll paint.
+   * If multiple ticks arrive before the frame fires, only the latest wins.
+   * If a scroll-triggered full render fires first, the frame is cancelled
+   * (the fresh innerHTML already reflects the latest data).
+   */
+  setData(rows) {
+    const controller = this.controller;
+    if (!controller) {
+      return;
+    }
+    this.skipNextRender = true;
+    controller.refreshData(rows);
+    this.skipNextRender = false;
+    if (this.dataFrame !== null) {
+      cancelAnimationFrame(this.dataFrame);
+    }
+    this.dataFrame = requestAnimationFrame(() => {
+      this.dataFrame = null;
+      this.patchCells();
+    });
+  }
+  patchCells() {
+    const snapshot = this.snapshot;
+    if (!snapshot) {
+      return;
+    }
+    const root = this.shadowRoot;
+    if (!root) {
+      return;
+    }
+    const rowMap = /* @__PURE__ */ new Map();
+    for (const row of snapshot.pipeline.visibleRows) {
+      rowMap.set(row.id, row);
+    }
+    const colMap = /* @__PURE__ */ new Map();
+    for (const col of snapshot.visibleColumns) {
+      colMap.set(col.name, 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;
+      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;
+      }
+    }
+  }
   connectedCallback() {
     this.ensureShadowRoot();
     this.bindEvents();
@@ -882,16 +1418,17 @@ var UiGridStandaloneElement = class extends HTMLElement {
     });
   }
   buildEffectiveOptions(options) {
+    const merged = {
+      ...this.attributeOptions,
+      ...options
+    };
     const hasExpandableSlot = this.getTemplateMarkup("expandable-row") !== null;
-    if (options.enableExpandable && hasExpandableSlot && !options.expandableRowTemplate) {
-      return {
-        ...options,
-        expandableRowTemplate: {
-          createEmbeddedView: () => void 0
-        }
+    if (merged.enableExpandable && hasExpandableSlot && !merged.expandableRowTemplate) {
+      merged.expandableRowTemplate = {
+        createEmbeddedView: () => void 0
       };
     }
-    return options;
+    return merged;
   }
   bindEvents() {
     const root = this.ensureShadowRoot();
@@ -1192,14 +1729,63 @@ var UiGridStandaloneElement = class extends HTMLElement {
         }
         this.scrollFrame = requestAnimationFrame(() => {
           this.scrollFrame = null;
-          this.render();
+          this.renderVirtualBody();
         });
       },
       true
     );
     root.__uiGridBound = true;
   }
+  /**
+   * Targeted update for virtual scroll: replaces only the rendered rows inside
+   * the existing `.grid-virtual-body` without touching the scroll container.
+   * This preserves momentum/inertia scrolling because the `.grid-table` element
+   * is never destroyed.
+   */
+  renderVirtualBody() {
+    const snapshot = this.snapshot;
+    if (!snapshot?.pipeline.virtualizationEnabled) {
+      this.render();
+      return;
+    }
+    const root = this.shadowRoot;
+    const virtualBody = root?.querySelector(".grid-virtual-body");
+    if (!root || !virtualBody) {
+      this.render();
+      return;
+    }
+    if (this.dataFrame !== null) {
+      cancelAnimationFrame(this.dataFrame);
+      this.dataFrame = null;
+    }
+    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);
+    this.lastVirtualStartIndex = startIndex;
+    const visibleCount = Math.ceil(bodyViewportHeight / snapshot.rowSize) + overscan * 2;
+    const itemsToRender = snapshot.pipeline.displayItems.slice(
+      startIndex,
+      Math.min(snapshot.pipeline.displayItems.length, startIndex + visibleCount)
+    );
+    const virtualOffset = startIndex * snapshot.rowSize;
+    virtualBody.style.top = `${virtualOffset}px`;
+    virtualBody.innerHTML = itemsToRender.map((item, index) => this.renderDisplayItem(item, startIndex + index)).join("");
+  }
   render() {
+    if (this.skipNextRender) {
+      return;
+    }
+    if (this.dataFrame !== null) {
+      cancelAnimationFrame(this.dataFrame);
+      this.dataFrame = null;
+    }
+    if (this.scrollFrame !== null) {
+      cancelAnimationFrame(this.scrollFrame);
+      this.scrollFrame = null;
+    }
     const root = this.ensureShadowRoot();
     const snapshot = this.snapshot;
     const previousGridTable = root.querySelector(".grid-table");
@@ -1225,9 +1811,6 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const headerStickyTop = this.measuredHeaderStickyHeight || options.headerRowHeight || 50;
     const stickyChromeHeight = this.measuredHeaderStickyHeight + this.measuredFilterStickyHeight;
     const bodyViewportHeight = Math.max(snapshot.rowSize, viewportHeight - stickyChromeHeight);
-    const visibleRowCount = snapshot.pipeline.visibleRows.length;
-    const totalRows = options.data.length;
-    const pinnedCount = Object.keys(snapshot.pinnedColumns).length;
     let startIndex = 0;
     let itemsToRender = snapshot.pipeline.displayItems;
     let virtualOffset = 0;
@@ -1254,11 +1837,8 @@ 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 hero = `<header class="grid-hero"><div><p class="eyebrow">Vanilla web component</p><h1>${escapeHtml(options.title ?? "UI Grid")}</h1><p class="deck">Framework-neutral custom element with Shadow DOM styling, slot templates, pinning, virtualization, editing, tree view, grouping, and state restore.</p></div><div class="hero-actions"><button type="button" class="action action-secondary" data-action="benchmark">Benchmark</button><button type="button" class="action action-secondary" data-action="export-csv">Export CSV</button><div class="stats-card"><span>${visibleRowCount}</span><small>${escapeHtml(labels.statsVisibleRows)}</small></div></div></header>`;
-    const metrics = `<section class="metrics-strip" aria-label="Grid metrics"><article><strong>${snapshot.pipeline.pipelineMs.toFixed(2)} ms</strong><span>pipeline</span></article><article><strong>${virtualizationEnabled ? "On" : "Off"}</strong><span>virtualization</span></article><article><strong>${pinnedCount}</strong><span>pinned columns</span></article><article><strong>${escapeHtml(this.benchmarkAverage)}</strong><span>benchmark avg</span></article></section>`;
-    const toolbar = `<div class="grid-toolbar"><div><strong>${visibleRowCount}</strong><span>${escapeHtml(labels.toolbarOf)} ${totalRows} ${escapeHtml(labels.toolbarRows)}</span></div><p>${escapeHtml(options.id)}</p></div>`;
     const gridTableStyle = `${virtualizationEnabled ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
-    root.innerHTML = `<style>${GRID_CORE_CSS}</style><section class="grid-shell ui-grid-shell">${slotRegistry}${hero}${metrics}<section class="grid-frame ui-grid" role="grid" aria-label="${escapeHtml(options.title ?? "Data grid")}">${toolbar}<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></section>`;
+    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) {
       this.suppressScrollEvent = true;
@@ -1313,7 +1893,8 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const sortIconKey = sortDirection === SORT_DIRECTIONS2.asc ? "sortAsc" : sortDirection === SORT_DIRECTIONS2.desc ? "sortDesc" : "sortNone";
     const draggable = canGridMoveColumns2(options) ? 'draggable="true"' : "";
     const pinLabel = isPinned ? this.snapshot?.labels.unpin ?? "Unpin" : this.snapshot?.labels.pinColumn ?? "Pin";
-    return `<div class="${classes}" data-column="${escapeHtml(column.name)}" ${draggable} style="${stickyStyle}"><span class="header-label">${escapeHtml(controller.headerLabel(column))}</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>`;
+    const headerValue = escapeHtml(formatGridHeaderDisplayValue(buildGridHeaderContext(column)));
+    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>`;
   }
   renderFilterCell(column) {
     const value = this.snapshot?.activeFilters[column.name] ?? "";