next-recomponents 2.0.26 → 2.0.28

package/dist/index.d.mts

@@ -66,13 +66,16 @@ type FooterAggregation = "sum" | "avg" | "count";
 interface FooterType {
     [key: string]: FooterAggregation;
 }
+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[];
     onSelect?: (data: GridValidRowModel[]) => void;
     onSave?: (data: GridValidRowModel[]) => void;
-    onCloseModal?: (data: GridValidRowModel | undefined) => boolean;
+    onCloseModal?: (data: GridValidRowModel | undefined) => boolean | Promise<boolean>;
     buttons?: Record<string, any>;
     exportName?: string;
     modal?: React$1.ReactNode;
@@ -86,6 +89,28 @@ 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;
     [key: string]: any;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -66,13 +66,16 @@ type FooterAggregation = "sum" | "avg" | "count";
 interface FooterType {
     [key: string]: FooterAggregation;
 }
+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[];
     onSelect?: (data: GridValidRowModel[]) => void;
     onSave?: (data: GridValidRowModel[]) => void;
-    onCloseModal?: (data: GridValidRowModel | undefined) => boolean;
+    onCloseModal?: (data: GridValidRowModel | undefined) => boolean | Promise<boolean>;
     buttons?: Record<string, any>;
     exportName?: string;
     modal?: React$1.ReactNode;
@@ -86,6 +89,28 @@ 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;
     [key: string]: any;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -35828,6 +35828,7 @@ function useColumns(rows, currentCoin, options, colSize) {
     buttons,
     hideColumns,
     modal,
+    wrapText,
     handleRowUpdate,
     onModalOpen
   } = options;
@@ -35866,6 +35867,20 @@ function useColumns(rows, currentCoin, options, colSize) {
         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];
@@ -35882,6 +35897,24 @@ function useColumns(rows, currentCoin, options, colSize) {
               }
             }
           });
+        } : 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
       };
     });
@@ -35889,7 +35922,6 @@ function useColumns(rows, currentCoin, options, colSize) {
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        // flex,
         editable: false,
         type: "string",
         width: 10,
@@ -35908,7 +35940,57 @@ function useColumns(rows, currentCoin, options, colSize) {
       });
     }
     return cols;
-  }, [rows]);
+  }, [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"
+      }
+    )
+  ] });
+}
+function rowMatchesSearch(row, query) {
+  if (!query.trim()) return true;
+  const words = query.trim().toLowerCase().split(/\s+/);
+  const rowText = Object.values(row).filter((v) => v != null && v !== "").join(" ").toLowerCase();
+  return words.every((word) => rowText.includes(word));
 }
 function IHTable({
   data,
@@ -35928,7 +36010,11 @@ function IHTable({
   currentCoin = "$",
   fontSize = "1rem",
   className,
-  colSize
+  colSize,
+  rowHeight,
+  wrapText = false,
+  density = "standard",
+  searchable = false
 }) {
   var _a;
   if (modal && onSelect)
@@ -35940,6 +36026,7 @@ function IHTable({
     ids: /* @__PURE__ */ new Set()
   });
   const [modalRow, setModalRow] = (0, import_react4.useState)();
+  const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
   const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
   (0, import_react4.useEffect)(() => {
     setRows(data);
@@ -35948,8 +36035,8 @@ function IHTable({
     setModalRow(row);
     setOpen(true);
   };
-  const handleClose = () => {
-    const pass = onCloseModal ? onCloseModal == null ? void 0 : onCloseModal(modalRow) : true;
+  const handleClose = async () => {
+    const pass = onCloseModal ? await (onCloseModal == null ? void 0 : onCloseModal(modalRow)) : true;
     if (!pass) return;
     setOpen(false);
     setModalRow(void 0);
@@ -35971,8 +36058,12 @@ function IHTable({
     }
     return [];
   }, [selectedRows, rows]);
+  const displayRows = (0, import_react4.useMemo)(
+    () => searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
+    [rows, searchQuery, searchable]
+  );
   const columns = useColumns(
-    rows,
+    displayRows,
     currentCoin,
     {
       flex,
@@ -35980,31 +36071,36 @@ function IHTable({
       buttons: resolvedButtons,
       hideColumns,
       modal,
+      wrapText,
       handleRowUpdate,
       onModalOpen: handleModalOpen
     },
     colSize
   );
   if (!rows.length) return null;
+  const rowHeightProps = wrapText ? { getRowHeight: () => "auto" } : rowHeight != null ? { rowHeight } : {};
   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)("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Toolbar,
+        {
+          exportName,
+          onSave,
+          onSelect,
+          rows,
+          filteredRows
+        }
+      ),
+      searchable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchBar, { value: searchQuery, onChange: setSearchQuery })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       import_material.Box,
       {
         sx: {
           display: "flex",
           flexDirection: "column",
-          height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
+          height: (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height,
           width,
           zIndex: 999999999
         },
@@ -36022,25 +36118,42 @@ function IHTable({
             import_x_data_grid.DataGrid,
             {
               className,
-              rows,
+              rows: displayRows,
               columns,
+              density,
               checkboxSelection: Boolean(onSelect),
               rowSelectionModel: selectedRows,
               onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
+              ...rowHeightProps,
               sx: {
                 fontSize,
-                // equivalente a text-xs
                 "& .MuiDataGrid-cell": {
-                  fontSize
+                  fontSize,
+                  // Allow cells to wrap text when wrapText is enabled
+                  ...wrapText && {
+                    alignItems: "flex-start",
+                    paddingTop: "8px",
+                    paddingBottom: "8px",
+                    whiteSpace: "normal",
+                    wordBreak: "break-word"
+                  }
                 },
                 "& .MuiDataGrid-columnHeader": {
-                  fontSize
+                  fontSize,
+                  ...wrapText && {
+                    whiteSpace: "normal",
+                    "& .MuiDataGrid-columnHeaderTitle": {
+                      whiteSpace: "normal",
+                      lineHeight: 1.3,
+                      wordBreak: "break-word"
+                    }
+                  }
                 },
                 "& .MuiDataGrid-cell--editable": {
                   backgroundColor: "#c6d8f0",
                   fontWeight: 500
                 },
-                ...rows.length <= Object.keys(HEIGHT_MAP).length && {
+                ...displayRows.length <= Object.keys(HEIGHT_MAP).length && {
                   "& .MuiDataGrid-filler": {
                     display: "none"
                   }
@@ -36049,13 +36162,13 @@ function IHTable({
               editMode: "row",
               processRowUpdate: handleRowUpdate,
               pageSizeOptions: [5, 10],
-              hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
+              hideFooter: displayRows.length <= Object.keys(HEIGHT_MAP).length
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomFooter, { footer, rows })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomFooter, { footer, rows: displayRows })
   ] });
 }
 function Table(props) {

package/dist/index.mjs

@@ -35808,6 +35808,7 @@ function useColumns(rows, currentCoin, options, colSize) {
     buttons,
     hideColumns,
     modal,
+    wrapText,
     handleRowUpdate,
     onModalOpen
   } = options;
@@ -35846,6 +35847,20 @@ function useColumns(rows, currentCoin, options, colSize) {
         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__ */ jsx6(
+            "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];
@@ -35862,6 +35877,24 @@ function useColumns(rows, currentCoin, options, colSize) {
               }
             }
           });
+        } : wrapText ? (params) => {
+          var _a2;
+          return (
+            // Plain cell with wrap — no custom button
+            /* @__PURE__ */ jsx6(
+              "span",
+              {
+                style: {
+                  whiteSpace: "normal",
+                  wordBreak: "break-word",
+                  lineHeight: 1.4,
+                  padding: "6px 0",
+                  display: "block"
+                },
+                children: (_a2 = params.formattedValue) != null ? _a2 : params.value
+              }
+            )
+          );
         } : null
       };
     });
@@ -35869,7 +35902,6 @@ function useColumns(rows, currentCoin, options, colSize) {
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        // flex,
         editable: false,
         type: "string",
         width: 10,
@@ -35888,7 +35920,57 @@ function useColumns(rows, currentCoin, options, colSize) {
       });
     }
     return cols;
-  }, [rows]);
+  }, [rows, wrapText]);
+}
+function SearchBar({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 px-2 pb-1", children: [
+    /* @__PURE__ */ jsx6(
+      "svg",
+      {
+        className: "text-gray-400 shrink-0",
+        width: "14",
+        height: "14",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        children: /* @__PURE__ */ jsx6(
+          "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__ */ jsx6(
+      "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__ */ jsx6(
+      "button",
+      {
+        onClick: () => onChange(""),
+        className: "text-gray-400 hover:text-gray-600 text-sm leading-none",
+        title: "Limpiar b\xFAsqueda",
+        children: "\xD7"
+      }
+    )
+  ] });
+}
+function rowMatchesSearch(row, query) {
+  if (!query.trim()) return true;
+  const words = query.trim().toLowerCase().split(/\s+/);
+  const rowText = Object.values(row).filter((v) => v != null && v !== "").join(" ").toLowerCase();
+  return words.every((word) => rowText.includes(word));
 }
 function IHTable({
   data,
@@ -35908,7 +35990,11 @@ function IHTable({
   currentCoin = "$",
   fontSize = "1rem",
   className,
-  colSize
+  colSize,
+  rowHeight,
+  wrapText = false,
+  density = "standard",
+  searchable = false
 }) {
   var _a;
   if (modal && onSelect)
@@ -35920,6 +36006,7 @@ function IHTable({
     ids: /* @__PURE__ */ new Set()
   });
   const [modalRow, setModalRow] = useState4();
+  const [searchQuery, setSearchQuery] = useState4("");
   const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
   useEffect3(() => {
     setRows(data);
@@ -35928,8 +36015,8 @@ function IHTable({
     setModalRow(row);
     setOpen(true);
   };
-  const handleClose = () => {
-    const pass = onCloseModal ? onCloseModal == null ? void 0 : onCloseModal(modalRow) : true;
+  const handleClose = async () => {
+    const pass = onCloseModal ? await (onCloseModal == null ? void 0 : onCloseModal(modalRow)) : true;
     if (!pass) return;
     setOpen(false);
     setModalRow(void 0);
@@ -35951,8 +36038,12 @@ function IHTable({
     }
     return [];
   }, [selectedRows, rows]);
+  const displayRows = useMemo(
+    () => searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
+    [rows, searchQuery, searchable]
+  );
   const columns = useColumns(
-    rows,
+    displayRows,
     currentCoin,
     {
       flex,
@@ -35960,31 +36051,36 @@ function IHTable({
       buttons: resolvedButtons,
       hideColumns,
       modal,
+      wrapText,
       handleRowUpdate,
       onModalOpen: handleModalOpen
     },
     colSize
   );
   if (!rows.length) return null;
+  const rowHeightProps = wrapText ? { getRowHeight: () => "auto" } : rowHeight != null ? { rowHeight } : {};
   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("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ jsx6(
+        Toolbar,
+        {
+          exportName,
+          onSave,
+          onSelect,
+          rows,
+          filteredRows
+        }
+      ),
+      searchable && /* @__PURE__ */ jsx6(SearchBar, { value: searchQuery, onChange: setSearchQuery })
+    ] }),
     /* @__PURE__ */ jsxs5(
       Box,
       {
         sx: {
           display: "flex",
           flexDirection: "column",
-          height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
+          height: (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height,
           width,
           zIndex: 999999999
         },
@@ -36002,25 +36098,42 @@ function IHTable({
             DataGrid,
             {
               className,
-              rows,
+              rows: displayRows,
               columns,
+              density,
               checkboxSelection: Boolean(onSelect),
               rowSelectionModel: selectedRows,
               onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
+              ...rowHeightProps,
               sx: {
                 fontSize,
-                // equivalente a text-xs
                 "& .MuiDataGrid-cell": {
-                  fontSize
+                  fontSize,
+                  // Allow cells to wrap text when wrapText is enabled
+                  ...wrapText && {
+                    alignItems: "flex-start",
+                    paddingTop: "8px",
+                    paddingBottom: "8px",
+                    whiteSpace: "normal",
+                    wordBreak: "break-word"
+                  }
                 },
                 "& .MuiDataGrid-columnHeader": {
-                  fontSize
+                  fontSize,
+                  ...wrapText && {
+                    whiteSpace: "normal",
+                    "& .MuiDataGrid-columnHeaderTitle": {
+                      whiteSpace: "normal",
+                      lineHeight: 1.3,
+                      wordBreak: "break-word"
+                    }
+                  }
                 },
                 "& .MuiDataGrid-cell--editable": {
                   backgroundColor: "#c6d8f0",
                   fontWeight: 500
                 },
-                ...rows.length <= Object.keys(HEIGHT_MAP).length && {
+                ...displayRows.length <= Object.keys(HEIGHT_MAP).length && {
                   "& .MuiDataGrid-filler": {
                     display: "none"
                   }
@@ -36029,13 +36142,13 @@ function IHTable({
               editMode: "row",
               processRowUpdate: handleRowUpdate,
               pageSizeOptions: [5, 10],
-              hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
+              hideFooter: displayRows.length <= Object.keys(HEIGHT_MAP).length
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx6(CustomFooter, { footer, rows })
+    /* @__PURE__ */ jsx6(CustomFooter, { footer, rows: displayRows })
   ] });
 }
 function Table(props) {

package/package.json

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

package/src/table/index.tsx

@@ -22,13 +22,19 @@ interface FooterType {
   [key: string]: FooterAggregation;
 }
 
+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[];
   onSelect?: (data: GridValidRowModel[]) => void;
   onSave?: (data: GridValidRowModel[]) => void;
-  onCloseModal?: (data: GridValidRowModel | undefined) => boolean;
+  onCloseModal?: (
+    data: GridValidRowModel | undefined,
+  ) => boolean | Promise<boolean>;
   buttons?: Record<string, any>;
   exportName?: string;
   modal?: React.ReactNode;
@@ -42,6 +48,28 @@ 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;
   [key: string]: any;
 }
 
@@ -254,6 +282,7 @@ function useColumns(
     buttons?: Record<string, any>;
     hideColumns: string[];
     modal?: React.ReactNode;
+    wrapText?: boolean;
     handleRowUpdate: (row: GridRowModel) => GridRowModel;
     onModalOpen: (row: GridValidRowModel) => void;
   },
@@ -265,9 +294,11 @@ function useColumns(
     buttons,
     hideColumns,
     modal,
+    wrapText,
     handleRowUpdate,
     onModalOpen,
   } = options;
+
   return useMemo(() => {
     if (!rows.length) return [];
 
@@ -307,7 +338,6 @@ function useColumns(
 
           if (isNumber) {
             if (isNaN(value)) return value;
-
             return value;
           }
 
@@ -317,6 +347,20 @@ function useColumns(
         width: key == "id" ? 80 : (colSize?.[key] ?? undefined),
         editable: editableFields?.includes(key) ?? false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
+        // When wrapText is enabled, allow cells to grow vertically
+        ...(wrapText && {
+          renderHeader: (params: any) => (
+            <span
+              style={{
+                whiteSpace: "normal",
+                lineHeight: 1.3,
+                wordBreak: "break-word",
+              }}
+            >
+              {params.colDef.headerName}
+            </span>
+          ),
+        }),
         renderCell: buttons?.[key]
           ? (params: any) => {
               const children =
@@ -336,14 +380,28 @@ function useColumns(
                 },
               });
             }
-          : null,
+          : wrapText
+            ? (params: any) => (
+                // Plain cell with wrap — no custom button
+                <span
+                  style={{
+                    whiteSpace: "normal",
+                    wordBreak: "break-word",
+                    lineHeight: 1.4,
+                    padding: "6px 0",
+                    display: "block",
+                  }}
+                >
+                  {params.formattedValue ?? params.value}
+                </span>
+              )
+            : null,
       }));
 
     if (modal) {
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        // flex,
         editable: false,
         type: "string",
         width: 10,
@@ -361,10 +419,63 @@ function useColumns(
     }
 
     return cols;
-  }, [rows]);
+  }, [rows, wrapText]);
 }
 
-// ─── IHTable (array data) ─────────────────────────────────────────────────────
+// ─── SearchBar ────────────────────────────────────────────────────────────────
+
+function SearchBar({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2 px-2 pb-1">
+      <svg
+        className="text-gray-400 shrink-0"
+        width="14"
+        height="14"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <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"
+        />
+      </svg>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Buscar…"
+        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 && (
+        <button
+          onClick={() => onChange("")}
+          className="text-gray-400 hover:text-gray-600 text-sm leading-none"
+          title="Limpiar búsqueda"
+        >
+          &times;
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** Devuelve true si la fila contiene TODAS las palabras del query */
+function rowMatchesSearch(row: GridValidRowModel, query: string): boolean {
+  if (!query.trim()) return true;
+  const words = query.trim().toLowerCase().split(/\s+/);
+  const rowText = Object.values(row)
+    .filter((v) => v != null && v !== "")
+    .join(" ")
+    .toLowerCase();
+  return words.every((word) => rowText.includes(word));
+}
 
 function IHTable({
   data,
@@ -385,6 +496,10 @@ function IHTable({
   fontSize = "1rem",
   className,
   colSize,
+  rowHeight,
+  wrapText = false,
+  density = "standard",
+  searchable = false,
 }: TableProps) {
   if (modal && onSelect)
     throw new Error("Solo se puede usar modal o onSelect por separado");
@@ -396,6 +511,7 @@ function IHTable({
     ids: new Set(),
   });
   const [modalRow, setModalRow] = useState<GridValidRowModel | undefined>();
+  const [searchQuery, setSearchQuery] = useState("");
 
   // Inject Modal button key if modal is provided
   const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
@@ -408,8 +524,8 @@ function IHTable({
     setModalRow(row);
     setOpen(true);
   };
-  const handleClose = () => {
-    const pass = onCloseModal ? onCloseModal?.(modalRow) : true;
+  const handleClose = async () => {
+    const pass = onCloseModal ? await onCloseModal?.(modalRow) : true;
 
     if (!pass) return;
     setOpen(false);
@@ -435,8 +551,15 @@ function IHTable({
     return [];
   }, [selectedRows, rows]);
 
+  // Rows after applying the search filter (only when searchable is enabled)
+  const displayRows = useMemo(
+    () =>
+      searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
+    [rows, searchQuery, searchable],
+  );
+
   const columns = useColumns(
-    rows,
+    displayRows,
     currentCoin,
     {
       flex,
@@ -444,6 +567,7 @@ function IHTable({
       buttons: resolvedButtons,
       hideColumns,
       modal,
+      wrapText,
       handleRowUpdate,
       onModalOpen: handleModalOpen,
     },
@@ -452,22 +576,34 @@ function IHTable({
 
   if (!rows.length) return null;
 
+  // When wrapText is active we must use getRowHeight; rowHeight prop is ignored.
+  const rowHeightProps = wrapText
+    ? { getRowHeight: () => "auto" as const }
+    : rowHeight != null
+      ? { rowHeight }
+      : {};
+
   return (
     <div className="m-2">
       {header && <div className="font-bold  p-2 ">{header}</div>}
-      <Toolbar
-        exportName={exportName}
-        onSave={onSave}
-        onSelect={onSelect}
-        rows={rows}
-        filteredRows={filteredRows}
-      />
+      <div className="flex justify-between">
+        <Toolbar
+          exportName={exportName}
+          onSave={onSave}
+          onSelect={onSelect}
+          rows={rows}
+          filteredRows={filteredRows}
+        />
+        {searchable && (
+          <SearchBar value={searchQuery} onChange={setSearchQuery} />
+        )}
+      </div>
 
       <Box
         sx={{
           display: "flex",
           flexDirection: "column",
-          height: HEIGHT_MAP[rows.length] ?? height,
+          height: HEIGHT_MAP[displayRows.length] ?? height,
           width,
           zIndex: 999999999,
         }}
@@ -483,24 +619,42 @@ function IHTable({
 
         <DataGrid
           className={className}
-          rows={rows}
+          rows={displayRows}
           columns={columns as any}
+          density={density}
           checkboxSelection={Boolean(onSelect)}
           rowSelectionModel={selectedRows}
           onRowSelectionModelChange={!modal ? setSelectedRows : undefined}
+          {...rowHeightProps}
           sx={{
-            fontSize, // equivalente a text-xs
+            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",
+              }),
             },
             "& .MuiDataGrid-columnHeader": {
               fontSize,
+              ...(wrapText && {
+                whiteSpace: "normal",
+                "& .MuiDataGrid-columnHeaderTitle": {
+                  whiteSpace: "normal",
+                  lineHeight: 1.3,
+                  wordBreak: "break-word",
+                },
+              }),
             },
             "& .MuiDataGrid-cell--editable": {
               backgroundColor: "#c6d8f0",
               fontWeight: 500,
             },
-            ...(rows.length <= Object.keys(HEIGHT_MAP).length && {
+            ...(displayRows.length <= Object.keys(HEIGHT_MAP).length && {
               "& .MuiDataGrid-filler": {
                 display: "none",
               },
@@ -509,10 +663,10 @@ function IHTable({
           editMode="row"
           processRowUpdate={handleRowUpdate}
           pageSizeOptions={[5, 10]}
-          hideFooter={rows.length <= Object.keys(HEIGHT_MAP).length}
+          hideFooter={displayRows.length <= Object.keys(HEIGHT_MAP).length}
         />
       </Box>
-      <CustomFooter footer={footer} rows={rows} />
+      <CustomFooter footer={footer} rows={displayRows} />
     </div>
   );
 }