es-grid-template 1.8.42 → 1.8.44

package/es/table-component/InternalTable.js

@@ -37,7 +37,7 @@ getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayB
 // import GridEdit from './table/GridEdit'
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
-import { Modal } from 'antd';
+// import { Modal } from 'antd'
 // import { findAllChildrenKeys2 } from '../grid-component/hooks'
 // import { columns111 } from '../test-2/columns'
 
@@ -214,77 +214,6 @@ const InternalTable = props => {
     mergedSelectedKeys: mergedSelectedKeys,
     expandable: expandable,
     setColumns: setColumns
-  })), /*#__PURE__*/React.createElement(Modal, {
-    open: isFullScreen,
-    footer: null,
-    centered: true,
-    closable: true,
-    width: '100%',
-    style: {
-      maxWidth: '100%',
-      height: '100%'
-    }
-    // onClose={() => setIsFullScreen(false)}
-    ,
-    onCancel: () => setIsFullScreen(false)
-
-    // destroyOnClose
-    ,
-    styles: {
-      content: {
-        height: '100vh',
-        borderRadius: 0,
-        padding: '15px 10px'
-      },
-      wrapper: {
-        zIndex: 1050
-      }
-    },
-    destroyOnClose: true
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingTop: 40
-    }
-  }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
-    t: t
-    // id={isFullScreen ? faker.string.alpha(20) : id}
-    ,
-    id: faker.string.alpha(20),
-    prefix: prefix,
-    originData: convertData,
-    dataSource: mergedData,
-    locale: locale,
-    format: format
-    // columns={columns111 as any}
-    ,
-    columns: convertColumns(mergedColumns),
-    propsColumns: columns,
-    rowKey: rowKey,
-    groupSetting: groupSetting,
-    groupAble: groupAble,
-    groupColumns: groupColumns,
-    columnPinning: columnPinning,
-    columnHidden: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
-    triggerFilter: setFilterState,
-    triggerSorter: setSorterStates,
-    setMergedFilterKeys: setMergedFilterKeys,
-    mergedFilterKeys: mergedFilterKeys,
-    expanded: expanded
-    // onContextMenu={onContextMenu}
-    // contextMenuItems={contextMenuItems}
-    ,
-    editAble: editAble,
-    triggerChangeColumns: triggerChangeColumns,
-    setExpanded: setExpanded,
-    isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen,
-    height: windowSize.innerHeight - 70,
-    windowSize: windowSize,
-    isDataTree: isDataTree,
-    selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys,
-    expandable: expandable,
-    setColumns: setColumns
-  })))));
+  })));
 };
 export default InternalTable;

package/es/table-component/TableContainer.js

@@ -19,7 +19,7 @@ import { ColumnsChoose } from "./ColumnsChoose";
 import { numericFormatter } from 'react-numeric-component';
 // import ComponentSpinner from '../grid-component/LoadingSpinner'
 import TableWrapper from "./table/TableWrapper";
-import { sumSize, updateColumnWidthsRecursive } from "./hook/utils";
+import { getTableHeight, sumSize, updateColumnWidthsRecursive } from "./hook/utils";
 import { useVirtualizer } from '@tanstack/react-virtual';
 const TableContainer = props => {
   const {
@@ -84,7 +84,8 @@ const TableContainer = props => {
   const [tableHeight, settableHeight] = React.useState(0);
   const [focusedCell, setFocusedCell] = React.useState(undefined);
   React.useEffect(() => {
-    const totalHeight = minHeight ?? height;
+    // const totalHeight = minHeight ?? height
+    const totalHeight = getTableHeight(height, minHeight);
     if (totalHeight) {
       const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
       const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;

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

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

package/es/table-component/TableContainerEdit.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from "react";
 import { useCopyToClipboard } from 'usehooks-ts';
-import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getFormat, getRowIdsBetween, getSelectedCellMatrix, isEditable, isFormattedNumber, newGuid, parseExcelClipboardText, sumSize,
+import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isEditable, isFormattedNumber, newGuid, parseExcelClipboardText, sumSize,
 // sumSize,
 unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -79,7 +79,6 @@ const TableContainerEdit = props => {
     contextMenuItems: propsContext,
     setSorterChange,
     setFilterChange,
-    // tableHeight,
     onCellPaste,
     // triggerPaste,
     validate,
@@ -879,7 +878,8 @@ const TableContainerEdit = props => {
   // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
 
   React.useEffect(() => {
-    const totalHeight = minHeight ?? height;
+    // const totalHeight = minHeight ?? height
+    const totalHeight = getTableHeight(height, minHeight);
     if (totalHeight) {
       const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
       const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;

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

@@ -367,10 +367,13 @@ const EditableCell = props => {
           // @ts-ignore
           valueSelectTable = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
-          // @ts-ignore
-          valueSelectTable = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
-        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueSelectTable = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
         return /*#__PURE__*/React.createElement(AsyncTableSelect
         // id={`col${indexCol}-record${indexRow}`}
         , {
@@ -475,10 +478,13 @@ const EditableCell = props => {
           // @ts-ignore
           valueSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
-          // @ts-ignore
-          valueSelect = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
-        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
         return /*#__PURE__*/React.createElement(Select, {
           options: options,
           value: valueSelect,
@@ -562,10 +568,13 @@ const EditableCell = props => {
           // @ts-ignore
           valueAsyncSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
-          // @ts-ignore
-          valueAsyncSelect = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
-        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueAsyncSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
         return /*#__PURE__*/React.createElement(AsyncSelect, {
           options: options,
           defaultOptions: options,
@@ -694,10 +703,13 @@ const EditableCell = props => {
           // @ts-ignore
           valueTreeSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
-          // @ts-ignore
-          valueTreeSelect = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
-        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueTreeSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
         return /*#__PURE__*/React.createElement(TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
           className: 'be-tree-select',

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

@@ -387,7 +387,7 @@ const TableBodyCellEdit = props => {
       colSelectIds.forEach(colId => {
         const cellll = row.getVisibleCells().find(c => c.column.id === colId);
         const value = cellll?.getValue();
-        rowData.push(value !== undefined ? String(value) : '');
+        rowData.push(value !== undefined ? value : '');
       });
       dataSelected.push(rowData);
     });
@@ -404,12 +404,11 @@ const TableBodyCellEdit = props => {
       const targetRow = pasteState.startRowIndex + rowIndex1;
 
       // Nếu vượt quá số dòng hiện có, thêm dòng mới
-      if (targetRow >= newData.length) {
-        newData.push({
-          id: undefined,
-          rowId: newGuid()
-        });
-      }
+      // if (targetRow >= newData.length) {
+
+      //   newData.push({ id: undefined, rowId: newGuid() })
+      // }
+
       rowValues.forEach((cellValue, colIndex1) => {
         const targetCol = startColIndex + colIndex1;
         if (targetCol >= tmpCols.length) {

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

@@ -45,7 +45,7 @@ const TableHead = ({
     const depth = column.depth ?? 0;
 
     // const colSpan = column.columns.length || 1;
-    const colSpan = column.getFlatColumns().filter(col => col.getIsVisible() && col.columns.length < 2).length;
+    const colSpan = column.getFlatColumns().filter(col => col.getIsVisible() && col.columns.length < 1).length;
     // const colSpan = getVisibleChildCount(column);
 
     const rowSpan = column.columns?.length > 0 ? 1 : headerDepth - depth;

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

@@ -141,7 +141,7 @@ export function convertToTanStackColumns({
         }
       },
       enableResizing: allowResizing !== false,
-      enableHiding: false,
+      // enableHiding: false,
       // enableResizing: true,
       id: field,
       size: width,
@@ -263,8 +263,6 @@ export const toggleRowSelection = props => {
       let checkedRows = [];
       const rowParent = row.getParentRow();
 
-      // console.log(countUnselectedChildren(row))
-
       // nếu có cha và cha chưa được chọn và tất cả con đã chọn => thêm row cha vào 
       if (rowParent && !rowParent.getIsSelected() && countUnselectedChildren(row) === 1) {
         rowParent.toggleSelected(!rowParent.getIsSelected());

package/es/table-component/hook/utils.d.ts

@@ -152,3 +152,4 @@ export declare function getAllChildren(row: any): any;
 export declare function toggleRowAndChildren(row: Row<any>, isSelected?: boolean): void;
 export declare function countUnselectedChildren(row: Row<any>): number;
 export declare function removeDuplicatesByKey(arr: any[], key?: string): any[];
+export declare const getTableHeight: (height?: number, minHeight?: number) => number;

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

@@ -1763,7 +1763,7 @@ export function getHiddenParentKeys1(columns, parentKeys = []) {
   for (const column of columns) {
     if (column.children) {
       const currentPath = column.field ? [...parentKeys, column.field] : [...parentKeys];
-      const childHiddenParents = getHiddenParentKeys(column.children, currentPath);
+      const childHiddenParents = getHiddenParentKeys1(column.children, currentPath);
       if (childHiddenParents.length > 0) {
         childHiddenParents.forEach(key => hiddenParents.add(key));
         currentPath.forEach(key => hiddenParents.add(key));
@@ -1988,7 +1988,6 @@ export function findFirst(items) {
 
 //       // if (requireNonEmpty) {
 
-//       //   console.log('requireNonEmpty', requireNonEmpty)
 //       //   if (children.length > 0) {
 //       //     hasParent = true
 //       //   }
@@ -2249,4 +2248,22 @@ export function removeDuplicatesByKey(arr, key = 'id') {
     }
   }
   return Array.from(map.values());
-}
+}
+export const getTableHeight = (height, minHeight) => {
+  if (height && !minHeight) {
+    return height;
+  }
+  if (minHeight && !height) {
+    return minHeight;
+  }
+  if (minHeight && height) {
+    return Math.max(minHeight, height);
+    // if (height > minHeight) {
+    //   return height
+    // }
+
+    // if (minHeight > height) {
+    //   return minHeight
+    // }
+  }
+};

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

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { Modal } from 'antd';
+import { faker } from '@faker-js/faker';
 import { getCoreRowModel, getExpandedRowModel,
 // getFilteredRowModel,
 getGroupedRowModel, getPaginationRowModel,
@@ -14,7 +16,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 
 // import { faker } from '@faker-js/faker'
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
 import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual } from "../hook/utils";
@@ -53,6 +55,7 @@ const Grid = props => {
     infiniteScroll,
     mergedSelectedKeys,
     allowResizing,
+    windowSize,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');
@@ -86,6 +89,7 @@ const Grid = props => {
   });
   const [sorterChange, setSorterChange] = React.useState(false);
   const [filterChange, setFilterChange] = React.useState(false);
+  const [isFullScreen, setIsFullScreen] = React.useState(false);
   const table = useReactTable({
     _features: [OperatorFeature],
     data: dataSource,
@@ -274,7 +278,7 @@ const Grid = props => {
   }
   const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
   const ContainerComponent = editAble ? TableContainerEdit : TableContainer;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}-grid`,
     style: {
       minHeight: minHeight ?? undefined,
@@ -288,6 +292,7 @@ const Grid = props => {
   }, /*#__PURE__*/React.createElement(ContainerComponent, _extends({}, rest, {
     id: id,
     t: t,
+    windowSize: windowSize,
     table: table,
     editAble: editAble,
     dataSource: dataSource,
@@ -298,7 +303,7 @@ const Grid = props => {
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,
-    height: minHeight ?? height ?? 700,
+    height: height ?? minHeight ?? 700,
     minHeight: minHeight,
     pagination: pagination,
     columns: columns,
@@ -312,7 +317,82 @@ const Grid = props => {
     setColumnSizing: setColumnSizing,
     setColumns: setColumns,
     columnSizing: columnSizing,
-    columnSizingInfo: columnSizingInfo
-  }))));
+    columnSizingInfo: columnSizingInfo,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen
+  })))), /*#__PURE__*/React.createElement(Modal, {
+    open: isFullScreen,
+    footer: null,
+    centered: true,
+    closable: true,
+    width: '100%',
+    style: {
+      maxWidth: '100%',
+      height: '100%'
+    }
+    // onClose={() => setIsFullScreen(false)}
+    ,
+    onCancel: () => setIsFullScreen(false)
+
+    // destroyOnClose
+    ,
+    styles: {
+      content: {
+        height: '100vh',
+        borderRadius: 0,
+        padding: '15px 10px'
+      },
+      wrapper: {
+        zIndex: 1050
+      }
+    },
+    destroyOnClose: true
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: 40
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}-grid`,
+    style: {
+      // minHeight: minHeight ?? undefined,
+      maxHeight: windowSize.innerHeight - 70
+    }
+  }, /*#__PURE__*/React.createElement(DndContext, {
+    collisionDetection: closestCenter,
+    modifiers: [restrictToHorizontalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors
+  }, /*#__PURE__*/React.createElement(ContainerComponent, _extends({}, rest, {
+    id: faker.string.alpha(20),
+    t: t,
+    table: table,
+    editAble: editAble,
+    dataSource: dataSource,
+    originData: originData,
+    prefix: prefix,
+    selectionSettings: selectionSettings,
+    isSelectionChange: isSelectionChange,
+    setIsSelectionChange: setIsSelectionChange,
+    setSorterChange: setSorterChange,
+    setFilterChange: setFilterChange,
+    height: windowSize.innerHeight - 70,
+    minHeight: minHeight,
+    pagination: pagination,
+    columns: columns,
+    windowSize: windowSize,
+    propsColumns: propsColumns,
+    triggerChangeColumns: triggerChangeColumns,
+    columnHidden: columnHidden,
+    setExpanded: setExpanded,
+    expanded: expanded,
+    infiniteScroll: infiniteScroll,
+    setMergedFilterKeys: setMergedFilterKeys,
+    setColumnSizing: setColumnSizing,
+    setColumns: setColumns,
+    columnSizing: columnSizing,
+    columnSizingInfo: columnSizingInfo,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen
+  })))))));
 };
 export default Grid;

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

@@ -180,10 +180,10 @@ const TableWrapper = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      // height: tableHeight ?? '500px' //should be a fixed height
+      // height: height, //should be a fixed height
       maxHeight: height,
       //should be a fixed height
-      height: minHeight ? height : undefined //should be a fixed height
+      minHeight: minHeight ? height : undefined //should be a fixed height
       // minWidth: table.getTotalSize()
     }
     // onScroll={infiniteScroll ? handleScroll : undefined}

package/lib/table-component/InternalTable.js

@@ -19,7 +19,6 @@ var _Grid = _interopRequireDefault(require("./table/Grid"));
 var _utils = require("./hook/utils");
 var _useColumns = require("./hook/useColumns");
 var _convert = require("./hook/convert");
-var _antd = require("antd");
 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 en from "rc-master-ui/es/date-picker/locale/en_US"
@@ -44,6 +43,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // import GridEdit from './table/GridEdit'
 
+// import { Modal } from 'antd'
 // import { findAllChildrenKeys2 } from '../grid-component/hooks'
 // import { columns111 } from '../test-2/columns'
 
@@ -220,77 +220,6 @@ const InternalTable = props => {
     mergedSelectedKeys: mergedSelectedKeys,
     expandable: expandable,
     setColumns: setColumns
-  })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
-    open: isFullScreen,
-    footer: null,
-    centered: true,
-    closable: true,
-    width: '100%',
-    style: {
-      maxWidth: '100%',
-      height: '100%'
-    }
-    // onClose={() => setIsFullScreen(false)}
-    ,
-    onCancel: () => setIsFullScreen(false)
-
-    // destroyOnClose
-    ,
-    styles: {
-      content: {
-        height: '100vh',
-        borderRadius: 0,
-        padding: '15px 10px'
-      },
-      wrapper: {
-        zIndex: 1050
-      }
-    },
-    destroyOnClose: true
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      paddingTop: 40
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
-    t: t
-    // id={isFullScreen ? faker.string.alpha(20) : id}
-    ,
-    id: _faker.faker.string.alpha(20),
-    prefix: prefix,
-    originData: convertData,
-    dataSource: mergedData,
-    locale: locale,
-    format: format
-    // columns={columns111 as any}
-    ,
-    columns: (0, _convert.convertColumns)(mergedColumns),
-    propsColumns: columns,
-    rowKey: rowKey,
-    groupSetting: groupSetting,
-    groupAble: groupAble,
-    groupColumns: groupColumns,
-    columnPinning: columnPinning,
-    columnHidden: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
-    triggerFilter: setFilterState,
-    triggerSorter: setSorterStates,
-    setMergedFilterKeys: setMergedFilterKeys,
-    mergedFilterKeys: mergedFilterKeys,
-    expanded: expanded
-    // onContextMenu={onContextMenu}
-    // contextMenuItems={contextMenuItems}
-    ,
-    editAble: editAble,
-    triggerChangeColumns: triggerChangeColumns,
-    setExpanded: setExpanded,
-    isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen,
-    height: windowSize.innerHeight - 70,
-    windowSize: windowSize,
-    isDataTree: isDataTree,
-    selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys,
-    expandable: expandable,
-    setColumns: setColumns
-  })))));
+  })));
 };
 var _default = exports.default = InternalTable;

package/lib/table-component/TableContainer.js

@@ -94,7 +94,8 @@ const TableContainer = props => {
   const [tableHeight, settableHeight] = _react.default.useState(0);
   const [focusedCell, setFocusedCell] = _react.default.useState(undefined);
   _react.default.useEffect(() => {
-    const totalHeight = minHeight ?? height;
+    // const totalHeight = minHeight ?? height
+    const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
     if (totalHeight) {
       const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
       const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;

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

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

package/lib/table-component/TableContainerEdit.js

@@ -86,7 +86,6 @@ const TableContainerEdit = props => {
     contextMenuItems: propsContext,
     setSorterChange,
     setFilterChange,
-    // tableHeight,
     onCellPaste,
     // triggerPaste,
     validate,
@@ -886,7 +885,8 @@ const TableContainerEdit = props => {
   // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
 
   _react.default.useEffect(() => {
-    const totalHeight = minHeight ?? height;
+    // const totalHeight = minHeight ?? height
+    const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
     if (totalHeight) {
       const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
       const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;

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

@@ -369,10 +369,13 @@ const EditableCell = props => {
           // @ts-ignore
           valueSelectTable = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
-          // @ts-ignore
-          valueSelectTable = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
-        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueSelectTable = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
         return /*#__PURE__*/_react.default.createElement(_asyncTableSelect.AsyncTableSelect
         // id={`col${indexCol}-record${indexRow}`}
         , {
@@ -477,10 +480,13 @@ const EditableCell = props => {
           // @ts-ignore
           valueSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
-          // @ts-ignore
-          valueSelect = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
-        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
           options: options,
           value: valueSelect,
@@ -564,10 +570,13 @@ const EditableCell = props => {
           // @ts-ignore
           valueAsyncSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
-          // @ts-ignore
-          valueAsyncSelect = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
-        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueAsyncSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
         return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
           options: options,
           defaultOptions: options,
@@ -696,10 +705,13 @@ const EditableCell = props => {
           // @ts-ignore
           valueTreeSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === 'checkbox') {
-          // @ts-ignore
-          valueTreeSelect = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
-        }
+
+        // if (isMulti || selectMode === 'checkbox') {
+        //   // @ts-ignore
+        //   valueTreeSelect = (!isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0) ? options.filter((val: any) => record[dataIndex]?.includes(val[keySelect])) : undefined
+
+        // }
+
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
           className: 'be-tree-select',

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

@@ -393,7 +393,7 @@ const TableBodyCellEdit = props => {
       colSelectIds.forEach(colId => {
         const cellll = row.getVisibleCells().find(c => c.column.id === colId);
         const value = cellll?.getValue();
-        rowData.push(value !== undefined ? String(value) : '');
+        rowData.push(value !== undefined ? value : '');
       });
       dataSelected.push(rowData);
     });
@@ -410,12 +410,11 @@ const TableBodyCellEdit = props => {
       const targetRow = pasteState.startRowIndex + rowIndex1;
 
       // Nếu vượt quá số dòng hiện có, thêm dòng mới
-      if (targetRow >= newData.length) {
-        newData.push({
-          id: undefined,
-          rowId: (0, _utils.newGuid)()
-        });
-      }
+      // if (targetRow >= newData.length) {
+
+      //   newData.push({ id: undefined, rowId: newGuid() })
+      // }
+
       rowValues.forEach((cellValue, colIndex1) => {
         const targetCol = startColIndex + colIndex1;
         if (targetCol >= tmpCols.length) {

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

@@ -55,7 +55,7 @@ const TableHead = ({
     const depth = column.depth ?? 0;
 
     // const colSpan = column.columns.length || 1;
-    const colSpan = column.getFlatColumns().filter(col => col.getIsVisible() && col.columns.length < 2).length;
+    const colSpan = column.getFlatColumns().filter(col => col.getIsVisible() && col.columns.length < 1).length;
     // const colSpan = getVisibleChildCount(column);
 
     const rowSpan = column.columns?.length > 0 ? 1 : headerDepth - depth;

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

@@ -152,7 +152,7 @@ function convertToTanStackColumns({
         }
       },
       enableResizing: allowResizing !== false,
-      enableHiding: false,
+      // enableHiding: false,
       // enableResizing: true,
       id: field,
       size: width,
@@ -274,8 +274,6 @@ const toggleRowSelection = props => {
       let checkedRows = [];
       const rowParent = row.getParentRow();
 
-      // console.log(countUnselectedChildren(row))
-
       // nếu có cha và cha chưa được chọn và tất cả con đã chọn => thêm row cha vào 
       if (rowParent && !rowParent.getIsSelected() && (0, _utils.countUnselectedChildren)(row) === 1) {
         rowParent.toggleSelected(!rowParent.getIsSelected());

package/lib/table-component/hook/utils.d.ts

@@ -152,3 +152,4 @@ export declare function getAllChildren(row: any): any;
 export declare function toggleRowAndChildren(row: Row<any>, isSelected?: boolean): void;
 export declare function countUnselectedChildren(row: Row<any>): number;
 export declare function removeDuplicatesByKey(arr: any[], key?: string): any[];
+export declare const getTableHeight: (height?: number, minHeight?: number) => number;

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

@@ -39,7 +39,7 @@ exports.getHiddenParentKeys1 = getHiddenParentKeys1;
 exports.getInvisibleColumns = getInvisibleColumns;
 exports.getNewItemsOnly = exports.getLastSelectCell = void 0;
 exports.getRowIdsBetween = getRowIdsBetween;
-exports.getVisibleColumnKeys1 = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getSelectedCellMatrix = void 0;
+exports.getVisibleColumnKeys1 = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTableHeight = exports.getSelectedCellMatrix = void 0;
 exports.groupArrayByColumns = groupArrayByColumns;
 exports.isColor = void 0;
 exports.isDateString = isDateString;
@@ -1878,7 +1878,7 @@ function getHiddenParentKeys1(columns, parentKeys = []) {
   for (const column of columns) {
     if (column.children) {
       const currentPath = column.field ? [...parentKeys, column.field] : [...parentKeys];
-      const childHiddenParents = getHiddenParentKeys(column.children, currentPath);
+      const childHiddenParents = getHiddenParentKeys1(column.children, currentPath);
       if (childHiddenParents.length > 0) {
         childHiddenParents.forEach(key => hiddenParents.add(key));
         currentPath.forEach(key => hiddenParents.add(key));
@@ -2109,7 +2109,6 @@ function findFirst(items) {
 
 //       // if (requireNonEmpty) {
 
-//       //   console.log('requireNonEmpty', requireNonEmpty)
 //       //   if (children.length > 0) {
 //       //     hasParent = true
 //       //   }
@@ -2370,4 +2369,23 @@ function removeDuplicatesByKey(arr, key = 'id') {
     }
   }
   return Array.from(map.values());
-}
+}
+const getTableHeight = (height, minHeight) => {
+  if (height && !minHeight) {
+    return height;
+  }
+  if (minHeight && !height) {
+    return minHeight;
+  }
+  if (minHeight && height) {
+    return Math.max(minHeight, height);
+    // if (height > minHeight) {
+    //   return height
+    // }
+
+    // if (minHeight > height) {
+    //   return minHeight
+    // }
+  }
+};
+exports.getTableHeight = getTableHeight;

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

@@ -6,15 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _antd = require("antd");
+var _faker = require("@faker-js/faker");
 var _reactTable = require("@tanstack/react-table");
 var _core = require("@dnd-kit/core");
 var _modifiers = require("@dnd-kit/modifiers");
 var _sortable = require("@dnd-kit/sortable");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _TableContainer = _interopRequireDefault(require("../TableContainer"));
 var _operator = require("../features/operator");
 var _utils = require("../hook/utils");
 var _TableContainerEdit = _interopRequireDefault(require("../TableContainerEdit"));
+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 { makeData } from "../default/makeData";
 
 // import {  flattenArray, getFixedFields, getInvisibleColumns, unFlattenData, updateOrInsert } from './hook/utils'
@@ -55,6 +59,7 @@ const Grid = props => {
     infiniteScroll,
     mergedSelectedKeys,
     allowResizing,
+    windowSize,
     ...rest
   } = props;
   const [columnResizeMode] = _react.default.useState('onChange');
@@ -88,6 +93,7 @@ const Grid = props => {
   });
   const [sorterChange, setSorterChange] = _react.default.useState(false);
   const [filterChange, setFilterChange] = _react.default.useState(false);
+  const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
   const table = (0, _reactTable.useReactTable)({
     _features: [_operator.OperatorFeature],
     data: dataSource,
@@ -276,7 +282,7 @@ const Grid = props => {
   }
   const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {}), (0, _core.useSensor)(_core.TouchSensor, {}), (0, _core.useSensor)(_core.KeyboardSensor, {}));
   const ContainerComponent = editAble ? _TableContainerEdit.default : _TableContainer.default;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: `${prefix}-grid`,
     style: {
       minHeight: minHeight ?? undefined,
@@ -290,6 +296,7 @@ const Grid = props => {
   }, /*#__PURE__*/_react.default.createElement(ContainerComponent, (0, _extends2.default)({}, rest, {
     id: id,
     t: t,
+    windowSize: windowSize,
     table: table,
     editAble: editAble,
     dataSource: dataSource,
@@ -300,7 +307,7 @@ const Grid = props => {
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,
-    height: minHeight ?? height ?? 700,
+    height: height ?? minHeight ?? 700,
     minHeight: minHeight,
     pagination: pagination,
     columns: columns,
@@ -314,7 +321,82 @@ const Grid = props => {
     setColumnSizing: setColumnSizing,
     setColumns: setColumns,
     columnSizing: columnSizing,
-    columnSizingInfo: columnSizingInfo
-  }))));
+    columnSizingInfo: columnSizingInfo,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen
+  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    open: isFullScreen,
+    footer: null,
+    centered: true,
+    closable: true,
+    width: '100%',
+    style: {
+      maxWidth: '100%',
+      height: '100%'
+    }
+    // onClose={() => setIsFullScreen(false)}
+    ,
+    onCancel: () => setIsFullScreen(false)
+
+    // destroyOnClose
+    ,
+    styles: {
+      content: {
+        height: '100vh',
+        borderRadius: 0,
+        padding: '15px 10px'
+      },
+      wrapper: {
+        zIndex: 1050
+      }
+    },
+    destroyOnClose: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      paddingTop: 40
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefix}-grid`,
+    style: {
+      // minHeight: minHeight ?? undefined,
+      maxHeight: windowSize.innerHeight - 70
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    collisionDetection: _core.closestCenter,
+    modifiers: [_modifiers.restrictToHorizontalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors
+  }, /*#__PURE__*/_react.default.createElement(ContainerComponent, (0, _extends2.default)({}, rest, {
+    id: _faker.faker.string.alpha(20),
+    t: t,
+    table: table,
+    editAble: editAble,
+    dataSource: dataSource,
+    originData: originData,
+    prefix: prefix,
+    selectionSettings: selectionSettings,
+    isSelectionChange: isSelectionChange,
+    setIsSelectionChange: setIsSelectionChange,
+    setSorterChange: setSorterChange,
+    setFilterChange: setFilterChange,
+    height: windowSize.innerHeight - 70,
+    minHeight: minHeight,
+    pagination: pagination,
+    columns: columns,
+    windowSize: windowSize,
+    propsColumns: propsColumns,
+    triggerChangeColumns: triggerChangeColumns,
+    columnHidden: columnHidden,
+    setExpanded: setExpanded,
+    expanded: expanded,
+    infiniteScroll: infiniteScroll,
+    setMergedFilterKeys: setMergedFilterKeys,
+    setColumnSizing: setColumnSizing,
+    setColumns: setColumns,
+    columnSizing: columnSizing,
+    columnSizingInfo: columnSizingInfo,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen
+  })))))));
 };
 var _default = exports.default = Grid;

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

@@ -189,10 +189,10 @@ const TableWrapper = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      // height: tableHeight ?? '500px' //should be a fixed height
+      // height: height, //should be a fixed height
       maxHeight: height,
       //should be a fixed height
-      height: minHeight ? height : undefined //should be a fixed height
+      minHeight: minHeight ? height : undefined //should be a fixed height
       // minWidth: table.getTotalSize()
     }
     // onScroll={infiniteScroll ? handleScroll : undefined}

package/package.json

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