next-recomponents 2.0.57 → 2.0.58

package/dist/index.d.mts

@@ -275,6 +275,7 @@ interface TableProps {
     flex?: number;
     sortBy?: Record<string, "DESC" | "ASC">;
     onCloseModal?: (data: GridValidRowModel) => Promise<boolean>;
+    disabled?: boolean;
     [key: string]: any;
 }
 

package/dist/index.d.ts

@@ -275,6 +275,7 @@ interface TableProps {
     flex?: number;
     sortBy?: Record<string, "DESC" | "ASC">;
     onCloseModal?: (data: GridValidRowModel) => Promise<boolean>;
+    disabled?: boolean;
     [key: string]: any;
 }
 

package/dist/index.js

@@ -38766,7 +38766,9 @@ function Header({
   header,
   context,
   drag,
-  padding
+  padding,
+  index,
+  length
 }) {
   const [visible, setVisible] = (0, import_react18.useState)(false);
   const [hovered, setHovered] = (0, import_react18.useState)(false);
@@ -38776,14 +38778,17 @@ function Header({
   const [coords, setCoords] = (0, import_react18.useState)(
     null
   );
-  const filteredValues = [
-    ...new Set(context.data.map((d) => d[header]))
-  ].filter((d) => {
-    if (text == "") return true;
-    return `${d}`.toLowerCase().includes(text.toLowerCase());
-  });
-  const [selected, setSelected] = (0, import_react18.useState)([...filteredValues]);
+  const filteredValues = (0, import_react18.useMemo)(() => {
+    return [...new Set(context.data.map((d) => d[header]))].filter((d) => {
+      if (text == "") return true;
+      return `${d}`.toLowerCase().includes(text.toLowerCase());
+    });
+  }, [context.data, header, text]);
+  const [selected, setSelected] = (0, import_react18.useState)([]);
   const hasFilter = context.filters.find((b) => b.field == header);
+  (0, import_react18.useEffect)(() => {
+    setSelected(filteredValues);
+  }, [filteredValues]);
   (0, import_react18.useEffect)(() => {
     if (visible) {
       context.setCurrentHeader(header);
@@ -38850,13 +38855,13 @@ function Header({
       "div",
       {
         ref: cellRef,
-        className: " border-r   ",
+        className: index < length - 1 ? "border-r" : "",
         onMouseEnter: (e) => setHovered(true),
         onMouseLeave: (e) => setHovered(false),
         style: { zIndex: 10, height: `${padding}px`, maxHeight: "100px" },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-between items-center ", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex gap-2", children: [
+            !context.disabled ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex gap-2", children: [
               hasFilter ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 "div",
                 {
@@ -38879,7 +38884,7 @@ function Header({
                   children: sortIndex >= 0 ? context.sort[sortIndex].type === "ASC" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowUPIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowDownIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {})
                 }
               )
-            ] }),
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {}),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "div",
               {
@@ -38893,7 +38898,7 @@ function Header({
                 children: header
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            !context.disabled ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "div",
               {
                 style: { zIndex: 10 },
@@ -38901,9 +38906,9 @@ function Header({
                 onClick: (e) => setVisible(true),
                 children: hovered ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropIcon, {}) : ""
               }
-            )
+            ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {})
           ] }),
-          context.currentHeader != header && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          !context.disabled && context.currentHeader != header && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "div",
             {
               onMouseDown: (e) => drag.startDrag(e, header),
@@ -39029,9 +39034,9 @@ function Header({
                                           type: "checkbox",
                                           onChange: (e) => {
                                             const ns = [...selected];
-                                            const index = ns.findIndex((n) => n == d);
-                                            if (index >= 0) {
-                                              ns.splice(index, 1);
+                                            const index2 = ns.findIndex((n) => n == d);
+                                            if (index2 >= 0) {
+                                              ns.splice(index2, 1);
                                             } else {
                                               ns.push(d);
                                             }
@@ -39040,7 +39045,7 @@ function Header({
                                           checked: text != "" || selected.includes(d)
                                         }
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "truncate", children: d })
+                                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "truncate", children: d == "" ? "Vacias" : !Boolean(d) ? "null" : d })
                                     ] }, d);
                                   })
                                 ]
@@ -39135,7 +39140,9 @@ function usePaginacion({
   tamanioPagina = 100,
   paginaInicial = 1
 }) {
-  const totalPaginas = Math.max(1, Math.ceil(total / tamanioPagina));
+  const [totalPaginas, setTotalPaginas] = (0, import_react19.useState)(
+    Math.max(1, Math.ceil(total / tamanioPagina))
+  );
   const [pagina, setPagina] = (0, import_react19.useState)(
     Math.min(Math.max(paginaInicial, 1), totalPaginas)
   );
@@ -39159,6 +39166,10 @@ function usePaginacion({
     },
     [totalPaginas]
   );
+  (0, import_react19.useEffect)(() => {
+    setTotalPaginas(Math.max(1, Math.ceil(total / tamanioPagina)));
+    setPagina(1);
+  }, [total]);
   return {
     rango,
     inicio,
@@ -39265,12 +39276,14 @@ function HTable({
     observer.observe(tableRef.current);
     return () => observer.disconnect();
   }, [headers.length]);
-  const searchedData = context.filteredData.filter((row) => {
-    if (context.searchBy === "") return true;
-    return Object.values(row).some(
-      (value) => String(value).toLowerCase().includes(context.searchBy.toLowerCase())
-    );
-  });
+  const searchedData = (0, import_react20.useMemo)(() => {
+    return context.filteredData.filter((row) => {
+      if (context.searchBy === "") return true;
+      return Object.values(row).some(
+        (value) => String(value).toLowerCase().includes(context.searchBy.toLowerCase())
+      );
+    });
+  }, [context.filteredData]);
   const pagination = use_pagination_default({ total: searchedData.length });
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
@@ -39366,6 +39379,8 @@ function HTable({
                         children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                           Header,
                           {
+                            length: headers.length,
+                            index: i,
                             padding,
                             header,
                             context,
@@ -39386,7 +39401,8 @@ function HTable({
                     width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
                   className: [
-                    "grid max-h-[500px]  overflow-hidden overflow-y-scroll "
+                    "grid max-h-[500px]  ",
+                    context.filteredData.length >= 5 ? "overflow-hidden overflow-y-scroll " : ""
                   ].join(" "),
                   children: searchedData.slice(pagination.inicio - 1, pagination.fin).map((row, rowIndex) => {
                     const items = Object.entries(row);
@@ -39541,7 +39557,7 @@ function HTable({
                   },
                   className: ["grid border-b bg-white"].join(" "),
                   children: Object.keys((context == null ? void 0 : context.footer) || {}).length > 0 && headers.map((header) => {
-                    var _a, _b, _c, _d;
+                    var _a, _b, _c, _d, _e;
                     if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, header)) return null;
                     if (header.startsWith("_") && !header.startsWith("__"))
                       return null;
@@ -39553,10 +39569,10 @@ function HTable({
                           maxHeight: "100px"
                         },
                         title: ((_c = context.footer) == null ? void 0 : _c[header]) + " de " + header,
-                        className: "  cursor-default font-bold  bg-white flex items-center justify-center border-r text-xs my-5 ",
+                        className: "  cursor-default font-bold  bg-white flex items-center justify-center  text-xs my-5 " + (((_d = context.footer) == null ? void 0 : _d[header]) ? " border-r border-l " : ""),
                         children: valueFormatter({
                           currentCoin: context.currentCoin,
-                          value: ((_d = context.footer) == null ? void 0 : _d[header]) ? context.footer[header] == "sum" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) : context.footer[header] == "count" ? context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : context.footer[header] == "avg" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) / context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : "" : ""
+                          value: ((_e = context.footer) == null ? void 0 : _e[header]) ? context.footer[header] == "sum" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) : context.footer[header] == "count" ? context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : context.footer[header] == "avg" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) / context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : "" : ""
                         })
                       },
                       header
@@ -39564,7 +39580,7 @@ function HTable({
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex justify-end p-2", children: [
+              searchedData.length > 100 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex justify-end p-2", children: [
                 pagination.rango,
                 " de ",
                 pagination.total,

package/dist/index.mjs

@@ -38501,18 +38501,19 @@ function Table3({
 }
 
 // src/table-advanced/index.tsx
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 
 // src/table-advanced/h.table.tsx
 import React10, {
   useCallback as useCallback3,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
+  useMemo as useMemo10,
   useRef as useRef7,
   useState as useState16
 } from "react";
 
 // src/table-advanced/header.tsx
-import { useEffect as useEffect10, useRef as useRef6, useState as useState14 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef6, useState as useState14 } from "react";
 import { createPortal } from "react-dom";
 
 // src/table-advanced/icons.tsx
@@ -38762,7 +38763,9 @@ function Header({
   header,
   context,
   drag,
-  padding
+  padding,
+  index,
+  length
 }) {
   const [visible, setVisible] = useState14(false);
   const [hovered, setHovered] = useState14(false);
@@ -38772,14 +38775,17 @@ function Header({
   const [coords, setCoords] = useState14(
     null
   );
-  const filteredValues = [
-    ...new Set(context.data.map((d) => d[header]))
-  ].filter((d) => {
-    if (text == "") return true;
-    return `${d}`.toLowerCase().includes(text.toLowerCase());
-  });
-  const [selected, setSelected] = useState14([...filteredValues]);
+  const filteredValues = useMemo8(() => {
+    return [...new Set(context.data.map((d) => d[header]))].filter((d) => {
+      if (text == "") return true;
+      return `${d}`.toLowerCase().includes(text.toLowerCase());
+    });
+  }, [context.data, header, text]);
+  const [selected, setSelected] = useState14([]);
   const hasFilter = context.filters.find((b) => b.field == header);
+  useEffect10(() => {
+    setSelected(filteredValues);
+  }, [filteredValues]);
   useEffect10(() => {
     if (visible) {
       context.setCurrentHeader(header);
@@ -38846,13 +38852,13 @@ function Header({
       "div",
       {
         ref: cellRef,
-        className: " border-r   ",
+        className: index < length - 1 ? "border-r" : "",
         onMouseEnter: (e) => setHovered(true),
         onMouseLeave: (e) => setHovered(false),
         style: { zIndex: 10, height: `${padding}px`, maxHeight: "100px" },
         children: [
           /* @__PURE__ */ jsxs23("div", { className: "flex justify-between items-center ", children: [
-            /* @__PURE__ */ jsxs23("div", { className: "flex gap-2", children: [
+            !context.disabled ? /* @__PURE__ */ jsxs23("div", { className: "flex gap-2", children: [
               hasFilter ? /* @__PURE__ */ jsx31(
                 "div",
                 {
@@ -38875,7 +38881,7 @@ function Header({
                   children: sortIndex >= 0 ? context.sort[sortIndex].type === "ASC" ? /* @__PURE__ */ jsx31(ArrowUPIcon, {}) : /* @__PURE__ */ jsx31(ArrowDownIcon2, {}) : /* @__PURE__ */ jsx31("div", {})
                 }
               )
-            ] }),
+            ] }) : /* @__PURE__ */ jsx31("div", {}),
             /* @__PURE__ */ jsx31(
               "div",
               {
@@ -38889,7 +38895,7 @@ function Header({
                 children: header
               }
             ),
-            /* @__PURE__ */ jsx31(
+            !context.disabled ? /* @__PURE__ */ jsx31(
               "div",
               {
                 style: { zIndex: 10 },
@@ -38897,9 +38903,9 @@ function Header({
                 onClick: (e) => setVisible(true),
                 children: hovered ? /* @__PURE__ */ jsx31(DropIcon, {}) : ""
               }
-            )
+            ) : /* @__PURE__ */ jsx31("div", {})
           ] }),
-          context.currentHeader != header && /* @__PURE__ */ jsx31(
+          !context.disabled && context.currentHeader != header && /* @__PURE__ */ jsx31(
             "div",
             {
               onMouseDown: (e) => drag.startDrag(e, header),
@@ -39025,9 +39031,9 @@ function Header({
                                           type: "checkbox",
                                           onChange: (e) => {
                                             const ns = [...selected];
-                                            const index = ns.findIndex((n) => n == d);
-                                            if (index >= 0) {
-                                              ns.splice(index, 1);
+                                            const index2 = ns.findIndex((n) => n == d);
+                                            if (index2 >= 0) {
+                                              ns.splice(index2, 1);
                                             } else {
                                               ns.push(d);
                                             }
@@ -39036,7 +39042,7 @@ function Header({
                                           checked: text != "" || selected.includes(d)
                                         }
                                       ),
-                                      /* @__PURE__ */ jsx31("div", { className: "truncate", children: d })
+                                      /* @__PURE__ */ jsx31("div", { className: "truncate", children: d == "" ? "Vacias" : !Boolean(d) ? "null" : d })
                                     ] }, d);
                                   })
                                 ]
@@ -39125,19 +39131,21 @@ function valueFormatter({
 }
 
 // src/table-advanced/use.pagination.tsx
-import { useState as useState15, useMemo as useMemo8, useCallback as useCallback2 } from "react";
+import { useState as useState15, useMemo as useMemo9, useCallback as useCallback2, useEffect as useEffect11 } from "react";
 function usePaginacion({
   total,
   tamanioPagina = 100,
   paginaInicial = 1
 }) {
-  const totalPaginas = Math.max(1, Math.ceil(total / tamanioPagina));
+  const [totalPaginas, setTotalPaginas] = useState15(
+    Math.max(1, Math.ceil(total / tamanioPagina))
+  );
   const [pagina, setPagina] = useState15(
     Math.min(Math.max(paginaInicial, 1), totalPaginas)
   );
   const inicio = total === 0 ? 0 : (pagina - 1) * tamanioPagina + 1;
   const fin = Math.min(pagina * tamanioPagina, total);
-  const rango = useMemo8(() => {
+  const rango = useMemo9(() => {
     if (total === 0) return "0 a 0";
     return `${inicio} a ${fin}`;
   }, [inicio, fin, total]);
@@ -39155,6 +39163,10 @@ function usePaginacion({
     },
     [totalPaginas]
   );
+  useEffect11(() => {
+    setTotalPaginas(Math.max(1, Math.ceil(total / tamanioPagina)));
+    setPagina(1);
+  }, [total]);
   return {
     rango,
     inicio,
@@ -39230,7 +39242,7 @@ function HTable({
     return { widths: widths2, gridTemplateColumns: gridTemplateColumns2, startDrag: startDrag2, setWidths: setWidths2 };
   }
   const { gridTemplateColumns, startDrag, widths, setWidths } = useResizableColumns(headers);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!tableRef.current) return;
     const observer = new ResizeObserver(([entry]) => {
       const ocultos = headers.filter(
@@ -39261,12 +39273,14 @@ function HTable({
     observer.observe(tableRef.current);
     return () => observer.disconnect();
   }, [headers.length]);
-  const searchedData = context.filteredData.filter((row) => {
-    if (context.searchBy === "") return true;
-    return Object.values(row).some(
-      (value) => String(value).toLowerCase().includes(context.searchBy.toLowerCase())
-    );
-  });
+  const searchedData = useMemo10(() => {
+    return context.filteredData.filter((row) => {
+      if (context.searchBy === "") return true;
+      return Object.values(row).some(
+        (value) => String(value).toLowerCase().includes(context.searchBy.toLowerCase())
+      );
+    });
+  }, [context.filteredData]);
   const pagination = use_pagination_default({ total: searchedData.length });
   return /* @__PURE__ */ jsxs25(
     "div",
@@ -39362,6 +39376,8 @@ function HTable({
                         children: /* @__PURE__ */ jsx33(
                           Header,
                           {
+                            length: headers.length,
+                            index: i,
                             padding,
                             header,
                             context,
@@ -39382,7 +39398,8 @@ function HTable({
                     width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
                   className: [
-                    "grid max-h-[500px]  overflow-hidden overflow-y-scroll "
+                    "grid max-h-[500px]  ",
+                    context.filteredData.length >= 5 ? "overflow-hidden overflow-y-scroll " : ""
                   ].join(" "),
                   children: searchedData.slice(pagination.inicio - 1, pagination.fin).map((row, rowIndex) => {
                     const items = Object.entries(row);
@@ -39537,7 +39554,7 @@ function HTable({
                   },
                   className: ["grid border-b bg-white"].join(" "),
                   children: Object.keys((context == null ? void 0 : context.footer) || {}).length > 0 && headers.map((header) => {
-                    var _a, _b, _c, _d;
+                    var _a, _b, _c, _d, _e;
                     if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, header)) return null;
                     if (header.startsWith("_") && !header.startsWith("__"))
                       return null;
@@ -39549,10 +39566,10 @@ function HTable({
                           maxHeight: "100px"
                         },
                         title: ((_c = context.footer) == null ? void 0 : _c[header]) + " de " + header,
-                        className: "  cursor-default font-bold  bg-white flex items-center justify-center border-r text-xs my-5 ",
+                        className: "  cursor-default font-bold  bg-white flex items-center justify-center  text-xs my-5 " + (((_d = context.footer) == null ? void 0 : _d[header]) ? " border-r border-l " : ""),
                         children: valueFormatter({
                           currentCoin: context.currentCoin,
-                          value: ((_d = context.footer) == null ? void 0 : _d[header]) ? context.footer[header] == "sum" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) : context.footer[header] == "count" ? context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : context.footer[header] == "avg" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) / context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : "" : ""
+                          value: ((_e = context.footer) == null ? void 0 : _e[header]) ? context.footer[header] == "sum" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) : context.footer[header] == "count" ? context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : context.footer[header] == "avg" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) / context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : "" : ""
                         })
                       },
                       header
@@ -39560,7 +39577,7 @@ function HTable({
                   })
                 }
               ),
-              /* @__PURE__ */ jsxs25("div", { className: "flex justify-end p-2", children: [
+              searchedData.length > 100 && /* @__PURE__ */ jsxs25("div", { className: "flex justify-end p-2", children: [
                 pagination.rango,
                 " de ",
                 pagination.total,
@@ -39663,7 +39680,7 @@ function ModalContent({
 }
 
 // src/table-advanced/context.ts
-import { useEffect as useEffect12, useMemo as useMemo10, useReducer as useReducer3, useState as useState17 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo11, useReducer as useReducer3, useState as useState17 } from "react";
 
 // src/table-advanced/filter.reducer.ts
 var filterReducer = (acc, b) => {
@@ -39703,7 +39720,7 @@ function useContext({ onSelect }) {
   );
   const [searchBy, setSearchBy] = useState17("");
   const [sort, setSort] = useReducer3(sortReducer, new Array());
-  const sortedData = useMemo10(() => {
+  const sortedData = useMemo11(() => {
     return [...data].sort((a, b) => {
       for (const { field, type } of sort.reverse()) {
         const av = a[field];
@@ -39733,7 +39750,7 @@ function useContext({ onSelect }) {
     }
     return true;
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (filters.length == 0) {
       setEditions([]);
     }
@@ -39766,7 +39783,7 @@ import { jsx as jsx34 } from "react/jsx-runtime";
 function TableAdvanced(tableProps) {
   const { data, ...props } = tableProps;
   const context = useContext({ onSelect: Boolean(tableProps.onSelect) });
-  useEffect13(() => {
+  useEffect14(() => {
     context.setData(
       Array.isArray(data) ? data.map((d) => {
         return {
@@ -39777,7 +39794,7 @@ function TableAdvanced(tableProps) {
       }) : data
     );
   }, [data]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (tableProps == null ? void 0 : tableProps.sortBy) {
       const [k, v] = Object.entries(tableProps.sortBy)[0];
       context.setSort({ [k]: v });
@@ -39796,7 +39813,7 @@ function TableAdvanced(tableProps) {
 }
 
 // src/tabs/index.tsx
-import React11, { useEffect as useEffect14, useState as useState19 } from "react";
+import React11, { useEffect as useEffect15, useState as useState19 } from "react";
 import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 function TabContainer({
   children,
@@ -39813,7 +39830,7 @@ function TabContainer({
     if (e.key === "ArrowLeft")
       setIndex((k - 1 + labels.length) % labels.length);
   };
-  useEffect14(() => {
+  useEffect15(() => {
     setIndex(currentIndex);
   }, [currentIndex]);
   return /* @__PURE__ */ jsxs26("div", { className: "w-full bg-white", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.57",
+  "version": "2.0.58",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/table-advanced/h.table.tsx

@@ -138,13 +138,17 @@ export default function HTable({
     observer.observe(tableRef.current);
     return () => observer.disconnect();
   }, [headers.length]);
-  const searchedData = context.filteredData.filter((row) => {
-    if (context.searchBy === "") return true;
 
-    return Object.values(row).some((value) =>
-      String(value).toLowerCase().includes(context.searchBy.toLowerCase()),
-    );
-  });
+  const searchedData = useMemo(() => {
+    return context.filteredData.filter((row) => {
+      if (context.searchBy === "") return true;
+
+      return Object.values(row).some((value) =>
+        String(value).toLowerCase().includes(context.searchBy.toLowerCase()),
+      );
+    });
+  }, [context.filteredData]);
+
   const pagination = usePaginacion({ total: searchedData.length });
   return (
     <div
@@ -247,6 +251,8 @@ export default function HTable({
                 // style={{ position: "relative" }}
               >
                 <Header
+                  length={headers.length}
+                  index={i}
                   padding={padding}
                   header={header}
                   context={context}
@@ -284,7 +290,10 @@ export default function HTable({
             width: Object.values(widths).reduce((acc, i) => acc + i, 0),
           }}
           className={[
-            "grid max-h-[500px]  overflow-hidden overflow-y-scroll ",
+            "grid max-h-[500px]  ",
+            context.filteredData.length >= 5
+              ? "overflow-hidden overflow-y-scroll "
+              : "",
           ].join(" ")}
         >
           {searchedData
@@ -515,7 +524,8 @@ export default function HTable({
                   className={
                     "  cursor-default font-bold " +
                     " bg-white flex items-center justify-center" +
-                    " border-r text-xs my-5 "
+                    "  text-xs my-5 " +
+                    (context.footer?.[header] ? " border-r border-l " : "")
                   }
                 >
                   {valueFormatter({
@@ -543,23 +553,25 @@ export default function HTable({
               );
             })}
         </div>
-        <div className="flex justify-end p-2">
-          {pagination.rango} de {pagination.total}
-          <div className="flex items-center gap-5 mx-5">
-            <button
-              onClick={(e) => pagination.hasPrev && pagination.prev()}
-              className={pagination.hasPrev ? "" : "text-gray-300"}
-            >
-              <PrevIcon />
-            </button>
-            <button
-              onClick={(e) => pagination.hasNext && pagination.next()}
-              className={pagination.hasNext ? "" : "text-gray-300"}
-            >
-              <NextIcon />
-            </button>
+        {searchedData.length > 100 && (
+          <div className="flex justify-end p-2">
+            {pagination.rango} de {pagination.total}
+            <div className="flex items-center gap-5 mx-5">
+              <button
+                onClick={(e) => pagination.hasPrev && pagination.prev()}
+                className={pagination.hasPrev ? "" : "text-gray-300"}
+              >
+                <PrevIcon />
+              </button>
+              <button
+                onClick={(e) => pagination.hasNext && pagination.next()}
+                className={pagination.hasNext ? "" : "text-gray-300"}
+              >
+                <NextIcon />
+              </button>
+            </div>
           </div>
-        </div>
+        )}
       </div>
 
       {context.modal && (

package/src/table-advanced/header.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import DropIcon, {
   ArrowDownIcon,
@@ -17,14 +17,18 @@ export function Header({
   context,
   drag,
   padding,
+  index,
+  length,
 }: {
   header: string;
   context: ContextType & Omit<TableProps, "data">;
+  index: number;
   drag: {
     widths: Record<string, number>;
     gridTemplateColumns: string;
     startDrag: (e: React.MouseEvent, headerKey: string) => void;
   };
+  length: number;
   padding: string;
 }) {
   const [visible, setVisible] = useState(false);
@@ -36,17 +40,21 @@ export function Header({
     null,
   );
 
-  const filteredValues = [
-    ...new Set(context.data.map((d) => d[header])),
-  ].filter((d) => {
-    if (text == "") return true;
-    return `${d}`.toLowerCase().includes(text.toLowerCase());
-  });
+  const filteredValues = useMemo(() => {
+    return [...new Set(context.data.map((d) => d[header]))].filter((d) => {
+      if (text == "") return true;
+      return `${d}`.toLowerCase().includes(text.toLowerCase());
+    });
+  }, [context.data, header, text]);
 
-  const [selected, setSelected] = useState([...filteredValues]);
+  const [selected, setSelected] = useState<any[]>([]);
 
   const hasFilter = context.filters.find((b) => b.field == header);
 
+  useEffect(() => {
+    setSelected(filteredValues);
+  }, [filteredValues]);
+
   useEffect(() => {
     if (visible) {
       context.setCurrentHeader(header);
@@ -121,44 +129,49 @@ export function Header({
       <div className=" ">
         <div
           ref={cellRef}
-          className={" border-r   "}
+          className={index < length - 1 ? "border-r" : ""}
           onMouseEnter={(e) => setHovered(true)}
           onMouseLeave={(e) => setHovered(false)}
           style={{ zIndex: 10, height: `${padding}px`, maxHeight: "100px" }}
         >
           <div className="flex justify-between items-center ">
-            <div className="flex gap-2">
-              {hasFilter ? (
+            {!context.disabled ? (
+              <div className="flex gap-2">
+                {hasFilter ? (
+                  <div
+                    className="cursor-pointer"
+                    onClick={(e) => {
+                      context.setFilters(null);
+                      setSelected(filteredValues);
+                    }}
+                  >
+                    <FilterIcon />
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+
                 <div
-                  className="cursor-pointer"
                   onClick={(e) => {
-                    context.setFilters(null);
-                    setSelected(filteredValues);
+                    context.setSort({
+                      [header]: "TOGGLE",
+                    });
                   }}
                 >
-                  <FilterIcon />
-                </div>
-              ) : (
-                <div></div>
-              )}
-              <div
-                onClick={(e) => {
-                  context.setSort({
-                    [header]: "TOGGLE",
-                  });
-                }}
-              >
-                {sortIndex >= 0 ? (
-                  context.sort[sortIndex].type === "ASC" ? (
-                    <ArrowUPIcon />
+                  {sortIndex >= 0 ? (
+                    context.sort[sortIndex].type === "ASC" ? (
+                      <ArrowUPIcon />
+                    ) : (
+                      <ArrowDownIcon />
+                    )
                   ) : (
-                    <ArrowDownIcon />
-                  )
-                ) : (
-                  <div></div>
-                )}
+                    <div></div>
+                  )}
+                </div>
               </div>
-            </div>
+            ) : (
+              <div></div>
+            )}
             <div
               className="font-bold flex truncate text-xs items-center "
               style={{ height: `${padding}px` }}
@@ -170,16 +183,20 @@ export function Header({
             >
               {header}
             </div>
-            <div
-              style={{ zIndex: 10 }}
-              className="icon font-bold  p-1 cursor-pointer pr-3 "
-              onClick={(e) => setVisible(true)}
-            >
-              {hovered ? <DropIcon /> : ""}
-            </div>
+            {!context.disabled ? (
+              <div
+                style={{ zIndex: 10 }}
+                className="icon font-bold  p-1 cursor-pointer pr-3 "
+                onClick={(e) => setVisible(true)}
+              >
+                {hovered ? <DropIcon /> : ""}
+              </div>
+            ) : (
+              <div></div>
+            )}
           </div>
 
-          {context.currentHeader != header && (
+          {!context.disabled && context.currentHeader != header && (
             <div
               onMouseDown={(e) => drag.startDrag(e, header)}
               className="absolute top-0 h-full cursor-col-resize hover:bg-blue-300   "
@@ -304,7 +321,13 @@ export function Header({
                                     }}
                                     checked={text != "" || selected.includes(d)}
                                   />
-                                  <div className="truncate">{d}</div>
+                                  <div className="truncate">
+                                    {d == ""
+                                      ? "Vacias"
+                                      : !Boolean(d)
+                                        ? "null"
+                                        : d}
+                                  </div>
                                 </div>
                               );
                             })}

package/src/table-advanced/types.ts

@@ -52,6 +52,7 @@ export interface TableProps {
   flex?: number;
   sortBy?: Record<string, "DESC" | "ASC">;
   onCloseModal?: (data: GridValidRowModel) => Promise<boolean>;
+  disabled?: boolean;
   [key: string]: any;
 }
 

package/src/table-advanced/use.pagination.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from "react";
+import { useState, useMemo, useCallback, useEffect } from "react";
 
 function usePaginacion({
   total,
@@ -9,7 +9,9 @@ function usePaginacion({
   tamanioPagina?: number;
   paginaInicial?: number;
 }) {
-  const totalPaginas = Math.max(1, Math.ceil(total / tamanioPagina));
+  const [totalPaginas, setTotalPaginas] = useState(
+    Math.max(1, Math.ceil(total / tamanioPagina)),
+  );
 
   const [pagina, setPagina] = useState(
     Math.min(Math.max(paginaInicial, 1), totalPaginas),
@@ -41,6 +43,10 @@ function usePaginacion({
     [totalPaginas],
   );
 
+  useEffect(() => {
+    setTotalPaginas(Math.max(1, Math.ceil(total / tamanioPagina)));
+    setPagina(1);
+  }, [total]);
   return {
     rango,
     inicio,