@ornery/ui-grid-vanilla 0.1.8 → 0.1.10

package/dist/index.mjs

@@ -97,6 +97,7 @@ var VanillaGridController = class {
   expandedTreeRows = {};
   pinnedColumns = {};
   columnOrder = [];
+  columnWidthOverrides = {};
   currentPage = 1;
   pageSize = 0;
   editingCell = null;
@@ -505,6 +506,24 @@ var VanillaGridController = class {
     });
     this.refresh();
   }
+  canResizeColumns() {
+    return this.options.enableColumnResizing !== false;
+  }
+  setColumnWidthOverride(columnName, widthPx) {
+    const nextWidth = `${Math.max(88, Math.round(widthPx))}px`;
+    this.columnWidthOverrides = { ...this.columnWidthOverrides, [columnName]: nextWidth };
+    this.refresh();
+  }
+  /** Returns the grid-template-columns string as if `columnName` had the given width,
+   * without triggering a full refresh. Used for smooth drag-resize DOM updates. */
+  buildTemplateColumnsWithOverride(columnName, widthPx) {
+    const widthStr = `${Math.max(88, Math.round(widthPx))}px`;
+    return buildGridTemplateColumns(
+      this.visibleColumns.map(
+        (c) => c.name === columnName ? { ...c, width: widthStr } : c
+      )
+    );
+  }
   isGroupingEnabled() {
     return isGridGroupingEnabled(this.options);
   }
@@ -623,9 +642,13 @@ var VanillaGridController = class {
   }
   refresh() {
     const orderedColumns = orderVisibleColumns(this.options.columnDefs, this.columnOrder);
+    const applyWidthOverrides = (columns) => columns.map((col) => {
+      const override = this.columnWidthOverrides[col.name];
+      return override == null ? col : { ...col, width: override };
+    });
     const pinnedEntries = Object.entries(this.pinnedColumns);
     if (pinnedEntries.length === 0) {
-      this.visibleColumns = orderedColumns;
+      this.visibleColumns = applyWidthOverrides(orderedColumns);
     } else {
       const byName = new Map(orderedColumns.map((column) => [column.name, column]));
       const pinnedLeft = pinnedEntries.filter((entry) => entry[1] === "left").map((entry) => byName.get(entry[0])).filter((column) => column !== void 0);
@@ -633,7 +656,7 @@ var VanillaGridController = class {
       const middleColumns = orderedColumns.filter(
         (column) => this.pinnedColumns[column.name] === void 0
       );
-      this.visibleColumns = [...pinnedLeft, ...middleColumns, ...pinnedRight];
+      this.visibleColumns = applyWidthOverrides([...pinnedLeft, ...middleColumns, ...pinnedRight]);
     }
     this.pipeline = defaultGridEngine.buildPipeline({
       options: this.options,
@@ -821,6 +844,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
   draggedColumnName = null;
   dropTargetColumnName = null;
   scrollPosition = 0;
+  horizontalScrollPosition = 0;
   scrollFrame = null;
   suppressScrollEvent = false;
   lastVirtualStartIndex = -1;
@@ -830,6 +854,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
   benchmarkAverage = "\u2014";
   skipNextRender = false;
   dataFrame = null;
+  pendingPatchedRowIds = null;
+  pendingDataRefreshMode = null;
+  lastScrollActivityAt = 0;
   static get observedAttributes() {
     return [
       // Scalar attributes
@@ -875,10 +902,14 @@ var UiGridStandaloneElement = class extends HTMLElement {
     ];
   }
   get options() {
-    return this.activeOptions ?? {
+    if (this.activeOptions !== null) {
+      return this.buildEffectiveOptions(this.activeOptions);
+    }
+    return {
       id: "__ui-grid-pending__",
       data: [],
-      columnDefs: []
+      columnDefs: [],
+      ...this.attributeOptions
     };
   }
   set options(value) {
@@ -949,6 +980,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const enableColumnMoving = this.parseBooleanAttribute("enable-column-moving");
     if (enableColumnMoving !== void 0)
       this.attributeOptions.enableColumnMoving = enableColumnMoving;
+    const enableColumnResizing = this.parseBooleanAttribute("enable-column-resizing");
+    if (enableColumnResizing !== void 0)
+      this.attributeOptions.enableColumnResizing = enableColumnResizing;
     const enableCellEdit = this.parseBooleanAttribute("enable-cell-edit");
     if (enableCellEdit !== void 0) this.attributeOptions.enableCellEdit = enableCellEdit;
     const enableCellEditOnFocus = this.parseBooleanAttribute("enable-cell-edit-on-focus");
@@ -1001,8 +1035,15 @@ var UiGridStandaloneElement = class extends HTMLElement {
     );
     if (paginationPageSizes !== void 0)
       this.attributeOptions.paginationPageSizes = paginationPageSizes;
-    if (this.activeOptions) {
+    if (this.activeOptions !== null) {
       this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+    } else {
+      this.ensureController({
+        id: "__ui-grid-pending__",
+        data: [],
+        columnDefs: [],
+        ...this.attributeOptions
+      });
     }
   }
   parseBooleanAttribute(name) {
@@ -1190,6 +1231,13 @@ var UiGridStandaloneElement = class extends HTMLElement {
     this.activeOptions = { ...this.activeOptions, enableColumnMoving: value };
     this.ensureController(this.buildEffectiveOptions(this.activeOptions));
   }
+  get enableColumnResizing() {
+    return this.options.enableColumnResizing ?? true;
+  }
+  set enableColumnResizing(value) {
+    this.activeOptions = { ...this.activeOptions, enableColumnResizing: value };
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
   get enableCellEdit() {
     return this.options.enableCellEdit ?? false;
   }
@@ -1314,18 +1362,49 @@ var UiGridStandaloneElement = class extends HTMLElement {
     if (!controller) {
       return;
     }
+    const previousSnapshot = this.snapshot;
     this.skipNextRender = true;
     controller.refreshData(rows);
     this.skipNextRender = false;
+    const { mode, changedRowIds } = this.classifyDataRefresh(previousSnapshot, this.snapshot);
+    if (mode === null) {
+      return;
+    }
+    this.pendingDataRefreshMode = mode;
+    this.pendingPatchedRowIds = changedRowIds;
     if (this.dataFrame !== null) {
       cancelAnimationFrame(this.dataFrame);
     }
     this.dataFrame = requestAnimationFrame(() => {
-      this.dataFrame = null;
-      this.patchCells();
+      this.flushPendingDataRefresh();
     });
   }
-  patchCells() {
+  flushPendingDataRefresh() {
+    this.dataFrame = null;
+    const mode = this.pendingDataRefreshMode;
+    if (mode === null) {
+      return;
+    }
+    if (Date.now() - this.lastScrollActivityAt < 80) {
+      this.dataFrame = requestAnimationFrame(() => {
+        this.flushPendingDataRefresh();
+      });
+      return;
+    }
+    const changedRowIds = this.pendingPatchedRowIds;
+    this.pendingDataRefreshMode = null;
+    this.pendingPatchedRowIds = null;
+    if (mode === "patch") {
+      this.patchCells(changedRowIds ?? void 0);
+      return;
+    }
+    if (mode === "virtual") {
+      this.renderVirtualBody();
+      return;
+    }
+    this.render();
+  }
+  patchCells(changedRowIds) {
     const snapshot = this.snapshot;
     if (!snapshot) {
       return;
@@ -1335,30 +1414,37 @@ var UiGridStandaloneElement = class extends HTMLElement {
       return;
     }
     const rowMap = /* @__PURE__ */ new Map();
+    const rowIndexMap = /* @__PURE__ */ new Map();
     for (const row of snapshot.pipeline.visibleRows) {
       rowMap.set(row.id, row);
+      rowIndexMap.set(row.id, rowIndexMap.size);
     }
     const colMap = /* @__PURE__ */ new Map();
+    const templateMarkupMap = /* @__PURE__ */ new Map();
     for (const col of snapshot.visibleColumns) {
       colMap.set(col.name, col);
+      templateMarkupMap.set(col.name, this.getTemplateMarkup(this.cellSlotName(col)));
     }
     const cells = root.querySelectorAll("[data-row][data-column]");
     for (const cell of cells) {
       const rowId = cell.dataset["row"];
       const colName = cell.dataset["column"];
       if (!rowId || !colName) continue;
+      if (changedRowIds && !changedRowIds.has(rowId)) continue;
       const row = rowMap.get(rowId);
       const column = colMap.get(colName);
       if (!row || !column) continue;
-      const cellShell = cell.querySelector(".cell-shell");
-      if (!cellShell) continue;
-      const newContent = this.renderCellTemplate(row, column, 0);
-      const toggles = cellShell.querySelectorAll(".row-toggle");
-      if (toggles.length === 0) {
-        cellShell.innerHTML = newContent;
-      } else {
-        const toggleHtml = Array.from(toggles).map((t) => t.outerHTML).join("");
-        cellShell.innerHTML = toggleHtml + newContent;
+      if (cell.classList.contains("cell-editing")) continue;
+      const cellContent = cell.querySelector(".cell-content");
+      if (!cellContent) continue;
+      const newContent = this.renderCellTemplateFromMarkup(
+        row,
+        column,
+        rowIndexMap.get(rowId) ?? 0,
+        templateMarkupMap.get(colName) ?? null
+      );
+      if (cellContent.innerHTML !== newContent) {
+        cellContent.innerHTML = newContent;
       }
     }
   }
@@ -1572,11 +1658,51 @@ var UiGridStandaloneElement = class extends HTMLElement {
         this.controller.setPageSize(value);
       }
     });
+    root.addEventListener("mousedown", (event) => {
+      const target = event.target;
+      if (!target || !this.controller) return;
+      const resizer = target.closest(".column-resizer[data-column]");
+      if (!resizer || !this.controller.canResizeColumns()) return;
+      const columnName = resizer.dataset["column"];
+      if (!columnName) return;
+      const headerCell = resizer.closest(".header-cell");
+      if (!headerCell) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const startX = event.clientX;
+      const startWidth = headerCell.getBoundingClientRect().width;
+      let lastWidth = startWidth;
+      const handleMove = (moveEvent) => {
+        lastWidth = Math.max(88, startWidth + (moveEvent.clientX - startX));
+        const newTemplate = this.controller.buildTemplateColumnsWithOverride(columnName, lastWidth);
+        const root2 = this.shadowRoot ?? this;
+        root2.querySelectorAll(".header-grid, .filter-grid, .body-grid").forEach((el) => {
+          el.style.gridTemplateColumns = newTemplate;
+        });
+      };
+      const handleUp = () => {
+        window.removeEventListener("mousemove", handleMove);
+        window.removeEventListener("mouseup", handleUp);
+        this.controller.setColumnWidthOverride(columnName, lastWidth);
+      };
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    });
     root.addEventListener("dblclick", (event) => {
       const target = event.target;
       if (!target || !this.controller) {
         return;
       }
+      const resizer = target.closest(".column-resizer[data-column]");
+      if (resizer && this.controller.canResizeColumns()) {
+        const columnName2 = resizer.dataset["column"];
+        if (columnName2) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.controller.setColumnWidthOverride(columnName2, this.measureAutoColumnWidth(columnName2));
+          return;
+        }
+      }
       const cell = target.closest(".body-cell");
       if (!cell) {
         return;
@@ -1710,7 +1836,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
         if (!target?.classList.contains("grid-table") || this.suppressScrollEvent) {
           return;
         }
+        this.lastScrollActivityAt = Date.now();
         this.scrollPosition = target.scrollTop;
+        this.horizontalScrollPosition = target.scrollLeft;
         if (!this.snapshot?.pipeline.virtualizationEnabled) {
           return;
         }
@@ -1791,6 +1919,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const previousGridTable = root.querySelector(".grid-table");
     if (previousGridTable && !this.suppressScrollEvent) {
       this.scrollPosition = previousGridTable.scrollTop;
+      this.horizontalScrollPosition = previousGridTable.scrollLeft;
     }
     if (!snapshot) {
       root.innerHTML = `<style>${GRID_CORE_CSS}</style><section class="grid-shell ui-grid-shell"><div class="empty-state ui-grid-no-row-overlay"><strong>No grid options provided.</strong></div></section>`;
@@ -1837,12 +1966,18 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const bodyContent = itemsToRender.map((item, index) => this.renderDisplayItem(item, startIndex + index)).join("");
     const body = snapshot.pipeline.displayItems.length > 0 ? virtualizationEnabled ? `<div class="grid-virtual-spacer" style="height:${totalVirtualHeight}px"><div class="body-grid ui-grid-canvas grid-virtual-body" style="grid-template-columns:${templateColumns};top:${virtualOffset}px">${bodyContent}</div></div>` : `<div class="body-grid ui-grid-canvas" style="grid-template-columns:${templateColumns}">${bodyContent}</div>` : `<div class="empty-state ui-grid-no-row-overlay"><strong>${escapeHtml(options.emptyMessage ?? labels.emptyHeading)}</strong><p>${escapeHtml(labels.emptyDescription)}</p></div>`;
     const pagination = paginationEnabled && showPagination ? this.renderPagination(snapshot) : "";
-    const gridTableStyle = `${virtualizationEnabled ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
+    const hasViewportScroll = virtualizationEnabled || options.viewportHeight !== void 0;
+    const gridTableStyle = `${hasViewportScroll ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
     root.innerHTML = `<style>${GRID_CORE_CSS}</style>${slotRegistry}<section class="grid-frame ui-grid" role="grid" aria-label="${escapeHtml(options.title ?? "Data grid")}"><div class="grid-table ui-grid-contents-wrapper" style="${gridTableStyle}"><div class="header-grid ui-grid-header ui-grid-header-canvas" style="grid-template-columns:${templateColumns}">${header}</div>${filterRow}${body}</div>${pagination}</section>`;
     const gridTable = root.querySelector(".grid-table");
-    if (gridTable && this.scrollPosition > 0 && virtualizationEnabled) {
+    if (gridTable && (this.scrollPosition > 0 || this.horizontalScrollPosition > 0)) {
       this.suppressScrollEvent = true;
-      gridTable.scrollTop = this.scrollPosition;
+      if (this.scrollPosition > 0) {
+        gridTable.scrollTop = this.scrollPosition;
+      }
+      if (this.horizontalScrollPosition > 0) {
+        gridTable.scrollLeft = this.horizontalScrollPosition;
+      }
       requestAnimationFrame(() => {
         this.suppressScrollEvent = false;
       });
@@ -1893,8 +2028,10 @@ 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";
+    const canResize = controller.canResizeColumns();
     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>`;
+    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>${resizerHtml}</div>`;
   }
   renderFilterCell(column) {
     const value = this.snapshot?.activeFilters[column.name] ?? "";
@@ -1910,6 +2047,23 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
     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>`;
   }
+  measureAutoColumnWidth(columnName) {
+    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(selector)) {
+        maxWidth = Math.max(maxWidth, el.scrollWidth);
+      }
+    }
+    return maxWidth + 12;
+  }
   renderDisplayItem(item, displayIndex) {
     if (!this.snapshot || !this.controller) {
       return "";
@@ -1954,7 +2108,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
       editing ? "cell-editing" : ""
     ].filter(Boolean).join(" ");
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
-    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}${content}</div></div>`;
+    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}<div class="cell-content">${content}</div></div></div>`;
   }
   renderPagination(snapshot) {
     const pageSizes = snapshot.options.paginationPageSizes ?? [10, 25, 50, 100];
@@ -1968,6 +2122,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
   }
   renderCellTemplate(row, column, displayIndex) {
     const templateMarkup = this.getTemplateMarkup(this.cellSlotName(column));
+    return this.renderCellTemplateFromMarkup(row, column, displayIndex, templateMarkup);
+  }
+  renderCellTemplateFromMarkup(row, column, displayIndex, templateMarkup) {
     if (!templateMarkup) {
       return `<span class="cell-value">${escapeHtml(this.controller?.displayValue(row, column) ?? "")}</span>`;
     }
@@ -2020,6 +2177,79 @@ var UiGridStandaloneElement = class extends HTMLElement {
   rowIndexFor(row, fallback = 0) {
     return this.snapshot?.pipeline.visibleRows.findIndex((candidate) => candidate.id === row.id) ?? fallback;
   }
+  classifyDataRefresh(previousSnapshot, nextSnapshot) {
+    if (!nextSnapshot) {
+      return { mode: "full", changedRowIds: null };
+    }
+    if (!previousSnapshot) {
+      return {
+        mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+        changedRowIds: null
+      };
+    }
+    if (previousSnapshot.visibleColumns.length !== nextSnapshot.visibleColumns.length) {
+      return { mode: "full", changedRowIds: null };
+    }
+    for (let index = 0; index < previousSnapshot.visibleColumns.length; index += 1) {
+      if (previousSnapshot.visibleColumns[index]?.name !== nextSnapshot.visibleColumns[index]?.name) {
+        return { mode: "full", changedRowIds: null };
+      }
+    }
+    const previousWindow = this.getRenderedDisplayWindow(previousSnapshot);
+    const nextWindow = this.getRenderedDisplayWindow(nextSnapshot);
+    if (previousWindow.startIndex !== nextWindow.startIndex || previousWindow.items.length !== nextWindow.items.length) {
+      return {
+        mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+        changedRowIds: null
+      };
+    }
+    const changedRowIds = /* @__PURE__ */ new Set();
+    for (let index = 0; index < previousWindow.items.length; index += 1) {
+      const previousItem = previousWindow.items[index];
+      const nextItem = nextWindow.items[index];
+      if (!previousItem || !nextItem || previousItem.kind !== "row" || nextItem.kind !== "row") {
+        return {
+          mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+          changedRowIds: null
+        };
+      }
+      if (previousItem.row.id !== nextItem.row.id) {
+        return {
+          mode: nextSnapshot.pipeline.virtualizationEnabled ? "virtual" : "full",
+          changedRowIds: null
+        };
+      }
+      if (previousItem.row.entity !== nextItem.row.entity) {
+        changedRowIds.add(nextItem.row.id);
+      }
+    }
+    return {
+      mode: changedRowIds.size > 0 ? "patch" : null,
+      changedRowIds: changedRowIds.size > 0 ? changedRowIds : null
+    };
+  }
+  getRenderedDisplayWindow(snapshot) {
+    if (!snapshot.pipeline.virtualizationEnabled) {
+      return {
+        startIndex: 0,
+        items: snapshot.pipeline.displayItems
+      };
+    }
+    const stickyChromeHeight = this.measuredHeaderStickyHeight + this.measuredFilterStickyHeight;
+    const viewportHeight = snapshot.options.viewportHeight ?? 560;
+    const bodyViewportHeight = Math.max(snapshot.rowSize, viewportHeight - stickyChromeHeight);
+    const bodyScrollTop = Math.max(0, this.scrollPosition - stickyChromeHeight);
+    const overscan = 4;
+    const startIndex = Math.max(0, Math.floor(bodyScrollTop / snapshot.rowSize) - overscan);
+    const visibleCount = Math.ceil(bodyViewportHeight / snapshot.rowSize) + overscan * 2;
+    return {
+      startIndex,
+      items: snapshot.pipeline.displayItems.slice(
+        startIndex,
+        Math.min(snapshot.pipeline.displayItems.length, startIndex + visibleCount)
+      )
+    };
+  }
   cellSlotName(column) {
     return `cell-${column.name}`;
   }

package/package.json

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

package/src/grid-controller.ts

@@ -134,6 +134,7 @@ export class VanillaGridController {
   private expandedTreeRows: Record<string, boolean> = {};
   private pinnedColumns: PinnedColumnState = {};
   private columnOrder: string[] = [];
+  private columnWidthOverrides: Record<string, string> = {};
   private currentPage = 1;
   private pageSize = 0;
   private editingCell: GridCellPosition | null = null;
@@ -590,6 +591,27 @@ export class VanillaGridController {
     this.refresh();
   }
 
+  canResizeColumns(): boolean {
+    return this.options.enableColumnResizing !== false;
+  }
+
+  setColumnWidthOverride(columnName: string, widthPx: number): void {
+    const nextWidth = `${Math.max(88, Math.round(widthPx))}px`;
+    this.columnWidthOverrides = { ...this.columnWidthOverrides, [columnName]: nextWidth };
+    this.refresh();
+  }
+
+  /** Returns the grid-template-columns string as if `columnName` had the given width,
+   * without triggering a full refresh. Used for smooth drag-resize DOM updates. */
+  buildTemplateColumnsWithOverride(columnName: string, widthPx: number): string {
+    const widthStr = `${Math.max(88, Math.round(widthPx))}px`;
+    return buildGridTemplateColumns(
+      this.visibleColumns.map((c) =>
+        c.name === columnName ? { ...c, width: widthStr } : c,
+      ),
+    );
+  }
+
   isGroupingEnabled(): boolean {
     return isGridGroupingEnabled(this.options);
   }
@@ -743,10 +765,15 @@ export class VanillaGridController {
 
   private refresh(): void {
     const orderedColumns = orderVisibleColumns(this.options.columnDefs, this.columnOrder);
+    const applyWidthOverrides = (columns: GridColumnDef[]): GridColumnDef[] =>
+      columns.map((col) => {
+        const override = this.columnWidthOverrides[col.name];
+        return override == null ? col : { ...col, width: override };
+      });
     const pinnedEntries = Object.entries(this.pinnedColumns);
 
     if (pinnedEntries.length === 0) {
-      this.visibleColumns = orderedColumns;
+      this.visibleColumns = applyWidthOverrides(orderedColumns);
     } else {
       const byName = new Map(orderedColumns.map((column) => [column.name, column]));
       const pinnedLeft = pinnedEntries
@@ -760,7 +787,7 @@ export class VanillaGridController {
       const middleColumns = orderedColumns.filter(
         (column) => this.pinnedColumns[column.name] === undefined,
       );
-      this.visibleColumns = [...pinnedLeft, ...middleColumns, ...pinnedRight];
+      this.visibleColumns = applyWidthOverrides([...pinnedLeft, ...middleColumns, ...pinnedRight]);
     }
 
     this.pipeline = defaultGridEngine.buildPipeline({

package/src/index.integration.test.ts

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

package/src/index.test.ts

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