@alaarab/ogrid-react-fluent 2.1.11 → 2.1.13

package/dist/esm/index.css

@@ -426,15 +426,15 @@
 .ogrid-fluent__DataGridTable-module__tableWidthAnchor {
   position: relative;
   width: max-content;
-  min-width: 100%;
-  overflow: clip;
+  min-width: var(--data-table-min-width, max-content);
   background: var(--ogrid-bg, #fff);
+  overflow-x: clip;
 }
 .ogrid-fluent__DataGridTable-module__tableWrapper {
   position: relative;
   flex: 1;
   min-height: 0;
-  overflow-x: auto;
+  overflow-x: hidden;
   overflow-y: auto;
   width: 100%;
   min-width: 0;
@@ -443,8 +443,8 @@
   background: var(--ogrid-bg, #fff);
   will-change: scroll-position;
 }
-.ogrid-fluent__DataGridTable-module__tableWrapper[data-suppress-scroll=true] {
-  overflow-x: hidden;
+.ogrid-fluent__DataGridTable-module__tableWrapper[data-overflow-x=true] {
+  overflow-x: auto;
 }
 .ogrid-fluent__DataGridTable-module__tableWrapper[data-empty=true] {
   overflow-x: hidden;
@@ -453,8 +453,9 @@
   min-height: 200px;
 }
 .ogrid-fluent__DataGridTable-module__dataTable {
-  width: var(--data-table-width, 100%);
-  min-width: max-content;
+  width: var(--data-table-width, fit-content);
+  max-width: 100%;
+  min-width: var(--data-table-min-width, max-content);
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -957,6 +958,7 @@
 }
 .ogrid-fluent__DataGridTable-module__tableWidthAnchor {
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+  overflow-x: clip;
 }
 .ogrid-fluent__DataGridTable-module__tableWrapper {
   border: none;

package/dist/esm/index.js

@@ -625,7 +625,7 @@ function DataGridTableInner(props) {
     rowHeight,
     rowNumberOffset,
     headerRows,
-    allowOverflowX: _allowOverflowX,
+    allowOverflowX,
     fitToContent,
     editCallbacks,
     interactionHandlers,
@@ -765,7 +765,7 @@ function DataGridTableInner(props) {
         "data-empty": showEmptyInGrid ? "true" : void 0,
         "data-loading": isLoading && items.length === 0 ? "true" : void 0,
         "data-column-count": totalColCount,
-        "data-suppress-scroll": o.suppressHorizontalScroll ? "true" : void 0,
+        "data-overflow-x": allowOverflowX ? "true" : "false",
         "data-container-width": containerWidth,
         "data-min-table-width": Math.round(minTableWidth),
         "data-has-selection": rowSelection !== "none" ? "true" : void 0,
@@ -773,7 +773,9 @@ function DataGridTableInner(props) {
         onKeyDown: handleGridKeyDown,
         style: {
           ["--data-table-column-count"]: totalColCount,
-          ["--data-table-width"]: showEmptyInGrid ? "100%" : fitToContent ? "fit-content" : "100%",
+          ["--data-table-width"]: showEmptyInGrid ? "100%" : allowOverflowX ? "fit-content" : fitToContent ? "fit-content" : "100%",
+          ["--data-table-min-width"]: showEmptyInGrid ? "100%" : allowOverflowX ? "max-content" : fitToContent ? "max-content" : "100%",
+          ["--data-table-total-min-width"]: `${minTableWidth}px`,
           ...rowHeight ? { ["--ogrid-row-height"]: `${rowHeight}px` } : {}
         },
         children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.1.11",
+  "version": "2.1.13",
   "description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.1.11"
+    "@alaarab/ogrid-react": "2.1.13"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",