@alaarab/ogrid-vue 2.1.11 → 2.1.12

package/dist/esm/index.js

@@ -3314,7 +3314,10 @@ function createDataGridTable(ui) {
           visibleCols,
           hasCheckboxCol,
           hasRowNumbersCol,
-          colOffset: _colOffset
+          colOffset: _colOffset,
+          containerWidth,
+          minTableWidth,
+          desiredTableWidth
         } = layout;
         const currentPage = p.currentPage ?? 1;
         const pageSize = p.pageSize ?? 25;
@@ -3354,6 +3357,7 @@ function createDataGridTable(ui) {
         const ariaLabel = p["aria-label"];
         const ariaLabelledBy = p["aria-labelledby"];
         const fitToContent = layoutMode === "content";
+        const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
         const headerRows = headerRowsComputed.value;
         const editCallbacks = { commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit };
         const interactionHandlers = { handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu };
@@ -3450,7 +3454,7 @@ function createDataGridTable(ui) {
           minHeight: isLoading && items.length === 0 ? "200px" : "0",
           width: fitToContent ? "fit-content" : "100%",
           maxWidth: "100%",
-          overflowX: suppressHorizontalScroll ? "hidden" : "auto",
+          overflowX: suppressHorizontalScroll ? "hidden" : allowOverflowX ? "auto" : "hidden",
           overflowY: "auto",
           backgroundColor: "#fff",
           willChange: "scroll-position"
@@ -3472,11 +3476,11 @@ function createDataGridTable(ui) {
             onMousedown: onWrapperMousedown,
             onKeydown: handleGridKeyDown,
             onContextmenu,
-            "data-suppress-scroll": suppressHorizontalScroll ? "true" : void 0,
+            "data-overflow-x": allowOverflowX ? "true" : "false",
             style: wrapperStyle
           }, [
             h("div", { class: "ogrid-scroll-wrapper" }, [
-              h("div", { style: { width: "max-content", minWidth: "100%", overflow: "clip" } }, [
+              h("div", { style: { minWidth: allowOverflowX ? `${minTableWidth}px` : void 0 } }, [
                 h("div", {
                   ref: (el) => {
                     tableContainerRef.value = el;
@@ -3497,7 +3501,7 @@ function createDataGridTable(ui) {
                     },
                     class: "ogrid-table",
                     role: "grid",
-                    style: { width: "100%", minWidth: "max-content" }
+                    style: { minWidth: `${minTableWidth}px` }
                   }, [
                     // Header
                     h(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.11"
+    "@alaarab/ogrid-core": "2.1.12"
   },
   "peerDependencies": {
     "vue": "^3.3.0"