@ornery/ui-grid-vanilla 0.1.8 → 0.1.10

package/demo/index.html

@@ -179,7 +179,7 @@
             <p>
               Familiar <code>gridOptions</code> and <code>onRegisterApi</code>, rebuilt as a
               framework-neutral custom element with the Rust-backed pipeline, grouping, sorting,
-              filtering, and virtualization.
+              filtering, Excel-style column resizing, and virtualization.
             </p>
           </div>
           <div class="grid-demo-actions">
@@ -210,8 +210,8 @@
         <div class="grid-demo-toolbar">
           <div><strong id="visible-rows-inline">0</strong> of <span id="total-rows-value">0</span> rows</div>
           <p>
-            <code>gridOptions</code> compatibility layer: sorting, filtering, grouping, templating,
-            and virtualized rendering.
+            <code>gridOptions</code> compatibility layer: sorting, filtering, grouping, column resizing,
+            templating, and virtualized rendering.
           </p>
         </div>
 

package/demo/main.ts

@@ -28,6 +28,7 @@ const options: GridOptions = {
   enableSorting: true,
   enableFiltering: true,
   enableGrouping: true,
+  enableColumnResizing: true,
   enableVirtualization: true,
   virtualizationThreshold: 25,
   grouping: { groupBy: ['status'] },

package/dist/index.d.mts

@@ -41,6 +41,7 @@ declare class VanillaGridController {
     private expandedTreeRows;
     private pinnedColumns;
     private columnOrder;
+    private columnWidthOverrides;
     private currentPage;
     private pageSize;
     private editingCell;
@@ -84,6 +85,11 @@ declare class VanillaGridController {
     updateEditingValue(value: string): void;
     commitCellEdit(): void;
     cancelCellEdit(): void;
+    canResizeColumns(): boolean;
+    setColumnWidthOverride(columnName: string, widthPx: number): void;
+    /** 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;
     isGroupingEnabled(): boolean;
     isSortingEnabled(): boolean;
     isFilteringEnabled(): boolean;
@@ -169,6 +175,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private draggedColumnName;
     private dropTargetColumnName;
     private scrollPosition;
+    private horizontalScrollPosition;
     private scrollFrame;
     private suppressScrollEvent;
     private lastVirtualStartIndex;
@@ -178,6 +185,9 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private benchmarkAverage;
     private skipNextRender;
     private dataFrame;
+    private pendingPatchedRowIds;
+    private pendingDataRefreshMode;
+    private lastScrollActivityAt;
     static get observedAttributes(): string[];
     get options(): GridOptions;
     set options(value: GridOptions);
@@ -232,6 +242,8 @@ declare class UiGridStandaloneElement extends HTMLElement {
     set enablePinning(value: boolean);
     get enableColumnMoving(): boolean;
     set enableColumnMoving(value: boolean);
+    get enableColumnResizing(): boolean;
+    set enableColumnResizing(value: boolean);
     get enableCellEdit(): boolean;
     set enableCellEdit(value: boolean);
     get enableCellEditOnFocus(): boolean;
@@ -273,6 +285,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
      * (the fresh innerHTML already reflects the latest data).
      */
     setData(rows: GridRecord[]): void;
+    private flushPendingDataRefresh;
     private patchCells;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -291,16 +304,20 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private render;
     private renderHeaderCell;
     private renderFilterCell;
+    private measureAutoColumnWidth;
     private renderDisplayItem;
     private renderBodyCell;
     private renderPagination;
     private renderSlotRegistry;
     private renderCellTemplate;
+    private renderCellTemplateFromMarkup;
     private renderExpandableTemplate;
     private getTemplateMarkup;
     private interpolateTemplate;
     private resolveTemplateValue;
     private rowIndexFor;
+    private classifyDataRefresh;
+    private getRenderedDisplayWindow;
     private cellSlotName;
     private downloadCsv;
     private renderControlIcon;

package/dist/index.d.ts

@@ -41,6 +41,7 @@ declare class VanillaGridController {
     private expandedTreeRows;
     private pinnedColumns;
     private columnOrder;
+    private columnWidthOverrides;
     private currentPage;
     private pageSize;
     private editingCell;
@@ -84,6 +85,11 @@ declare class VanillaGridController {
     updateEditingValue(value: string): void;
     commitCellEdit(): void;
     cancelCellEdit(): void;
+    canResizeColumns(): boolean;
+    setColumnWidthOverride(columnName: string, widthPx: number): void;
+    /** 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;
     isGroupingEnabled(): boolean;
     isSortingEnabled(): boolean;
     isFilteringEnabled(): boolean;
@@ -169,6 +175,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private draggedColumnName;
     private dropTargetColumnName;
     private scrollPosition;
+    private horizontalScrollPosition;
     private scrollFrame;
     private suppressScrollEvent;
     private lastVirtualStartIndex;
@@ -178,6 +185,9 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private benchmarkAverage;
     private skipNextRender;
     private dataFrame;
+    private pendingPatchedRowIds;
+    private pendingDataRefreshMode;
+    private lastScrollActivityAt;
     static get observedAttributes(): string[];
     get options(): GridOptions;
     set options(value: GridOptions);
@@ -232,6 +242,8 @@ declare class UiGridStandaloneElement extends HTMLElement {
     set enablePinning(value: boolean);
     get enableColumnMoving(): boolean;
     set enableColumnMoving(value: boolean);
+    get enableColumnResizing(): boolean;
+    set enableColumnResizing(value: boolean);
     get enableCellEdit(): boolean;
     set enableCellEdit(value: boolean);
     get enableCellEditOnFocus(): boolean;
@@ -273,6 +285,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
      * (the fresh innerHTML already reflects the latest data).
      */
     setData(rows: GridRecord[]): void;
+    private flushPendingDataRefresh;
     private patchCells;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -291,16 +304,20 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private render;
     private renderHeaderCell;
     private renderFilterCell;
+    private measureAutoColumnWidth;
     private renderDisplayItem;
     private renderBodyCell;
     private renderPagination;
     private renderSlotRegistry;
     private renderCellTemplate;
+    private renderCellTemplateFromMarkup;
     private renderExpandableTemplate;
     private getTemplateMarkup;
     private interpolateTemplate;
     private resolveTemplateValue;
     private rowIndexFor;
+    private classifyDataRefresh;
+    private getRenderedDisplayWindow;
     private cellSlotName;
     private downloadCsv;
     private renderControlIcon;

package/dist/index.js

@@ -55,6 +55,7 @@ var VanillaGridController = class {
   expandedTreeRows = {};
   pinnedColumns = {};
   columnOrder = [];
+  columnWidthOverrides = {};
   currentPage = 1;
   pageSize = 0;
   editingCell = null;
@@ -463,6 +464,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 (0, import_ui_grid_core.isGridGroupingEnabled)(this.options);
   }
@@ -581,9 +600,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);
@@ -591,7 +614,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 = import_ui_grid_core.defaultGridEngine.buildPipeline({
       options: this.options,
@@ -779,6 +802,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
   draggedColumnName = null;
   dropTargetColumnName = null;
   scrollPosition = 0;
+  horizontalScrollPosition = 0;
   scrollFrame = null;
   suppressScrollEvent = false;
   lastVirtualStartIndex = -1;
@@ -788,6 +812,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
   benchmarkAverage = "\u2014";
   skipNextRender = false;
   dataFrame = null;
+  pendingPatchedRowIds = null;
+  pendingDataRefreshMode = null;
+  lastScrollActivityAt = 0;
   static get observedAttributes() {
     return [
       // Scalar attributes
@@ -833,10 +860,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) {
@@ -907,6 +938,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");
@@ -959,8 +993,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) {
@@ -1148,6 +1189,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;
   }
@@ -1272,18 +1320,49 @@ var UiGridStandaloneElement = class extends HTMLElement {
     if (!controller) {
       return;
     }
+    const previousSnapshot = this.snapshot;
     this.skipNextRender = true;
     controller.refreshData(rows);
     this.skipNextRender = false;
+    const { mode, changedRowIds } = this.classifyDataRefresh(previousSnapshot, this.snapshot);
+    if (mode === null) {
+      return;
+    }
+    this.pendingDataRefreshMode = mode;
+    this.pendingPatchedRowIds = changedRowIds;
     if (this.dataFrame !== null) {
       cancelAnimationFrame(this.dataFrame);
     }
     this.dataFrame = requestAnimationFrame(() => {
-      this.dataFrame = null;
-      this.patchCells();
+      this.flushPendingDataRefresh();
     });
   }
-  patchCells() {
+  flushPendingDataRefresh() {
+    this.dataFrame = null;
+    const mode = this.pendingDataRefreshMode;
+    if (mode === null) {
+      return;
+    }
+    if (Date.now() - this.lastScrollActivityAt < 80) {
+      this.dataFrame = requestAnimationFrame(() => {
+        this.flushPendingDataRefresh();
+      });
+      return;
+    }
+    const changedRowIds = this.pendingPatchedRowIds;
+    this.pendingDataRefreshMode = null;
+    this.pendingPatchedRowIds = null;
+    if (mode === "patch") {
+      this.patchCells(changedRowIds ?? void 0);
+      return;
+    }
+    if (mode === "virtual") {
+      this.renderVirtualBody();
+      return;
+    }
+    this.render();
+  }
+  patchCells(changedRowIds) {
     const snapshot = this.snapshot;
     if (!snapshot) {
       return;
@@ -1293,30 +1372,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;
       }
     }
   }
@@ -1530,11 +1616,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;
@@ -1668,7 +1794,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
         if (!target?.classList.contains("grid-table") || this.suppressScrollEvent) {
           return;
         }
+        this.lastScrollActivityAt = Date.now();
         this.scrollPosition = target.scrollTop;
+        this.horizontalScrollPosition = target.scrollLeft;
         if (!this.snapshot?.pipeline.virtualizationEnabled) {
           return;
         }
@@ -1749,6 +1877,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const previousGridTable = root.querySelector(".grid-table");
     if (previousGridTable && !this.suppressScrollEvent) {
       this.scrollPosition = previousGridTable.scrollTop;
+      this.horizontalScrollPosition = previousGridTable.scrollLeft;
     }
     if (!snapshot) {
       root.innerHTML = `<style>${import_ui_grid_core2.GRID_CORE_CSS}</style><section class="grid-shell ui-grid-shell"><div class="empty-state ui-grid-no-row-overlay"><strong>No grid options provided.</strong></div></section>`;
@@ -1795,12 +1924,18 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const bodyContent = itemsToRender.map((item, index) => this.renderDisplayItem(item, startIndex + index)).join("");
     const body = snapshot.pipeline.displayItems.length > 0 ? virtualizationEnabled ? `<div class="grid-virtual-spacer" style="height:${totalVirtualHeight}px"><div class="body-grid ui-grid-canvas grid-virtual-body" style="grid-template-columns:${templateColumns};top:${virtualOffset}px">${bodyContent}</div></div>` : `<div class="body-grid ui-grid-canvas" style="grid-template-columns:${templateColumns}">${bodyContent}</div>` : `<div class="empty-state ui-grid-no-row-overlay"><strong>${escapeHtml(options.emptyMessage ?? labels.emptyHeading)}</strong><p>${escapeHtml(labels.emptyDescription)}</p></div>`;
     const pagination = paginationEnabled && showPagination ? this.renderPagination(snapshot) : "";
-    const gridTableStyle = `${virtualizationEnabled ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
+    const hasViewportScroll = virtualizationEnabled || options.viewportHeight !== void 0;
+    const gridTableStyle = `${hasViewportScroll ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
     root.innerHTML = `<style>${import_ui_grid_core2.GRID_CORE_CSS}</style>${slotRegistry}<section class="grid-frame ui-grid" role="grid" aria-label="${escapeHtml(options.title ?? "Data grid")}"><div class="grid-table ui-grid-contents-wrapper" style="${gridTableStyle}"><div class="header-grid ui-grid-header ui-grid-header-canvas" style="grid-template-columns:${templateColumns}">${header}</div>${filterRow}${body}</div>${pagination}</section>`;
     const gridTable = root.querySelector(".grid-table");
-    if (gridTable && this.scrollPosition > 0 && virtualizationEnabled) {
+    if (gridTable && (this.scrollPosition > 0 || this.horizontalScrollPosition > 0)) {
       this.suppressScrollEvent = true;
-      gridTable.scrollTop = this.scrollPosition;
+      if (this.scrollPosition > 0) {
+        gridTable.scrollTop = this.scrollPosition;
+      }
+      if (this.horizontalScrollPosition > 0) {
+        gridTable.scrollLeft = this.horizontalScrollPosition;
+      }
       requestAnimationFrame(() => {
         this.suppressScrollEvent = false;
       });
@@ -1851,8 +1986,10 @@ var UiGridStandaloneElement = class extends HTMLElement {
     const sortIconKey = sortDirection === import_ui_grid_core2.SORT_DIRECTIONS.asc ? "sortAsc" : sortDirection === import_ui_grid_core2.SORT_DIRECTIONS.desc ? "sortDesc" : "sortNone";
     const draggable = (0, import_ui_grid_core2.canGridMoveColumns)(options) ? 'draggable="true"' : "";
     const pinLabel = isPinned ? this.snapshot?.labels.unpin ?? "Unpin" : this.snapshot?.labels.pinColumn ?? "Pin";
+    const canResize = controller.canResizeColumns();
     const headerValue = escapeHtml((0, import_ui_grid_core2.formatGridHeaderDisplayValue)((0, import_ui_grid_core2.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] ?? "";
@@ -1868,6 +2005,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 "";
@@ -1912,7 +2066,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
       editing ? "cell-editing" : ""
     ].filter(Boolean).join(" ");
     const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
-    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}${content}</div></div>`;
+    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}<div class="cell-content">${content}</div></div></div>`;
   }
   renderPagination(snapshot) {
     const pageSizes = snapshot.options.paginationPageSizes ?? [10, 25, 50, 100];
@@ -1926,6 +2080,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
   }
   renderCellTemplate(row, column, displayIndex) {
     const templateMarkup = this.getTemplateMarkup(this.cellSlotName(column));
+    return this.renderCellTemplateFromMarkup(row, column, displayIndex, templateMarkup);
+  }
+  renderCellTemplateFromMarkup(row, column, displayIndex, templateMarkup) {
     if (!templateMarkup) {
       return `<span class="cell-value">${escapeHtml(this.controller?.displayValue(row, column) ?? "")}</span>`;
     }
@@ -1978,6 +2135,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}`;
   }