next-recomponents 2.0.30 → 2.0.31

package/dist/index.d.mts

@@ -70,7 +70,6 @@ interface FooterType {
 type GridDensity = "compact" | "standard" | "comfortable";
 interface TableProps {
     data: any;
-    /** Muestra un input de búsqueda general que filtra filas por palabras clave */
     searchable?: boolean;
     flex?: number;
     editableFields?: string[];
@@ -90,35 +89,9 @@ interface TableProps {
     className?: string;
     fontSize?: string;
     colSize?: Record<string, number>;
-    /**
-     * Alto fijo de fila en px.
-     * Si se omite usa el default de MUI según `density`
-     * (compact ≈ 36, standard ≈ 52, comfortable ≈ 68).
-     * Se ignora automáticamente cuando `wrapText` es true.
-     */
     rowHeight?: number;
-    /**
-     * Cuando es true el texto largo hace wrap en lugar de truncarse,
-     * y el alto de cada fila crece para mostrar todo el contenido.
-     * Internamente activa `getRowHeight={() => "auto"}` en el DataGrid.
-     */
     wrapText?: boolean;
-    /**
-     * Densidad visual de la tabla.
-     * Afecta el padding de celdas y encabezados independientemente
-     * del tamaño de fuente.
-     * - "compact"     → padding mínimo, tabla muy densa
-     * - "standard"    → (default) comportamiento por defecto de MUI
-     * - "comfortable" → padding generoso, fácil de leer
-     */
     density?: GridDensity;
-    /**
-     * Cuando es true, el alto del contenedor se ajusta automáticamente
-     * al contenido de la tabla, eliminando el scroll vertical.
-     * Compatible con `wrapText` (filas de alto variable) y con
-     * cualquier valor de `density`. Cuando está activo, las props
-     * `height` y `HEIGHT_MAP` se ignoran.
-     */
     autoHeight?: boolean;
     [key: string]: any;
 }

package/dist/index.d.ts

@@ -70,7 +70,6 @@ interface FooterType {
 type GridDensity = "compact" | "standard" | "comfortable";
 interface TableProps {
     data: any;
-    /** Muestra un input de búsqueda general que filtra filas por palabras clave */
     searchable?: boolean;
     flex?: number;
     editableFields?: string[];
@@ -90,35 +89,9 @@ interface TableProps {
     className?: string;
     fontSize?: string;
     colSize?: Record<string, number>;
-    /**
-     * Alto fijo de fila en px.
-     * Si se omite usa el default de MUI según `density`
-     * (compact ≈ 36, standard ≈ 52, comfortable ≈ 68).
-     * Se ignora automáticamente cuando `wrapText` es true.
-     */
     rowHeight?: number;
-    /**
-     * Cuando es true el texto largo hace wrap en lugar de truncarse,
-     * y el alto de cada fila crece para mostrar todo el contenido.
-     * Internamente activa `getRowHeight={() => "auto"}` en el DataGrid.
-     */
     wrapText?: boolean;
-    /**
-     * Densidad visual de la tabla.
-     * Afecta el padding de celdas y encabezados independientemente
-     * del tamaño de fuente.
-     * - "compact"     → padding mínimo, tabla muy densa
-     * - "standard"    → (default) comportamiento por defecto de MUI
-     * - "comfortable" → padding generoso, fácil de leer
-     */
     density?: GridDensity;
-    /**
-     * Cuando es true, el alto del contenedor se ajusta automáticamente
-     * al contenido de la tabla, eliminando el scroll vertical.
-     * Compatible con `wrapText` (filas de alto variable) y con
-     * cualquier valor de `density`. Cuando está activo, las props
-     * `height` y `HEIGHT_MAP` se ignoran.
-     */
     autoHeight?: boolean;
     [key: string]: any;
 }

package/dist/index.js

@@ -35827,10 +35827,6 @@ 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 = 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",
@@ -35838,40 +35834,68 @@ function CustomFooter({
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-gray-900", children: key }),
       ":",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-blue-700", children: formatted })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-blue-700", children: value.toLocaleString() })
     ] }, key);
   }) });
 }
-function ModalDialog({ open, onClose, modal, selectedRow }) {
+function ModalDialog({
+  open,
+  onClose,
+  modal,
+  selectedRow,
+  onPrev,
+  onNext,
+  hasPrev,
+  hasNext
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material.Dialog, { open, maxWidth: "xl", fullWidth: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        onClick: onClose,
-        className: " font-bold p-1 m-5 w-[30px] h-[30px] flex items-center justify-center hover:animate-pulse border shadow rounded bg-red-500 text-white",
-        children: "\xD7"
-      }
-    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between p-4 border-b", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            disabled: !hasPrev,
+            onClick: onPrev,
+            className: "px-4 py-2 rounded border bg-gray-100 hover:bg-gray-200 disabled:opacity-40",
+            children: "\u2190 Anterior"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            disabled: !hasNext,
+            onClick: onNext,
+            className: "px-4 py-2 rounded border bg-gray-100 hover:bg-gray-200 disabled:opacity-40",
+            children: "Siguiente \u2192"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          onClick: onClose,
+          className: "font-bold w-[35px] h-[35px] flex items-center justify-center hover:animate-pulse border shadow rounded bg-red-500 text-white",
+          children: "\xD7"
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-4 m-auto p-5", children: selectedRow && import_react5.default.cloneElement(
       modal,
-      { row: selectedRow, hide: onClose }
+      {
+        row: selectedRow,
+        hide: onClose
+      }
     ) })
   ] });
 }
-function Toolbar({
-  exportName,
-  onSave,
-  onSelect,
-  rows,
-  filteredRows
-}) {
+function Toolbar({ exportName, onSave, onSelect, rows, filteredRows }) {
   const excel = useExcel();
   const stripMeta = (r) => {
     const { _edited, ...rest } = r;
     return rest;
   };
   if (!exportName && !onSave && !onSelect) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2  p-2 text-xs", 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,
       {
@@ -35891,170 +35915,20 @@ function Toolbar({
     ) : onSave && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { onClick: () => onSave(rows.map(stripMeta)), children: "Guardar" })
   ] });
 }
-function useColumns(rows, currentCoin, options, colSize) {
-  const {
-    flex,
-    editableFields,
-    buttons,
-    hideColumns,
-    modal,
-    wrapText,
-    handleRowUpdate,
-    onModalOpen
-  } = options;
-  return (0, import_react5.useMemo)(() => {
-    if (!rows.length) return [];
-    const cols = Object.keys(rows[0]).filter((key) => !key.startsWith("_") && !hideColumns.includes(key)).map((key) => {
-      var _a, _b;
-      return {
-        field: key,
-        headerName: key,
-        valueFormatter: (value) => {
-          if (value == null || value === "") return "";
-          const isDate = /(\d{4}-\d{2}-\d{2})(T[\d:,.+-]*(Z)?)?/;
-          if (`${value}`.match(isDate)) {
-            return value.toString().split("T")[0].split("-").reverse().join("/");
-          }
-          const splited = `${value}`.split(".");
-          const hasDecimals = splited.length == 2 && splited.every((v) => `${v}`.match(regular_expresions_default.number));
-          if (hasDecimals) {
-            return [
-              currentCoin,
-              (+`${value}`).toLocaleString("en-US", {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2
-              })
-            ].join(" ");
-          }
-          const isNumber = typeof value === "number";
-          if (isNumber) {
-            if (isNaN(value)) return value;
-            return value;
-          }
-          return value;
-        },
-        flex: key == "id" ? false : !(colSize == null ? void 0 : colSize[key]),
-        width: key == "id" ? 80 : (_a = colSize == null ? void 0 : colSize[key]) != null ? _a : void 0,
-        editable: (_b = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _b : false,
-        type: typeof rows[0][key] === "number" ? "number" : "string",
-        // When wrapText is enabled, allow cells to grow vertically
-        ...wrapText && {
-          renderHeader: (params) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "span",
-            {
-              style: {
-                whiteSpace: "normal",
-                lineHeight: 1.3,
-                wordBreak: "break-word"
-              },
-              children: params.colDef.headerName
-            }
-          )
-        },
-        renderCell: (buttons == null ? void 0 : buttons[key]) ? (params) => {
-          var _a2, _b2, _c;
-          const children = ((_a2 = buttons == null ? void 0 : buttons[key]) == null ? void 0 : _a2.type) == "input" ? null : (_b2 = params == null ? void 0 : params.row) == null ? void 0 : _b2[key];
-          return import_react5.default.cloneElement(buttons[key], {
-            className: `${(_c = params == null ? void 0 : params.className) != null ? _c : ""} m-auto text-xs`,
-            children,
-            row: params == null ? void 0 : params.row,
-            onClick: async (e) => {
-              var _a3, _b3;
-              e.row = params == null ? void 0 : params.row;
-              if ((_b3 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b3.onClick) {
-                const newVal = await buttons[key].props.onClick(e);
-                if (newVal) handleRowUpdate({ ...e.row, newVal });
-              }
-            }
-          });
-        } : wrapText ? (params) => {
-          var _a2;
-          return (
-            // Plain cell with wrap — no custom button
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "span",
-              {
-                style: {
-                  whiteSpace: "normal",
-                  wordBreak: "break-word",
-                  lineHeight: 1.4,
-                  padding: "6px 0",
-                  display: "block"
-                },
-                children: (_a2 = params.formattedValue) != null ? _a2 : params.value
-              }
-            )
-          );
-        } : null
-      };
-    });
-    if (modal) {
-      cols.unshift({
-        field: "Modal",
-        headerName: "Modal",
-        editable: false,
-        type: "string",
-        width: 10,
-        renderCell: (params) => {
-          var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            Button,
-            {
-              className: "text-xs",
-              onClick: () => onModalOpen(params.row),
-              icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EditIcon, {}),
-              children: (_a = params == null ? void 0 : params.row) == null ? void 0 : _a["Modal"]
-            }
-          );
-        }
-      });
-    }
-    return cols;
-  }, [rows, wrapText]);
-}
 function SearchBar({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 px-2 pb-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "svg",
-      {
-        className: "text-gray-400 shrink-0",
-        width: "14",
-        height: "14",
-        viewBox: "0 0 20 20",
-        fill: "currentColor",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "path",
-          {
-            fillRule: "evenodd",
-            d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
-            clipRule: "evenodd"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "input",
-      {
-        type: "text",
-        value,
-        onChange: (e) => onChange(e.target.value),
-        placeholder: "Buscar\u2026",
-        className: "w-full max-w-xs text-xs border border-gray-300 rounded px-2 py-1 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition"
-      }
-    ),
-    value && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        onClick: () => onChange(""),
-        className: "text-gray-400 hover:text-gray-600 text-sm leading-none",
-        title: "Limpiar b\xFAsqueda",
-        children: "\xD7"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center gap-2 px-2 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder: "Buscar\u2026",
+      className: "w-full max-w-xs text-xs border border-gray-300 rounded px-2 py-1"
+    }
+  ) });
 }
 function rowMatchesSearch(row, query) {
   if (!query.trim()) return true;
@@ -36088,29 +35962,54 @@ function IHTable({
   autoHeight = false
 }) {
   var _a;
-  if (modal && onSelect)
-    throw new Error("Solo se puede usar modal o onSelect por separado");
   const [open, setOpen] = (0, import_react5.useState)(false);
   const [rows, setRows] = (0, import_react5.useState)(data);
+  const [modalIndex, setModalIndex] = (0, import_react5.useState)(null);
   const [selectedRows, setSelectedRows] = (0, import_react5.useState)({
     type: "include",
     ids: /* @__PURE__ */ new Set()
   });
-  const [modalRow, setModalRow] = (0, import_react5.useState)();
   const [searchQuery, setSearchQuery] = (0, import_react5.useState)("");
-  const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
   (0, import_react5.useEffect)(() => {
     setRows(data);
   }, [data]);
+  const filteredRows = (0, import_react5.useMemo)(() => {
+    if ((selectedRows == null ? void 0 : selectedRows.type) === "exclude") {
+      return rows.filter((r) => !Array.from(selectedRows.ids).includes(r.id));
+    }
+    if ((selectedRows == null ? void 0 : selectedRows.type) === "include") {
+      return rows.filter((r) => Array.from(selectedRows.ids).includes(r.id));
+    }
+    return [];
+  }, [selectedRows, rows]);
+  const displayRows = (0, import_react5.useMemo)(
+    () => searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
+    [rows, searchQuery, searchable]
+  );
+  const modalRow = modalIndex != null ? displayRows[modalIndex] : void 0;
   const handleModalOpen = (row) => {
-    setModalRow(row);
+    const index = displayRows.findIndex((r) => r.id === row.id);
+    if (index === -1) return;
+    setModalIndex(index);
     setOpen(true);
   };
   const handleClose = async () => {
-    const pass = onCloseModal ? await (onCloseModal == null ? void 0 : onCloseModal(modalRow)) : true;
+    const pass = onCloseModal ? await onCloseModal(modalRow) : true;
     if (!pass) return;
     setOpen(false);
-    setModalRow(void 0);
+    setModalIndex(null);
+  };
+  const handlePrevRow = () => {
+    setModalIndex((prev) => {
+      if (prev == null) return prev;
+      return Math.max(prev - 1, 0);
+    });
+  };
+  const handleNextRow = () => {
+    setModalIndex((prev) => {
+      if (prev == null) return prev;
+      return Math.min(prev + 1, displayRows.length - 1);
+    });
   };
   const handleRowUpdate = (newRow) => {
     if (!newRow.id) throw new Error("Fila sin id");
@@ -36120,40 +36019,82 @@ function IHTable({
     );
     return updated;
   };
-  const filteredRows = (0, import_react5.useMemo)(() => {
-    if ((selectedRows == null ? void 0 : selectedRows.type) === "exclude") {
-      return rows.filter((r) => !Array.from(selectedRows.ids).includes(r.id));
-    }
-    if ((selectedRows == null ? void 0 : selectedRows.type) === "include") {
-      return rows.filter((r) => Array.from(selectedRows.ids).includes(r.id));
+  const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
+  const columns = (0, import_react5.useMemo)(() => {
+    if (!displayRows.length) return [];
+    const cols = Object.keys(displayRows[0]).filter((key) => !key.startsWith("_") && !hideColumns.includes(key)).map((key) => {
+      var _a2, _b;
+      return {
+        field: key,
+        headerName: key,
+        flex: key == "id" ? false : !(colSize == null ? void 0 : colSize[key]),
+        width: key == "id" ? 80 : (_a2 = colSize == null ? void 0 : colSize[key]) != null ? _a2 : void 0,
+        editable: (_b = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _b : false,
+        type: typeof displayRows[0][key] === "number" ? "number" : "string",
+        valueFormatter: (value) => {
+          if (value == null || value === "") return "";
+          const isDate = /(\d{4}-\d{2}-\d{2})(T[\d:,.+-]*(Z)?)?/;
+          if (`${value}`.match(isDate)) {
+            return value.toString().split("T")[0].split("-").reverse().join("/");
+          }
+          const splited = `${value}`.split(".");
+          const hasDecimals = splited.length == 2 && splited.every((v) => `${v}`.match(regular_expresions_default.number));
+          if (hasDecimals) {
+            return [
+              currentCoin,
+              (+`${value}`).toLocaleString("en-US", {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2
+              })
+            ].join(" ");
+          }
+          return value;
+        },
+        renderCell: (resolvedButtons == null ? void 0 : resolvedButtons[key]) ? (params) => {
+          var _a3, _b2, _c;
+          const children = ((_a3 = resolvedButtons == null ? void 0 : resolvedButtons[key]) == null ? void 0 : _a3.type) == "input" ? null : (_b2 = params == null ? void 0 : params.row) == null ? void 0 : _b2[key];
+          return import_react5.default.cloneElement(resolvedButtons[key], {
+            className: `${(_c = params == null ? void 0 : params.className) != null ? _c : ""} m-auto text-xs`,
+            children,
+            row: params == null ? void 0 : params.row,
+            onClick: async (e) => {
+              var _a4, _b3;
+              e.row = params == null ? void 0 : params.row;
+              if ((_b3 = (_a4 = resolvedButtons[key]) == null ? void 0 : _a4.props) == null ? void 0 : _b3.onClick) {
+                const newVal = await resolvedButtons[key].props.onClick(e);
+                if (newVal) {
+                  handleRowUpdate({ ...e.row, newVal });
+                }
+              }
+            }
+          });
+        } : null
+      };
+    });
+    if (modal) {
+      cols.unshift({
+        field: "Modal",
+        headerName: "Modal",
+        width: 100,
+        renderCell: (params) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Button,
+          {
+            className: "text-xs",
+            onClick: () => handleModalOpen(params.row),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EditIcon, {}),
+            children: "Abrir"
+          }
+        )
+      });
     }
-    return [];
-  }, [selectedRows, rows]);
-  const displayRows = (0, import_react5.useMemo)(
-    () => searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
-    [rows, searchQuery, searchable]
-  );
-  const columns = useColumns(
-    displayRows,
-    currentCoin,
-    {
-      flex,
-      editableFields,
-      buttons: resolvedButtons,
-      hideColumns,
-      modal,
-      wrapText,
-      handleRowUpdate,
-      onModalOpen: handleModalOpen
-    },
-    colSize
-  );
+    return cols;
+  }, [displayRows]);
   if (!rows.length) return null;
   const rowHeightProps = wrapText ? { getRowHeight: () => "auto" } : rowHeight != null ? { rowHeight } : {};
   const containerHeight = autoHeight ? void 0 : (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height;
   const hideFooter = autoHeight || displayRows.length <= Object.keys(HEIGHT_MAP).length;
   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 }),
+    header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-bold p-2", children: header }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Toolbar,
@@ -36173,10 +36114,8 @@ function IHTable({
         sx: {
           display: "flex",
           flexDirection: "column",
-          // undefined height lets the child DataGrid size itself freely
           height: containerHeight,
-          width,
-          zIndex: 999999999
+          width
         },
         children: [
           modal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -36185,7 +36124,11 @@ function IHTable({
               open,
               onClose: handleClose,
               modal,
-              selectedRow: modalRow
+              selectedRow: modalRow,
+              onPrev: handlePrevRow,
+              onNext: handleNextRow,
+              hasPrev: (modalIndex != null ? modalIndex : 0) > 0,
+              hasNext: (modalIndex != null ? modalIndex : -1) < displayRows.length - 1
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -36203,35 +36146,14 @@ function IHTable({
               sx: {
                 fontSize,
                 "& .MuiDataGrid-cell": {
-                  fontSize,
-                  // Allow cells to wrap text when wrapText is enabled
-                  ...wrapText && {
-                    alignItems: "flex-start",
-                    paddingTop: "8px",
-                    paddingBottom: "8px",
-                    whiteSpace: "normal",
-                    wordBreak: "break-word"
-                  }
+                  fontSize
                 },
                 "& .MuiDataGrid-columnHeader": {
-                  fontSize,
-                  ...wrapText && {
-                    whiteSpace: "normal",
-                    "& .MuiDataGrid-columnHeaderTitle": {
-                      whiteSpace: "normal",
-                      lineHeight: 1.3,
-                      wordBreak: "break-word"
-                    }
-                  }
+                  fontSize
                 },
                 "& .MuiDataGrid-cell--editable": {
                   backgroundColor: "#c6d8f0",
                   fontWeight: 500
-                },
-                ...displayRows.length <= Object.keys(HEIGHT_MAP).length && {
-                  "& .MuiDataGrid-filler": {
-                    display: "none"
-                  }
                 }
               },
               editMode: "row",