next-recomponents 2.0.56 → 2.0.58

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 useCallback2,
-  useEffect as useEffect11,
+  useCallback as useCallback3,
+  useEffect as useEffect12,
+  useMemo as useMemo10,
   useRef as useRef7,
-  useState as useState15
+  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
@@ -38537,6 +38538,44 @@ function DropIcon() {
     }
   );
 }
+function PrevIcon() {
+  return /* @__PURE__ */ jsx30(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 24 24",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx30(
+        "polyline",
+        {
+          fill: "none",
+          strokeWidth: "2",
+          points: "7 2 17 12 7 22",
+          transform: "matrix(-1 0 0 1 24 0)"
+        }
+      )
+    }
+  );
+}
+function NextIcon() {
+  return /* @__PURE__ */ jsx30(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 24 24",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx30("polyline", { fill: "none", "stroke-width": "2", points: "7 2 17 12 7 22" })
+    }
+  );
+}
 function EditIcon3() {
   return /* @__PURE__ */ jsx30(
     "svg",
@@ -38724,23 +38763,29 @@ function Header({
   header,
   context,
   drag,
-  padding
+  padding,
+  index,
+  length
 }) {
   const [visible, setVisible] = useState14(false);
+  const [hovered, setHovered] = useState14(false);
   const sortIndex = context.sort.findIndex((b) => b.field == header);
   const [text, setText] = useState14("");
   const cellRef = useRef6(null);
   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);
@@ -38781,7 +38826,7 @@ function Header({
     return /* @__PURE__ */ jsx31("div", { className: "", children: /* @__PURE__ */ jsx31(
       "div",
       {
-        className: "border flex items-center justify-center  text-center relative  ",
+        className: " flex items-center justify-center  text-center relative  ",
         style: { zIndex: 10, height: `${padding}px`, maxHeight: "100px" },
         children: /* @__PURE__ */ jsx31(
           "input",
@@ -38803,15 +38848,17 @@ function Header({
       }
     ) });
   } else
-    return /* @__PURE__ */ jsx31("div", { className: "", children: /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsx31("div", { className: " ", children: /* @__PURE__ */ jsxs23(
       "div",
       {
         ref: cellRef,
-        className: "shadow   ",
+        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",
                 {
@@ -38834,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",
               {
@@ -38848,21 +38895,21 @@ function Header({
                 children: header
               }
             ),
-            /* @__PURE__ */ jsx31(
+            !context.disabled ? /* @__PURE__ */ jsx31(
               "div",
               {
                 style: { zIndex: 10 },
                 className: "icon font-bold  p-1 cursor-pointer pr-3 ",
                 onClick: (e) => setVisible(true),
-                children: /* @__PURE__ */ jsx31(DropIcon, {})
+                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),
-              className: "absolute top-0 h-full cursor-col-resize hover:bg-blue-300  p-2",
+              className: "absolute top-0 h-full cursor-col-resize hover:bg-blue-300   ",
               style: { right: -2, width: 6, zIndex: 20 }
             }
           ),
@@ -38984,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);
                                             }
@@ -38995,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);
                                   })
                                 ]
@@ -39036,7 +39083,7 @@ import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 function Searchable({
   context
 }) {
-  return /* @__PURE__ */ jsxs24("div", { className: "flex justify-start p-2 relative w-96", children: [
+  return /* @__PURE__ */ jsxs24("div", { className: "flex justify-start p-2 relative w-96 text-xs", children: [
     /* @__PURE__ */ jsx32(
       "input",
       {
@@ -39083,14 +39130,67 @@ function valueFormatter({
   return value;
 }
 
+// src/table-advanced/use.pagination.tsx
+import { useState as useState15, useMemo as useMemo9, useCallback as useCallback2, useEffect as useEffect11 } from "react";
+function usePaginacion({
+  total,
+  tamanioPagina = 100,
+  paginaInicial = 1
+}) {
+  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 = useMemo9(() => {
+    if (total === 0) return "0 a 0";
+    return `${inicio} a ${fin}`;
+  }, [inicio, fin, total]);
+  const hasNext = pagina < totalPaginas;
+  const hasPrev = pagina > 1;
+  const next = useCallback2(() => {
+    setPagina((p) => Math.min(p + 1, totalPaginas));
+  }, [totalPaginas]);
+  const prev = useCallback2(() => {
+    setPagina((p) => Math.max(p - 1, 1));
+  }, []);
+  const irAPagina = useCallback2(
+    (n) => {
+      setPagina(Math.min(Math.max(n, 1), totalPaginas));
+    },
+    [totalPaginas]
+  );
+  useEffect11(() => {
+    setTotalPaginas(Math.max(1, Math.ceil(total / tamanioPagina)));
+    setPagina(1);
+  }, [total]);
+  return {
+    rango,
+    inicio,
+    fin,
+    total,
+    pagina,
+    totalPaginas,
+    hasNext,
+    hasPrev,
+    next,
+    prev,
+    irAPagina
+  };
+}
+var use_pagination_default = usePaginacion;
+
 // src/table-advanced/h.table.tsx
 import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 function HTable({
   context
 }) {
-  const [isLoading, setIsloading] = useState15(false);
+  const [isLoading, setIsloading] = useState16(false);
   const { cols, headers } = context;
-  const [currentIndex, setCurrentIndex] = useState15(-1);
+  const [currentIndex, setCurrentIndex] = useState16(-1);
   const tableRef = useRef7(null);
   const modalRef = useRef7(null);
   const catDensities = { confortable: 80, compact: 30, standard: 53 };
@@ -39106,8 +39206,8 @@ function HTable({
     function resize(headers3) {
       return Object.fromEntries(headers3.map((h) => [h, getWidth(h)]));
     }
-    const [widths2, setWidths2] = useState15({});
-    const startDrag2 = useCallback2(
+    const [widths2, setWidths2] = useState16({});
+    const startDrag2 = useCallback3(
       (e, headerKey) => {
         var _a;
         e.preventDefault();
@@ -39142,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(
@@ -39158,15 +39258,6 @@ function HTable({
       const sizeadosLength = sizeados.length;
       const sizeadosWidth = sizeadosLength * 60;
       const w = (ancho - sizeadosWidth - personalizadosSum) / (headers.length - sizeadosLength - personalizados.length - ocultos.length);
-      console.log({
-        w,
-        ancho,
-        sizeadosWidth,
-        personalizadosSum,
-        headers,
-        sizeadosLength,
-        personalizados
-      });
       setWidths(
         Object.fromEntries(
           headers.map((h) => {
@@ -39182,19 +39273,22 @@ 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",
     {
       className: [
         context.className,
         "bg-white relative",
-        "p-2 border shadow rounded-2xl"
+        "p-2 border shadow rounded-2xl w-full rounded-lg "
       ].join(" "),
       ref: tableRef,
       children: [
@@ -39214,10 +39308,11 @@ function HTable({
                       }
                     }
                     return obj;
-                  })
+                  }),
+                  `${context.exportName}.xlsx`
                 );
               },
-              className: "flex gap-1 items-center border shadow rounded p-1 text-white bg-green-800 px-2",
+              className: "flex gap-1 items-center border shadow rounded p-1 text-white bg-green-800 p-1 text-xs",
               children: [
                 /* @__PURE__ */ jsx33(ExcelIcon2, {}),
                 "Exportar"
@@ -39227,7 +39322,7 @@ function HTable({
           context.onSelect && /* @__PURE__ */ jsx33(
             "button",
             {
-              className: "border shadow rounded p-1 text-white px-2 " + (context.selected.length > 0 ? "bg-blue-500" : "bg-gray-500"),
+              className: "border shadow rounded p-1 text-white p-1 text-xs  bg-blue-500 cursor-pointer ",
               disabled: context.selected.length == 0,
               onClick: async (e) => {
                 setIsloading(true);
@@ -39244,7 +39339,7 @@ function HTable({
           context.onSave && /* @__PURE__ */ jsx33(
             "button",
             {
-              className: "border shadow rounded p-1 text-white px-2 bg-blue-500",
+              className: "border shadow rounded p-1 text-white p-1 text-xs  bg-blue-500 cursor-pointer ",
               onClick: async (e) => {
                 setIsloading(true);
                 const ex = context.filteredData.map((d) => {
@@ -39258,204 +39353,256 @@ function HTable({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs25("div", { className: "grid ", style: { gridTemplateColumns }, children: [
-          headers.map((header, i) => {
-            var _a, _b;
-            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;
-            return /* @__PURE__ */ jsxs25(
-              "div",
-              {
-                className: "bg-white relative w-full bg-red-100",
-                children: [
-                  /* @__PURE__ */ jsx33(
-                    Header,
-                    {
-                      padding,
-                      header,
-                      context,
-                      drag: { gridTemplateColumns, startDrag, widths }
-                    }
-                  ),
-                  i < headers.length - 1 && /* @__PURE__ */ jsx33(
-                    "div",
-                    {
-                      onMouseDown: (e) => startDrag(e, header),
-                      style: {
-                        position: "absolute",
-                        right: -3,
-                        top: 0,
-                        width: 6,
-                        height: "100%",
-                        cursor: "col-resize",
-                        background: "transparent"
-                      },
-                      onMouseEnter: (e) => e.currentTarget.style.background = "var(--border-strong, #ccc)",
-                      onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
-                    }
-                  )
-                ]
-              },
-              header
-            );
-          }),
-          searchedData.map((row, rowIndex) => {
-            const items = Object.entries(row);
-            return items.map(([key, item], i) => {
-              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, key)) return null;
-              if (key.startsWith("_") && !key.startsWith("__")) return null;
-              if (key == "__modal__") {
-                return /* @__PURE__ */ jsx33(
-                  "div",
-                  {
-                    onMouseEnter: (e) => setCurrentIndex(rowIndex),
-                    style: {
-                      height: `${padding}px`
-                    },
-                    className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b p-2 flex items-center justify-center  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
-                    children: (context == null ? void 0 : context.modalButton) || /* @__PURE__ */ jsx33(
-                      "button",
-                      {
-                        className: "border shadow rounded bg-blue-500 text-white p-2 ",
-                        onClick: (e) => {
-                          var _a2;
-                          setCurrentIndex(rowIndex);
-                          (_a2 = modalRef.current) == null ? void 0 : _a2.click();
-                        },
-                        children: /* @__PURE__ */ jsx33(EditIcon3, {})
-                      }
-                    )
+        /* @__PURE__ */ jsxs25(
+          "div",
+          {
+            children: [
+              /* @__PURE__ */ jsx33(
+                "div",
+                {
+                  style: {
+                    gridTemplateColumns,
+                    width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
-                  row.id + i
-                );
-              }
-              if (key == "__select__") {
-                return /* @__PURE__ */ jsx33(
-                  "div",
-                  {
-                    onMouseEnter: (e) => setCurrentIndex(rowIndex),
-                    style: {
-                      height: `${padding}px`
-                    },
-                    className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b p-2 flex items-center justify-center " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
-                    children: /* @__PURE__ */ jsx33(
-                      "input",
+                  className: ["grid  w-full "].join(" "),
+                  children: headers.map((header, i) => {
+                    var _a, _b;
+                    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;
+                    return /* @__PURE__ */ jsx33(
+                      "div",
                       {
-                        type: "checkbox",
-                        className: "w-5 h-5 accent-blue-600 transition-all duration-300 checked:scale-110 ",
-                        checked: Boolean(
-                          context.selected.find((s) => s == (row == null ? void 0 : row.id))
-                        ),
-                        onChange: (e) => {
-                          const newSelected = [...context.selected];
-                          const index = newSelected.findIndex((s) => s == (row == null ? void 0 : row.id));
-                          if (index >= 0) {
-                            newSelected.splice(index, 1);
-                          } else {
-                            newSelected.push(row == null ? void 0 : row.id);
+                        className: "bg-white relative w-full bg-red-100",
+                        children: /* @__PURE__ */ jsx33(
+                          Header,
+                          {
+                            length: headers.length,
+                            index: i,
+                            padding,
+                            header,
+                            context,
+                            drag: { gridTemplateColumns, startDrag, widths }
                           }
-                          context.setSelected(newSelected);
-                        }
-                      }
-                    )
+                        )
+                      },
+                      header
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx33(
+                "div",
+                {
+                  style: {
+                    gridTemplateColumns,
+                    width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
-                  row.id + i
-                );
-              }
-              return /* @__PURE__ */ jsx33(
+                  className: [
+                    "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);
+                    return items.map(([key, item], i) => {
+                      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, key)) return null;
+                      if (key.startsWith("_") && !key.startsWith("__")) return null;
+                      if (key == "__modal__") {
+                        return /* @__PURE__ */ jsx33(
+                          "div",
+                          {
+                            onMouseEnter: (e) => setCurrentIndex(rowIndex),
+                            style: {
+                              height: `${padding}px`
+                            },
+                            className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b p-2 flex items-center justify-center  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
+                            children: (context == null ? void 0 : context.modalButton) || /* @__PURE__ */ jsx33(
+                              "button",
+                              {
+                                className: "border shadow rounded bg-blue-500 text-white p-2 ",
+                                onClick: (e) => {
+                                  var _a2;
+                                  setCurrentIndex(rowIndex);
+                                  (_a2 = modalRef.current) == null ? void 0 : _a2.click();
+                                },
+                                children: /* @__PURE__ */ jsx33(EditIcon3, {})
+                              }
+                            )
+                          },
+                          row.id + i
+                        );
+                      }
+                      if (key == "__select__") {
+                        return /* @__PURE__ */ jsx33(
+                          "div",
+                          {
+                            onMouseEnter: (e) => setCurrentIndex(rowIndex),
+                            style: {
+                              height: `${padding}px`
+                            },
+                            className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b  flex items-start p-2 justify-center " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
+                            children: /* @__PURE__ */ jsx33(
+                              "input",
+                              {
+                                type: "checkbox",
+                                className: "w-5 h-5 accent-blue-600 transition-all duration-300 checked:scale-110 ",
+                                checked: Boolean(
+                                  context.selected.find((s) => s == (row == null ? void 0 : row.id))
+                                ),
+                                onChange: (e) => {
+                                  const newSelected = [...context.selected];
+                                  const index = newSelected.findIndex(
+                                    (s) => s == (row == null ? void 0 : row.id)
+                                  );
+                                  if (index >= 0) {
+                                    newSelected.splice(index, 1);
+                                  } else {
+                                    newSelected.push(row == null ? void 0 : row.id);
+                                  }
+                                  context.setSelected(newSelected);
+                                }
+                              }
+                            )
+                          },
+                          row.id + i
+                        );
+                      }
+                      return /* @__PURE__ */ jsx33(
+                        "div",
+                        {
+                          onMouseEnter: (e) => setCurrentIndex(rowIndex),
+                          style: {
+                            fontSize: (context == null ? void 0 : context.fontSize) || "12px",
+                            ...(context == null ? void 0 : context.wrapText) ? { minHeight: `${padding}px` } : { height: `${padding}px` }
+                          },
+                          className: "  p-1" + (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + (context.wrapText ? " text-wrap truncate " : "  truncate ") + " border-b  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? rowIndex == currentIndex ? " bg-yellow-200 " : " bg-yellow-100 " : ""),
+                          children: (context == null ? void 0 : context.editableFields) && context.editableFields.includes(key) ? /* @__PURE__ */ jsx33(
+                            "input",
+                            {
+                              defaultValue: item,
+                              className: "w-full " + (context.editions.includes(row == null ? void 0 : row.id) ? "bg-blue-400 text-white" : "bg-blue-100"),
+                              onBlur: (e) => {
+                                const id = row == null ? void 0 : row.id;
+                                const newData = [...context.data];
+                                const index = newData.findIndex((d) => +d.id == +id);
+                                newData[index][key] = e.target.value;
+                                context.setData(newData);
+                                const newEditions = [
+                                  .../* @__PURE__ */ new Set([...context.editions, id])
+                                ];
+                                context.setEditions(newEditions);
+                              }
+                            }
+                          ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? React10.cloneElement(context.buttons[key], {
+                            // children: context.buttons[key]?.props?.children
+                            //   ? item
+                            //   : undefined,
+                            value: item,
+                            children: ((_e = (_d = context.buttons[key]) == null ? void 0 : _d.props) == null ? void 0 : _e.children) ? item : null,
+                            onClick: async (e) => {
+                              var _a2, _b2;
+                              const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, {
+                                e,
+                                row
+                              })) || {};
+                              const newData = [...context.data];
+                              const index = newData.findIndex(
+                                (f) => f.id == (row == null ? void 0 : row.id)
+                              );
+                              newData[index] = { ...newData[index], ...ret };
+                              context.setData(newData);
+                            },
+                            onChange: async (e) => {
+                              var _a2, _b2, _c2;
+                              const value = e.target.value;
+                              const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onChange) == null ? void 0 : _b2.call(_a2, {
+                                e,
+                                row
+                              })) || {};
+                              const newData = [...context.data];
+                              const index = newData.findIndex(
+                                (f) => f.id == (row == null ? void 0 : row.id)
+                              );
+                              if (index >= 0) {
+                                newData[index][key] = value;
+                              }
+                              for (let i2 in ret) {
+                                if ((_c2 = newData[index]) == null ? void 0 : _c2[i2]) {
+                                  const v = ret[i2];
+                                  newData[index][i2] = v;
+                                }
+                              }
+                              context.setData(newData);
+                            }
+                          }) : ["number", "string"].includes(typeof item) ? valueFormatter({
+                            value: item,
+                            currentCoin: context.currentCoin
+                          }) : React10.isValidElement(item) ? item : JSON.stringify(item)
+                        },
+                        row.id + i
+                      );
+                    });
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx33(
                 "div",
                 {
-                  onMouseEnter: (e) => setCurrentIndex(rowIndex),
                   style: {
-                    fontSize: context.fontSize,
-                    ...(context == null ? void 0 : context.wrapText) ? { minHeight: `${padding}px` } : { height: `${padding}px` }
+                    gridTemplateColumns,
+                    width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
-                  className: " flex  justify-center items-center " + (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + (context.wrapText ? " text-wrap truncate " : "  truncate ") + " border-b  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? rowIndex == currentIndex ? " bg-yellow-200 " : " bg-yellow-100 " : ""),
-                  children: (context == null ? void 0 : context.editableFields) && context.editableFields.includes(key) ? /* @__PURE__ */ jsx33(
-                    "input",
+                  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, _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;
+                    return /* @__PURE__ */ jsx33(
+                      "div",
+                      {
+                        style: {
+                          // height: `${padding}px`,
+                          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  text-xs my-5 " + (((_d = context.footer) == null ? void 0 : _d[header]) ? " border-r border-l " : ""),
+                        children: valueFormatter({
+                          currentCoin: context.currentCoin,
+                          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
+                    );
+                  })
+                }
+              ),
+              searchedData.length > 100 && /* @__PURE__ */ jsxs25("div", { className: "flex justify-end p-2", children: [
+                pagination.rango,
+                " de ",
+                pagination.total,
+                /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-5 mx-5", children: [
+                  /* @__PURE__ */ jsx33(
+                    "button",
                     {
-                      defaultValue: item,
-                      className: "w-full " + (context.editions.includes(row == null ? void 0 : row.id) ? "bg-blue-400 text-white" : "bg-blue-100"),
-                      onBlur: (e) => {
-                        const id = row == null ? void 0 : row.id;
-                        const newData = [...context.data];
-                        const index = newData.findIndex((d) => +d.id == +id);
-                        newData[index][key] = e.target.value;
-                        context.setData(newData);
-                        const newEditions = [
-                          .../* @__PURE__ */ new Set([...context.editions, id])
-                        ];
-                        context.setEditions(newEditions);
-                      }
+                      onClick: (e) => pagination.hasPrev && pagination.prev(),
+                      className: pagination.hasPrev ? "" : "text-gray-300",
+                      children: /* @__PURE__ */ jsx33(PrevIcon, {})
                     }
-                  ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? React10.cloneElement(context.buttons[key], {
-                    // children: context.buttons[key]?.props?.children
-                    //   ? item
-                    //   : undefined,
-                    value: item,
-                    children: ((_e = (_d = context.buttons[key]) == null ? void 0 : _d.props) == null ? void 0 : _e.children) ? item : null,
-                    onClick: async (e) => {
-                      var _a2, _b2;
-                      const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, {
-                        e,
-                        row
-                      })) || {};
-                      const newData = [...context.data];
-                      const index = newData.findIndex((f) => f.id == (row == null ? void 0 : row.id));
-                      newData[index] = { ...newData[index], ...ret };
-                      context.setData(newData);
-                    },
-                    onChange: async (e) => {
-                      var _a2, _b2, _c2;
-                      const value = e.target.value;
-                      const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onChange) == null ? void 0 : _b2.call(_a2, {
-                        e,
-                        row
-                      })) || {};
-                      const newData = [...context.data];
-                      const index = newData.findIndex((f) => f.id == (row == null ? void 0 : row.id));
-                      if (index >= 0) {
-                        newData[index][key] = value;
-                      }
-                      for (let i2 in ret) {
-                        if ((_c2 = newData[index]) == null ? void 0 : _c2[i2]) {
-                          const v = ret[i2];
-                          newData[index][i2] = v;
-                        }
-                      }
-                      context.setData(newData);
+                  ),
+                  /* @__PURE__ */ jsx33(
+                    "button",
+                    {
+                      onClick: (e) => pagination.hasNext && pagination.next(),
+                      className: pagination.hasNext ? "" : "text-gray-300",
+                      children: /* @__PURE__ */ jsx33(NextIcon, {})
                     }
-                  }) : ["number", "string"].includes(typeof item) ? valueFormatter({
-                    value: item,
-                    currentCoin: context.currentCoin
-                  }) : React10.isValidElement(item) ? item : JSON.stringify(item)
-                },
-                row.id + i
-              );
-            });
-          }),
-          Object.keys((context == null ? void 0 : context.footer) || {}).length > 0 && headers.map((header) => {
-            var _a, _b, _c;
-            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;
-            return /* @__PURE__ */ jsx33(
-              "div",
-              {
-                style: {
-                  height: `${padding}px`,
-                  maxHeight: "100px"
-                },
-                className: "border-b  font-bold  bg-white flex items-center justify-center",
-                children: valueFormatter({
-                  currentCoin: context.currentCoin,
-                  value: ((_c = context.footer) == null ? void 0 : _c[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
-            );
-          })
-        ] }),
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
         context.modal && /* @__PURE__ */ jsx33(
           Modal,
           {
@@ -39533,7 +39680,7 @@ function ModalContent({
 }
 
 // src/table-advanced/context.ts
-import { useEffect as useEffect12, useMemo as useMemo9, useReducer as useReducer3, useState as useState16 } 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) => {
@@ -39561,19 +39708,19 @@ var sortReducer = (acc, b) => {
 // src/table-advanced/context.ts
 function useContext({ onSelect }) {
   const excel = useExcel();
-  const [editions, setEditions] = useState16([]);
-  const [selected, setSelected] = useState16([]);
-  const [data, setData] = useState16([]);
+  const [editions, setEditions] = useState17([]);
+  const [selected, setSelected] = useState17([]);
+  const [data, setData] = useState17([]);
   const headers = [...new Set(data.map((b) => Object.keys(b)).flat())];
-  const [currentHeader, setCurrentHeader] = useState16(null);
+  const [currentHeader, setCurrentHeader] = useState17(null);
   const cols = headers.length;
   const [filters, setFilters] = useReducer3(
     filterReducer,
     new Array()
   );
-  const [searchBy, setSearchBy] = useState16("");
+  const [searchBy, setSearchBy] = useState17("");
   const [sort, setSort] = useReducer3(sortReducer, new Array());
-  const sortedData = useMemo9(() => {
+  const sortedData = useMemo11(() => {
     return [...data].sort((a, b) => {
       for (const { field, type } of sort.reverse()) {
         const av = a[field];
@@ -39603,7 +39750,7 @@ function useContext({ onSelect }) {
     }
     return true;
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (filters.length == 0) {
       setEditions([]);
     }
@@ -39636,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 {
@@ -39647,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 });
@@ -39666,14 +39813,14 @@ function TableAdvanced(tableProps) {
 }
 
 // src/tabs/index.tsx
-import React11, { useEffect as useEffect14, useState as useState18 } 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,
   labelMaxWidth = 100,
   currentIndex = 0
 }) {
-  const [index, setIndex] = useState18(0);
+  const [index, setIndex] = useState19(0);
   const items = React11.Children.toArray(
     children
   );
@@ -39683,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: [