@ornery/ui-grid-vanilla 1.0.0 → 1.0.2

package/AGENTS.md

@@ -0,0 +1,70 @@
+# @ornery/ui-grid-vanilla — Agent Instructions
+
+The rendering engine. A framework-free custom element (`<ui-grid-element>`) that owns the Shadow DOM, CSS Grid layout, event handling, and the `VanillaGridController` state machine. Angular and React wrappers mount this element — they never render cells themselves.
+
+## Build & Test
+
+```bash
+npm run build --prefix projects/ui-grid-vanilla   # tsup → dist/
+npm test --prefix projects/ui-grid-vanilla        # vitest (138 tests)
+```
+
+Depends on `@ornery/ui-grid-core` — build core first.
+
+## Key Files
+
+| File | Responsibility |
+|------|---------------|
+| `grid-controller.ts` | `VanillaGridController` — all mutable grid state, snapshot emission, column width calculation |
+| `ui-grid-standalone.element.ts` | Custom element class: lifecycle, render orchestration, scroll handling, ResizeObserver |
+| `render.ts` | HTML string builders for header/filter/body cells |
+| `patch.ts` | DOM-diffing fast path: patches existing shadow DOM without full re-render |
+| `events.ts` | All event listeners: click, mousedown (resize drag), dblclick (auto-fit), keydown, scroll, drag-and-drop |
+| `focus.ts` | CellNav focus management, `measureAutoColumnWidth` |
+| `framework-slots.ts` | `FrameworkSlotBridge` — stages slot add/remove deltas, `flush()` dispatches `cellSlotsChanged` |
+| `attribute-bridge.ts` | Parses HTML attributes into `GridOptions` |
+| `templates/index.ts` | Markup fragment helpers (filterRow, bodyVirtual, bodyStatic) |
+| `ui-grid-shell.template.ts` | Full shell template (grid-frame → grid-table → header-strip + filter-strip + body-viewport) |
+
+## Architecture
+
+### Render Paths
+
+1. **`renderFull`** — Full innerHTML swap of the shadow DOM shell. Used on structure changes (column add/remove, virtualization toggle).
+2. **`renderPatch`** — In-place DOM mutation. Header grid-template-columns, filter cells, body rows patched individually. Preserves focus and scroll.
+3. **`renderVirtualBody`** — Scroll-triggered fast path. Only replaces `.grid-virtual-body` innerHTML + calls `frameworkSlots.flush()`.
+4. **`patchCells`** — Data-only update. Iterates existing body cells, updates `.cell-content` innerHTML.
+
+### Column Width (drawnWidth)
+
+Column widths are resolved to **fixed pixel values** by `buildGridTemplateColumns()`, mirroring the old ui-grid's `updateColumnWidths`/`drawnWidth` approach:
+
+- Fixed-px columns: used as-is
+- Percentage columns: resolved against viewport width
+- Flex columns (default `minmax(11rem, 1fr)`): remaining space divided equally, minimum 176px
+- Selection row-header: fixed at configured width, not resizable
+
+The element feeds its measured width to the controller via `setViewportWidth()`. The ResizeObserver keeps it current.
+
+### State Management
+
+`setOptions()` must NOT clobber interactive state. The controller tracks `lastOptions*` values and only applies declarative state when the consumer's value structurally changed. Interactive state that survives `setOptions`: sort, filters, expanded rows, selection, pagination, cell navigation, column widths, column order.
+
+### Framework Slot System
+
+1. Wrapper calls `setFrameworkRenderedSlots({ cells: ['colA', 'colB'] })`
+2. Render emits `<slot name="cell-colA-rowId">` placeholders
+3. `flush()` dispatches `cellSlotsChanged` with `{ added, removed }` deltas
+4. Wrapper listens, creates framework views, appends to light DOM with matching `slot` attribute
+
+## Per-Column Flags
+
+- `enableColumnResizing: false` — no resize handle rendered, column width locked
+- `enableColumnMoving: false` — not draggable, not a valid drop target
+
+## Do NOT
+
+- Skip `frameworkSlots.flush()` after rendering DOM that contains slot placeholders
+- Call `setFrameworkRenderedSlots` on every options update — only on structural column changes
+- Use `innerHTML` on `.grid-body-viewport` — it destroys scroll position; only patch inside `.body-grid`
+- Forget to sync horizontal scroll after a full render (`syncHeaderHorizontalScroll`)

package/dist/index.d.mts

@@ -245,6 +245,10 @@ declare class VanillaGridController {
     private activeFilters;
     private sortState;
     private groupByColumns;
+    private lastOptionsGroupBy;
+    private lastOptionsPinnedState;
+    private lastOptionsInfiniteScrollUp;
+    private lastOptionsInfiniteScrollDown;
     private collapsedGroups;
     private hiddenRowReasons;
     private expandedRows;
@@ -252,6 +256,7 @@ declare class VanillaGridController {
     private pinnedColumns;
     private columnOrder;
     private columnWidthOverrides;
+    private viewportWidth;
     private currentPage;
     private pageSize;
     private editingCell;
@@ -387,6 +392,8 @@ declare class VanillaGridController {
     setInfiniteScrollResetHandler(handler: (() => void) | null): void;
     getInfiniteScrollState(): Readonly<GridInfiniteScrollState>;
     canResizeColumns(): boolean;
+    setViewportWidth(width: number): void;
+    getViewportWidth(): number;
     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. */

package/dist/index.d.ts

@@ -245,6 +245,10 @@ declare class VanillaGridController {
     private activeFilters;
     private sortState;
     private groupByColumns;
+    private lastOptionsGroupBy;
+    private lastOptionsPinnedState;
+    private lastOptionsInfiniteScrollUp;
+    private lastOptionsInfiniteScrollDown;
     private collapsedGroups;
     private hiddenRowReasons;
     private expandedRows;
@@ -252,6 +256,7 @@ declare class VanillaGridController {
     private pinnedColumns;
     private columnOrder;
     private columnWidthOverrides;
+    private viewportWidth;
     private currentPage;
     private pageSize;
     private editingCell;
@@ -387,6 +392,8 @@ declare class VanillaGridController {
     setInfiniteScrollResetHandler(handler: (() => void) | null): void;
     getInfiniteScrollState(): Readonly<GridInfiniteScrollState>;
     canResizeColumns(): boolean;
+    setViewportWidth(width: number): void;
+    getViewportWidth(): number;
     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. */

package/dist/index.js

@@ -649,7 +649,7 @@ function renderHeaderCell(el, column, sortEnabled, groupingEnabled, pinningEnabl
   const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
   const sortIconKey = sortDirection === import_ui_grid_core2.SORT_DIRECTIONS.asc ? "sortAsc" : sortDirection === import_ui_grid_core2.SORT_DIRECTIONS.desc ? "sortDesc" : "sortNone";
   const pinLabel = isPinned ? el.snapshot?.labels.unpin ?? "Unpin" : el.snapshot?.labels.pinColumn ?? "Pin";
-  const canResize = controller.canResizeColumns();
+  const canResize = controller.canResizeColumns() && column.enableColumnResizing !== false;
   const headerValue = escapeHtml((0, import_ui_grid_core2.formatGridHeaderDisplayValue)((0, import_ui_grid_core2.buildGridHeaderContext)(column)));
   const resizerHtml = canResize ? resizerMarkup(escapeHtml(column.name), escapeHtml(headerValue)) : "";
   const isPinnedLeftLast = controller.isPinnedLeftLast(column);
@@ -657,7 +657,7 @@ function renderHeaderCell(el, column, sortEnabled, groupingEnabled, pinningEnabl
   const isPinMenuOpen = el.openPinMenuColumn === column.name;
   const isDragTarget = el.dropTargetColumnName === column.name;
   const isDragging = el.draggedColumnName === column.name;
-  const isDraggable = (0, import_ui_grid_core2.canGridMoveColumns)(options);
+  const isDraggable = (0, import_ui_grid_core2.canGridMoveColumns)(options) && column.enableColumnMoving !== false;
   const className = headerCellClass(
     sortDirection !== import_ui_grid_core2.SORT_DIRECTIONS.none,
     isPinned,
@@ -1504,18 +1504,35 @@ function measureAutoColumnWidth(el, columnName) {
   const root = el.shadowRoot;
   if (root == null) return 176;
   const escaped = cssEscape(columnName);
-  const selectors = [
-    `.header-cell[data-column="${escaped}"]`,
-    `.filter-cell[data-column="${escaped}"]`,
-    `.body-cell[data-column="${escaped}"] .cell-shell`
-  ];
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:absolute;top:-9999px;left:-9999px;width:max-content;visibility:hidden;";
+  root.appendChild(probe);
   let maxWidth = 0;
-  for (const selector of selectors) {
-    for (const target of root.querySelectorAll(selector)) {
-      maxWidth = Math.max(maxWidth, target.scrollWidth);
-    }
-  }
-  return maxWidth + 12;
+  for (const header of root.querySelectorAll(`.header-cell[data-column="${escaped}"]`)) {
+    const clone = header.cloneNode(true);
+    clone.style.cssText = "display:grid;grid-template-columns:auto auto;gap:inherit;padding:inherit;width:max-content;";
+    probe.appendChild(clone);
+    maxWidth = Math.max(maxWidth, clone.scrollWidth);
+    probe.removeChild(clone);
+  }
+  for (const filter of root.querySelectorAll(`ui-grid-filter-cell[data-column="${escaped}"], .filter-cell[data-column="${escaped}"]`)) {
+    const clone = filter.cloneNode(true);
+    clone.style.cssText = "display:block;width:max-content;";
+    probe.appendChild(clone);
+    maxWidth = Math.max(maxWidth, clone.scrollWidth);
+    probe.removeChild(clone);
+  }
+  for (const cell of root.querySelectorAll(`.body-cell[data-column="${escaped}"]`)) {
+    const shell = cell.querySelector(".cell-shell");
+    if (!shell) continue;
+    const clone = shell.cloneNode(true);
+    clone.style.cssText = "display:flex;width:max-content;";
+    probe.appendChild(clone);
+    maxWidth = Math.max(maxWidth, clone.scrollWidth);
+    probe.removeChild(clone);
+  }
+  root.removeChild(probe);
+  return Math.max(88, maxWidth + 12);
 }
 
 // src/events.ts
@@ -1987,6 +2004,11 @@ function bindEvents(el) {
       event.preventDefault();
       return;
     }
+    const colDef = el.snapshot.visibleColumns.find((c) => c.name === columnName);
+    if (colDef?.enableColumnMoving === false) {
+      event.preventDefault();
+      return;
+    }
     el.draggedColumnName = columnName;
     el.dropTargetColumnName = null;
     dragEvent.dataTransfer.effectAllowed = "move";
@@ -2000,6 +2022,8 @@ function bindEvents(el) {
     if (!headerCell || !el.draggedColumnName || !dragEvent.dataTransfer) return;
     const columnName = headerCell.dataset["column"];
     if (!columnName || columnName === el.draggedColumnName) return;
+    const colDef = el.snapshot?.visibleColumns.find((c) => c.name === columnName);
+    if (colDef?.enableColumnMoving === false) return;
     event.preventDefault();
     dragEvent.dataTransfer.dropEffect = "move";
     if (el.dropTargetColumnName !== columnName) {
@@ -2140,8 +2164,72 @@ var import_ui_grid_core5 = require("@ornery/ui-grid-core");
 function orderVisibleColumns(columns, order) {
   return [...columns].filter((column) => column.visible !== false).sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
 }
-function buildGridTemplateColumns(columns) {
-  return columns.map((column) => (0, import_ui_grid_core5.gridColumnWidth)(column)).join(" ");
+var DEFAULT_COL_MIN_WIDTH = 176;
+function buildGridTemplateColumns(columns, viewportWidth) {
+  if (!viewportWidth || viewportWidth <= 0) {
+    return columns.map((column) => (0, import_ui_grid_core5.gridColumnWidth)(column)).join(" ");
+  }
+  const availableWidth = viewportWidth;
+  const resolved = new Array(columns.length);
+  const flexIndices = [];
+  let usedWidth = 0;
+  for (let i = 0; i < columns.length; i++) {
+    const raw = columns[i].width;
+    const minWidth = columns[i].minWidth;
+    const maxWidth = columns[i].maxWidth ?? Infinity;
+    if (raw && raw.endsWith("px")) {
+      let px = parseInt(raw, 10);
+      if (minWidth != null) px = Math.max(minWidth, px);
+      px = Math.min(maxWidth, px);
+      resolved[i] = px;
+      usedWidth += px;
+    } else if (raw && raw.endsWith("%")) {
+      const pct = parseInt(raw.replace(/%/g, ""), 10);
+      let w = Math.round(pct / 100 * availableWidth);
+      if (minWidth != null) w = Math.max(minWidth, w);
+      w = Math.min(maxWidth, w);
+      resolved[i] = w;
+      usedWidth += w;
+    } else {
+      flexIndices.push(i);
+      resolved[i] = 0;
+    }
+  }
+  if (flexIndices.length > 0) {
+    const remaining = Math.max(0, availableWidth - usedWidth);
+    const perFlex = Math.floor(remaining / flexIndices.length);
+    for (const idx of flexIndices) {
+      const minWidth = columns[idx].minWidth ?? DEFAULT_COL_MIN_WIDTH;
+      const maxWidth = columns[idx].maxWidth ?? Infinity;
+      const w = Math.max(minWidth, Math.min(maxWidth, perFlex));
+      resolved[idx] = w;
+      usedWidth += w;
+    }
+    let leftover = availableWidth - usedWidth;
+    let changed = true;
+    while (leftover > 0 && changed) {
+      changed = false;
+      for (const idx of flexIndices) {
+        if (leftover <= 0) break;
+        const maxWidth = columns[idx].maxWidth ?? Infinity;
+        if (resolved[idx] < maxWidth) {
+          resolved[idx]++;
+          leftover--;
+          changed = true;
+        }
+      }
+    }
+  }
+  return resolved.map((w) => `${w}px`).join(" ");
+}
+function pinnedStatesEqual(a, b) {
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
 }
 var VanillaGridController = class {
   options;
@@ -2151,6 +2239,10 @@ var VanillaGridController = class {
     direction: import_ui_grid_core5.SORT_DIRECTIONS.none
   };
   groupByColumns = [];
+  lastOptionsGroupBy = void 0;
+  lastOptionsPinnedState = void 0;
+  lastOptionsInfiniteScrollUp = void 0;
+  lastOptionsInfiniteScrollDown = void 0;
   collapsedGroups = {};
   hiddenRowReasons = {};
   expandedRows = {};
@@ -2158,6 +2250,7 @@ var VanillaGridController = class {
   pinnedColumns = {};
   columnOrder = [];
   columnWidthOverrides = {};
+  viewportWidth = 0;
   currentPage = 1;
   pageSize = 0;
   editingCell = null;
@@ -2194,7 +2287,12 @@ var VanillaGridController = class {
     this.validatorRegistry = (0, import_ui_grid_core5.createGridValidatorRegistry)(this.labels);
     this.columnOrder = options.columnDefs.map((column) => column.name);
     this.groupByColumns = options.grouping?.groupBy ? [...options.grouping.groupBy] : [];
+    this.lastOptionsGroupBy = options.grouping?.groupBy ? [...options.grouping.groupBy] : void 0;
     this.pinnedColumns = (0, import_ui_grid_core5.buildInitialPinnedState)(options.columnDefs);
+    const declaresPin = options.columnDefs.some((col) => col.pinnedLeft === true || col.pinnedRight === true);
+    this.lastOptionsPinnedState = declaresPin ? { ...this.pinnedColumns } : void 0;
+    this.lastOptionsInfiniteScrollUp = options.infiniteScrollUp;
+    this.lastOptionsInfiniteScrollDown = options.infiniteScrollDown;
     this.infiniteScrollState = (0, import_ui_grid_core5.resetInfiniteScrollState)(
       options.infiniteScrollUp === true,
       options.infiniteScrollDown !== false
@@ -2411,20 +2509,41 @@ var VanillaGridController = class {
       }
     }
     if (options.grouping?.groupBy !== void 0) {
-      this.groupByColumns = [...options.grouping.groupBy];
+      const incoming = options.grouping.groupBy;
+      const prev = this.lastOptionsGroupBy;
+      const changed = !prev || prev.length !== incoming.length || prev.some((col, i) => col !== incoming[i]);
+      if (changed) {
+        this.groupByColumns = [...incoming];
+        this.lastOptionsGroupBy = [...incoming];
+      }
+    } else if (this.lastOptionsGroupBy !== void 0) {
+      this.lastOptionsGroupBy = void 0;
     }
     const declaresPin = options.columnDefs.some(
       (col) => col.pinnedLeft === true || col.pinnedRight === true
     );
     if (declaresPin) {
-      this.pinnedColumns = (0, import_ui_grid_core5.buildInitialPinnedState)(options.columnDefs);
+      const incoming = (0, import_ui_grid_core5.buildInitialPinnedState)(options.columnDefs);
+      const prev = this.lastOptionsPinnedState;
+      if (!prev || !pinnedStatesEqual(prev, incoming)) {
+        this.pinnedColumns = incoming;
+        this.lastOptionsPinnedState = { ...incoming };
+      }
+    } else if (this.lastOptionsPinnedState !== void 0) {
+      this.lastOptionsPinnedState = void 0;
     }
     if (options.infiniteScrollUp !== void 0 || options.infiniteScrollDown !== void 0) {
-      this.infiniteScrollState = (0, import_ui_grid_core5.setInfiniteScrollDirectionsState)(
-        this.infiniteScrollState,
-        options.infiniteScrollUp ?? this.infiniteScrollState.scrollUp,
-        options.infiniteScrollDown ?? this.infiniteScrollState.scrollDown
-      );
+      const upChanged = options.infiniteScrollUp !== void 0 && options.infiniteScrollUp !== this.lastOptionsInfiniteScrollUp;
+      const downChanged = options.infiniteScrollDown !== void 0 && options.infiniteScrollDown !== this.lastOptionsInfiniteScrollDown;
+      if (upChanged || downChanged) {
+        this.infiniteScrollState = (0, import_ui_grid_core5.setInfiniteScrollDirectionsState)(
+          this.infiniteScrollState,
+          options.infiniteScrollUp ?? this.infiniteScrollState.scrollUp,
+          options.infiniteScrollDown ?? this.infiniteScrollState.scrollDown
+        );
+        this.lastOptionsInfiniteScrollUp = options.infiniteScrollUp;
+        this.lastOptionsInfiniteScrollDown = options.infiniteScrollDown;
+      }
     }
     this.apiRegistered = false;
     this.refresh();
@@ -2466,7 +2585,7 @@ var VanillaGridController = class {
       labels: this.labels,
       rowSize: this.getRowSize(),
       visibleColumns: this.visibleColumns,
-      gridTemplateColumns: buildGridTemplateColumns(this.visibleColumns),
+      gridTemplateColumns: buildGridTemplateColumns(this.visibleColumns, this.viewportWidth),
       pipeline: this.pipeline,
       activeFilters: this.activeFilters,
       sortState: this.sortState,
@@ -3117,6 +3236,12 @@ var VanillaGridController = class {
   canResizeColumns() {
     return this.options.enableColumnResizing !== false;
   }
+  setViewportWidth(width) {
+    this.viewportWidth = Math.round(width);
+  }
+  getViewportWidth() {
+    return this.viewportWidth;
+  }
   setColumnWidthOverride(columnName, widthPx) {
     const nextWidth = `${Math.max(88, Math.round(widthPx))}px`;
     this.columnWidthOverrides = { ...this.columnWidthOverrides, [columnName]: nextWidth };
@@ -3129,7 +3254,8 @@ var VanillaGridController = class {
     return buildGridTemplateColumns(
       this.visibleColumns.map(
         (c) => c.name === columnName ? { ...c, width: widthStr } : c
-      )
+      ),
+      this.viewportWidth
     );
   }
   isGroupingEnabled() {
@@ -3366,11 +3492,15 @@ var VanillaGridController = class {
         name: "selectionRowHeaderCol",
         displayName: "",
         width: `${resolvedSelection.selectionRowHeaderWidth}px`,
+        minWidth: resolvedSelection.selectionRowHeaderWidth,
+        maxWidth: resolvedSelection.selectionRowHeaderWidth,
         enableSorting: false,
         enableFiltering: false,
         enableGrouping: false,
         enableCellEdit: false,
         enablePinning: false,
+        enableColumnResizing: false,
+        enableColumnMoving: false,
         align: "center"
       };
       if (!this.visibleColumns.some((c) => c.name === "selectionRowHeaderCol")) {
@@ -5047,10 +5177,16 @@ var UiGridStandaloneElement = class extends HTMLElement {
   /** @internal */
   ensureController(options) {
     if (this.controller) {
+      if (this.clientWidth > 0) {
+        this.controller.setViewportWidth(this.clientWidth);
+      }
       this.controller.setOptions(options);
       return;
     }
     this.controller = createVanillaGridController(options);
+    if (this.clientWidth > 0) {
+      this.controller.setViewportWidth(this.clientWidth);
+    }
     this.controller.setCellNavScrollHandler((rowId, columnName) => {
       if (!rowId || !columnName) return;
       this.scrollFocusedRowIntoView(rowId);
@@ -5184,6 +5320,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
     virtualBody.innerHTML = itemsToRender.map((item, index) => this.renderDisplayItem(item, startIndex + index)).join("");
     this.lastItemsFingerprint = this.fingerprintItems(itemsToRender);
     this.lastVirtualOffset = virtualOffset;
+    this.frameworkSlots.flush();
   }
   /** @internal */
   render() {
@@ -5283,10 +5420,12 @@ var UiGridStandaloneElement = class extends HTMLElement {
     if (this.autoResizeObserver) return;
     if (typeof ResizeObserver === "undefined") return;
     this.autoResizeObserver = new ResizeObserver((entries) => {
-      const options = this.snapshot?.options;
-      if (options?.enableAutoResize === false) return;
       const entry = entries[0];
       if (!entry) return;
+      const newWidth = entry.contentRect.width;
+      if (this.controller && newWidth > 0) {
+        this.controller.setViewportWidth(newWidth);
+      }
       if (this.autoResizeDebounceHandle !== null) {
         cancelAnimationFrame(this.autoResizeDebounceHandle);
       }

package/dist/index.mjs

@@ -630,7 +630,7 @@ function renderHeaderCell(el, column, sortEnabled, groupingEnabled, pinningEnabl
   const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
   const sortIconKey = sortDirection === SORT_DIRECTIONS.asc ? "sortAsc" : sortDirection === SORT_DIRECTIONS.desc ? "sortDesc" : "sortNone";
   const pinLabel = isPinned ? el.snapshot?.labels.unpin ?? "Unpin" : el.snapshot?.labels.pinColumn ?? "Pin";
-  const canResize = controller.canResizeColumns();
+  const canResize = controller.canResizeColumns() && column.enableColumnResizing !== false;
   const headerValue = escapeHtml(formatGridHeaderDisplayValue(buildGridHeaderContext2(column)));
   const resizerHtml = canResize ? resizerMarkup(escapeHtml(column.name), escapeHtml(headerValue)) : "";
   const isPinnedLeftLast = controller.isPinnedLeftLast(column);
@@ -638,7 +638,7 @@ function renderHeaderCell(el, column, sortEnabled, groupingEnabled, pinningEnabl
   const isPinMenuOpen = el.openPinMenuColumn === column.name;
   const isDragTarget = el.dropTargetColumnName === column.name;
   const isDragging = el.draggedColumnName === column.name;
-  const isDraggable = canGridMoveColumns(options);
+  const isDraggable = canGridMoveColumns(options) && column.enableColumnMoving !== false;
   const className = headerCellClass(
     sortDirection !== SORT_DIRECTIONS.none,
     isPinned,
@@ -1487,18 +1487,35 @@ function measureAutoColumnWidth(el, columnName) {
   const root = el.shadowRoot;
   if (root == null) return 176;
   const escaped = cssEscape(columnName);
-  const selectors = [
-    `.header-cell[data-column="${escaped}"]`,
-    `.filter-cell[data-column="${escaped}"]`,
-    `.body-cell[data-column="${escaped}"] .cell-shell`
-  ];
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:absolute;top:-9999px;left:-9999px;width:max-content;visibility:hidden;";
+  root.appendChild(probe);
   let maxWidth = 0;
-  for (const selector of selectors) {
-    for (const target of root.querySelectorAll(selector)) {
-      maxWidth = Math.max(maxWidth, target.scrollWidth);
-    }
-  }
-  return maxWidth + 12;
+  for (const header of root.querySelectorAll(`.header-cell[data-column="${escaped}"]`)) {
+    const clone = header.cloneNode(true);
+    clone.style.cssText = "display:grid;grid-template-columns:auto auto;gap:inherit;padding:inherit;width:max-content;";
+    probe.appendChild(clone);
+    maxWidth = Math.max(maxWidth, clone.scrollWidth);
+    probe.removeChild(clone);
+  }
+  for (const filter of root.querySelectorAll(`ui-grid-filter-cell[data-column="${escaped}"], .filter-cell[data-column="${escaped}"]`)) {
+    const clone = filter.cloneNode(true);
+    clone.style.cssText = "display:block;width:max-content;";
+    probe.appendChild(clone);
+    maxWidth = Math.max(maxWidth, clone.scrollWidth);
+    probe.removeChild(clone);
+  }
+  for (const cell of root.querySelectorAll(`.body-cell[data-column="${escaped}"]`)) {
+    const shell = cell.querySelector(".cell-shell");
+    if (!shell) continue;
+    const clone = shell.cloneNode(true);
+    clone.style.cssText = "display:flex;width:max-content;";
+    probe.appendChild(clone);
+    maxWidth = Math.max(maxWidth, clone.scrollWidth);
+    probe.removeChild(clone);
+  }
+  root.removeChild(probe);
+  return Math.max(88, maxWidth + 12);
 }
 
 // src/events.ts
@@ -1970,6 +1987,11 @@ function bindEvents(el) {
       event.preventDefault();
       return;
     }
+    const colDef = el.snapshot.visibleColumns.find((c) => c.name === columnName);
+    if (colDef?.enableColumnMoving === false) {
+      event.preventDefault();
+      return;
+    }
     el.draggedColumnName = columnName;
     el.dropTargetColumnName = null;
     dragEvent.dataTransfer.effectAllowed = "move";
@@ -1983,6 +2005,8 @@ function bindEvents(el) {
     if (!headerCell || !el.draggedColumnName || !dragEvent.dataTransfer) return;
     const columnName = headerCell.dataset["column"];
     if (!columnName || columnName === el.draggedColumnName) return;
+    const colDef = el.snapshot?.visibleColumns.find((c) => c.name === columnName);
+    if (colDef?.enableColumnMoving === false) return;
     event.preventDefault();
     dragEvent.dataTransfer.dropEffect = "move";
     if (el.dropTargetColumnName !== columnName) {
@@ -2229,8 +2253,72 @@ import {
 function orderVisibleColumns(columns, order) {
   return [...columns].filter((column) => column.visible !== false).sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
 }
-function buildGridTemplateColumns(columns) {
-  return columns.map((column) => gridColumnWidth(column)).join(" ");
+var DEFAULT_COL_MIN_WIDTH = 176;
+function buildGridTemplateColumns(columns, viewportWidth) {
+  if (!viewportWidth || viewportWidth <= 0) {
+    return columns.map((column) => gridColumnWidth(column)).join(" ");
+  }
+  const availableWidth = viewportWidth;
+  const resolved = new Array(columns.length);
+  const flexIndices = [];
+  let usedWidth = 0;
+  for (let i = 0; i < columns.length; i++) {
+    const raw = columns[i].width;
+    const minWidth = columns[i].minWidth;
+    const maxWidth = columns[i].maxWidth ?? Infinity;
+    if (raw && raw.endsWith("px")) {
+      let px = parseInt(raw, 10);
+      if (minWidth != null) px = Math.max(minWidth, px);
+      px = Math.min(maxWidth, px);
+      resolved[i] = px;
+      usedWidth += px;
+    } else if (raw && raw.endsWith("%")) {
+      const pct = parseInt(raw.replace(/%/g, ""), 10);
+      let w = Math.round(pct / 100 * availableWidth);
+      if (minWidth != null) w = Math.max(minWidth, w);
+      w = Math.min(maxWidth, w);
+      resolved[i] = w;
+      usedWidth += w;
+    } else {
+      flexIndices.push(i);
+      resolved[i] = 0;
+    }
+  }
+  if (flexIndices.length > 0) {
+    const remaining = Math.max(0, availableWidth - usedWidth);
+    const perFlex = Math.floor(remaining / flexIndices.length);
+    for (const idx of flexIndices) {
+      const minWidth = columns[idx].minWidth ?? DEFAULT_COL_MIN_WIDTH;
+      const maxWidth = columns[idx].maxWidth ?? Infinity;
+      const w = Math.max(minWidth, Math.min(maxWidth, perFlex));
+      resolved[idx] = w;
+      usedWidth += w;
+    }
+    let leftover = availableWidth - usedWidth;
+    let changed = true;
+    while (leftover > 0 && changed) {
+      changed = false;
+      for (const idx of flexIndices) {
+        if (leftover <= 0) break;
+        const maxWidth = columns[idx].maxWidth ?? Infinity;
+        if (resolved[idx] < maxWidth) {
+          resolved[idx]++;
+          leftover--;
+          changed = true;
+        }
+      }
+    }
+  }
+  return resolved.map((w) => `${w}px`).join(" ");
+}
+function pinnedStatesEqual(a, b) {
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
 }
 var VanillaGridController = class {
   options;
@@ -2240,6 +2328,10 @@ var VanillaGridController = class {
     direction: SORT_DIRECTIONS2.none
   };
   groupByColumns = [];
+  lastOptionsGroupBy = void 0;
+  lastOptionsPinnedState = void 0;
+  lastOptionsInfiniteScrollUp = void 0;
+  lastOptionsInfiniteScrollDown = void 0;
   collapsedGroups = {};
   hiddenRowReasons = {};
   expandedRows = {};
@@ -2247,6 +2339,7 @@ var VanillaGridController = class {
   pinnedColumns = {};
   columnOrder = [];
   columnWidthOverrides = {};
+  viewportWidth = 0;
   currentPage = 1;
   pageSize = 0;
   editingCell = null;
@@ -2283,7 +2376,12 @@ var VanillaGridController = class {
     this.validatorRegistry = createGridValidatorRegistry(this.labels);
     this.columnOrder = options.columnDefs.map((column) => column.name);
     this.groupByColumns = options.grouping?.groupBy ? [...options.grouping.groupBy] : [];
+    this.lastOptionsGroupBy = options.grouping?.groupBy ? [...options.grouping.groupBy] : void 0;
     this.pinnedColumns = buildInitialPinnedState(options.columnDefs);
+    const declaresPin = options.columnDefs.some((col) => col.pinnedLeft === true || col.pinnedRight === true);
+    this.lastOptionsPinnedState = declaresPin ? { ...this.pinnedColumns } : void 0;
+    this.lastOptionsInfiniteScrollUp = options.infiniteScrollUp;
+    this.lastOptionsInfiniteScrollDown = options.infiniteScrollDown;
     this.infiniteScrollState = resetInfiniteScrollState(
       options.infiniteScrollUp === true,
       options.infiniteScrollDown !== false
@@ -2500,20 +2598,41 @@ var VanillaGridController = class {
       }
     }
     if (options.grouping?.groupBy !== void 0) {
-      this.groupByColumns = [...options.grouping.groupBy];
+      const incoming = options.grouping.groupBy;
+      const prev = this.lastOptionsGroupBy;
+      const changed = !prev || prev.length !== incoming.length || prev.some((col, i) => col !== incoming[i]);
+      if (changed) {
+        this.groupByColumns = [...incoming];
+        this.lastOptionsGroupBy = [...incoming];
+      }
+    } else if (this.lastOptionsGroupBy !== void 0) {
+      this.lastOptionsGroupBy = void 0;
     }
     const declaresPin = options.columnDefs.some(
       (col) => col.pinnedLeft === true || col.pinnedRight === true
     );
     if (declaresPin) {
-      this.pinnedColumns = buildInitialPinnedState(options.columnDefs);
+      const incoming = buildInitialPinnedState(options.columnDefs);
+      const prev = this.lastOptionsPinnedState;
+      if (!prev || !pinnedStatesEqual(prev, incoming)) {
+        this.pinnedColumns = incoming;
+        this.lastOptionsPinnedState = { ...incoming };
+      }
+    } else if (this.lastOptionsPinnedState !== void 0) {
+      this.lastOptionsPinnedState = void 0;
     }
     if (options.infiniteScrollUp !== void 0 || options.infiniteScrollDown !== void 0) {
-      this.infiniteScrollState = setInfiniteScrollDirectionsState(
-        this.infiniteScrollState,
-        options.infiniteScrollUp ?? this.infiniteScrollState.scrollUp,
-        options.infiniteScrollDown ?? this.infiniteScrollState.scrollDown
-      );
+      const upChanged = options.infiniteScrollUp !== void 0 && options.infiniteScrollUp !== this.lastOptionsInfiniteScrollUp;
+      const downChanged = options.infiniteScrollDown !== void 0 && options.infiniteScrollDown !== this.lastOptionsInfiniteScrollDown;
+      if (upChanged || downChanged) {
+        this.infiniteScrollState = setInfiniteScrollDirectionsState(
+          this.infiniteScrollState,
+          options.infiniteScrollUp ?? this.infiniteScrollState.scrollUp,
+          options.infiniteScrollDown ?? this.infiniteScrollState.scrollDown
+        );
+        this.lastOptionsInfiniteScrollUp = options.infiniteScrollUp;
+        this.lastOptionsInfiniteScrollDown = options.infiniteScrollDown;
+      }
     }
     this.apiRegistered = false;
     this.refresh();
@@ -2555,7 +2674,7 @@ var VanillaGridController = class {
       labels: this.labels,
       rowSize: this.getRowSize(),
       visibleColumns: this.visibleColumns,
-      gridTemplateColumns: buildGridTemplateColumns(this.visibleColumns),
+      gridTemplateColumns: buildGridTemplateColumns(this.visibleColumns, this.viewportWidth),
       pipeline: this.pipeline,
       activeFilters: this.activeFilters,
       sortState: this.sortState,
@@ -3206,6 +3325,12 @@ var VanillaGridController = class {
   canResizeColumns() {
     return this.options.enableColumnResizing !== false;
   }
+  setViewportWidth(width) {
+    this.viewportWidth = Math.round(width);
+  }
+  getViewportWidth() {
+    return this.viewportWidth;
+  }
   setColumnWidthOverride(columnName, widthPx) {
     const nextWidth = `${Math.max(88, Math.round(widthPx))}px`;
     this.columnWidthOverrides = { ...this.columnWidthOverrides, [columnName]: nextWidth };
@@ -3218,7 +3343,8 @@ var VanillaGridController = class {
     return buildGridTemplateColumns(
       this.visibleColumns.map(
         (c) => c.name === columnName ? { ...c, width: widthStr } : c
-      )
+      ),
+      this.viewportWidth
     );
   }
   isGroupingEnabled() {
@@ -3455,11 +3581,15 @@ var VanillaGridController = class {
         name: "selectionRowHeaderCol",
         displayName: "",
         width: `${resolvedSelection.selectionRowHeaderWidth}px`,
+        minWidth: resolvedSelection.selectionRowHeaderWidth,
+        maxWidth: resolvedSelection.selectionRowHeaderWidth,
         enableSorting: false,
         enableFiltering: false,
         enableGrouping: false,
         enableCellEdit: false,
         enablePinning: false,
+        enableColumnResizing: false,
+        enableColumnMoving: false,
         align: "center"
       };
       if (!this.visibleColumns.some((c) => c.name === "selectionRowHeaderCol")) {
@@ -5136,10 +5266,16 @@ var UiGridStandaloneElement = class extends HTMLElement {
   /** @internal */
   ensureController(options) {
     if (this.controller) {
+      if (this.clientWidth > 0) {
+        this.controller.setViewportWidth(this.clientWidth);
+      }
       this.controller.setOptions(options);
       return;
     }
     this.controller = createVanillaGridController(options);
+    if (this.clientWidth > 0) {
+      this.controller.setViewportWidth(this.clientWidth);
+    }
     this.controller.setCellNavScrollHandler((rowId, columnName) => {
       if (!rowId || !columnName) return;
       this.scrollFocusedRowIntoView(rowId);
@@ -5273,6 +5409,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
     virtualBody.innerHTML = itemsToRender.map((item, index) => this.renderDisplayItem(item, startIndex + index)).join("");
     this.lastItemsFingerprint = this.fingerprintItems(itemsToRender);
     this.lastVirtualOffset = virtualOffset;
+    this.frameworkSlots.flush();
   }
   /** @internal */
   render() {
@@ -5372,10 +5509,12 @@ var UiGridStandaloneElement = class extends HTMLElement {
     if (this.autoResizeObserver) return;
     if (typeof ResizeObserver === "undefined") return;
     this.autoResizeObserver = new ResizeObserver((entries) => {
-      const options = this.snapshot?.options;
-      if (options?.enableAutoResize === false) return;
       const entry = entries[0];
       if (!entry) return;
+      const newWidth = entry.contentRect.width;
+      if (this.controller && newWidth > 0) {
+        this.controller.setViewportWidth(newWidth);
+      }
       if (this.autoResizeDebounceHandle !== null) {
         cancelAnimationFrame(this.autoResizeDebounceHandle);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornery/ui-grid-vanilla",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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": "1.0.0"
+    "@ornery/ui-grid-core": "1.0.2"
   },
   "devDependencies": {
     "happy-dom": "^20.9.0",

package/src/auto-resize.test.ts

@@ -160,13 +160,14 @@ describe('enableAutoResize (ResizeObserver)', () => {
     expect(renderSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('does not trigger render when enableAutoResize is false', () => {
+  it('still re-renders on resize even with enableAutoResize false (column widths need recalculation)', () => {
     document.body.appendChild(element);
     element.options = {
       id: 'test-grid',
       data: [{ name: 'Alice' }],
       columnDefs: [{ name: 'name' }],
       enableAutoResize: false,
+      enableMinHeightCheck: false,
     };
 
     const renderSpy = vi.spyOn(element as any, 'render');
@@ -177,8 +178,8 @@ describe('enableAutoResize (ResizeObserver)', () => {
 
     flushRaf();
 
-    // The observer callback bails when enableAutoResize is false
-    expect(renderSpy).not.toHaveBeenCalled();
+    // Resize always triggers render for column width recalculation
+    expect(renderSpy).toHaveBeenCalledTimes(1);
   });
 
   it('cancels pending rAF on teardown', () => {

package/src/events.ts

@@ -664,6 +664,12 @@ export function bindEvents(el: UiGridStandaloneElement): void {
       return;
     }
 
+    const colDef = el.snapshot.visibleColumns.find((c) => c.name === columnName);
+    if (colDef?.enableColumnMoving === false) {
+      event.preventDefault();
+      return;
+    }
+
     el.draggedColumnName = columnName;
     el.dropTargetColumnName = null;
     dragEvent.dataTransfer.effectAllowed = 'move';
@@ -681,6 +687,9 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     const columnName = headerCell.dataset['column'];
     if (!columnName || columnName === el.draggedColumnName) return;
 
+    const colDef = el.snapshot?.visibleColumns.find((c) => c.name === columnName);
+    if (colDef?.enableColumnMoving === false) return;
+
     event.preventDefault();
     dragEvent.dataTransfer.dropEffect = 'move';
 

package/src/focus.ts

@@ -329,25 +329,51 @@ export function matchesKeyOverride(
 }
 
 /**
- * Measure the widest `scrollWidth` across a column's header / filter /
- * body cells so the auto-resize double-click on the header divider can
- * size the column to its actual rendered content. Returns a px value
- * (plus a small padding fudge).
+ * Measure the natural content width of a column by cloning visible cells
+ * into a hidden max-content container. This avoids measuring the CSS Grid
+ * track width (which just reflects the current column size) and instead
+ * returns the width the content actually needs.
  */
 export function measureAutoColumnWidth(el: UiGridStandaloneElement, columnName: string): number {
   const root = el.shadowRoot;
   if (root == null) return 176;
   const escaped = cssEscape(columnName);
-  const selectors = [
-    `.header-cell[data-column="${escaped}"]`,
-    `.filter-cell[data-column="${escaped}"]`,
-    `.body-cell[data-column="${escaped}"] .cell-shell`,
-  ];
+
+  const probe = document.createElement('div');
+  probe.style.cssText = 'position:absolute;top:-9999px;left:-9999px;width:max-content;visibility:hidden;';
+  root.appendChild(probe);
+
   let maxWidth = 0;
-  for (const selector of selectors) {
-    for (const target of root.querySelectorAll<HTMLElement>(selector)) {
-      maxWidth = Math.max(maxWidth, target.scrollWidth);
-    }
+
+  // Header cell: clone and measure at natural width.
+  for (const header of root.querySelectorAll<HTMLElement>(`.header-cell[data-column="${escaped}"]`)) {
+    const clone = header.cloneNode(true) as HTMLElement;
+    clone.style.cssText = 'display:grid;grid-template-columns:auto auto;gap:inherit;padding:inherit;width:max-content;';
+    probe.appendChild(clone);
+    maxWidth = Math.max(maxWidth, clone.scrollWidth);
+    probe.removeChild(clone);
   }
-  return maxWidth + 12;
+
+  // Filter cell: both custom element and class-based fallback.
+  for (const filter of root.querySelectorAll<HTMLElement>(`ui-grid-filter-cell[data-column="${escaped}"], .filter-cell[data-column="${escaped}"]`)) {
+    const clone = filter.cloneNode(true) as HTMLElement;
+    clone.style.cssText = 'display:block;width:max-content;';
+    probe.appendChild(clone);
+    maxWidth = Math.max(maxWidth, clone.scrollWidth);
+    probe.removeChild(clone);
+  }
+
+  // Body cells: clone .cell-shell content and measure.
+  for (const cell of root.querySelectorAll<HTMLElement>(`.body-cell[data-column="${escaped}"]`)) {
+    const shell = cell.querySelector<HTMLElement>('.cell-shell');
+    if (!shell) continue;
+    const clone = shell.cloneNode(true) as HTMLElement;
+    clone.style.cssText = 'display:flex;width:max-content;';
+    probe.appendChild(clone);
+    maxWidth = Math.max(maxWidth, clone.scrollWidth);
+    probe.removeChild(clone);
+  }
+
+  root.removeChild(probe);
+  return Math.max(88, maxWidth + 12);
 }

package/src/grid-controller.ts

@@ -201,8 +201,94 @@ function orderVisibleColumns(
     .sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
 }
 
-function buildGridTemplateColumns(columns: readonly GridColumnDef[]): string {
-  return columns.map((column) => gridColumnWidth(column)).join(' ');
+const DEFAULT_COL_MIN_WIDTH = 176;
+
+/**
+ * Resolve column widths to fixed px values, mirroring the old ui-grid's
+ * `updateColumnWidths` / `drawnWidth` approach. Every cell (header, filter,
+ * body) gets the exact same px track size — alignment guaranteed regardless
+ * of container width or scrollbar presence.
+ *
+ * Algorithm (ported from GridRenderContainer.prototype.updateColumnWidths):
+ * 1. Fixed-px columns: use their declared width directly.
+ * 2. Percentage columns: resolve against availableWidth.
+ * 3. Flex columns (*, 1fr, minmax): divide remaining space equally.
+ * 4. Leftover/excess pixels distributed 1px at a time for pixel-perfect fit.
+ */
+function buildGridTemplateColumns(columns: readonly GridColumnDef[], viewportWidth?: number): string {
+  if (!viewportWidth || viewportWidth <= 0) {
+    return columns.map((column) => gridColumnWidth(column)).join(' ');
+  }
+
+  const availableWidth = viewportWidth;
+  const resolved: number[] = new Array(columns.length);
+  const flexIndices: number[] = [];
+  let usedWidth = 0;
+
+  for (let i = 0; i < columns.length; i++) {
+    const raw = columns[i].width;
+    const minWidth = columns[i].minWidth;
+    const maxWidth = columns[i].maxWidth ?? Infinity;
+
+    if (raw && raw.endsWith('px')) {
+      let px = parseInt(raw, 10);
+      if (minWidth != null) px = Math.max(minWidth, px);
+      px = Math.min(maxWidth, px);
+      resolved[i] = px;
+      usedWidth += px;
+    } else if (raw && raw.endsWith('%')) {
+      const pct = parseInt(raw.replace(/%/g, ''), 10);
+      let w = Math.round((pct / 100) * availableWidth);
+      if (minWidth != null) w = Math.max(minWidth, w);
+      w = Math.min(maxWidth, w);
+      resolved[i] = w;
+      usedWidth += w;
+    } else {
+      flexIndices.push(i);
+      resolved[i] = 0;
+    }
+  }
+
+  if (flexIndices.length > 0) {
+    const remaining = Math.max(0, availableWidth - usedWidth);
+    const perFlex = Math.floor(remaining / flexIndices.length);
+
+    for (const idx of flexIndices) {
+      const minWidth = columns[idx].minWidth ?? DEFAULT_COL_MIN_WIDTH;
+      const maxWidth = columns[idx].maxWidth ?? Infinity;
+      const w = Math.max(minWidth, Math.min(maxWidth, perFlex));
+      resolved[idx] = w;
+      usedWidth += w;
+    }
+
+    // Distribute leftover pixels one at a time (old grid's processColumnUpwards)
+    let leftover = availableWidth - usedWidth;
+    let changed = true;
+    while (leftover > 0 && changed) {
+      changed = false;
+      for (const idx of flexIndices) {
+        if (leftover <= 0) break;
+        const maxWidth = columns[idx].maxWidth ?? Infinity;
+        if (resolved[idx] < maxWidth) {
+          resolved[idx]++;
+          leftover--;
+          changed = true;
+        }
+      }
+    }
+  }
+
+  return resolved.map((w) => `${w}px`).join(' ');
+}
+
+function pinnedStatesEqual(a: PinnedColumnState, b: PinnedColumnState): boolean {
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
 }
 
 export class VanillaGridController {
@@ -213,6 +299,10 @@ export class VanillaGridController {
     direction: SORT_DIRECTIONS.none,
   };
   private groupByColumns: string[] = [];
+  private lastOptionsGroupBy: string[] | undefined = undefined;
+  private lastOptionsPinnedState: PinnedColumnState | undefined = undefined;
+  private lastOptionsInfiniteScrollUp: boolean | undefined = undefined;
+  private lastOptionsInfiniteScrollDown: boolean | undefined = undefined;
   private collapsedGroups: Record<string, boolean> = {};
   private hiddenRowReasons: Record<string, string[]> = {};
   private expandedRows: Record<string, boolean> = {};
@@ -220,6 +310,7 @@ export class VanillaGridController {
   private pinnedColumns: PinnedColumnState = {};
   private columnOrder: string[] = [];
   private columnWidthOverrides: Record<string, string> = {};
+  private viewportWidth = 0;
   private currentPage = 1;
   private pageSize = 0;
   private editingCell: GridCellPosition | null = null;
@@ -262,7 +353,12 @@ export class VanillaGridController {
     this.validatorRegistry = createGridValidatorRegistry(this.labels);
     this.columnOrder = options.columnDefs.map((column) => column.name);
     this.groupByColumns = options.grouping?.groupBy ? [...options.grouping.groupBy] : [];
+    this.lastOptionsGroupBy = options.grouping?.groupBy ? [...options.grouping.groupBy] : undefined;
     this.pinnedColumns = buildInitialPinnedState(options.columnDefs);
+    const declaresPin = options.columnDefs.some((col) => col.pinnedLeft === true || col.pinnedRight === true);
+    this.lastOptionsPinnedState = declaresPin ? { ...this.pinnedColumns } : undefined;
+    this.lastOptionsInfiniteScrollUp = options.infiniteScrollUp;
+    this.lastOptionsInfiniteScrollDown = options.infiniteScrollDown;
 
     this.infiniteScrollState = resetInfiniteScrollState(
       options.infiniteScrollUp === true,
@@ -519,35 +615,53 @@ export class VanillaGridController {
       }
     }
 
-    // Apply declarative grouping from options when provided. Matches the
-    // Angular element's behaviour — the consumer can set
-    // `grouping: { groupBy: [...] }` and it takes effect immediately.
-    // When the option is absent, leave the current groupByColumns untouched
-    // so interactive toggles persist across non-grouping option updates.
+    // Apply declarative grouping only when the consumer's value structurally
+    // changed from what was last provided via options. This lets interactive
+    // toggles persist across re-renders that pass the same grouping config.
     if (options.grouping?.groupBy !== undefined) {
-      this.groupByColumns = [...options.grouping.groupBy];
+      const incoming = options.grouping.groupBy;
+      const prev = this.lastOptionsGroupBy;
+      const changed = !prev || prev.length !== incoming.length || prev.some((col, i) => col !== incoming[i]);
+      if (changed) {
+        this.groupByColumns = [...incoming];
+        this.lastOptionsGroupBy = [...incoming];
+      }
+    } else if (this.lastOptionsGroupBy !== undefined) {
+      this.lastOptionsGroupBy = undefined;
     }
 
-    // Re-seed pinned state from columnDefs whenever a columnDef declares
-    // `pinnedLeft` / `pinnedRight`. This mirrors the Angular element, which
-    // re-derives pinned state on every options update, so switching demo
-    // scenarios (different column sets) picks up their declarative pins.
+    // Re-seed pinned state from columnDefs only when the declarative pin
+    // configuration structurally changed from the last options pass. This
+    // prevents interactive un-pin actions from being clobbered by re-renders
+    // that pass the same columnDefs.
     const declaresPin = options.columnDefs.some(
       (col) => col.pinnedLeft === true || col.pinnedRight === true,
     );
     if (declaresPin) {
-      this.pinnedColumns = buildInitialPinnedState(options.columnDefs);
+      const incoming = buildInitialPinnedState(options.columnDefs);
+      const prev = this.lastOptionsPinnedState;
+      if (!prev || !pinnedStatesEqual(prev, incoming)) {
+        this.pinnedColumns = incoming;
+        this.lastOptionsPinnedState = { ...incoming };
+      }
+    } else if (this.lastOptionsPinnedState !== undefined) {
+      this.lastOptionsPinnedState = undefined;
     }
 
-    // Re-seed infinite-scroll directions when the options declare them,
-    // so consumers can flip scrollUp/scrollDown through `grid.options`
-    // without needing to go through setScrollDirections.
+    // Re-seed infinite-scroll directions only when the values structurally
+    // changed from the last options pass.
     if (options.infiniteScrollUp !== undefined || options.infiniteScrollDown !== undefined) {
-      this.infiniteScrollState = setInfiniteScrollDirectionsState(
-        this.infiniteScrollState,
-        options.infiniteScrollUp ?? this.infiniteScrollState.scrollUp,
-        options.infiniteScrollDown ?? this.infiniteScrollState.scrollDown,
-      );
+      const upChanged = options.infiniteScrollUp !== undefined && options.infiniteScrollUp !== this.lastOptionsInfiniteScrollUp;
+      const downChanged = options.infiniteScrollDown !== undefined && options.infiniteScrollDown !== this.lastOptionsInfiniteScrollDown;
+      if (upChanged || downChanged) {
+        this.infiniteScrollState = setInfiniteScrollDirectionsState(
+          this.infiniteScrollState,
+          options.infiniteScrollUp ?? this.infiniteScrollState.scrollUp,
+          options.infiniteScrollDown ?? this.infiniteScrollState.scrollDown,
+        );
+        this.lastOptionsInfiniteScrollUp = options.infiniteScrollUp;
+        this.lastOptionsInfiniteScrollDown = options.infiniteScrollDown;
+      }
     }
 
     this.apiRegistered = false;
@@ -593,7 +707,7 @@ export class VanillaGridController {
       labels: this.labels,
       rowSize: this.getRowSize(),
       visibleColumns: this.visibleColumns,
-      gridTemplateColumns: buildGridTemplateColumns(this.visibleColumns),
+      gridTemplateColumns: buildGridTemplateColumns(this.visibleColumns, this.viewportWidth),
       pipeline: this.pipeline,
       activeFilters: this.activeFilters,
       sortState: this.sortState,
@@ -1377,6 +1491,14 @@ export class VanillaGridController {
     return this.options.enableColumnResizing !== false;
   }
 
+  setViewportWidth(width: number): void {
+    this.viewportWidth = Math.round(width);
+  }
+
+  getViewportWidth(): number {
+    return this.viewportWidth;
+  }
+
   setColumnWidthOverride(columnName: string, widthPx: number): void {
     const nextWidth = `${Math.max(88, Math.round(widthPx))}px`;
     this.columnWidthOverrides = { ...this.columnWidthOverrides, [columnName]: nextWidth };
@@ -1391,6 +1513,7 @@ export class VanillaGridController {
       this.visibleColumns.map((c) =>
         c.name === columnName ? { ...c, width: widthStr } : c,
       ),
+      this.viewportWidth,
     );
   }
 
@@ -1691,11 +1814,15 @@ export class VanillaGridController {
         name: 'selectionRowHeaderCol',
         displayName: '',
         width: `${resolvedSelection.selectionRowHeaderWidth}px`,
+        minWidth: resolvedSelection.selectionRowHeaderWidth,
+        maxWidth: resolvedSelection.selectionRowHeaderWidth,
         enableSorting: false,
         enableFiltering: false,
         enableGrouping: false,
         enableCellEdit: false,
         enablePinning: false,
+        enableColumnResizing: false,
+        enableColumnMoving: false,
         align: 'center',
       };
       // Dedupe if already present (setOptions could be re-entering).

package/src/render.ts

@@ -105,7 +105,7 @@ export function renderHeaderCell(
   const pinLabel = isPinned
     ? (el.snapshot?.labels.unpin ?? 'Unpin')
     : (el.snapshot?.labels.pinColumn ?? 'Pin');
-  const canResize = controller.canResizeColumns();
+  const canResize = controller.canResizeColumns() && column.enableColumnResizing !== false;
   const headerValue = escapeHtml(formatGridHeaderDisplayValue(buildGridHeaderContext(column)));
   const resizerHtml = canResize
     ? resizerMarkup(escapeHtml(column.name), escapeHtml(headerValue))
@@ -116,7 +116,7 @@ export function renderHeaderCell(
   const isPinMenuOpen = el.openPinMenuColumn === column.name;
   const isDragTarget = el.dropTargetColumnName === column.name;
   const isDragging = el.draggedColumnName === column.name;
-  const isDraggable = canGridMoveColumns(options);
+  const isDraggable = canGridMoveColumns(options) && column.enableColumnMoving !== false;
   const className = headerCellClass(
     sortDirection !== SORT_DIRECTIONS.none,
     isPinned,

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

@@ -709,11 +709,17 @@ export class UiGridStandaloneElement extends HTMLElement {
   /** @internal */
   ensureController(options: VanillaGridOptions): void {
     if (this.controller) {
+      if (this.clientWidth > 0) {
+        this.controller.setViewportWidth(this.clientWidth);
+      }
       this.controller.setOptions(options);
       return;
     }
 
     this.controller = createVanillaGridController(options);
+    if (this.clientWidth > 0) {
+      this.controller.setViewportWidth(this.clientWidth);
+    }
     // Let the controller's cellNav.scrollToFocus delegate into our
     // element's scroll-and-focus helpers.
     this.controller.setCellNavScrollHandler((rowId, columnName) => {
@@ -883,6 +889,8 @@ export class UiGridStandaloneElement extends HTMLElement {
     // next full render() can take the fast per-cell patch path.
     this.lastItemsFingerprint = this.fingerprintItems(itemsToRender);
     this.lastVirtualOffset = virtualOffset;
+
+    this.frameworkSlots.flush();
   }
 
   /** @internal */
@@ -1011,12 +1019,14 @@ export class UiGridStandaloneElement extends HTMLElement {
     if (typeof ResizeObserver === 'undefined') return;
 
     this.autoResizeObserver = new ResizeObserver((entries) => {
-      const options = this.snapshot?.options;
-      if (options?.enableAutoResize === false) return;
-
       const entry = entries[0];
       if (!entry) return;
 
+      const newWidth = entry.contentRect.width;
+      if (this.controller && newWidth > 0) {
+        this.controller.setViewportWidth(newWidth);
+      }
+
       if (this.autoResizeDebounceHandle !== null) {
         cancelAnimationFrame(this.autoResizeDebounceHandle);
       }