@ornery/ui-grid-vanilla 0.1.9 → 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;
@@ -236,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;
@@ -296,6 +304,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private render;
     private renderHeaderCell;
     private renderFilterCell;
+    private measureAutoColumnWidth;
     private renderDisplayItem;
     private renderBodyCell;
     private renderPagination;

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;
@@ -236,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;
@@ -296,6 +304,7 @@ declare class UiGridStandaloneElement extends HTMLElement {
     private render;
     private renderHeaderCell;
     private renderFilterCell;
+    private measureAutoColumnWidth;
     private renderDisplayItem;
     private renderBodyCell;
     private renderPagination;

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,
@@ -915,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");
@@ -1163,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;
   }
@@ -1583,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;
@@ -1913,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] ?? "";
@@ -1930,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 "";

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,
@@ -957,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");
@@ -1205,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;
   }
@@ -1625,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;
@@ -1955,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] ?? "";
@@ -1972,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 "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornery/ui-grid-vanilla",
-  "version": "0.1.9",
+  "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.9"
+    "@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/ui-grid-standalone.element.ts

@@ -5,8 +5,11 @@ import {
   canGridMoveColumns,
   downloadGridCsvFile,
   exportCsvRows,
+  findNextGridCell,
   formatGridHeaderDisplayValue,
   getCellValue,
+  isGridNavigationKey,
+  isPrintableGridKey,
   sanitizeDownloadFilename,
   type DisplayItem,
   type GridColumnDef,
@@ -283,6 +286,10 @@ export class UiGridStandaloneElement extends HTMLElement {
     if (enableColumnMoving !== undefined)
       this.attributeOptions.enableColumnMoving = enableColumnMoving;
 
+    const enableColumnResizing = this.parseBooleanAttribute('enable-column-resizing');
+    if (enableColumnResizing !== undefined)
+      this.attributeOptions.enableColumnResizing = enableColumnResizing;
+
     const enableCellEdit = this.parseBooleanAttribute('enable-cell-edit');
     if (enableCellEdit !== undefined) this.attributeOptions.enableCellEdit = enableCellEdit;
 
@@ -580,6 +587,14 @@ export class UiGridStandaloneElement extends HTMLElement {
     this.ensureController(this.buildEffectiveOptions(this.activeOptions as VanillaGridOptions));
   }
 
+  get enableColumnResizing(): boolean {
+    return (this.options as any).enableColumnResizing ?? true;
+  }
+  set enableColumnResizing(value: boolean) {
+    this.activeOptions = { ...this.activeOptions, enableColumnResizing: value } as any;
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions as VanillaGridOptions));
+  }
+
   get enableCellEdit(): boolean {
     return this.options.enableCellEdit ?? false;
   }
@@ -1084,12 +1099,65 @@ export class UiGridStandaloneElement extends HTMLElement {
       }
     });
 
+    root.addEventListener('mousedown', (event) => {
+      const target = event.target as HTMLElement | null;
+      if (!target || !this.controller) return;
+
+      const resizer = target.closest<HTMLElement>('.column-resizer[data-column]');
+      if (!resizer || !this.controller.canResizeColumns()) return;
+
+      const columnName = resizer.dataset['column'];
+      if (!columnName) return;
+
+      const headerCell = resizer.closest<HTMLElement>('.header-cell');
+      if (!headerCell) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const startX = (event as MouseEvent).clientX;
+      const startWidth = headerCell.getBoundingClientRect().width;
+      let lastWidth = startWidth;
+
+      const handleMove = (moveEvent: MouseEvent): void => {
+        lastWidth = Math.max(88, startWidth + (moveEvent.clientX - startX));
+
+        // Write directly to DOM — skip full refresh while dragging.
+        const newTemplate = this.controller!.buildTemplateColumnsWithOverride(columnName, lastWidth);
+        const root = this.shadowRoot ?? this;
+        (root as ShadowRoot | HTMLElement).querySelectorAll<HTMLElement>('.header-grid, .filter-grid, .body-grid').forEach((el) => {
+          el.style.gridTemplateColumns = newTemplate;
+        });
+      };
+
+      const handleUp = (): void => {
+        window.removeEventListener('mousemove', handleMove);
+        window.removeEventListener('mouseup', handleUp);
+        // Commit final width once — triggers one full refresh.
+        this.controller!.setColumnWidthOverride(columnName, lastWidth);
+      };
+
+      window.addEventListener('mousemove', handleMove);
+      window.addEventListener('mouseup', handleUp);
+    });
+
     root.addEventListener('dblclick', (event) => {
       const target = event.target as HTMLElement | null;
       if (!target || !this.controller) {
         return;
       }
 
+      const resizer = target.closest<HTMLElement>('.column-resizer[data-column]');
+      if (resizer && this.controller.canResizeColumns()) {
+        const columnName = resizer.dataset['column'];
+        if (columnName) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.controller.setColumnWidthOverride(columnName, this.measureAutoColumnWidth(columnName));
+          return;
+        }
+      }
+
       const cell = target.closest<HTMLElement>('.body-cell');
       if (!cell) {
         return;
@@ -1520,9 +1588,13 @@ export class UiGridStandaloneElement extends HTMLElement {
     const pinLabel = isPinned
       ? (this.snapshot?.labels.unpin ?? 'Unpin')
       : (this.snapshot?.labels.pinColumn ?? 'Pin');
+    const canResize = controller.canResizeColumns();
     const headerValue = escapeHtml(formatGridHeaderDisplayValue(buildGridHeaderContext(column)));
+    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></div>`;
+    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>`;
   }
 
   private renderFilterCell(column: GridColumnDef): string {
@@ -1542,6 +1614,24 @@ export class UiGridStandaloneElement extends HTMLElement {
     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>`;
   }
 
+  private measureAutoColumnWidth(columnName: string): number {
+    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<HTMLElement>(selector)) {
+        maxWidth = Math.max(maxWidth, el.scrollWidth);
+      }
+    }
+    return maxWidth + 12;
+  }
+
   private renderDisplayItem(item: DisplayItem, displayIndex: number): string {
     if (!this.snapshot || !this.controller) {
       return '';