@zauru-sdk/components 6.14.1 → 6.15.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.15.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.14.2...@zauru-sdk/components@6.15.0) (2026-10-28)
+
+
+### Features
+
+* permitir editar GenericDynamicTable sin agregar o borrar filas ([7fc9b41](https://github.com/intuitiva/zauru-typescript-sdk/commit/7fc9b41a7aebf2627a674bc8d9d70b772c378056))
+
+
+
+
+
+## [6.14.2](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.14.1...@zauru-sdk/components@6.14.2) (2026-10-26)
+
+
+### Bug Fixes
+
+* alinear encabezados y celdas de ZauruTable ([46783d1](https://github.com/intuitiva/zauru-typescript-sdk/commit/46783d1f))
+
+
 ## [6.14.1](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.14.0...@zauru-sdk/components@6.14.1) (2026-10-26)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/DynamicTable/GenericDynamicTable.d.ts

@@ -15,8 +15,13 @@ type Props = {
     footerRow?: FooterColumnConfig[];
     thCSSProperties?: React.CSSProperties;
     thElementsClassName?: string;
-    /** Controla si se pueden o no editar los campos (oculta botones y/o deshabilita campos). */
+    /** Controla si se pueden editar los campos. */
     editable?: boolean;
+    /**
+     * Si es false, no muestra agregar/eliminar filas aunque `editable` esté activo.
+     * Útil para catálogos fijos cuyos valores sí se editan.
+     */
+    rowActions?: boolean;
     /** Opciones de búsqueda. */
     searcheables?: SelectFieldOption[];
     /** Activa o desactiva el “skeleton” de carga. */

package/dist/Table/ZauruTable.d.ts

@@ -21,5 +21,7 @@ type Props = TableProps<any> & {
     theme?: "solarized" | "subTable";
     className?: string;
 };
+export declare const normalizeZauruTableColumns: (columns: any) => any;
+export declare const zauruTableFlexBasisCss: (tableClassName: string, columns: any) => string;
 export declare const ZauruTable: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/DynamicTable/GenericDynamicTable.js

@@ -97,12 +97,13 @@ const GenericDynamicTableErrorComponent = ({ name }) => {
  */
 export const GenericDynamicTable = (props) => {
     const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, readOnly = false, // Nuevo prop
-    searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, orientation = "horizontal", maxRows, confirmDelete = true, addRowButtonHandler, rowSummary, } = props;
+    rowActions = true, searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, orientation = "horizontal", maxRows, confirmDelete = true, addRowButtonHandler, rowSummary, } = props;
     /**
      * Definimos una variable interna para saber si los campos son
      * efectivamente editables: solo si `editable` es true y `readOnly` es false.
      */
     const isEditable = editable && !readOnly;
+    const showRowActions = isEditable && rowActions;
     try {
         const [tableData, setTableData] = useState(defaultValue);
         const [deletedData, setDeletedData] = useState([]);
@@ -174,9 +175,9 @@ export const GenericDynamicTable = (props) => {
             if (orientation === "horizontal") {
                 return (_jsxs("tr", { style: { ...thCSSProperties }, children: [rendereableColumns.map((column, index) => {
                             const ancho = column.width ??
-                                (isEditable ? 94 : 100) / (rendereableColumns.length ?? 1);
+                                (showRowActions ? 94 : 100) / (rendereableColumns.length ?? 1);
                             return (_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName} ${column.headerClassName || ""}`, style: { width: `${ancho}%` }, children: column.label }, index));
-                        }), isEditable && _jsx("th", { style: { width: "4%" } })] }));
+                        }), showRowActions && _jsx("th", { style: { width: "4%" } })] }));
             }
             else {
                 return null;
@@ -186,13 +187,13 @@ export const GenericDynamicTable = (props) => {
             const rendereableColumns = columns.filter((column) => column.type !== "hidden");
             if (orientation === "horizontal") {
                 const rowClassName = index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "";
-                const summaryColSpan = rendereableColumns.length + (isEditable ? 1 : 0);
+                const summaryColSpan = rendereableColumns.length + (showRowActions ? 1 : 0);
                 const summaryContent = rowSummary?.(rowData);
-                return (_jsxs(React.Fragment, { children: [_jsxs("tr", { className: rowClassName, children: [rendereableColumns.map((column) => renderCell(rowData, column)), isEditable && renderDeleteButton(rowData)] }), summaryContent ? (_jsx("tr", { className: rowClassName, children: _jsxs("td", { colSpan: summaryColSpan, className: "px-2 pb-3 pt-0 text-sm text-gray-700 border-b border-gray-300", children: [_jsx("span", { className: "font-medium text-gray-500", children: "Resumen: " }), summaryContent] }) })) : null] }, rowData.id));
+                return (_jsxs(React.Fragment, { children: [_jsxs("tr", { className: rowClassName, children: [rendereableColumns.map((column) => renderCell(rowData, column)), showRowActions && renderDeleteButton(rowData)] }), summaryContent ? (_jsx("tr", { className: rowClassName, children: _jsxs("td", { colSpan: summaryColSpan, className: "px-2 pb-3 pt-0 text-sm text-gray-700 border-b border-gray-300", children: [_jsx("span", { className: "font-medium text-gray-500", children: "Resumen: " }), summaryContent] }) })) : null] }, rowData.id));
             }
             else {
                 // Orientación vertical
-                return rendereableColumns.map((column) => (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName} ${column.headerClassName || ""}`, children: column.label }), renderCell(rowData, column), isEditable &&
+                return rendereableColumns.map((column) => (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName} ${column.headerClassName || ""}`, children: column.label }), renderCell(rowData, column), showRowActions &&
                             column === rendereableColumns[rendereableColumns.length - 1] &&
                             renderDeleteButton(rowData)] }, `${rowData.id}-${column.name}`)));
             }
@@ -303,7 +304,7 @@ export const GenericDynamicTable = (props) => {
         };
         return (_jsxs(_Fragment, { children: [name && (_jsxs(_Fragment, { children: [_jsx(GenericDynamicTableErrorComponent, { name: name }), _jsx("input", { name: name, type: "hidden", value: JSON.stringify(tableData), hidden: true }), _jsx("input", { name: `deleted_${name}`, type: "hidden", value: JSON.stringify(deletedData), hidden: true })] })), _jsxs("div", { className: `${className}`, children: [searcheables.length > 0 && (_jsx("div", { children: _jsx(TextField, { className: "mb-2", name: "search", title: `Buscar por: ${searcheables
                                     .map((x) => x.label)
-                                    .join(", ")}`, onChange: handleChangeSearch, disabled: loading || readOnly }) })), _jsxs("table", { className: "w-full", children: [orientation === "horizontal" && _jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), isEditable && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: orientation === "horizontal" ? columns.length + 1 : 2, className: "align-middle text-right", children: (!maxRows || tableData.length < maxRows) && (_jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
+                                    .join(", ")}`, onChange: handleChangeSearch, disabled: loading || readOnly }) })), _jsxs("table", { className: "w-full", children: [orientation === "horizontal" && _jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), showRowActions && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: orientation === "horizontal" ? columns.length + 1 : 2, className: "align-middle text-right", children: (!maxRows || tableData.length < maxRows) && (_jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
                                                     event.preventDefault();
                                                     event.stopPropagation();
                                                     if (addRowButtonHandler) {
@@ -317,7 +318,7 @@ export const GenericDynamicTable = (props) => {
                                                 .map((column, index) => {
                                                 const footerCell = footerRow.find((fc) => fc.name === column.name);
                                                 return (_jsx("td", { colSpan: orientation === "vertical" ? 2 : 1, className: `align-middle ${footerCell?.className || ""}`, children: footerCell ? (footerCell.cell ? (footerCell.cell(tableData)) : (footerCell.content)) : (_jsx(_Fragment, {})) }, index));
-                                            }), isEditable && _jsx("td", {})] }) }))] }), paginated && totalPages() > 1 && (_jsxs("div", { className: "flex justify-between items-center mt-4", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Button, { type: "button", disabled: currentPage === 1 || readOnly, onClickSave: () => setCurrentPage((old) => Math.max(old - 1, 1)), children: "Anterior" }), _jsx("span", { className: "mx-2", children: `Página ${currentPage} de ${totalPages()}` }), _jsx(Button, { type: "button", disabled: currentPage === totalPages() || readOnly, onClickSave: () => setCurrentPage((old) => Math.min(old + 1, totalPages())), children: "Siguiente" })] }), _jsx("div", { children: _jsx("select", { value: itemsPerPage, onChange: (e) => {
+                                            }), showRowActions && _jsx("td", {})] }) }))] }), paginated && totalPages() > 1 && (_jsxs("div", { className: "flex justify-between items-center mt-4", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Button, { type: "button", disabled: currentPage === 1 || readOnly, onClickSave: () => setCurrentPage((old) => Math.max(old - 1, 1)), children: "Anterior" }), _jsx("span", { className: "mx-2", children: `Página ${currentPage} de ${totalPages()}` }), _jsx(Button, { type: "button", disabled: currentPage === totalPages() || readOnly, onClickSave: () => setCurrentPage((old) => Math.min(old + 1, totalPages())), children: "Siguiente" })] }), _jsx("div", { children: _jsx("select", { value: itemsPerPage, onChange: (e) => {
                                             setItemsPerPage(Number(e.target.value));
                                             setCurrentPage(1); // resetear la página al cambiar los elementos por página
                                         }, children: itemsPerPageOptions.map((option) => (_jsxs("option", { value: option, children: [option, " elementos por p\u00E1gina"] }, option))) }) })] }))] })] }));

package/dist/esm/Table/ZauruTable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSearchParams } from "@remix-run/react";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useMemo, useState } from "react";
 import { createTheme } from "react-data-table-component";
 import { SearchSVG } from "@zauru-sdk/icons";
 import * as ReactDataTableComponent from "react-data-table-component";
@@ -160,6 +160,56 @@ createTheme("subTable", {
         background: "black",
     },
 });
+export const normalizeZauruTableColumns = (columns) => {
+    if (!Array.isArray(columns)) {
+        return columns;
+    }
+    return columns.map((column, index) => {
+        if (!column || typeof column !== "object") {
+            return column;
+        }
+        const next = { wrap: true, ...column };
+        if (next.id == null) {
+            next.id = index + 1;
+        }
+        // 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;
+    });
+};
+export const zauruTableFlexBasisCss = (tableClassName, columns) => {
+    if (!tableClassName || !Array.isArray(columns)) {
+        return "";
+    }
+    const safeClass = tableClassName.replace(/[^a-zA-Z0-9_-]/g, "");
+    if (!safeClass) {
+        return "";
+    }
+    return columns
+        .flatMap((column) => {
+        const basis = column?.style?.flexBasis;
+        if (basis == null || column?.id == null) {
+            return [];
+        }
+        const id = String(column.id).replace(/[^a-zA-Z0-9_-]/g, "");
+        const safeBasis = String(basis).replace(/[^\d.%]/g, "");
+        if (!id || !safeBasis) {
+            return [];
+        }
+        return [
+            `.${safeClass} [data-column-id="${id}"] { flex-basis: ${safeBasis} !important; }`,
+        ];
+    })
+        .join("\n");
+};
 //Documentación de la tabla https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--docs
 export const ZauruTable = (props) => {
     const { columns, conditionalRowStyles, data, loading = false, pagination, search, expandable, theme, className, offlineSearch = [], whitOutPagination = false, ...others } = props;
@@ -176,6 +226,9 @@ export const ZauruTable = (props) => {
     useEffect(() => {
         setFilteredData(data);
     }, [data]);
+    const tableInstanceClass = `zauru-table-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const normalizedColumns = useMemo(() => normalizeZauruTableColumns(columns), [columns]);
+    const flexBasisCss = useMemo(() => zauruTableFlexBasisCss(tableInstanceClass, normalizedColumns), [tableInstanceClass, normalizedColumns]);
     const subHeaderComponentMemo = (_jsxs(_Fragment, { children: [_jsx("input", { name: "search", type: "text", placeholder: search?.placeholderSearch ?? "Filtrar", "aria-label": "Search Input", className: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg px-2", onChange: (event) => {
                     const searchTerm = event.target.value;
                     if (offlineSearch.length > 0) {
@@ -228,26 +281,7 @@ export const ZauruTable = (props) => {
     };
     const loadSubHeader = !!(search || offlineSearch.length > 0);
     const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
-    const normalizedColumns = Array.isArray(columns)
-        ? columns.map((column) => {
-            if (!column || typeof column !== "object") {
-                return 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
-                ? pagination.rowsPerPageOptions
-                : [10, 50, 100], ...others }) }));
+    return (_jsxs("div", { className: `w-full min-w-0 max-w-full overflow-x-auto ${tableInstanceClass}`, children: [flexBasisCss ? _jsx("style", { children: flexBasisCss }) : null, _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
+                    ? pagination.rowsPerPageOptions
+                    : [10, 50, 100], ...others })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.14.1",
+  "version": "6.15.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -45,11 +45,11 @@
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
     "@zauru-sdk/common": "^6.12.0",
-    "@zauru-sdk/hooks": "^6.3.23",
-    "@zauru-sdk/icons": "^6.1.0",
-    "@zauru-sdk/redux": "^6.7.2",
+    "@zauru-sdk/hooks": "^6.4.0",
+    "@zauru-sdk/icons": "^6.2.0",
+    "@zauru-sdk/redux": "^6.8.1",
     "@zauru-sdk/types": "^6.28.0",
-    "@zauru-sdk/utils": "^6.26.0",
+    "@zauru-sdk/utils": "^6.27.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "2fda4a18e3f62d22c38fbb91052869db9ebc16f4"
+  "gitHead": "322f29f8eff1085aba8924ca290f3a04aa54d477"
 }

package/src/DynamicTable/GenericDynamicTable.tsx

@@ -31,8 +31,13 @@ type Props = {
   footerRow?: FooterColumnConfig[];
   thCSSProperties?: React.CSSProperties;
   thElementsClassName?: string;
-  /** Controla si se pueden o no editar los campos (oculta botones y/o deshabilita campos). */
+  /** Controla si se pueden editar los campos. */
   editable?: boolean;
+  /**
+   * Si es false, no muestra agregar/eliminar filas aunque `editable` esté activo.
+   * Útil para catálogos fijos cuyos valores sí se editan.
+   */
+  rowActions?: boolean;
   /** Opciones de búsqueda. */
   searcheables?: SelectFieldOption[];
   /** Activa o desactiva el “skeleton” de carga. */
@@ -169,6 +174,7 @@ export const GenericDynamicTable = (props: Props) => {
     thElementsClassName = "",
     editable = true,
     readOnly = false, // Nuevo prop
+    rowActions = true,
     searcheables = [],
     loading = false,
     paginated = true,
@@ -188,6 +194,7 @@ export const GenericDynamicTable = (props: Props) => {
    * efectivamente editables: solo si `editable` es true y `readOnly` es false.
    */
   const isEditable = editable && !readOnly;
+  const showRowActions = isEditable && rowActions;
 
   try {
     const [tableData, setTableData] = useState<RowDataType[]>(defaultValue);
@@ -276,7 +283,7 @@ export const GenericDynamicTable = (props: Props) => {
             {rendereableColumns.map((column, index) => {
               const ancho =
                 column.width ??
-                (isEditable ? 94 : 100) / (rendereableColumns.length ?? 1);
+                (showRowActions ? 94 : 100) / (rendereableColumns.length ?? 1);
               return (
                 <th
                   key={index}
@@ -289,7 +296,7 @@ export const GenericDynamicTable = (props: Props) => {
                 </th>
               );
             })}
-            {isEditable && <th style={{ width: "4%" }}></th>}
+            {showRowActions && <th style={{ width: "4%" }}></th>}
           </tr>
         );
       } else {
@@ -306,14 +313,14 @@ export const GenericDynamicTable = (props: Props) => {
         const rowClassName =
           index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "";
         const summaryColSpan =
-          rendereableColumns.length + (isEditable ? 1 : 0);
+          rendereableColumns.length + (showRowActions ? 1 : 0);
         const summaryContent = rowSummary?.(rowData);
 
         return (
           <React.Fragment key={rowData.id}>
             <tr className={rowClassName}>
               {rendereableColumns.map((column) => renderCell(rowData, column))}
-              {isEditable && renderDeleteButton(rowData)}
+              {showRowActions && renderDeleteButton(rowData)}
             </tr>
             {summaryContent ? (
               <tr className={rowClassName}>
@@ -345,7 +352,7 @@ export const GenericDynamicTable = (props: Props) => {
               {column.label}
             </th>
             {renderCell(rowData, column)}
-            {isEditable &&
+            {showRowActions &&
               column === rendereableColumns[rendereableColumns.length - 1] &&
               renderDeleteButton(rowData)}
           </tr>
@@ -572,7 +579,7 @@ export const GenericDynamicTable = (props: Props) => {
           <table className="w-full">
             {orientation === "horizontal" && <thead>{renderHeader()}</thead>}
             <tbody>{renderRows()}</tbody>
-            {isEditable && (
+            {showRowActions && (
               <tfoot>
                 <tr>
                   <td
@@ -633,7 +640,7 @@ export const GenericDynamicTable = (props: Props) => {
                         </td>
                       );
                     })}
-                  {isEditable && <td></td>}
+                  {showRowActions && <td></td>}
                 </tr>
               </tfoot>
             )}

package/src/Table/ZauruTable.tsx

@@ -1,5 +1,5 @@
 import { useSearchParams } from "@remix-run/react";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useMemo, useState } from "react";
 import type {
   PaginationOptions,
   TableProps,
@@ -193,6 +193,61 @@ type Props = TableProps<any> & {
   className?: string;
 };
 
+export const normalizeZauruTableColumns = (columns: any): any => {
+  if (!Array.isArray(columns)) {
+    return columns;
+  }
+  return columns.map((column: any, index: number) => {
+    if (!column || typeof column !== "object") {
+      return column;
+    }
+    const next = { wrap: true, ...column };
+    if (next.id == null) {
+      next.id = index + 1;
+    }
+    // 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;
+  });
+};
+
+export const zauruTableFlexBasisCss = (
+  tableClassName: string,
+  columns: any
+): string => {
+  if (!tableClassName || !Array.isArray(columns)) {
+    return "";
+  }
+  const safeClass = tableClassName.replace(/[^a-zA-Z0-9_-]/g, "");
+  if (!safeClass) {
+    return "";
+  }
+  return columns
+    .flatMap((column: any) => {
+      const basis = column?.style?.flexBasis;
+      if (basis == null || column?.id == null) {
+        return [];
+      }
+      const id = String(column.id).replace(/[^a-zA-Z0-9_-]/g, "");
+      const safeBasis = String(basis).replace(/[^\d.%]/g, "");
+      if (!id || !safeBasis) {
+        return [];
+      }
+      return [
+        `.${safeClass} [data-column-id="${id}"] { flex-basis: ${safeBasis} !important; }`,
+      ];
+    })
+    .join("\n");
+};
+
 //Documentación de la tabla https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--docs
 export const ZauruTable = (props: Props) => {
   const {
@@ -227,6 +282,16 @@ export const ZauruTable = (props: Props) => {
     setFilteredData(data);
   }, [data]);
 
+  const tableInstanceClass = `zauru-table-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const normalizedColumns = useMemo(
+    () => normalizeZauruTableColumns(columns),
+    [columns]
+  );
+  const flexBasisCss = useMemo(
+    () => zauruTableFlexBasisCss(tableInstanceClass, normalizedColumns),
+    [tableInstanceClass, normalizedColumns]
+  );
+
   const subHeaderComponentMemo = (
     <>
       <input
@@ -307,28 +372,10 @@ export const ZauruTable = (props: Props) => {
 
   const loadSubHeader = !!(search || offlineSearch.length > 0);
   const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
-  const normalizedColumns = Array.isArray(columns)
-    ? columns.map((column: any) => {
-        if (!column || typeof column !== "object") {
-          return 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 (
-    <div className="w-full min-w-0 max-w-full overflow-x-auto">
+    <div className={`w-full min-w-0 max-w-full overflow-x-auto ${tableInstanceClass}`}>
+      {flexBasisCss ? <style>{flexBasisCss}</style> : null}
       <DataTable
       className={className}
       subHeaderWrap