next-recomponents 2.0.16 → 2.0.18

package/dist/index.js

@@ -35696,14 +35696,16 @@ function useExcel() {
 // src/table/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var HEIGHT_MAP = {
-  1: 150,
-  2: 200,
-  3: 250,
-  4: 310,
-  5: 360,
-  6: 410,
-  7: 460,
-  8: 510
+  1: 110,
+  2: 165,
+  3: 215,
+  4: 265,
+  5: 320,
+  6: 370,
+  7: 425,
+  8: 475,
+  9: 525,
+  10: 585
 };
 function EditIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -35756,7 +35758,10 @@ function CustomFooter({
   if (!entries.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-end gap-6 px-4 py-2 bg-gray-100 border-t border-gray-300 text-sm font-semibold text-gray-700", children: entries.map(([key, type]) => {
     const value = computeAggregation(rows, key, type);
-    const formatted = type === "avg" ? value.toLocaleString(void 0, { maximumFractionDigits: 2 }) : value.toLocaleString();
+    const formatted = value.toLocaleString("en-US", {
+      minimumFractionDigits: value % 1 !== 0 ? 2 : 0,
+      maximumFractionDigits: value % 1 !== 0 ? 2 : 0
+    });
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
       FOOTER_LABELS[type],
       " de",
@@ -35797,7 +35802,7 @@ function Toolbar({
     return rest;
   };
   if (!exportName && !onSave && !onSelect) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2 bg-gray-200 border shadow rounded p-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2  p-2 text-xs", children: [
     exportName && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Button,
       {
@@ -35834,6 +35839,15 @@ function useColumns(rows, options) {
       return {
         field: key,
         headerName: key,
+        valueFormatter: (value) => {
+          if (value == null || value === "") return "";
+          const num = parseFloat(value);
+          if (isNaN(num)) return value;
+          return num.toLocaleString("en-US", {
+            minimumFractionDigits: num % 1 !== 0 ? 2 : 0,
+            maximumFractionDigits: num % 1 !== 0 ? 2 : 0
+          });
+        },
         flex,
         editable: (_a = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _a : false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
@@ -35887,7 +35901,7 @@ function IHTable({
   buttons,
   exportName,
   modal,
-  height = 510,
+  height = 580,
   width = "100%",
   header,
   hideColumns = [],
@@ -35942,66 +35956,68 @@ function IHTable({
     onModalOpen: handleModalOpen
   });
   if (!rows.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_material.Box,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
-        width,
-        zIndex: 999999999
-      },
-      children: [
-        modal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          ModalDialog,
-          {
-            open,
-            onClose: handleClose,
-            modal,
-            selectedRow: modalRow
-          }
-        ),
-        header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded", children: header }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Toolbar,
-          {
-            exportName,
-            onSave,
-            onSelect,
-            rows,
-            filteredRows
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_x_data_grid.DataGrid,
-          {
-            rows,
-            columns,
-            checkboxSelection: Boolean(onSelect),
-            rowSelectionModel: selectedRows,
-            onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
-            sx: {
-              "& .MuiDataGrid-cell--editable": {
-                backgroundColor: "#c6d8f0",
-                fontWeight: 500
-              },
-              ...rows.length <= Object.keys(HEIGHT_MAP).length && {
-                "& .MuiDataGrid-filler": {
-                  display: "none"
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "m-2", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-bold  p-2 ", children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Toolbar,
+      {
+        exportName,
+        onSave,
+        onSelect,
+        rows,
+        filteredRows
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_material.Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
+          width,
+          zIndex: 999999999
+        },
+        children: [
+          modal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ModalDialog,
+            {
+              open,
+              onClose: handleClose,
+              modal,
+              selectedRow: modalRow
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_x_data_grid.DataGrid,
+            {
+              rows,
+              columns,
+              checkboxSelection: Boolean(onSelect),
+              rowSelectionModel: selectedRows,
+              onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
+              sx: {
+                "& .MuiDataGrid-cell--editable": {
+                  backgroundColor: "#c6d8f0",
+                  fontWeight: 500
+                },
+                ...rows.length <= Object.keys(HEIGHT_MAP).length && {
+                  "& .MuiDataGrid-filler": {
+                    display: "none"
+                  }
                 }
-              }
-            },
-            editMode: "row",
-            processRowUpdate: handleRowUpdate,
-            pageSizeOptions: [5, 10],
-            hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomFooter, { footer, rows })
-      ]
-    }
-  );
+              },
+              editMode: "row",
+              processRowUpdate: handleRowUpdate,
+              pageSizeOptions: [5, 10],
+              hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomFooter, { footer, rows })
+        ]
+      }
+    )
+  ] });
 }
 function Table(props) {
   if (Array.isArray(props.data)) {

package/dist/index.mjs

@@ -35676,14 +35676,16 @@ function useExcel() {
 // src/table/index.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var HEIGHT_MAP = {
-  1: 150,
-  2: 200,
-  3: 250,
-  4: 310,
-  5: 360,
-  6: 410,
-  7: 460,
-  8: 510
+  1: 110,
+  2: 165,
+  3: 215,
+  4: 265,
+  5: 320,
+  6: 370,
+  7: 425,
+  8: 475,
+  9: 525,
+  10: 585
 };
 function EditIcon() {
   return /* @__PURE__ */ jsx6(
@@ -35736,7 +35738,10 @@ function CustomFooter({
   if (!entries.length) return null;
   return /* @__PURE__ */ jsx6("div", { className: "flex justify-end gap-6 px-4 py-2 bg-gray-100 border-t border-gray-300 text-sm font-semibold text-gray-700", children: entries.map(([key, type]) => {
     const value = computeAggregation(rows, key, type);
-    const formatted = type === "avg" ? value.toLocaleString(void 0, { maximumFractionDigits: 2 }) : value.toLocaleString();
+    const formatted = value.toLocaleString("en-US", {
+      minimumFractionDigits: value % 1 !== 0 ? 2 : 0,
+      maximumFractionDigits: value % 1 !== 0 ? 2 : 0
+    });
     return /* @__PURE__ */ jsxs5("span", { children: [
       FOOTER_LABELS[type],
       " de",
@@ -35777,7 +35782,7 @@ function Toolbar({
     return rest;
   };
   if (!exportName && !onSave && !onSelect) return null;
-  return /* @__PURE__ */ jsxs5("div", { className: "flex gap-2 bg-gray-200 border shadow rounded p-2", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: "flex gap-2  p-2 text-xs", children: [
     exportName && /* @__PURE__ */ jsx6(
       Button,
       {
@@ -35814,6 +35819,15 @@ function useColumns(rows, options) {
       return {
         field: key,
         headerName: key,
+        valueFormatter: (value) => {
+          if (value == null || value === "") return "";
+          const num = parseFloat(value);
+          if (isNaN(num)) return value;
+          return num.toLocaleString("en-US", {
+            minimumFractionDigits: num % 1 !== 0 ? 2 : 0,
+            maximumFractionDigits: num % 1 !== 0 ? 2 : 0
+          });
+        },
         flex,
         editable: (_a = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _a : false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
@@ -35867,7 +35881,7 @@ function IHTable({
   buttons,
   exportName,
   modal,
-  height = 510,
+  height = 580,
   width = "100%",
   header,
   hideColumns = [],
@@ -35922,66 +35936,68 @@ function IHTable({
     onModalOpen: handleModalOpen
   });
   if (!rows.length) return null;
-  return /* @__PURE__ */ jsxs5(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
-        width,
-        zIndex: 999999999
-      },
-      children: [
-        modal && /* @__PURE__ */ jsx6(
-          ModalDialog,
-          {
-            open,
-            onClose: handleClose,
-            modal,
-            selectedRow: modalRow
-          }
-        ),
-        header && /* @__PURE__ */ jsx6("div", { className: "font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded", children: header }),
-        /* @__PURE__ */ jsx6(
-          Toolbar,
-          {
-            exportName,
-            onSave,
-            onSelect,
-            rows,
-            filteredRows
-          }
-        ),
-        /* @__PURE__ */ jsx6(
-          DataGrid,
-          {
-            rows,
-            columns,
-            checkboxSelection: Boolean(onSelect),
-            rowSelectionModel: selectedRows,
-            onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
-            sx: {
-              "& .MuiDataGrid-cell--editable": {
-                backgroundColor: "#c6d8f0",
-                fontWeight: 500
-              },
-              ...rows.length <= Object.keys(HEIGHT_MAP).length && {
-                "& .MuiDataGrid-filler": {
-                  display: "none"
+  return /* @__PURE__ */ jsxs5("div", { className: "m-2", children: [
+    header && /* @__PURE__ */ jsx6("div", { className: "font-bold  p-2 ", children: header }),
+    /* @__PURE__ */ jsx6(
+      Toolbar,
+      {
+        exportName,
+        onSave,
+        onSelect,
+        rows,
+        filteredRows
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
+          width,
+          zIndex: 999999999
+        },
+        children: [
+          modal && /* @__PURE__ */ jsx6(
+            ModalDialog,
+            {
+              open,
+              onClose: handleClose,
+              modal,
+              selectedRow: modalRow
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            DataGrid,
+            {
+              rows,
+              columns,
+              checkboxSelection: Boolean(onSelect),
+              rowSelectionModel: selectedRows,
+              onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
+              sx: {
+                "& .MuiDataGrid-cell--editable": {
+                  backgroundColor: "#c6d8f0",
+                  fontWeight: 500
+                },
+                ...rows.length <= Object.keys(HEIGHT_MAP).length && {
+                  "& .MuiDataGrid-filler": {
+                    display: "none"
+                  }
                 }
-              }
-            },
-            editMode: "row",
-            processRowUpdate: handleRowUpdate,
-            pageSizeOptions: [5, 10],
-            hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
-          }
-        ),
-        /* @__PURE__ */ jsx6(CustomFooter, { footer, rows })
-      ]
-    }
-  );
+              },
+              editMode: "row",
+              processRowUpdate: handleRowUpdate,
+              pageSizeOptions: [5, 10],
+              hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
+            }
+          ),
+          /* @__PURE__ */ jsx6(CustomFooter, { footer, rows })
+        ]
+      }
+    )
+  ] });
 }
 function Table(props) {
   if (Array.isArray(props.data)) {

package/package.json

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

package/src/table/index.tsx

@@ -42,14 +42,16 @@ interface TableProps {
 // ─── Height mapping ───────────────────────────────────────────────────────────
 
 const HEIGHT_MAP: Record<number, number> = {
-  1: 150,
-  2: 200,
-  3: 250,
-  4: 310,
-  5: 360,
-  6: 410,
-  7: 460,
-  8: 510,
+  1: 110,
+  2: 165,
+  3: 215,
+  4: 265,
+  5: 320,
+  6: 370,
+  7: 425,
+  8: 475,
+  9: 525,
+  10: 585,
 };
 
 // ─── Icons ────────────────────────────────────────────────────────────────────
@@ -133,10 +135,10 @@ function CustomFooter({
     <div className="flex justify-end gap-6 px-4 py-2 bg-gray-100 border-t border-gray-300 text-sm font-semibold text-gray-700">
       {entries.map(([key, type]) => {
         const value = computeAggregation(rows, key, type);
-        const formatted =
-          type === "avg"
-            ? value.toLocaleString(undefined, { maximumFractionDigits: 2 })
-            : value.toLocaleString();
+        const formatted = value.toLocaleString("en-US", {
+          minimumFractionDigits: value % 1 !== 0 ? 2 : 0,
+          maximumFractionDigits: value % 1 !== 0 ? 2 : 0,
+        });
         return (
           <span key={key}>
             {FOOTER_LABELS[type]} de{" "}
@@ -207,7 +209,7 @@ function Toolbar({
   if (!exportName && !onSave && !onSelect) return null;
 
   return (
-    <div className="flex gap-2 bg-gray-200 border shadow rounded p-2">
+    <div className="flex gap-2  p-2 text-xs">
       {exportName && (
         <Button
           className="bg-green-800 text-white"
@@ -267,6 +269,16 @@ function useColumns(
       .map((key) => ({
         field: key,
         headerName: key,
+        valueFormatter: (value: any) => {
+          if (value == null || value === "") return "";
+          const num = parseFloat(value);
+          if (isNaN(num)) return value;
+
+          return num.toLocaleString("en-US", {
+            minimumFractionDigits: num % 1 !== 0 ? 2 : 0,
+            maximumFractionDigits: num % 1 !== 0 ? 2 : 0,
+          });
+        },
         flex,
         editable: editableFields?.includes(key) ?? false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
@@ -304,7 +316,7 @@ function useColumns(
               {params?.row?.["Modal"]}
             </Button>
           ) as any,
-      });
+      } as any);
     }
 
     return cols;
@@ -322,7 +334,7 @@ function IHTable({
   buttons,
   exportName,
   modal,
-  height = 510,
+  height = 580,
   width = "100%",
   header,
   hideColumns = [],
@@ -387,30 +399,8 @@ function IHTable({
   if (!rows.length) return null;
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        height: HEIGHT_MAP[rows.length] ?? height,
-        width,
-        zIndex: 999999999,
-      }}
-    >
-      {modal && (
-        <ModalDialog
-          open={open}
-          onClose={handleClose}
-          modal={modal}
-          selectedRow={modalRow}
-        />
-      )}
-
-      {header && (
-        <div className="font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded">
-          {header}
-        </div>
-      )}
-
+    <div className="m-2">
+      {header && <div className="font-bold  p-2 ">{header}</div>}
       <Toolbar
         exportName={exportName}
         onSave={onSave}
@@ -419,31 +409,50 @@ function IHTable({
         filteredRows={filteredRows}
       />
 
-      <DataGrid
-        rows={rows}
-        columns={columns as any}
-        checkboxSelection={Boolean(onSelect)}
-        rowSelectionModel={selectedRows}
-        onRowSelectionModelChange={!modal ? setSelectedRows : undefined}
+      <Box
         sx={{
-          "& .MuiDataGrid-cell--editable": {
-            backgroundColor: "#c6d8f0",
-            fontWeight: 500,
-          },
-          ...(rows.length <= Object.keys(HEIGHT_MAP).length && {
-            "& .MuiDataGrid-filler": {
-              display: "none",
-            },
-          }),
+          display: "flex",
+          flexDirection: "column",
+          height: HEIGHT_MAP[rows.length] ?? height,
+          width,
+          zIndex: 999999999,
         }}
-        editMode="row"
-        processRowUpdate={handleRowUpdate}
-        pageSizeOptions={[5, 10]}
-        hideFooter={rows.length <= Object.keys(HEIGHT_MAP).length}
-      />
+      >
+        {modal && (
+          <ModalDialog
+            open={open}
+            onClose={handleClose}
+            modal={modal}
+            selectedRow={modalRow}
+          />
+        )}
+
+        <DataGrid
+          rows={rows}
+          columns={columns as any}
+          checkboxSelection={Boolean(onSelect)}
+          rowSelectionModel={selectedRows}
+          onRowSelectionModelChange={!modal ? setSelectedRows : undefined}
+          sx={{
+            "& .MuiDataGrid-cell--editable": {
+              backgroundColor: "#c6d8f0",
+              fontWeight: 500,
+            },
+            ...(rows.length <= Object.keys(HEIGHT_MAP).length && {
+              "& .MuiDataGrid-filler": {
+                display: "none",
+              },
+            }),
+          }}
+          editMode="row"
+          processRowUpdate={handleRowUpdate}
+          pageSizeOptions={[5, 10]}
+          hideFooter={rows.length <= Object.keys(HEIGHT_MAP).length}
+        />
 
-      <CustomFooter footer={footer} rows={rows} />
-    </Box>
+        <CustomFooter footer={footer} rows={rows} />
+      </Box>
+    </div>
   );
 }