es-grid-template 1.7.28 → 1.7.29

package/es/table-component/TableContainer.d.ts

@@ -16,7 +16,6 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setSorterChange: Dispatch<SetStateAction<boolean>>;
     setFilterChange: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
-    tableHeight?: number;
     windowSize: {
         innerHeight: number;
         innerWidth: number;

package/es/table-component/TableContainer.js

@@ -44,6 +44,7 @@ const TableContainer = props => {
     setSorterChange,
     setFilterChange,
     height,
+    minHeight,
     showToolbar,
     toolbarItems,
     actionTemplate,
@@ -76,11 +77,13 @@ const TableContainer = props => {
   const topToolbarRef = React.useRef(null);
   const [tableHeight, settableHeight] = React.useState(0);
   React.useEffect(() => {
-    const totalHeight = height;
-    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
-      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
+    const totalHeight = minHeight ?? height;
+    if (totalHeight) {
+      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
+      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
+      settableHeight(totalHeight - topHeight - bottomHeight);
     }
-  }, [id, height, editAble]);
+  }, [id, height, editAble, minHeight]);
   const visibleColumns = table.getVisibleLeafColumns();
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
@@ -202,6 +205,7 @@ const TableContainer = props => {
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
+    minHeight: minHeight,
     id: id,
     prefix: prefix,
     table: table,

package/es/table-component/TableContainerEdit.js

@@ -96,6 +96,7 @@ const TableContainerEdit = props => {
     actionTemplate,
     showColumnChoose,
     height,
+    minHeight,
     summary,
     locale,
     groupColumns,
@@ -653,12 +654,23 @@ const TableContainerEdit = props => {
       // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [dataSource, editingKey, id, onBlur]);
+
+  // React.useEffect(() => {
+  //   const totalHeight = height
+
+  //   if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
+  //     settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight)
+  //   }
+  // }, [id, height, editAble])
+
   React.useEffect(() => {
-    const totalHeight = height;
-    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
-      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
+    const totalHeight = minHeight ?? height;
+    if (totalHeight) {
+      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
+      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
+      settableHeight(totalHeight - topHeight - bottomHeight);
     }
-  }, [id, height, editAble]);
+  }, [id, height, editAble, minHeight]);
   const {
     control,
     handleSubmit,
@@ -1514,6 +1526,7 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
+    minHeight: minHeight,
     id: id,
     prefix: prefix,
     table: table,

package/es/table-component/body/TableBodyCell.js

@@ -123,7 +123,8 @@ const TableBodyCell = props => {
       [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
-      // display: 'flex',
+      display: 'flex',
+      // flex: 1,
       width: cell.column.getSize(),
       // border: '1px solid #e5e7eb',
       ...getCommonPinningStyles(cell.column)

package/es/table-component/body/TableBodyCellEdit.js

@@ -1,7 +1,9 @@
 import { flexRender } from "@tanstack/react-table";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import ReactDOMServer from 'react-dom/server';
+
+// import ReactDOMServer from 'react-dom/server'
+
 import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, flattenArray, flattenData,
 // getCellsByPosition,
 getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
@@ -20,7 +22,9 @@ const renderCellIndex = props => {
     parrents,
     cell
   } = props;
-  return /*#__PURE__*/React.createElement("span", null, parrents.map(pr => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, parrents.map(pr => {
     return `${pr.index + 1}.`;
   }), cell.row.index + 1);
 };
@@ -42,7 +46,9 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/React.createElement(Command, {
       id: id,
       key: item.id,
@@ -59,13 +65,14 @@ const renderCommand = args => {
         });
       }
     });
-  }));
+  })));
 };
 const renderSelection = args => {
   const {
     row
   } = args.cell;
   return /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc_cell-content",
     style: {
 
       // paddingLeft: `${row.depth * 2}rem`,
@@ -125,9 +132,11 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-  const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
-  const hasValue = html.trim().length > 0;
+
+  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
+  // const hasValue = html.trim().length > 0;
+
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const canEdit = isEditable(cell.column.columnDef.meta, record);
@@ -438,7 +447,6 @@ const TableBodyCellEdit = props => {
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
   function handleMouseDown(rowId, colId) {
-    console.log('aaaaaa');
     setIsSelecting?.(true);
     if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
       setStartCell?.({
@@ -745,8 +753,11 @@ const TableBodyCellEdit = props => {
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
     "data-row-key": cell.row.id,
-    "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-html": !isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent)),
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
+    // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
+    ,
+    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? ''],
     className: classNames(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,

package/es/table-component/header/TableHeadCell.js

@@ -218,6 +218,7 @@ const TableHeadCell = props => {
     style: {
       // display: 'flex',
       width: header.getSize(),
+      // width: 'inherit',
       minWidth: header.getSize(),
       maxWidth: header.getSize(),
       ...getCommonPinningStyles(header.column),

package/es/table-component/hook/utils.js

@@ -42,7 +42,7 @@ export const getCommonPinningStyles = column => {
     // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    width: column.getSize(),
+    // width: column.getSize(),
     zIndex: isPinned ? 2 : 0
     // border: '1px solid #e5e7eb',
     // borderTop: 0,

package/es/table-component/style.scss

@@ -124,6 +124,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
 
     .#{$prefix}-grid-thead {
+      background-color: #ffffff;
 
       .#{$prefix}-grid-cell {
 
@@ -537,6 +538,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
 
     .#{$prefix}-grid-tfoot {
+      background-color: rgb(250, 250, 250);
       .#{$prefix}-grid-cell {
         background-color: $body-color;
         border-inline-end: 1px solid $tableBorderColor;

package/es/table-component/table/Grid.js

@@ -42,7 +42,9 @@ const Grid = props => {
     onSorter,
     onFilter,
     groupColumns,
-    height = 700,
+    // height= 700,
+    height,
+    minHeight,
     editAble,
     triggerChangeColumns,
     infiniteScroll,
@@ -206,7 +208,7 @@ const Grid = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}-grid`,
     style: {
-      // height: height ?? undefined
+      minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined
     }
   }, /*#__PURE__*/React.createElement(DndContext, {
@@ -225,7 +227,8 @@ const Grid = props => {
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,
-    height: height,
+    height: minHeight ?? height ?? 700,
+    minHeight: minHeight,
     pagination: pagination,
     columns: columns,
     propsColumns: propsColumns,

package/es/table-component/table/TableWrapper.d.ts

@@ -8,6 +8,7 @@ type Props<T> = {
     id: string;
     tableContainerRef: React.RefObject<HTMLDivElement>;
     height: number;
+    minHeight?: number;
     table: Table<T>;
     summary?: boolean;
     loading?: boolean;

package/es/table-component/table/TableWrapper.js

@@ -13,6 +13,7 @@ const TableWrapper = props => {
     prefix,
     tableContainerRef,
     height,
+    minHeight,
     summary,
     table,
     loading,
@@ -180,7 +181,9 @@ const TableWrapper = props => {
       position: 'relative',
       //needed for sticky header
       // height: tableHeight ?? '500px' //should be a fixed height
-      maxHeight: height //should be a fixed height
+      maxHeight: height,
+      //should be a fixed height
+      height: minHeight ? height : undefined //should be a fixed height
       // minWidth: table.getTotalSize()
     }
     // onScroll={infiniteScroll ? handleScroll : undefined}

package/es/table-component/type.d.ts

@@ -186,6 +186,7 @@ export type TableProps<RecordType = AnyObject> = {
     dataSource: RecordType[];
     columns: ColumnsTable<RecordType>;
     height?: number;
+    minHeight?: number;
     format?: IFormat;
     t?: any;
     lang?: string;

package/lib/table-component/TableContainer.d.ts

@@ -16,7 +16,6 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setSorterChange: Dispatch<SetStateAction<boolean>>;
     setFilterChange: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
-    tableHeight?: number;
     windowSize: {
         innerHeight: number;
         innerWidth: number;

package/lib/table-component/TableContainer.js

@@ -54,6 +54,7 @@ const TableContainer = props => {
     setSorterChange,
     setFilterChange,
     height,
+    minHeight,
     showToolbar,
     toolbarItems,
     actionTemplate,
@@ -86,11 +87,13 @@ const TableContainer = props => {
   const topToolbarRef = _react.default.useRef(null);
   const [tableHeight, settableHeight] = _react.default.useState(0);
   _react.default.useEffect(() => {
-    const totalHeight = height;
-    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
-      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
+    const totalHeight = minHeight ?? height;
+    if (totalHeight) {
+      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
+      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
+      settableHeight(totalHeight - topHeight - bottomHeight);
     }
-  }, [id, height, editAble]);
+  }, [id, height, editAble, minHeight]);
   const visibleColumns = table.getVisibleLeafColumns();
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
@@ -212,6 +215,7 @@ const TableContainer = props => {
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
+    minHeight: minHeight,
     id: id,
     prefix: prefix,
     table: table,

package/lib/table-component/TableContainerEdit.js

@@ -103,6 +103,7 @@ const TableContainerEdit = props => {
     actionTemplate,
     showColumnChoose,
     height,
+    minHeight,
     summary,
     locale,
     groupColumns,
@@ -660,12 +661,23 @@ const TableContainerEdit = props => {
       // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [dataSource, editingKey, id, onBlur]);
+
+  // React.useEffect(() => {
+  //   const totalHeight = height
+
+  //   if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
+  //     settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight)
+  //   }
+  // }, [id, height, editAble])
+
   _react.default.useEffect(() => {
-    const totalHeight = height;
-    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
-      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
+    const totalHeight = minHeight ?? height;
+    if (totalHeight) {
+      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
+      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
+      settableHeight(totalHeight - topHeight - bottomHeight);
     }
-  }, [id, height, editAble]);
+  }, [id, height, editAble, minHeight]);
   const {
     control,
     handleSubmit,
@@ -1521,6 +1533,7 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
+    minHeight: minHeight,
     id: id,
     prefix: prefix,
     table: table,

package/lib/table-component/body/TableBodyCell.js

@@ -132,7 +132,8 @@ const TableBodyCell = props => {
       [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
-      // display: 'flex',
+      display: 'flex',
+      // flex: 1,
       width: cell.column.getSize(),
       // border: '1px solid #e5e7eb',
       ...(0, _utils.getCommonPinningStyles)(cell.column)

package/lib/table-component/body/TableBodyCellEdit.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _reactTable = require("@tanstack/react-table");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
-var _server = _interopRequireDefault(require("react-dom/server"));
 var _utils = require("../hook/utils");
 var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -16,6 +15,8 @@ var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _EditableCell = _interopRequireDefault(require("./EditableCell"));
 var _constant = require("../hook/constant");
+// import ReactDOMServer from 'react-dom/server'
+
 // import { nonActionColumn } from "../hook/constant";
 
 // import type { Dispatch, SetStateAction } from "react";
@@ -27,7 +28,9 @@ const renderCellIndex = props => {
     parrents,
     cell
   } = props;
-  return /*#__PURE__*/_react.default.createElement("span", null, parrents.map(pr => {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, parrents.map(pr => {
     return `${pr.index + 1}.`;
   }), cell.row.index + 1);
 };
@@ -49,7 +52,9 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/_react.default.createElement(_Command.default, {
       id: id,
       key: item.id,
@@ -66,13 +71,14 @@ const renderCommand = args => {
         });
       }
     });
-  }));
+  })));
 };
 const renderSelection = args => {
   const {
     row
   } = args.cell;
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ui-rc_cell-content",
     style: {
 
       // paddingLeft: `${row.depth * 2}rem`,
@@ -132,9 +138,11 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
-  const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
-  const hasValue = html.trim().length > 0;
+
+  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
+  // const hasValue = html.trim().length > 0;
+
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record);
@@ -445,7 +453,6 @@ const TableBodyCellEdit = props => {
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
   function handleMouseDown(rowId, colId) {
-    console.log('aaaaaa');
     setIsSelecting?.(true);
     if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
       setStartCell?.({
@@ -752,8 +759,11 @@ const TableBodyCellEdit = props => {
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
     "data-row-key": cell.row.id,
-    "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-html": !isEditing && !hasValue && !message ? undefined : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent)),
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
+    // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
+    ,
+    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? ''],
     className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,

package/lib/table-component/header/TableHeadCell.js

@@ -228,6 +228,7 @@ const TableHeadCell = props => {
     style: {
       // display: 'flex',
       width: header.getSize(),
+      // width: 'inherit',
       minWidth: header.getSize(),
       maxWidth: header.getSize(),
       ...(0, _utils.getCommonPinningStyles)(header.column),

package/lib/table-component/hook/utils.js

@@ -89,7 +89,7 @@ const getCommonPinningStyles = column => {
     // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    width: column.getSize(),
+    // width: column.getSize(),
     zIndex: isPinned ? 2 : 0
     // border: '1px solid #e5e7eb',
     // borderTop: 0,

package/lib/table-component/style.scss

@@ -124,6 +124,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
 
     .#{$prefix}-grid-thead {
+      background-color: #ffffff;
 
       .#{$prefix}-grid-cell {
 
@@ -537,6 +538,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
 
     .#{$prefix}-grid-tfoot {
+      background-color: rgb(250, 250, 250);
       .#{$prefix}-grid-cell {
         background-color: $body-color;
         border-inline-end: 1px solid $tableBorderColor;

package/lib/table-component/table/Grid.js

@@ -44,7 +44,9 @@ const Grid = props => {
     onSorter,
     onFilter,
     groupColumns,
-    height = 700,
+    // height= 700,
+    height,
+    minHeight,
     editAble,
     triggerChangeColumns,
     infiniteScroll,
@@ -208,7 +210,7 @@ const Grid = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: `${prefix}-grid`,
     style: {
-      // height: height ?? undefined
+      minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined
     }
   }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
@@ -227,7 +229,8 @@ const Grid = props => {
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,
-    height: height,
+    height: minHeight ?? height ?? 700,
+    minHeight: minHeight,
     pagination: pagination,
     columns: columns,
     propsColumns: propsColumns,

package/lib/table-component/table/TableWrapper.d.ts

@@ -8,6 +8,7 @@ type Props<T> = {
     id: string;
     tableContainerRef: React.RefObject<HTMLDivElement>;
     height: number;
+    minHeight?: number;
     table: Table<T>;
     summary?: boolean;
     loading?: boolean;

package/lib/table-component/table/TableWrapper.js

@@ -22,6 +22,7 @@ const TableWrapper = props => {
     prefix,
     tableContainerRef,
     height,
+    minHeight,
     summary,
     table,
     loading,
@@ -189,7 +190,9 @@ const TableWrapper = props => {
       position: 'relative',
       //needed for sticky header
       // height: tableHeight ?? '500px' //should be a fixed height
-      maxHeight: height //should be a fixed height
+      maxHeight: height,
+      //should be a fixed height
+      height: minHeight ? height : undefined //should be a fixed height
       // minWidth: table.getTotalSize()
     }
     // onScroll={infiniteScroll ? handleScroll : undefined}

package/lib/table-component/type.d.ts

@@ -186,6 +186,7 @@ export type TableProps<RecordType = AnyObject> = {
     dataSource: RecordType[];
     columns: ColumnsTable<RecordType>;
     height?: number;
+    minHeight?: number;
     format?: IFormat;
     t?: any;
     lang?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.7.28",
+  "version": "1.7.29",
   "description": "es-grid-template",
   "keywords": [
     "react",