es-grid-template 1.7.2 → 1.7.21

package/es/grid-component/GridStyle.d.ts

@@ -2,6 +2,7 @@
 interface GridProps {
     $heightTable?: number;
     $heightScroll?: number;
+    $isFullScreen?: boolean;
 }
 export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
 export {};

package/es/grid-component/GridStyle.js

@@ -2,4 +2,4 @@ import styled from "styled-components";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})(["height:", ";padding:12px;.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);
+})(["height:", ";padding-top:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$isFullScreen ? `20px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);

package/es/grid-component/InternalTable.js

@@ -218,6 +218,7 @@ const InternalTable = props => {
     };
   }, []);
   const [scrollHeight, setHeight] = useState(0);
+  const [scrollHeight1, setHeight1] = useState(0);
 
   // const [isModalOpen, setIsModalOpen] = useState(false)
 
@@ -264,7 +265,6 @@ const InternalTable = props => {
 
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
-    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
     const totalHeight = propsHeight;
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
@@ -277,7 +277,22 @@ const InternalTable = props => {
       const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble, isFullScreen, windowSize.innerHeight]);
+  }, [id, propsHeight, columns, editAble]);
+  React.useEffect(() => {
+    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
+    const totalHeight = windowSize.innerHeight - 60;
+    if (totalHeight && isFullScreen) {
+      const table = document.querySelector(`#${id}`);
+      const title = table?.querySelector(`.ui-rc-table-title`);
+      const header = table?.querySelector(`.ui-rc-table-header`);
+      const paginationE = table?.querySelector(`.ui-rc-pagination`);
+      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
+      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
+      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      setHeight1(hhh > 0 ? hhh : 0);
+    }
+  }, [id, isFullScreen, windowSize.innerHeight]);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
     setColumns(propsColumns);
@@ -1013,6 +1028,9 @@ const InternalTable = props => {
       content: {
         height: '100vh',
         borderRadius: 0
+      },
+      wrapper: {
+        zIndex: 1060
       }
     }
   }, /*#__PURE__*/React.createElement(DndContext, {
@@ -1054,20 +1072,16 @@ const InternalTable = props => {
     groupColumns: groupColumns,
     commandClick: triggerCommandClick,
     summary: summary,
-    pagination: pagination
-    // scroll={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
-    // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
-    ,
-
-    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
+    pagination: pagination,
+    scroll: scrollHeight1 - (summary ? 1 : 1) < 0 ? {
       y: 500
     } : {
-      y: windowSize.innerHeight - 50 - (propsHeight ?? 0) + scrollHeight - (summary ? 1 : 1)
+      y: scrollHeight1 - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
     ,
 
-    height: windowSize.innerHeight - 50,
-    scrollHeight: windowSize.innerHeight - (propsHeight ?? 0) + scrollHeight - 50,
+    height: windowSize.innerHeight - 35,
+    scrollHeight: scrollHeight1,
     components: {
       header: {
         cell: ResizableTitle

package/es/grid-component/hooks/useColumns.d.ts

@@ -15,7 +15,5 @@ interface UseColumnsConfig<RecordType> {
     rowKey?: any;
     onMouseHover?: any;
 }
-declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [
-    any
-];
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
 export default useColumns;

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

@@ -13,11 +13,13 @@ const Grid = props => {
     height,
     scrollHeight,
     rowHoverable,
+    isFullScreen,
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -37,6 +39,7 @@ const Grid = props => {
       }
     }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
+    isFullScreen: isFullScreen,
     id: id
     // style={{...style, minHeight: height}}
     ,

package/es/grid-component/table/GridEdit.js

@@ -255,6 +255,7 @@ const GridEdit = props => {
     mergedFilterKeys,
     setMergedFilterKeys,
     wrapSettings,
+    isFullScreen,
     ...rest
   } = props;
   const ref = useRef(null);
@@ -2552,6 +2553,7 @@ const GridEdit = props => {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -2673,7 +2675,8 @@ const GridEdit = props => {
       if (rowsSelected && rowsSelected.current.size > 0) {
         addClassCellIndexSelected(rowsSelected.current, id);
       }
-    }
+    },
+    isFullScreen: isFullScreen
   })))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {

package/es/grid-component/table/Group.js

@@ -24,6 +24,7 @@ const Group = props => {
     groupColumns,
     triggerGroupColumns,
     onExpandClick,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -107,6 +108,7 @@ const Group = props => {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -170,7 +172,8 @@ const Group = props => {
       ...expandable
     },
     groupToolbar: groupToolbar,
-    groupColumns: groupColumns
+    groupColumns: groupColumns,
+    isFullScreen: isFullScreen
   }))));
 };
 export default Group;

package/es/grid-component/table/InfiniteTable.js

@@ -26,6 +26,7 @@ const InfiniteTable = props => {
     rowHoverable,
     pagination,
     dataSource,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -68,6 +69,7 @@ const InfiniteTable = props => {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -92,7 +94,8 @@ const InfiniteTable = props => {
     pagination: false,
     virtual: true,
     onScroll: handleScroll,
-    loading: loading
+    loading: loading,
+    isFullScreen: isFullScreen
   })))));
 };
 export default InfiniteTable;

package/lib/grid-component/GridStyle.d.ts

@@ -2,6 +2,7 @@
 interface GridProps {
     $heightTable?: number;
     $heightScroll?: number;
+    $isFullScreen?: boolean;
 }
 export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
 export {};

package/lib/grid-component/GridStyle.js

@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})(["height:", ";padding:12px;.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);
+})(["height:", ";padding-top:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$isFullScreen ? `20px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);

package/lib/grid-component/InternalTable.js

@@ -226,6 +226,7 @@ const InternalTable = props => {
     };
   }, []);
   const [scrollHeight, setHeight] = (0, _react.useState)(0);
+  const [scrollHeight1, setHeight1] = (0, _react.useState)(0);
 
   // const [isModalOpen, setIsModalOpen] = useState(false)
 
@@ -272,7 +273,6 @@ const InternalTable = props => {
 
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
-    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
     const totalHeight = propsHeight;
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
@@ -285,7 +285,22 @@ const InternalTable = props => {
       const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble, isFullScreen, windowSize.innerHeight]);
+  }, [id, propsHeight, columns, editAble]);
+  _react.default.useEffect(() => {
+    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
+    const totalHeight = windowSize.innerHeight - 60;
+    if (totalHeight && isFullScreen) {
+      const table = document.querySelector(`#${id}`);
+      const title = table?.querySelector(`.ui-rc-table-title`);
+      const header = table?.querySelector(`.ui-rc-table-header`);
+      const paginationE = table?.querySelector(`.ui-rc-pagination`);
+      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
+      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
+      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      setHeight1(hhh > 0 ? hhh : 0);
+    }
+  }, [id, isFullScreen, windowSize.innerHeight]);
   const tableRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
     setColumns(propsColumns);
@@ -1021,6 +1036,9 @@ const InternalTable = props => {
       content: {
         height: '100vh',
         borderRadius: 0
+      },
+      wrapper: {
+        zIndex: 1060
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
@@ -1062,20 +1080,16 @@ const InternalTable = props => {
     groupColumns: groupColumns,
     commandClick: triggerCommandClick,
     summary: summary,
-    pagination: pagination
-    // scroll={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
-    // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
-    ,
-
-    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
+    pagination: pagination,
+    scroll: scrollHeight1 - (summary ? 1 : 1) < 0 ? {
       y: 500
     } : {
-      y: windowSize.innerHeight - 50 - (propsHeight ?? 0) + scrollHeight - (summary ? 1 : 1)
+      y: scrollHeight1 - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
     ,
 
-    height: windowSize.innerHeight - 50,
-    scrollHeight: windowSize.innerHeight - (propsHeight ?? 0) + scrollHeight - 50,
+    height: windowSize.innerHeight - 35,
+    scrollHeight: scrollHeight1,
     components: {
       header: {
         cell: ResizableTitle

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

@@ -22,11 +22,13 @@ const Grid = props => {
     height,
     scrollHeight,
     rowHoverable,
+    isFullScreen,
     ...rest
   } = props;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -46,6 +48,7 @@ const Grid = props => {
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
+    isFullScreen: isFullScreen,
     id: id
     // style={{...style, minHeight: height}}
     ,

package/lib/grid-component/table/GridEdit.js

@@ -252,6 +252,7 @@ const GridEdit = props => {
     mergedFilterKeys,
     setMergedFilterKeys,
     wrapSettings,
+    isFullScreen,
     ...rest
   } = props;
   const ref = (0, _react.useRef)(null);
@@ -2549,6 +2550,7 @@ const GridEdit = props => {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -2670,7 +2672,8 @@ const GridEdit = props => {
       if (rowsSelected && rowsSelected.current.size > 0) {
         (0, _hooks.addClassCellIndexSelected)(rowsSelected.current, id);
       }
-    }
+    },
+    isFullScreen: isFullScreen
   })))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
     position: toast,
     toastOptions: {

package/lib/grid-component/table/Group.js

@@ -33,6 +33,7 @@ const Group = props => {
     groupColumns,
     triggerGroupColumns,
     onExpandClick,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -116,6 +117,7 @@ const Group = props => {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -179,7 +181,8 @@ const Group = props => {
       ...expandable
     },
     groupToolbar: groupToolbar,
-    groupColumns: groupColumns
+    groupColumns: groupColumns,
+    isFullScreen: isFullScreen
   }))));
 };
 var _default = exports.default = Group;

package/lib/grid-component/table/InfiniteTable.js

@@ -34,6 +34,7 @@ const InfiniteTable = props => {
     rowHoverable,
     pagination,
     dataSource,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -76,6 +77,7 @@ const InfiniteTable = props => {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
     $heightScroll: scrollHeight,
+    $isFullScreen: isFullScreen,
     style: {
       position: 'relative'
     },
@@ -100,7 +102,8 @@ const InfiniteTable = props => {
     pagination: false,
     virtual: true,
     onScroll: handleScroll,
-    loading: loading
+    loading: loading,
+    isFullScreen: isFullScreen
   })))));
 };
 var _default = exports.default = InfiniteTable;

package/package.json

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