@zauru-sdk/components 6.5.5 → 6.5.6

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.6](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.5...@zauru-sdk/components@6.5.6) (2026-09-17)
+
+
+### Bug Fixes
+
+* resolver width % de ZauruTable contra el contenedor ([9518a4d](https://github.com/intuitiva/zauru-typescript-sdk/commit/9518a4d8d40d7655b26e0e25450e20cba271ac34))
+
+
+
+
+
 ## [6.5.5](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.4...@zauru-sdk/components@6.5.5) (2026-09-16)
 
 

package/dist/esm/Table/ZauruTable.js

@@ -13,15 +13,15 @@ const headerTextWrapStyle = {
     wordBreak: "normal",
     lineHeight: "1.25",
 };
-const fullContentWidthStyle = {
-    width: "max-content",
+const fillContainerWidthStyle = {
+    width: "100%",
     minWidth: "100%",
     maxWidth: "none",
 };
 const customStyles = {
     table: {
         style: {
-            ...fullContentWidthStyle,
+            ...fillContainerWidthStyle,
         },
     },
     tableWrapper: {
@@ -43,7 +43,7 @@ const customStyles = {
     },
     head: {
         style: {
-            ...fullContentWidthStyle,
+            ...fillContainerWidthStyle,
         },
     },
     headRow: {
@@ -51,7 +51,7 @@ const customStyles = {
             minHeight: "40px",
             height: "auto",
             alignItems: "stretch",
-            ...fullContentWidthStyle,
+            ...fillContainerWidthStyle,
         },
         denseStyle: {
             minHeight: "36px",
@@ -98,7 +98,7 @@ const customStyles = {
     },
     rows: {
         style: {
-            ...fullContentWidthStyle,
+            ...fillContainerWidthStyle,
         },
         highlightOnHoverStyle: {
             backgroundColor: "rgb(230, 244, 244)",
@@ -233,7 +233,18 @@ export const ZauruTable = (props) => {
             if (!column || typeof column !== "object") {
                 return column;
             }
-            return { wrap: true, ...column };
+            const next = { wrap: true, ...column };
+            // RDT `width` sets both min-width and max-width, wiping a px floor.
+            // Keep % as flex-basis so minWidth/maxWidth/grow still apply.
+            if (typeof next.width === "string" && next.width.endsWith("%")) {
+                const pct = next.width;
+                delete next.width;
+                next.style = {
+                    flexBasis: pct,
+                    ...next.style,
+                };
+            }
+            return next;
         })
         : columns;
     return (_jsx("div", { className: "w-full min-w-0 max-w-full overflow-x-auto", children: _jsx(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: normalizedColumns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, expandableRows: !!expandable, expandOnRowClicked: !!expandable, expandableRowExpanded: expandable ? expandable.expandableRowExpanded : undefined, expandableRowsComponent: expandable ? expandable.expandableRowsComponent : undefined, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.5.5",
+  "version": "6.5.6",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "c157999c77c4d4a5cbb926466b8f3947b00f12f4"
+  "gitHead": "563f879c95b2f3e76bc28623a9e09c8a103c599e"
 }

package/src/Table/ZauruTable.tsx

@@ -20,8 +20,8 @@ const headerTextWrapStyle = {
   lineHeight: "1.25",
 } as const;
 
-const fullContentWidthStyle = {
-  width: "max-content",
+const fillContainerWidthStyle = {
+  width: "100%",
   minWidth: "100%",
   maxWidth: "none",
 } as const;
@@ -29,7 +29,7 @@ const fullContentWidthStyle = {
 const customStyles: TableStyles = {
   table: {
     style: {
-      ...fullContentWidthStyle,
+      ...fillContainerWidthStyle,
     },
   },
   tableWrapper: {
@@ -51,7 +51,7 @@ const customStyles: TableStyles = {
   },
   head: {
     style: {
-      ...fullContentWidthStyle,
+      ...fillContainerWidthStyle,
     },
   },
   headRow: {
@@ -59,7 +59,7 @@ const customStyles: TableStyles = {
       minHeight: "40px",
       height: "auto",
       alignItems: "stretch",
-      ...fullContentWidthStyle,
+      ...fillContainerWidthStyle,
     },
     denseStyle: {
       minHeight: "36px",
@@ -106,7 +106,7 @@ const customStyles: TableStyles = {
   },
   rows: {
     style: {
-      ...fullContentWidthStyle,
+      ...fillContainerWidthStyle,
     },
     highlightOnHoverStyle: {
       backgroundColor: "rgb(230, 244, 244)",
@@ -312,7 +312,18 @@ export const ZauruTable = (props: Props) => {
         if (!column || typeof column !== "object") {
           return column;
         }
-        return { wrap: true, ...column };
+        const next = { wrap: true, ...column };
+        // RDT `width` sets both min-width and max-width, wiping a px floor.
+        // Keep % as flex-basis so minWidth/maxWidth/grow still apply.
+        if (typeof next.width === "string" && next.width.endsWith("%")) {
+          const pct = next.width;
+          delete next.width;
+          next.style = {
+            flexBasis: pct,
+            ...next.style,
+          };
+        }
+        return next;
       })
     : columns;