@zauru-sdk/components 6.5.4 → 6.5.6

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 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)
+
+
+### Bug Fixes
+
+* estirar filas de ZauruTable al ancho del contenido al hacer scroll ([de57d25](https://github.com/intuitiva/zauru-typescript-sdk/commit/de57d25243d907a889aba0a5e05328646b50b5cb))
+
+
+
+
+
 ## [6.5.4](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.3...@zauru-sdk/components@6.5.4) (2026-09-16)
 
 

package/dist/esm/Table/ZauruTable.js

@@ -13,7 +13,17 @@ const headerTextWrapStyle = {
     wordBreak: "normal",
     lineHeight: "1.25",
 };
+const fillContainerWidthStyle = {
+    width: "100%",
+    minWidth: "100%",
+    maxWidth: "none",
+};
 const customStyles = {
+    table: {
+        style: {
+            ...fillContainerWidthStyle,
+        },
+    },
     tableWrapper: {
         style: {
             display: "block",
@@ -31,11 +41,17 @@ const customStyles = {
             overflowX: "auto",
         },
     },
+    head: {
+        style: {
+            ...fillContainerWidthStyle,
+        },
+    },
     headRow: {
         style: {
             minHeight: "40px",
             height: "auto",
             alignItems: "stretch",
+            ...fillContainerWidthStyle,
         },
         denseStyle: {
             minHeight: "36px",
@@ -81,6 +97,9 @@ const customStyles = {
         },
     },
     rows: {
+        style: {
+            ...fillContainerWidthStyle,
+        },
         highlightOnHoverStyle: {
             backgroundColor: "rgb(230, 244, 244)",
             borderBottomColor: "#FFFFFF",
@@ -214,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.4",
+  "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": "322a6b620a8e384a6b221999cfe13628511014fb"
+  "gitHead": "563f879c95b2f3e76bc28623a9e09c8a103c599e"
 }

package/src/Table/ZauruTable.tsx

@@ -20,7 +20,18 @@ const headerTextWrapStyle = {
   lineHeight: "1.25",
 } as const;
 
+const fillContainerWidthStyle = {
+  width: "100%",
+  minWidth: "100%",
+  maxWidth: "none",
+} as const;
+
 const customStyles: TableStyles = {
+  table: {
+    style: {
+      ...fillContainerWidthStyle,
+    },
+  },
   tableWrapper: {
     style: {
       display: "block",
@@ -38,11 +49,17 @@ const customStyles: TableStyles = {
       overflowX: "auto",
     },
   },
+  head: {
+    style: {
+      ...fillContainerWidthStyle,
+    },
+  },
   headRow: {
     style: {
       minHeight: "40px",
       height: "auto",
       alignItems: "stretch",
+      ...fillContainerWidthStyle,
     },
     denseStyle: {
       minHeight: "36px",
@@ -88,6 +105,9 @@ const customStyles: TableStyles = {
     },
   },
   rows: {
+    style: {
+      ...fillContainerWidthStyle,
+    },
     highlightOnHoverStyle: {
       backgroundColor: "rgb(230, 244, 244)",
       borderBottomColor: "#FFFFFF",
@@ -292,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;