next-recomponents 2.0.29 → 2.0.30

package/dist/index.d.mts

@@ -112,6 +112,14 @@ interface TableProps {
      * - "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;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -112,6 +112,14 @@ interface TableProps {
      * - "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;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -36084,7 +36084,8 @@ function IHTable({
   rowHeight,
   wrapText = false,
   density = "standard",
-  searchable = false
+  searchable = false,
+  autoHeight = false
 }) {
   var _a;
   if (modal && onSelect)
@@ -36149,6 +36150,8 @@ function IHTable({
   );
   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 }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-between", children: [
@@ -36170,7 +36173,8 @@ function IHTable({
         sx: {
           display: "flex",
           flexDirection: "column",
-          height: (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height,
+          // undefined height lets the child DataGrid size itself freely
+          height: containerHeight,
           width,
           zIndex: 999999999
         },
@@ -36191,6 +36195,7 @@ function IHTable({
               rows: displayRows,
               columns,
               density,
+              autoHeight,
               checkboxSelection: Boolean(onSelect),
               rowSelectionModel: selectedRows,
               onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
@@ -36232,7 +36237,7 @@ function IHTable({
               editMode: "row",
               processRowUpdate: handleRowUpdate,
               pageSizeOptions: [5, 10],
-              hideFooter: displayRows.length <= Object.keys(HEIGHT_MAP).length
+              hideFooter
             }
           )
         ]

package/dist/index.mjs

@@ -36064,7 +36064,8 @@ function IHTable({
   rowHeight,
   wrapText = false,
   density = "standard",
-  searchable = false
+  searchable = false,
+  autoHeight = false
 }) {
   var _a;
   if (modal && onSelect)
@@ -36129,6 +36130,8 @@ function IHTable({
   );
   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__ */ jsxs5("div", { className: "m-2", children: [
     header && /* @__PURE__ */ jsx6("div", { className: "font-bold  p-2 ", children: header }),
     /* @__PURE__ */ jsxs5("div", { className: "flex justify-between", children: [
@@ -36150,7 +36153,8 @@ function IHTable({
         sx: {
           display: "flex",
           flexDirection: "column",
-          height: (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height,
+          // undefined height lets the child DataGrid size itself freely
+          height: containerHeight,
           width,
           zIndex: 999999999
         },
@@ -36171,6 +36175,7 @@ function IHTable({
               rows: displayRows,
               columns,
               density,
+              autoHeight,
               checkboxSelection: Boolean(onSelect),
               rowSelectionModel: selectedRows,
               onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
@@ -36212,7 +36217,7 @@ function IHTable({
               editMode: "row",
               processRowUpdate: handleRowUpdate,
               pageSizeOptions: [5, 10],
-              hideFooter: displayRows.length <= Object.keys(HEIGHT_MAP).length
+              hideFooter
             }
           )
         ]

package/package.json

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

package/src/table/index.tsx

@@ -70,6 +70,14 @@ interface TableProps {
    * - "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;
 }
 
@@ -500,6 +508,7 @@ function IHTable({
   wrapText = false,
   density = "standard",
   searchable = false,
+  autoHeight = false,
 }: TableProps) {
   if (modal && onSelect)
     throw new Error("Solo se puede usar modal o onSelect por separado");
@@ -576,13 +585,30 @@ function IHTable({
 
   if (!rows.length) return null;
 
-  // When wrapText is active we must use getRowHeight; rowHeight prop is ignored.
+  // ─── Row height props ──────────────────────────────────────────────────────
+  // Priority: wrapText always wins (variable row height).
+  // autoHeight delegates height control to MUI; rowHeight prop is still
+  // respected when neither wrapText nor autoHeight forces auto sizing.
   const rowHeightProps = wrapText
     ? { getRowHeight: () => "auto" as const }
     : rowHeight != null
       ? { rowHeight }
       : {};
 
+  // ─── Container height ──────────────────────────────────────────────────────
+  // When autoHeight is active the Box must NOT constrain the height so that
+  // MUI's own autoHeight can expand the grid to fit all rows without scroll.
+  // We still honour HEIGHT_MAP for small datasets when autoHeight is off,
+  // falling back to the explicit `height` prop for larger ones.
+  const containerHeight = autoHeight
+    ? undefined // let MUI decide
+    : (HEIGHT_MAP[displayRows.length] ?? height);
+
+  // Whether to hide MUI's built-in pagination footer.
+  // With autoHeight all rows are visible, so pagination is never needed.
+  const hideFooter =
+    autoHeight || displayRows.length <= Object.keys(HEIGHT_MAP).length;
+
   return (
     <div className="m-2">
       {header && <div className="font-bold  p-2 ">{header}</div>}
@@ -603,7 +629,8 @@ function IHTable({
         sx={{
           display: "flex",
           flexDirection: "column",
-          height: HEIGHT_MAP[displayRows.length] ?? height,
+          // undefined height lets the child DataGrid size itself freely
+          height: containerHeight,
           width,
           zIndex: 999999999,
         }}
@@ -622,6 +649,9 @@ function IHTable({
           rows={displayRows}
           columns={columns as any}
           density={density}
+          // MUI's native autoHeight prop — renders all rows and sizes the
+          // grid to fit them, regardless of density or wrapText.
+          autoHeight={autoHeight}
           checkboxSelection={Boolean(onSelect)}
           rowSelectionModel={selectedRows}
           onRowSelectionModelChange={!modal ? setSelectedRows : undefined}
@@ -663,7 +693,7 @@ function IHTable({
           editMode="row"
           processRowUpdate={handleRowUpdate}
           pageSizeOptions={[5, 10]}
-          hideFooter={displayRows.length <= Object.keys(HEIGHT_MAP).length}
+          hideFooter={hideFooter}
         />
       </Box>
       <CustomFooter footer={footer} rows={displayRows} />