@apia/table 3.0.25 → 3.0.27

package/dist/index.d.ts

@@ -151,6 +151,7 @@ type TResponsiveTableRowState = {
 type TResponsiveTableColumn = TResponsiveTableWithRendererElement & {
     /** Con esta propiedad se puede pasar parámetros opcionales */
     additionalData?: Record<string, unknown>;
+    autoAdjustWidth?: boolean;
     /**
      * Determina si la columna admite ordenamiento.
      */

package/dist/index.js

@@ -1266,6 +1266,32 @@ const NoMemoHeaderCell = ({
       ...domProps,
       role: "rowheader",
       className: `${isFilterRequired && window.SHOW_REQUIRED_POSITION ? "requiredFilterColumn" : ""}`,
+      ref: (el) => {
+        if (!column?.autoAdjustWidth)
+          return;
+        if (el instanceof HTMLElement && !el.dataset.resized && storedWidth === void 0) {
+          const clone = el.cloneNode(true);
+          const child = clone.querySelector(
+            ".headButton__label"
+          );
+          child.style.opacity = "0";
+          document.body.append(child);
+          child.style.position = "fixed";
+          child.style.maxWidth = "0";
+          child.style.minWidth = "0";
+          child.style.width = "0";
+          child.style.overflow = "auto";
+          child.style.textWrap = "nowrap";
+          window.requestAnimationFrame(() => {
+            const idealWidth = child.scrollWidth;
+            const currentWidth = el.querySelector(".headButton__label").getBoundingClientRect().width;
+            const elWidth = el.getBoundingClientRect().width;
+            const diff = idealWidth - currentWidth;
+            setWidth(elWidth + diff + 5);
+            el.dataset.resized = "true";
+          });
+        }
+      },
       children: /* @__PURE__ */ jsxs(Box, { as: "span", className: "headButton__container", children: [
         /* @__PURE__ */ jsx(
           Box,
@@ -3541,10 +3567,11 @@ const NoMemoAccordionHTMLCellRenderer = React.forwardRef(
     column,
     row,
     ...props
-  }, currentRef) => (
-    /**
-     * Aca falta el title de la columna
-     */
+  }, currentRef) => /* @__PURE__ */ jsxs(Box, { children: [
+    (column.label || column.name) && /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+      column.label ?? column.name,
+      ": "
+    ] }),
     /* @__PURE__ */ jsx(
       Box,
       {
@@ -3561,7 +3588,7 @@ const NoMemoAccordionHTMLCellRenderer = React.forwardRef(
         as: "span"
       }
     )
-  )
+  ] })
 );
 NoMemoAccordionHTMLCellRenderer.displayName = "AccordionHTMLCellRenderer";
 const AccordionHTMLCellRenderer = NoMemoAccordionHTMLCellRenderer;