@zauru-sdk/components 6.14.0 → 6.14.2

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
 # [6.14.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.13.3...@zauru-sdk/components@6.14.0) (2026-10-26)
 
 

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/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.0",
+  "version": "6.14.2",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -10,13 +10,6 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "scripts": {
-    "build": "npm run build:esm",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "play": "ladle serve --port 61000",
-    "play:build": "ladle build",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "author": {
     "name": "Oscar Cuellar",
     "email": "usackoka@gmail.com"
@@ -44,12 +37,6 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^6.11.1",
-    "@zauru-sdk/hooks": "^6.3.22",
-    "@zauru-sdk/icons": "^6.1.0",
-    "@zauru-sdk/redux": "^6.7.1",
-    "@zauru-sdk/types": "^6.27.0",
-    "@zauru-sdk/utils": "^6.25.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -60,7 +47,20 @@
     "react-is": "^18.2.0",
     "react-select": "^5.8.0",
     "styled-components": "^5.3.5",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "@zauru-sdk/common": "^6.12.0",
+    "@zauru-sdk/icons": "^6.1.0",
+    "@zauru-sdk/hooks": "^6.3.23",
+    "@zauru-sdk/redux": "^6.7.2",
+    "@zauru-sdk/types": "^6.28.0",
+    "@zauru-sdk/utils": "^6.26.1"
   },
-  "gitHead": "27790283dfb4e06580fe08c6bcd8793f702656c0"
-}
+  "gitHead": "57c966c16b47b52c32e72d40ccd7c76d9aaba247",
+  "scripts": {
+    "build": "npm run build:esm",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "play": "ladle serve --port 61000",
+    "play:build": "ladle build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

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