next-recomponents 1.9.5 → 1.9.52

package/dist/index.d.mts

@@ -201,18 +201,20 @@ type Props = {
 };
 declare function DocumentViewer({ item }: Props): react_jsx_runtime.JSX.Element;
 
-interface Table3Props extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
-    data: Record<string, any>[];
+interface Table3Props<T extends Record<string, any>> extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
+    data: T[];
     selectItems?: boolean;
     maxItems?: number;
     onSave?: (e: any) => void;
     exportName?: string;
-    colSizes?: Record<string, number>;
+    colSizes?: Partial<Record<keyof T, number>>;
     modal?: React$1.ReactNode;
-    footer?: Record<string, "sum" | "count" | "avg">;
+    footer?: Partial<Record<keyof T, "sum" | "count" | "avg">>;
     header?: React$1.ReactNode;
     onChange?: (e: any) => any;
+    symbols?: Partial<Record<keyof T, React$1.ReactNode>>;
+    sortBy?: Partial<Record<keyof T, "asc" | "desc">>;
 }
-declare function Table3({ data, selectItems, maxItems, onSave, exportName, colSizes, modal, header, footer, onChange, ...props }: Table3Props): react_jsx_runtime.JSX.Element | null;
+declare function Table3<T extends Record<string, any>>({ data, selectItems, maxItems, onSave, exportName, colSizes, modal, header, footer, onChange, symbols, sortBy, ...props }: Table3Props<T>): react_jsx_runtime.JSX.Element | null;
 
 export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, type TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };

package/dist/index.d.ts

@@ -201,18 +201,20 @@ type Props = {
 };
 declare function DocumentViewer({ item }: Props): react_jsx_runtime.JSX.Element;
 
-interface Table3Props extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
-    data: Record<string, any>[];
+interface Table3Props<T extends Record<string, any>> extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
+    data: T[];
     selectItems?: boolean;
     maxItems?: number;
     onSave?: (e: any) => void;
     exportName?: string;
-    colSizes?: Record<string, number>;
+    colSizes?: Partial<Record<keyof T, number>>;
     modal?: React$1.ReactNode;
-    footer?: Record<string, "sum" | "count" | "avg">;
+    footer?: Partial<Record<keyof T, "sum" | "count" | "avg">>;
     header?: React$1.ReactNode;
     onChange?: (e: any) => any;
+    symbols?: Partial<Record<keyof T, React$1.ReactNode>>;
+    sortBy?: Partial<Record<keyof T, "asc" | "desc">>;
 }
-declare function Table3({ data, selectItems, maxItems, onSave, exportName, colSizes, modal, header, footer, onChange, ...props }: Table3Props): react_jsx_runtime.JSX.Element | null;
+declare function Table3<T extends Record<string, any>>({ data, selectItems, maxItems, onSave, exportName, colSizes, modal, header, footer, onChange, symbols, sortBy, ...props }: Table3Props<T>): react_jsx_runtime.JSX.Element | null;
 
 export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, type TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };

package/dist/index.js

@@ -12007,6 +12007,36 @@ function FilterOffIcon() {
     }
   );
 }
+function OrderDesc() {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 448 512",
+      height: "20px",
+      width: "20px",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm112-128h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 65.63V48a16 16 0 0 0-16-16H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 190.37V208a16 16 0 0 0 16 16zm159.06 234.62l-59.27-160A16 16 0 0 0 372.72 288h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 480h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 480H432a16 16 0 0 0 15.06-21.38zM335.61 400L352 352l16.39 48z" })
+    }
+  );
+}
+function OrderAsc() {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 448 512",
+      height: "20px",
+      width: "20px",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm240-64H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 446.37V464a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 321.63V304a16 16 0 0 0-16-16zm31.06-85.38l-59.27-160A16 16 0 0 0 372.72 32h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 224h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 224H432a16 16 0 0 0 15.06-21.38zM335.61 144L352 96l16.39 48z" })
+    }
+  );
+}
 function EditIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "svg",
@@ -45596,7 +45626,9 @@ function Filter({
   setObjectData,
   setPage,
   colSizes,
-  data
+  data,
+  sort,
+  setSort
 }) {
   const [visible, setVisible] = (0, import_react33.useState)(false);
   const [text, setText] = (0, import_react33.useState)("");
@@ -45661,14 +45693,15 @@ function Filter({
       /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "div",
         {
-          style: {
-            minWidth: "100px",
-            maxWidth: `${((colSizes == null ? void 0 : colSizes[h]) || 0) + 100}px`,
-            width: `${colSizes == null ? void 0 : colSizes[h]}px`
-          },
-          className: `resize-x overflow-auto   text-center flex justify-evenly p-1 items-center`,
+          style: (colSizes == null ? void 0 : colSizes[h]) ? {
+            minWidth: "100%",
+            maxWidth: `${(colSizes[h] || 0) + 300}px`,
+            width: `${colSizes[h]}px`
+          } : { minWidth: "100%", maxWidth: "500px" },
+          className: `resize-x overflow-hidden text-center flex justify-evenly p-1 items-center gap-2`,
           onClick: (e) => setVisible(!visible),
           children: [
+            sort && Object.keys(sort)[0] == h && ((sort == null ? void 0 : sort[h]) == "asc" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-green-300", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(OrderAsc, {}) }) : (sort == null ? void 0 : sort[h]) == "desc" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-green-300", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(OrderDesc, {}) })),
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: h }),
             selected.length < items.length && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-red-500 ", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FilterOffIcon, {}) })
           ]
@@ -45680,6 +45713,48 @@ function Filter({
           className: "border shadow rounded bg-white p-1 absolute left-0 text-black",
           style: { zIndex: 9999 },
           children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-1 w-[300px] min-w-[300px] resize-x overflow-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+              "div",
+              {
+                onClick: (e) => {
+                  const newSort = __spreadValues({}, sort);
+                  newSort[h] = "asc";
+                  const reorderedSort = __spreadValues({
+                    [h]: "asc"
+                  }, Object.fromEntries(
+                    Object.entries(newSort).filter(([key]) => key !== h)
+                  ));
+                  setSort(reorderedSort);
+                  setVisible(false);
+                },
+                className: "flex items-center gap-2 border p-1 hover:bg-blue-100",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(OrderAsc, {}),
+                  " Ordenar de la A a la Z"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+              "div",
+              {
+                onClick: (e) => {
+                  const newSort = __spreadValues({}, sort);
+                  newSort[h] = "desc";
+                  const reorderedSort = __spreadValues({
+                    [h]: "desc"
+                  }, Object.fromEntries(
+                    Object.entries(newSort).filter(([key]) => key !== h)
+                  ));
+                  setSort(reorderedSort);
+                  setVisible(false);
+                },
+                className: "flex items-center gap-2 border p-1 hover:bg-blue-100",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(OrderDesc, {}),
+                  "Ordenar de la Z a la A"
+                ]
+              }
+            ),
             selected.length < items.length && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               "div",
               {
@@ -45794,7 +45869,9 @@ function TableHead({
   data,
   maxItems,
   colSizes,
-  modal
+  modal,
+  sort,
+  setSort
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("tr", { className: "bg-blue-500 text-white font-bold", children: [
     modal && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("th", { children: "-" }),
@@ -45834,7 +45911,9 @@ function TableHead({
           setObjectData,
           setPage,
           colSizes,
-          data
+          data,
+          sort,
+          setSort
         },
         h
       );
@@ -45863,7 +45942,8 @@ function TR({
   index,
   selected,
   setSelected,
-  onChange
+  onChange,
+  symbols
 }) {
   const color2 = selected == index ? "bg-blue-600 text-white hover:bg-blue-800" : index % 2 == 0 ? "bg-white" : "bg-blue-50";
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
@@ -45937,7 +46017,18 @@ function TR({
             }, {})));
             return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { className: `text-black `, children: cloned }, h);
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { className: `text-center border max-w-[${colSize}px]`, children: row[h] }, h);
+          return symbols && (symbols == null ? void 0 : symbols[h]) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            "td",
+            {
+              className: `text-center border max-w-[${colSize}px] flex items-center gap-1`,
+              children: [
+                symbols[h],
+                " ",
+                row[h]
+              ]
+            },
+            h
+          ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { className: `text-center border max-w-[${colSize}px]`, children: row[h] }, h);
         })
       ]
     },
@@ -45960,10 +46051,23 @@ function TableBody({
   modalRef,
   dialogRow,
   setDialogRow,
-  onChange
+  onChange,
+  symbols,
+  sort
 }) {
   const [selected, setSelected] = (0, import_react35.useState)(-1);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tbody", { children: Object.keys(objectData).reverse().filter((id3) => {
+  const sorted = Object.entries(objectData).sort(([, a], [, b]) => {
+    for (const [key, order] of Object.entries(
+      sort || { id: "desc", _id: "desc" }
+    )) {
+      const valA = a[key];
+      const valB = b[key];
+      if (valA === valB) continue;
+      const comparison = valA > valB ? 1 : valA < valB ? -1 : 0;
+      return order === "desc" ? -comparison : comparison;
+    }
+    return 0;
+  }).filter(([id3, row]) => {
     var _a;
     return ((_a = objectData[id3]) == null ? void 0 : _a._visible) === true;
   }).filter((_id, key) => {
@@ -45971,7 +46075,7 @@ function TableBody({
     const start = (page - 1) * maxItems;
     const end = page * maxItems;
     return key >= start && key < end;
-  }).map((id3, index) => {
+  }).map(([id3, k], index) => {
     const row = objectData[id3];
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       TR,
@@ -45987,6 +46091,7 @@ function TableBody({
         modal,
         modalRef,
         dialogRow,
+        symbols,
         setDialogRow,
         setSelected,
         selected,
@@ -45994,7 +46099,8 @@ function TableBody({
       }),
       id3
     );
-  }) });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tbody", { children: sorted });
 }
 
 // src/table3/panel.tsx
@@ -46081,7 +46187,8 @@ function TableFooter({
   headers,
   footer,
   selectItems,
-  modal
+  modal,
+  symbols
 }) {
   function operacion(tipo, header) {
     switch (tipo) {
@@ -46106,7 +46213,11 @@ function TableFooter({
       if (header.startsWith("_")) {
         return null;
       } else if (footer == null ? void 0 : footer[header]) {
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { children: operacion(footer[header], header) }, header);
+        return symbols && (symbols == null ? void 0 : symbols[header]) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("th", { className: "flex items-center gap-1", children: [
+          symbols[header],
+          " ",
+          operacion(footer[header], header)
+        ] }, header) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { children: operacion(footer[header], header) }, header);
       }
       return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", {}, header);
     })
@@ -46183,7 +46294,9 @@ function Table3(_a) {
     modal,
     header,
     footer,
-    onChange
+    onChange,
+    symbols,
+    sortBy
   } = _b, props = __objRest(_b, [
     "data",
     "selectItems",
@@ -46194,7 +46307,9 @@ function Table3(_a) {
     "modal",
     "header",
     "footer",
-    "onChange"
+    "onChange",
+    "symbols",
+    "sortBy"
   ]);
   const [handlers, setHandlers] = (0, import_react37.useState)({});
   const [page, setPage] = (0, import_react37.useState)(1);
@@ -46251,6 +46366,7 @@ function Table3(_a) {
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
+  const [sort, setSort] = (0, import_react37.useState)(sortBy);
   const modalRef = (0, import_react37.useRef)(null);
   const [dialogRow, setDialogRow] = (0, import_react37.useState)({});
   const context = __spreadValues({
@@ -46273,7 +46389,10 @@ function Table3(_a) {
     header,
     footer,
     onChange,
-    data
+    data,
+    symbols,
+    sort,
+    setSort
   }, props);
   (0, import_react37.useEffect)(() => {
     if ((dialogRow == null ? void 0 : dialogRow.id) || (dialogRow == null ? void 0 : dialogRow._id)) {

package/dist/index.mjs

@@ -11988,6 +11988,36 @@ function FilterOffIcon() {
     }
   );
 }
+function OrderDesc() {
+  return /* @__PURE__ */ jsx9(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 448 512",
+      height: "20px",
+      width: "20px",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx9("path", { d: "M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm112-128h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 65.63V48a16 16 0 0 0-16-16H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 190.37V208a16 16 0 0 0 16 16zm159.06 234.62l-59.27-160A16 16 0 0 0 372.72 288h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 480h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 480H432a16 16 0 0 0 15.06-21.38zM335.61 400L352 352l16.39 48z" })
+    }
+  );
+}
+function OrderAsc() {
+  return /* @__PURE__ */ jsx9(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 448 512",
+      height: "20px",
+      width: "20px",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx9("path", { d: "M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm240-64H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 446.37V464a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 321.63V304a16 16 0 0 0-16-16zm31.06-85.38l-59.27-160A16 16 0 0 0 372.72 32h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 224h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 224H432a16 16 0 0 0 15.06-21.38zM335.61 144L352 96l16.39 48z" })
+    }
+  );
+}
 function EditIcon() {
   return /* @__PURE__ */ jsx9(
     "svg",
@@ -45593,7 +45623,9 @@ function Filter({
   setObjectData,
   setPage,
   colSizes,
-  data
+  data,
+  sort,
+  setSort
 }) {
   const [visible, setVisible] = useState12(false);
   const [text, setText] = useState12("");
@@ -45658,14 +45690,15 @@ function Filter({
       /* @__PURE__ */ jsxs18(
         "div",
         {
-          style: {
-            minWidth: "100px",
-            maxWidth: `${((colSizes == null ? void 0 : colSizes[h]) || 0) + 100}px`,
-            width: `${colSizes == null ? void 0 : colSizes[h]}px`
-          },
-          className: `resize-x overflow-auto   text-center flex justify-evenly p-1 items-center`,
+          style: (colSizes == null ? void 0 : colSizes[h]) ? {
+            minWidth: "100%",
+            maxWidth: `${(colSizes[h] || 0) + 300}px`,
+            width: `${colSizes[h]}px`
+          } : { minWidth: "100%", maxWidth: "500px" },
+          className: `resize-x overflow-hidden text-center flex justify-evenly p-1 items-center gap-2`,
           onClick: (e) => setVisible(!visible),
           children: [
+            sort && Object.keys(sort)[0] == h && ((sort == null ? void 0 : sort[h]) == "asc" ? /* @__PURE__ */ jsx27("div", { className: "text-green-300", children: /* @__PURE__ */ jsx27(OrderAsc, {}) }) : (sort == null ? void 0 : sort[h]) == "desc" && /* @__PURE__ */ jsx27("div", { className: "text-green-300", children: /* @__PURE__ */ jsx27(OrderDesc, {}) })),
             /* @__PURE__ */ jsx27("div", { children: h }),
             selected.length < items.length && /* @__PURE__ */ jsx27("div", { className: "text-red-500 ", children: /* @__PURE__ */ jsx27(FilterOffIcon, {}) })
           ]
@@ -45677,6 +45710,48 @@ function Filter({
           className: "border shadow rounded bg-white p-1 absolute left-0 text-black",
           style: { zIndex: 9999 },
           children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-1 w-[300px] min-w-[300px] resize-x overflow-auto", children: [
+            /* @__PURE__ */ jsxs18(
+              "div",
+              {
+                onClick: (e) => {
+                  const newSort = __spreadValues({}, sort);
+                  newSort[h] = "asc";
+                  const reorderedSort = __spreadValues({
+                    [h]: "asc"
+                  }, Object.fromEntries(
+                    Object.entries(newSort).filter(([key]) => key !== h)
+                  ));
+                  setSort(reorderedSort);
+                  setVisible(false);
+                },
+                className: "flex items-center gap-2 border p-1 hover:bg-blue-100",
+                children: [
+                  /* @__PURE__ */ jsx27(OrderAsc, {}),
+                  " Ordenar de la A a la Z"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs18(
+              "div",
+              {
+                onClick: (e) => {
+                  const newSort = __spreadValues({}, sort);
+                  newSort[h] = "desc";
+                  const reorderedSort = __spreadValues({
+                    [h]: "desc"
+                  }, Object.fromEntries(
+                    Object.entries(newSort).filter(([key]) => key !== h)
+                  ));
+                  setSort(reorderedSort);
+                  setVisible(false);
+                },
+                className: "flex items-center gap-2 border p-1 hover:bg-blue-100",
+                children: [
+                  /* @__PURE__ */ jsx27(OrderDesc, {}),
+                  "Ordenar de la Z a la A"
+                ]
+              }
+            ),
             selected.length < items.length && /* @__PURE__ */ jsxs18(
               "div",
               {
@@ -45791,7 +45866,9 @@ function TableHead({
   data,
   maxItems,
   colSizes,
-  modal
+  modal,
+  sort,
+  setSort
 }) {
   return /* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsxs19("tr", { className: "bg-blue-500 text-white font-bold", children: [
     modal && /* @__PURE__ */ jsx28("th", { children: "-" }),
@@ -45831,7 +45908,9 @@ function TableHead({
           setObjectData,
           setPage,
           colSizes,
-          data
+          data,
+          sort,
+          setSort
         },
         h
       );
@@ -45860,7 +45939,8 @@ function TR({
   index,
   selected,
   setSelected,
-  onChange
+  onChange,
+  symbols
 }) {
   const color2 = selected == index ? "bg-blue-600 text-white hover:bg-blue-800" : index % 2 == 0 ? "bg-white" : "bg-blue-50";
   return /* @__PURE__ */ jsxs20(
@@ -45934,7 +46014,18 @@ function TR({
             }, {})));
             return /* @__PURE__ */ jsx29("td", { className: `text-black `, children: cloned }, h);
           }
-          return /* @__PURE__ */ jsx29("td", { className: `text-center border max-w-[${colSize}px]`, children: row[h] }, h);
+          return symbols && (symbols == null ? void 0 : symbols[h]) ? /* @__PURE__ */ jsxs20(
+            "td",
+            {
+              className: `text-center border max-w-[${colSize}px] flex items-center gap-1`,
+              children: [
+                symbols[h],
+                " ",
+                row[h]
+              ]
+            },
+            h
+          ) : /* @__PURE__ */ jsx29("td", { className: `text-center border max-w-[${colSize}px]`, children: row[h] }, h);
         })
       ]
     },
@@ -45957,10 +46048,23 @@ function TableBody({
   modalRef,
   dialogRow,
   setDialogRow,
-  onChange
+  onChange,
+  symbols,
+  sort
 }) {
   const [selected, setSelected] = useState13(-1);
-  return /* @__PURE__ */ jsx30("tbody", { children: Object.keys(objectData).reverse().filter((id3) => {
+  const sorted = Object.entries(objectData).sort(([, a], [, b]) => {
+    for (const [key, order] of Object.entries(
+      sort || { id: "desc", _id: "desc" }
+    )) {
+      const valA = a[key];
+      const valB = b[key];
+      if (valA === valB) continue;
+      const comparison = valA > valB ? 1 : valA < valB ? -1 : 0;
+      return order === "desc" ? -comparison : comparison;
+    }
+    return 0;
+  }).filter(([id3, row]) => {
     var _a;
     return ((_a = objectData[id3]) == null ? void 0 : _a._visible) === true;
   }).filter((_id, key) => {
@@ -45968,7 +46072,7 @@ function TableBody({
     const start = (page - 1) * maxItems;
     const end = page * maxItems;
     return key >= start && key < end;
-  }).map((id3, index) => {
+  }).map(([id3, k], index) => {
     const row = objectData[id3];
     return /* @__PURE__ */ jsx30(
       TR,
@@ -45984,6 +46088,7 @@ function TableBody({
         modal,
         modalRef,
         dialogRow,
+        symbols,
         setDialogRow,
         setSelected,
         selected,
@@ -45991,7 +46096,8 @@ function TableBody({
       }),
       id3
     );
-  }) });
+  });
+  return /* @__PURE__ */ jsx30("tbody", { children: sorted });
 }
 
 // src/table3/panel.tsx
@@ -46078,7 +46184,8 @@ function TableFooter({
   headers,
   footer,
   selectItems,
-  modal
+  modal,
+  symbols
 }) {
   function operacion(tipo, header) {
     switch (tipo) {
@@ -46103,7 +46210,11 @@ function TableFooter({
       if (header.startsWith("_")) {
         return null;
       } else if (footer == null ? void 0 : footer[header]) {
-        return /* @__PURE__ */ jsx32("th", { children: operacion(footer[header], header) }, header);
+        return symbols && (symbols == null ? void 0 : symbols[header]) ? /* @__PURE__ */ jsxs22("th", { className: "flex items-center gap-1", children: [
+          symbols[header],
+          " ",
+          operacion(footer[header], header)
+        ] }, header) : /* @__PURE__ */ jsx32("th", { children: operacion(footer[header], header) }, header);
       }
       return /* @__PURE__ */ jsx32("th", {}, header);
     })
@@ -46180,7 +46291,9 @@ function Table3(_a) {
     modal,
     header,
     footer,
-    onChange
+    onChange,
+    symbols,
+    sortBy
   } = _b, props = __objRest(_b, [
     "data",
     "selectItems",
@@ -46191,7 +46304,9 @@ function Table3(_a) {
     "modal",
     "header",
     "footer",
-    "onChange"
+    "onChange",
+    "symbols",
+    "sortBy"
   ]);
   const [handlers, setHandlers] = useState14({});
   const [page, setPage] = useState14(1);
@@ -46248,6 +46363,7 @@ function Table3(_a) {
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
+  const [sort, setSort] = useState14(sortBy);
   const modalRef = useRef8(null);
   const [dialogRow, setDialogRow] = useState14({});
   const context = __spreadValues({
@@ -46270,7 +46386,10 @@ function Table3(_a) {
     header,
     footer,
     onChange,
-    data
+    data,
+    symbols,
+    sort,
+    setSort
   }, props);
   useEffect11(() => {
     if ((dialogRow == null ? void 0 : dialogRow.id) || (dialogRow == null ? void 0 : dialogRow._id)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "1.9.5",
+  "version": "1.9.52",
   "description": "description 2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/table/filters.tsx

@@ -13,6 +13,38 @@ export function FilterOffIcon() {
     </svg>
   );
 }
+
+export function OrderDesc() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 448 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm112-128h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 65.63V48a16 16 0 0 0-16-16H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 190.37V208a16 16 0 0 0 16 16zm159.06 234.62l-59.27-160A16 16 0 0 0 372.72 288h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 480h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 480H432a16 16 0 0 0 15.06-21.38zM335.61 400L352 352l16.39 48z"></path>
+    </svg>
+  );
+}
+
+export function OrderAsc() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 448 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm240-64H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 446.37V464a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 321.63V304a16 16 0 0 0-16-16zm31.06-85.38l-59.27-160A16 16 0 0 0 372.72 32h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 224h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 224H432a16 16 0 0 0 15.06-21.38zM335.61 144L352 96l16.39 48z"></path>
+    </svg>
+  );
+}
 export function EditIcon() {
   return (
     <svg

package/src/table3/body.tsx

@@ -15,6 +15,8 @@ export default function TableBody({
   dialogRow,
   setDialogRow,
   onChange,
+  symbols,
+  sort,
 }: {
   objectData: any;
   setObjectData: any;
@@ -23,53 +25,67 @@ export default function TableBody({
   selectItems?: boolean;
   page: number;
   maxItems?: number;
-  colSizes?: Record<string, number>;
+  colSizes?: Partial<Record<string, number>>;
   modal?: React.ReactNode;
   modalRef: React.RefObject<HTMLDialogElement>;
   dialogRow: any;
   setDialogRow: any;
   onChange?: any;
+  symbols?: Record<string, React.ReactNode>;
+  sort: any;
 }) {
   const [selected, setSelected] = useState(-1);
+  const sorted = Object.entries(objectData)
+    .sort(([, a]: any, [, b]: any) => {
+      for (const [key, order] of Object.entries(
+        sort || { id: "desc", _id: "desc" }
+      )) {
+        const valA = a[key];
+        const valB = b[key];
 
-  return (
-    <tbody>
-      {Object.keys(objectData)
-        .reverse()
-        .filter((id) => {
-          return objectData[id]?._visible === true;
-        })
-        .filter((_id, key) => {
-          if (!maxItems || maxItems == Infinity) return true;
-          const start = (page - 1) * maxItems; // ej: 0 en la página 1
-          const end = page * maxItems; // ej: 10 en la página 1
-          return key >= start && key < end; // 👈 usamos < en vez de <=
-        })
-        .map((id, index) => {
-          const row = objectData[id];
-          return (
-            <TR
-              key={id}
-              {...{
-                headers,
-                index,
-                setObjectData,
-                id,
-                row,
-                handlers,
-                selectItems,
-                colSizes,
-                modal,
-                modalRef,
-                dialogRow,
-                setDialogRow,
-                setSelected,
-                selected,
-                onChange,
-              }}
-            />
-          );
-        })}
-    </tbody>
-  );
+        if (valA === valB) continue; // pasa al siguiente criterio
+
+        const comparison = valA > valB ? 1 : valA < valB ? -1 : 0;
+
+        return order === "desc" ? -comparison : comparison;
+      }
+      return 0;
+    })
+    .filter(([id, row]) => {
+      return objectData[id]?._visible === true;
+    })
+    .filter((_id, key) => {
+      if (!maxItems || maxItems == Infinity) return true;
+      const start = (page - 1) * maxItems; // ej: 0 en la página 1
+      const end = page * maxItems; // ej: 10 en la página 1
+      return key >= start && key < end; // 👈 usamos < en vez de <=
+    })
+    .map(([id, k], index) => {
+      const row = objectData[id];
+      return (
+        <TR
+          key={id}
+          {...{
+            headers,
+            index,
+            setObjectData,
+            id,
+            row,
+            handlers,
+            selectItems,
+            colSizes,
+            modal,
+            modalRef,
+            dialogRow,
+            symbols,
+            setDialogRow,
+            setSelected,
+            selected,
+            onChange,
+          }}
+        />
+      );
+    });
+
+  return <tbody>{sorted}</tbody>;
 }

package/src/table3/filter.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useMemo, useState } from "react";
-import { FilterOffIcon } from "../../src/table/filters";
+import { FilterOffIcon, OrderAsc, OrderDesc } from "../../src/table/filters";
 
 export default function Filter({
   h,
@@ -9,6 +9,8 @@ export default function Filter({
   setPage,
   colSizes,
   data,
+  sort,
+  setSort,
 }: {
   h: any;
   objectData: any;
@@ -16,6 +18,8 @@ export default function Filter({
   setPage: any;
   colSizes?: Record<string, number>;
   data: any[];
+  sort: any;
+  setSort: any;
 }) {
   const [visible, setVisible] = useState(false);
   const [text, setText] = useState("");
@@ -101,14 +105,31 @@ export default function Filter({
       </div>
       <div className="relative w-full justify-center flex">
         <div
-          style={{
-            minWidth: "100px",
-            maxWidth: `${(colSizes?.[h] || 0) + 100}px`,
-            width: `${colSizes?.[h]}px`,
-          }}
-          className={`resize-x overflow-auto   text-center flex justify-evenly p-1 items-center`}
+          style={
+            colSizes?.[h]
+              ? {
+                  minWidth: "100%",
+                  maxWidth: `${(colSizes[h] || 0) + 300}px`,
+                  width: `${colSizes[h]}px`,
+                }
+              : { minWidth: "100%", maxWidth: "500px" }
+          }
+          className={`resize-x overflow-hidden text-center flex justify-evenly p-1 items-center gap-2`}
           onClick={(e) => setVisible(!visible)}
         >
+          {sort &&
+            Object.keys(sort)[0] == h &&
+            (sort?.[h] == "asc" ? (
+              <div className="text-green-300">
+                <OrderAsc />
+              </div>
+            ) : (
+              sort?.[h] == "desc" && (
+                <div className="text-green-300">
+                  <OrderDesc />
+                </div>
+              )
+            ))}
           <div>{h}</div>
           {selected.length < items.length && (
             <div className="text-red-500 ">
@@ -123,6 +144,47 @@ export default function Filter({
             style={{ zIndex: 9999 }}
           >
             <div className="flex flex-col gap-1 w-[300px] min-w-[300px] resize-x overflow-auto">
+              <div
+                onClick={(e) => {
+                  const newSort = { ...sort };
+                  newSort[h] = "asc";
+
+                  // reconstruir con la nueva clave primero
+                  const reorderedSort = {
+                    [h]: "asc",
+                    ...Object.fromEntries(
+                      Object.entries(newSort).filter(([key]) => key !== h)
+                    ),
+                  };
+
+                  setSort(reorderedSort);
+                  setVisible(false);
+                }}
+                className="flex items-center gap-2 border p-1 hover:bg-blue-100"
+              >
+                <OrderAsc /> Ordenar de la A a la Z
+              </div>
+              <div
+                onClick={(e) => {
+                  const newSort = { ...sort };
+                  newSort[h] = "desc";
+
+                  // reconstruir con la nueva clave primero
+                  const reorderedSort = {
+                    [h]: "desc",
+                    ...Object.fromEntries(
+                      Object.entries(newSort).filter(([key]) => key !== h)
+                    ),
+                  };
+
+                  setSort(reorderedSort);
+                  setVisible(false);
+                }}
+                className="flex items-center gap-2 border p-1 hover:bg-blue-100"
+              >
+                <OrderDesc />
+                Ordenar de la Z a la A
+              </div>
               {selected.length < items.length && (
                 <div
                   className="p-1 flex items-center justify-between px-2 bg-red-200 border shadow rounded"

package/src/table3/footer.tsx

@@ -4,12 +4,14 @@ export default function TableFooter({
   footer,
   selectItems,
   modal,
+  symbols,
 }: {
   objectData: any;
   headers: string[];
-  footer?: Record<string, "count" | "sum" | "avg">;
+  footer?: Partial<Record<string, "sum" | "count" | "avg">>;
   selectItems?: any;
   modal?: any;
+  symbols?: Record<string, React.ReactNode>;
 }) {
   function operacion(tipo: "count" | "sum" | "avg", header: string): any {
     switch (tipo) {
@@ -44,7 +46,13 @@ export default function TableFooter({
             if (header.startsWith("_")) {
               return null;
             } else if (footer?.[header]) {
-              return <th key={header}>{operacion(footer[header], header)}</th>;
+              return symbols && symbols?.[header] ? (
+                <th key={header} className="flex items-center gap-1">
+                  {symbols[header]} {operacion(footer[header], header)}
+                </th>
+              ) : (
+                <th key={header}>{operacion(footer[header], header)}</th>
+              );
             }
 
             return <th key={header}></th>;

package/src/table3/head.tsx

@@ -12,6 +12,8 @@ export default function TableHead({
   maxItems,
   colSizes,
   modal,
+  sort,
+  setSort,
 }: {
   headers: string[];
   selectItems?: boolean;
@@ -23,6 +25,8 @@ export default function TableHead({
   maxItems?: number;
   colSizes?: Record<string, any>;
   modal?: React.ReactNode;
+  sort: any;
+  setSort: any;
 }) {
   return (
     <thead>
@@ -66,6 +70,8 @@ export default function TableHead({
               setPage={setPage}
               colSizes={colSizes}
               data={data}
+              sort={sort}
+              setSort={setSort}
             />
           );
         })}

package/src/table3/index.tsx

@@ -15,24 +15,26 @@ import Panel from "./panel";
 import TableFooter from "./footer";
 import Dialog from "./dialog";
 
-interface Table3Props
+interface Table3Props<T extends Record<string, any>>
   extends DetailedHTMLProps<
     TableHTMLAttributes<HTMLTableElement>,
     HTMLTableElement
   > {
-  data: Record<string, any>[];
+  data: T[];
   selectItems?: boolean;
   maxItems?: number;
   onSave?: (e: any) => void;
   exportName?: string;
-  colSizes?: Record<string, number>;
+  colSizes?: Partial<Record<keyof T, number>>;
   modal?: React.ReactNode;
-  footer?: Record<string, "sum" | "count" | "avg">;
+  footer?: Partial<Record<keyof T, "sum" | "count" | "avg">>;
   header?: React.ReactNode;
   onChange?: (e: any) => any;
+  symbols?: Partial<Record<keyof T, React.ReactNode>>;
+  sortBy?: Partial<Record<keyof T, "asc" | "desc">>;
 }
 
-export default function Table3({
+export default function Table3<T extends Record<string, any>>({
   data,
   selectItems,
   maxItems = Infinity,
@@ -43,8 +45,10 @@ export default function Table3({
   header,
   footer,
   onChange,
+  symbols,
+  sortBy,
   ...props
-}: Table3Props) {
+}: Table3Props<T>) {
   const [handlers, setHandlers] = useState<Record<string, any>>({});
   const [page, setPage] = useState(1);
 
@@ -127,7 +131,7 @@ export default function Table3({
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
-
+  const [sort, setSort] = useState(sortBy);
   const modalRef = useRef<HTMLDialogElement>(null);
   const [dialogRow, setDialogRow] = useState<any>({});
   const context = {
@@ -151,6 +155,9 @@ export default function Table3({
     footer,
     onChange,
     data,
+    symbols,
+    sort,
+    setSort,
     ...props,
   };
 

package/src/table3/tr.tsx

@@ -17,6 +17,7 @@ export default function TR({
   selected,
   setSelected,
   onChange,
+  symbols,
 }: {
   handlers: any;
   setObjectData: any;
@@ -32,6 +33,7 @@ export default function TR({
   index: number;
   selected: number;
   setSelected: any;
+  symbols?: Record<string, React.ReactNode>;
   onChange: any;
 }) {
   const color =
@@ -137,7 +139,14 @@ export default function TR({
             </td>
           );
         }
-        return (
+        return symbols && symbols?.[h] ? (
+          <td
+            key={h}
+            className={`text-center border max-w-[${colSize}px] flex items-center gap-1`}
+          >
+            {symbols[h]} {row[h]}
+          </td>
+        ) : (
           <td key={h} className={`text-center border max-w-[${colSize}px]`}>
             {row[h]}
           </td>