es-grid-template 1.6.7 → 1.6.9

package/es/grid-component/EditableCell.js

@@ -415,7 +415,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,
@@ -498,7 +499,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,
@@ -620,7 +622,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,

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:", ";.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: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);

package/es/grid-component/InternalTable.js

@@ -6,6 +6,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
 // updateData,
 updateOrInsert } from "./hooks";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -187,6 +188,7 @@ const InternalTable = props => {
     onSorter,
     ...rest
   } = props;
+  const handle = useFullScreenHandle();
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -197,6 +199,26 @@ const InternalTable = props => {
   // }, [propRowKey])
 
   const rowKey = 'rowId';
+  const getWindowSize = () => {
+    const {
+      innerWidth,
+      innerHeight
+    } = window;
+    return {
+      innerWidth,
+      innerHeight
+    };
+  };
+  const [windowSize, setWindowSize] = useState(getWindowSize());
+  React.useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
   const [scrollHeight, setHeight] = useState(0);
   const local = lang && lang === 'en' ? en : vi;
   const dateRangeLocale = lang && lang === 'en' ? enDr : viDr;
@@ -217,8 +239,7 @@ const InternalTable = props => {
   });
   const [tooltipContent, setTooltipContent] = useState('');
   const [filterStates, setFilterState] = React.useState(null);
-  // const [filterData, setFilterData] = React.useState<any>(null)
-
+  const [isFullScreen, setIsFullScreen] = React.useState(false);
   const mergedData = React.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
       return groupArrayByColumns(dataSource, groupColumns);
@@ -242,7 +263,8 @@ const InternalTable = props => {
 
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
-    if (propsHeight) {
+    const totalHeight = isFullScreen ? windowSize.innerHeight - 24 : propsHeight;
+    if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
       const header = table?.querySelector(`.ui-rc-table-header`);
@@ -250,10 +272,10 @@ const InternalTable = props => {
       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 = (propsHeight ?? 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);
+      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]);
+  }, [id, propsHeight, columns, editAble, isFullScreen]);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
     setColumns(propsColumns);
@@ -869,8 +891,15 @@ const InternalTable = props => {
   const handleChange = (paging, filters, sorter) => {
     onSorter?.(sorter);
   };
+  const fullScreenChange = state => {
+    setIsFullScreen(state);
+  };
   const TableComponent = infiniteScroll ? InfiniteTable : groupAble ? Group : editAble ? GridEdit : Grid;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FullScreen, {
+    handle: handle,
+    onChange: fullScreenChange,
+    className: "rc-fullscreen"
+  }, /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],
     onDragEnd: onDragEnd,
@@ -921,7 +950,7 @@ const InternalTable = props => {
     } // scroll height auto, không quá  600
     ,
 
-    height: propsHeight,
+    height: isFullScreen ? windowSize.innerHeight - 24 : propsHeight,
     scrollHeight: scrollHeight,
     components: {
       header: {
@@ -940,7 +969,9 @@ const InternalTable = props => {
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
     wrapSettings: wrapSettings,
-    onChange: handleChange
+    onChange: handleChange,
+    handleFullScreen: handle,
+    isFullScreen: isFullScreen
 
     // onChange={(paging, filters, sorter) => {
     //   handleChange(sorter)
@@ -957,7 +988,7 @@ const InternalTable = props => {
       borderRadius: 6,
       fontWeight: 500
     }
-  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/React.createElement(Tooltip, {
+  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText)))), /*#__PURE__*/React.createElement(Tooltip, {
     id: `${id}-tooltip-form-error`,
     style: {
       zIndex: 1999

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

@@ -14,6 +14,8 @@ type GridProps<T> = GridTableProps<T> & {
     groupToolbar?: () => React.ReactNode;
     isFilter?: boolean;
     setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/es/grid-component/TableGrid.js

@@ -28,6 +28,7 @@ import { ColumnsChoose } from "./ColumnsChoose";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import AdvanceFilter from "./AdvanceFilter";
 import { Tooltip } from "react-tooltip";
+import { Maximize, Minimize } from 'becoxy-icons';
 const useStyle = createStyles(({
   css
 }) => {
@@ -98,6 +99,9 @@ const TableGrid = props => {
     showEmptyText,
     // setIsFilter,
     actionTemplate,
+    handleFullScreen,
+    fullScreen,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -380,6 +384,16 @@ const TableGrid = props => {
       , {
         items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
         mode: 'scroll'
+      })), fullScreen && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+        fontSize: 16,
+        onClick: handleFullScreen.exit,
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Full Screen') : 'Full screen'
+      }) : /*#__PURE__*/React.createElement(Maximize, {
+        fontSize: 16,
+        onClick: handleFullScreen.enter,
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
       })), /*#__PURE__*/React.createElement("div", {
         style: {
           display: 'flex',
@@ -472,6 +486,8 @@ const TableGrid = props => {
       zIndex: 1999,
       maxWidth: 350
     }
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    id: "tooltip-icon"
   }));
 };
 export default TableGrid;

package/es/grid-component/styles.scss

@@ -1429,3 +1429,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 .select__menu-portal {
   z-index: 9999 !important;
 }
+
+.rc-fullscreen {
+  background-color: #ffffff85;
+}

package/es/grid-component/table/Grid.d.ts

@@ -16,6 +16,8 @@ type Props<T> = GridTableProps<T> & {
     originData: T[];
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

package/es/grid-component/table/GridEdit.d.ts

@@ -16,6 +16,8 @@ type Props<RecordType> = TableProps<RecordType> & {
     originData: RecordType[];
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const GridEdit: <RecordType extends AnyObject = AnyObject>(props: Props<RecordType>) => React.JSX.Element;
 export default GridEdit;

package/es/grid-component/table/Group.d.ts

@@ -14,6 +14,8 @@ type Props<T> = GridTableProps<T> & {
     originData: T[];
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Group;

package/es/grid-component/table/InfiniteTable.d.ts

@@ -16,6 +16,8 @@ type Props<T> = TableProps<T> & {
     originData: T[];
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const InfiniteTable: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default InfiniteTable;

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

@@ -256,6 +256,7 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     }) => void;
     wrapSettings?: IWrapSettings;
     actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    fullScreen?: boolean;
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

package/lib/grid-component/EditableCell.js

@@ -417,7 +417,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,
@@ -500,7 +501,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,
@@ -622,7 +624,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,

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:", ";.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: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);

package/lib/grid-component/InternalTable.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 require("react-resizable/css/styles.css");
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _hooks = require("./hooks");
+var _reactFullScreen = require("react-full-screen");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("dayjs/locale/es");
 require("dayjs/locale/vi");
@@ -196,6 +197,7 @@ const InternalTable = props => {
     onSorter,
     ...rest
   } = props;
+  const handle = (0, _reactFullScreen.useFullScreenHandle)();
   const id = _react.default.useMemo(() => {
     return tableId ?? _faker.faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -206,6 +208,26 @@ const InternalTable = props => {
   // }, [propRowKey])
 
   const rowKey = 'rowId';
+  const getWindowSize = () => {
+    const {
+      innerWidth,
+      innerHeight
+    } = window;
+    return {
+      innerWidth,
+      innerHeight
+    };
+  };
+  const [windowSize, setWindowSize] = (0, _react.useState)(getWindowSize());
+  _react.default.useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
   const [scrollHeight, setHeight] = (0, _react.useState)(0);
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
   const dateRangeLocale = lang && lang === 'en' ? _en_US2.default : _vi_VN2.default;
@@ -226,8 +248,7 @@ const InternalTable = props => {
   });
   const [tooltipContent, setTooltipContent] = (0, _react.useState)('');
   const [filterStates, setFilterState] = _react.default.useState(null);
-  // const [filterData, setFilterData] = React.useState<any>(null)
-
+  const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
   const mergedData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
       return (0, _hooks.groupArrayByColumns)(dataSource, groupColumns);
@@ -251,7 +272,8 @@ const InternalTable = props => {
 
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
-    if (propsHeight) {
+    const totalHeight = isFullScreen ? windowSize.innerHeight - 24 : propsHeight;
+    if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
       const header = table?.querySelector(`.ui-rc-table-header`);
@@ -259,10 +281,10 @@ const InternalTable = props => {
       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 = (propsHeight ?? 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);
+      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]);
+  }, [id, propsHeight, columns, editAble, isFullScreen]);
   const tableRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
     setColumns(propsColumns);
@@ -878,8 +900,15 @@ const InternalTable = props => {
   const handleChange = (paging, filters, sorter) => {
     onSorter?.(sorter);
   };
+  const fullScreenChange = state => {
+    setIsFullScreen(state);
+  };
   const TableComponent = infiniteScroll ? _InfiniteTable.default : groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactFullScreen.FullScreen, {
+    handle: handle,
+    onChange: fullScreenChange,
+    className: "rc-fullscreen"
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     sensors: sensors,
     modifiers: [_modifiers.restrictToHorizontalAxis],
     onDragEnd: onDragEnd,
@@ -930,7 +959,7 @@ const InternalTable = props => {
     } // scroll height auto, không quá  600
     ,
 
-    height: propsHeight,
+    height: isFullScreen ? windowSize.innerHeight - 24 : propsHeight,
     scrollHeight: scrollHeight,
     components: {
       header: {
@@ -949,7 +978,9 @@ const InternalTable = props => {
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
     wrapSettings: wrapSettings,
-    onChange: handleChange
+    onChange: handleChange,
+    handleFullScreen: handle,
+    isFullScreen: isFullScreen
 
     // onChange={(paging, filters, sorter) => {
     //   handleChange(sorter)
@@ -966,7 +997,7 @@ const InternalTable = props => {
       borderRadius: 6,
       fontWeight: 500
     }
-  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText)))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
     id: `${id}-tooltip-form-error`,
     style: {
       zIndex: 1999

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

@@ -14,6 +14,8 @@ type GridProps<T> = GridTableProps<T> & {
     groupToolbar?: () => React.ReactNode;
     isFilter?: boolean;
     setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/lib/grid-component/TableGrid.js

@@ -22,6 +22,7 @@ var _ColumnsChoose = require("./ColumnsChoose");
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var _AdvanceFilter = _interopRequireDefault(require("./AdvanceFilter"));
 var _reactTooltip = require("react-tooltip");
+var _becoxyIcons = require("becoxy-icons");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import  Table from "../../core/table"
@@ -98,6 +99,9 @@ const TableGrid = props => {
     showEmptyText,
     // setIsFilter,
     actionTemplate,
+    handleFullScreen,
+    fullScreen,
+    isFullScreen,
     ...rest
   } = props;
   const {
@@ -380,6 +384,16 @@ const TableGrid = props => {
       , {
         items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
         mode: 'scroll'
+      })), fullScreen && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+        fontSize: 16,
+        onClick: handleFullScreen.exit,
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Full Screen') : 'Full screen'
+      }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
+        fontSize: 16,
+        onClick: handleFullScreen.enter,
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
       })), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           display: 'flex',
@@ -472,6 +486,8 @@ const TableGrid = props => {
       zIndex: 1999,
       maxWidth: 350
     }
+  }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+    id: "tooltip-icon"
   }));
 };
 var _default = exports.default = TableGrid;

package/lib/grid-component/styles.scss

@@ -1429,3 +1429,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 .select__menu-portal {
   z-index: 9999 !important;
 }
+
+.rc-fullscreen {
+  background-color: #ffffff85;
+}

package/lib/grid-component/table/Grid.d.ts

@@ -16,6 +16,8 @@ type Props<T> = GridTableProps<T> & {
     originData: T[];
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

package/lib/grid-component/table/GridEdit.d.ts

@@ -16,6 +16,8 @@ type Props<RecordType> = TableProps<RecordType> & {
     originData: RecordType[];
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const GridEdit: <RecordType extends AnyObject = AnyObject>(props: Props<RecordType>) => React.JSX.Element;
 export default GridEdit;

package/lib/grid-component/table/Group.d.ts

@@ -14,6 +14,8 @@ type Props<T> = GridTableProps<T> & {
     originData: T[];
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Group;

package/lib/grid-component/table/InfiniteTable.d.ts

@@ -16,6 +16,8 @@ type Props<T> = TableProps<T> & {
     originData: T[];
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
+    handleFullScreen?: any;
+    isFullScreen?: boolean;
 };
 declare const InfiniteTable: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default InfiniteTable;

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

@@ -256,6 +256,7 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     }) => void;
     wrapSettings?: IWrapSettings;
     actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    fullScreen?: boolean;
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.6.7",
+  "version": "1.6.9",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -101,6 +101,7 @@
     "rc-test": "^7.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-full-screen": "^1.1.1",
     "typescript": "^4.0.5"
   },
   "peerDependencies": {