es-grid-template 1.2.3 → 1.2.4

package/lib/grid-component/ColumnsChoose.js

@@ -12,9 +12,330 @@ var _icons = require("@ant-design/icons");
 var _hooks = require("./hooks");
 var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
 var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
-var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 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 React, {Fragment, useMemo, useState} from "react"
+//
+// import styled from "styled-components"
+// import {Button, Input, Popover, Tooltip} from "antd";
+// import {SettingOutlined} from "@ant-design/icons";
+// import {
+//   getVisibleColumnKeys,
+//   updateColumns
+// } from "./hooks";
+//
+// // import type {TableColumnsType} from "rc-master-ui";
+// import Tree from "rc-master-ui/es/tree";
+// import SearchOutlined from "@ant-design/icons/SearchOutlined";
+// import type {ColumnsTable} from "./type";
+// import useMergedState from "rc-util/lib/hooks/useMergedState";
+//
+//
+// const  BoxAction = styled.div`
+//   border-top: 1px solid #c4c4c4;
+//   padding-top: .75rem;
+//   display: flex;
+//   justify-content: end;
+//   gap: 10px;
+//
+//   .btn-action {
+//     background: none !important;
+//     border: none !important;
+//     &.btn-action-submit {
+//       color: #df4318;
+//       &:disabled {
+//         background-color: #f0f0f0 !important;
+//       }
+//       &:hover {
+//         color: #df4318 !important;
+//       }
+//     }
+//
+//     &:hover {
+//       background-color: #f0f0f0 !important;
+//     }
+//   }
+// `
+//
+// export type IColumnsChoose<RecordType> = {
+//   columns: ColumnsTable<RecordType>
+//   columnsGroup?: string[]
+//   triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void
+//   t?: any
+//
+// }
+//
+//
+// export const ColumnsChoose = <RecordType extends object>(props: IColumnsChoose<RecordType>) => {
+//   const {
+//     columns: propsColumns,
+//     triggerChangeColumns,
+//     t,
+//     columnsGroup,
+//   } = props
+//
+//   // const dataList: { key: React.Key; title: string }[] = [];
+//
+//   // const defaultColumns = useMemo(() => {
+//   //   return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
+//   // }, [propsColumns])
+//
+//
+//   // const columnsChooseRef: any = useRef()
+//   // const searchRef: any = useRef()
+//
+//
+//
+//   // const [columns, setColumns] = useState<TableColumnsType>([])
+//
+//   // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+//
+//   // const [isManualUpdate, setIsManualUpdate] = useState(false);
+//
+//
+//   // useEffect(() => {
+//   //
+//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
+//   //   setColumns(defaultColumns as TableColumnsType)
+//   //
+//   // }, [propsColumns])
+//
+//   const columns  = useMemo(() => {
+//
+//     // return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
+//     return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false)
+//     // setColumns(defaultColumns as TableColumnsType)
+//   }, [columnsGroup, propsColumns])
+//
+//
+//   // useEffect(() => {
+//   //
+//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
+//   //
+//   //   const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
+//   //
+//   //   if (!isManualUpdate) {
+//   //     setSelectedKeys(defaultSelectedKeys)
+//   //   }
+//   //   setIsManualUpdate(false);
+//   //
+//   //
+//   // }, [isManualUpdate, propsColumns])
+//
+//   const defaultSelectedKeys =  React.useMemo(() => {
+//
+//     const rs = propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
+//     return getVisibleColumnKeys(rs)
+//
+//   },  [columnsGroup, propsColumns])
+//
+//   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
+//     defaultSelectedKeys || [],
+//     {
+//       value: defaultSelectedKeys,
+//     },
+//   );
+//
+//   //
+//   // const defaultSelectedKeys = useMemo(() => {
+//   //
+//   //   return getVisibleColumnKeys(propsColumns)
+//   //
+//   // }, [propsColumns])
+//
+//
+//   const [clicked, setClicked] = useState(false);
+//   const [autoExpandParent, setAutoExpandParent] = useState(true);
+//
+//
+//   // const treeData = useMemo(() => {
+//   //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
+//   //     data.map((item) => {
+//   //       const strTitle = item.title as string;
+//   //       const index = strTitle.indexOf(searchValue);
+//   //       const beforeStr = strTitle.substring(0, index);
+//   //       const afterStr = strTitle.slice(index + searchValue.length);
+//   //       const title =
+//   //         index > -1 ? (
+//   //           <span key={item.key}>
+//   //             {beforeStr}
+//   //             <span className="site-tree-search-value">{searchValue}</span>
+//   //             {afterStr}
+//   //           </span>
+//   //         ) : (
+//   //           <span key={item.key}>{strTitle}</span>
+//   //         );
+//   //       if (item.children) {
+//   //         return { title, key: item.key, children: loop(item.children) };
+//   //       }
+//   //
+//   //       return {
+//   //         title,
+//   //         key: item.key,
+//   //       };
+//   //     });
+//   //
+//   //   // return loop(defaultData);
+//   //   return loop(columns as any);
+//   // }, [searchValue, columns]);
+//
+//
+//   const hide = () => {
+//     setClicked(false)
+//   }
+//
+//   const handleClickChange = (open: boolean) => {
+//     setClicked(open)
+//   }
+//
+//   const onExpand = () => {
+//     // setExpandedKeys(newExpandedKeys)
+//     setAutoExpandParent(false)
+//   }
+//
+//   // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
+//   //   let parentKey: React.Key
+//   //   for (let i = 0; i < tree.length; i++) {
+//   //     const node = tree[i]
+//   //     if (node.children) {
+//   //       if (node.children.some((item) => item.key === key)) {
+//   //         parentKey = node.key
+//   //       } else if (getParentKey(key, node.children)) {
+//   //         parentKey = getParentKey(key, node.children)
+//   //       }
+//   //     }
+//   //   }
+//   //   return parentKey!
+//   // }
+//
+//   // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+//   const onChange = () => {
+//     // const { value } = e.target
+//     // const newExpandedKeys = dataList
+//     //   .map((item) => {
+//     //     if (item.title.indexOf(value) > -1) {
+//     //       return getParentKey(item.key, defaultData)
+//     //     }
+//     //     return null
+//     //   })
+//     //   .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
+//     // setExpandedKeys(newExpandedKeys)
+//
+//     // setSearchValue(value)
+//     setAutoExpandParent(true)
+//   };
+//
+//   const onCheck = (keys: string[]) => {
+//
+//     console.log('keys', keys)
+//     // setSelectedKeys(keys)
+//     setMergedSelectedKeys(keys)
+//     // setIsManualUpdate(true)
+//
+//   }
+//
+//   const handleAccept = () => {
+//
+//     console.log('mergedSelectedKeys', mergedSelectedKeys)
+//
+//     // const rs1  =  updateColumns(propsColumns, selectedKeys)
+//     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
+//
+//     console.log('rs1', rs1)
+//
+//     triggerChangeColumns?.(rs1, 'columnChoose')
+//
+//     hide()
+//
+//   }
+//
+//   const handleCancel = () => {
+//     // setSelectedKeys(defaultSelectedKeys)
+//     hide()
+//   }
+//
+//
+//   return (
+//     <Fragment>
+//       <Popover
+//         placement={'bottomLeft'}
+//         content={
+//           <div style={{minWidth: 250}}>
+//             <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
+//
+//             <Tree
+//               onExpand={onExpand}
+//               // expandedKeys={expandedKeys}
+//               autoExpandParent={autoExpandParent}
+//               // treeData={treeData}
+//               treeData={columns}
+//               defaultExpandAll={true}
+//               checkable={true}
+//               // onSelect={(keys, info) => {
+//               //   const key = info.node.key
+//               //
+//               //   const find = findItemByKey(columns, 'key', key)
+//               //
+//               //   // const tmpColumn
+//               //
+//               //   // if (selectedKeys.includes(key as string)) {
+//               //   //   const rssss  = findKeyPath(columns, key as string)
+//               //   //   const rs = selectedKeys.filter(item => !rssss.includes(item));
+//               //   //
+//               //   //   setSelectedKeys(rs)
+//               //   // } else {
+//               //
+//               //     // const rs  = [...selectedKeys, keys[0]]
+//               //
+//               //     // setSelectedKeys(keys)
+//               //   // }
+//               // }}
+//               onCheck={(keys) => onCheck(keys as string[])}
+//
+//
+//               multiple={true}
+//               // checkedKeys={selectedKeys}
+//
+//               defaultCheckedKeys={mergedSelectedKeys}
+//               // defaultCheckedKeys={defaultSelectedKeys}
+//               // selectedKeys={[]}
+//
+//               height={window.innerHeight - 200}
+//
+//             />
+//
+//
+//             <BoxAction className={'px-1'}>
+//               <Button
+//                 // className={classnames('btn-action btn-action-submit', {
+//                 //   // disable: !columns.find((item) => item.visible !== false || item.visible)
+//                 // })}
+//                 onClick={handleAccept}
+//                 // disabled={!columns.find((item) => item.visible !== false || item.visible)}
+//               >
+//                 {t ? t('OK') : 'OK'}
+//                 {/*{'OK'}*/}
+//               </Button>
+//
+//               {/*<Button className={'btn-action btn-action-cancel'} onClick={hide}  >{('Cancel') }</Button>*/}
+//               <Button className={'btn-action btn-action-cancel'} onClick={handleCancel}  >{t ? t('Cancel') : 'Cancel' }</Button>
+//             </BoxAction>
+//           </div>
+//         }
+//         trigger="click"
+//         open={clicked}
+//         onOpenChange={handleClickChange}
+//         arrow={false}
+//       >
+//         <Tooltip arrow={false} title={'Cài đặt'} >
+//           <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
+//         </Tooltip>
+//
+//       </Popover>
+//     </Fragment>
+//   )
+// }
+
 // import type {TableColumnsType} from "rc-master-ui";
 
 const BoxAction = _styledComponents.default.div.withConfig({
@@ -25,6 +346,7 @@ const ColumnsChoose = props => {
   const {
     columns: propsColumns,
     triggerChangeColumns,
+    triggerChangeKeys,
     t,
     columnsGroup
   } = props;
@@ -39,10 +361,8 @@ const ColumnsChoose = props => {
   // const searchRef: any = useRef()
 
   // const [columns, setColumns] = useState<TableColumnsType>([])
-
-  // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-
-  // const [isManualUpdate, setIsManualUpdate] = useState(false);
+  const [selectedKeys, setSelectedKeys] = (0, _react.useState)([]);
+  const [isManualUpdate, setIsManualUpdate] = (0, _react.useState)(false);
 
   // useEffect(() => {
   //
@@ -52,40 +372,22 @@ const ColumnsChoose = props => {
   // }, [propsColumns])
 
   const columns = (0, _react.useMemo)(() => {
-    // return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
-    return propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false);
+    return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
     // setColumns(defaultColumns as TableColumnsType)
-  }, [columnsGroup, propsColumns]);
-
-  // useEffect(() => {
-  //
-  //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-  //
-  //   const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
-  //
-  //   if (!isManualUpdate) {
-  //     setSelectedKeys(defaultSelectedKeys)
-  //   }
-  //   setIsManualUpdate(false);
-  //
-  //
-  // }, [isManualUpdate, propsColumns])
-
-  const defaultSelectedKeys = _react.default.useMemo(() => {
-    const rs = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
-    return (0, _hooks.getVisibleColumnKeys)(rs);
-  }, [columnsGroup, propsColumns]);
-  const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys || [], {
-    value: defaultSelectedKeys
-  });
-
-  //
-  // const defaultSelectedKeys = useMemo(() => {
-  //
-  //   return getVisibleColumnKeys(propsColumns)
-  //
-  // }, [propsColumns])
-
+  }, [propsColumns]);
+  (0, _react.useEffect)(() => {
+    // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
+    const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    const defaultSelectedKeys = (0, _hooks.getVisibleColumnKeys)(defaultColumns);
+    if (!isManualUpdate) {
+      setSelectedKeys(defaultSelectedKeys);
+    }
+    setIsManualUpdate(false);
+  }, [propsColumns]);
+  const defaultSelectedKeys = (0, _react.useMemo)(() => {
+    const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    return (0, _hooks.getVisibleColumnKeys)(defaultColumns);
+  }, [propsColumns]);
   const [clicked, setClicked] = (0, _react.useState)(false);
   const [autoExpandParent, setAutoExpandParent] = (0, _react.useState)(true);
 
@@ -163,19 +465,17 @@ const ColumnsChoose = props => {
     setAutoExpandParent(true);
   };
   const onCheck = keys => {
-    console.log('keys', keys);
-    // setSelectedKeys(keys)
-    setMergedSelectedKeys(keys);
-    // setIsManualUpdate(true)
+    setSelectedKeys(keys);
+    setIsManualUpdate(true);
   };
   const handleAccept = () => {
-    // const rs1  =  updateColumns(propsColumns, selectedKeys)
-    const rs1 = (0, _hooks.updateColumns)(propsColumns, mergedSelectedKeys);
+    const rs1 = (0, _hooks.updateColumns)(propsColumns, selectedKeys);
+    triggerChangeKeys?.(selectedKeys);
     triggerChangeColumns?.(rs1, 'columnChoose');
     hide();
   };
   const handleCancel = () => {
-    // setSelectedKeys(defaultSelectedKeys)
+    setSelectedKeys(defaultSelectedKeys);
     hide();
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
@@ -222,15 +522,12 @@ const ColumnsChoose = props => {
       // }}
       ,
       onCheck: keys => onCheck(keys),
-      multiple: true
-      // checkedKeys={selectedKeys}
-      ,
-
-      defaultCheckedKeys: mergedSelectedKeys
+      multiple: true,
+      checkedKeys: selectedKeys,
+      defaultCheckedKeys: selectedKeys
       // defaultCheckedKeys={defaultSelectedKeys}
-      // selectedKeys={[]}
       ,
-
+      selectedKeys: [],
       height: window.innerHeight - 200
     }), /*#__PURE__*/_react.default.createElement(BoxAction, {
       className: 'px-1'
@@ -252,13 +549,6 @@ const ColumnsChoose = props => {
   }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, {
-    size: 16,
-    color: '#555555',
-    style: {
-      fontSize: 16,
-      color: '#555555'
-    }
-  }))));
+  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
 };
 exports.ColumnsChoose = ColumnsChoose;

package/lib/grid-component/InternalTable.js

@@ -100,6 +100,7 @@ const InternalTable = props => {
   _react.default.useEffect(() => {
     setColumns(propsColumns);
   }, [propsColumns]);
+  // }, [!!propsColumns.length && !!propsColumns])
 
   // const [data, setData] = useState<RecordType[]>([]);
 
@@ -152,6 +153,12 @@ const InternalTable = props => {
   // const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
   const triggerChangeColumns = newColumns => {
     setColumns(newColumns);
+    if (tableRef.current) {
+      tableRef.current.scrollTo({
+        left: 0.1,
+        behavior: "smooth"
+      });
+    }
     onChooseColumns?.({
       showColumns: [],
       columns: [],

package/lib/grid-component/hooks/useColumns.js

@@ -256,11 +256,11 @@ const useColumns = config => {
           }),
           onCell: data => {
             return {
-              colSpan: data.children && col.field === firstNonGroupColumn?.field ? 2 : data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
+              colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
               zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
               className: (0, _classnames.default)('', {
-                'cell-group': data.children,
-                'cell-group-fixed': data.children && col.field === firstNonGroupColumn?.field
+                'cell-group': groupColumns && data.children,
+                'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
               })
             };
           },

package/lib/grid-component/hooks/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useForceUpdate(): React.DispatchWithoutAction;

package/lib/grid-component/hooks/useForceUpdate.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useForceUpdate;
+var React = _interopRequireWildcard(require("react"));
+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; }
+function useForceUpdate() {
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  return forceUpdate;
+}

package/lib/grid-component/hooks/utils.d.ts

@@ -66,3 +66,5 @@ export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordTyp
 export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
 export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordType>, groupColumns: string[]) => ColumnsTable<RecordType>;
 export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];
+export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
+export declare const checkChild: (inputArray: any[]) => boolean;

package/lib/grid-component/hooks/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addRowIdArray = void 0;
 exports.addRows8 = addRows8;
-exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = void 0;
+exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = void 0;
 exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemByKey = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
@@ -17,6 +17,7 @@ var _uuid = require("uuid");
 var _colors = require("@ant-design/colors");
 var _rcMasterUi = require("rc-master-ui");
 var _columns = require("./columns");
+var _useColumns = require("./useColumns");
 const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
@@ -163,9 +164,14 @@ const updateColumns = (columns, includes) => {
       newColumn.children = updateColumns(newColumn.children, includes);
       hasVisibleChild = newColumn.children.some(child => !child.hidden);
     }
-    newColumn.hidden = newColumn.key && !includes.includes(newColumn.key);
+
+    // newColumn.hidden = newColumn.key && !includes.includes(newColumn.key)
+    newColumn.hidden = newColumn.field && !includes.includes(newColumn.field);
+    // newColumn.fixed = newColumn.field && !includes.includes(newColumn.field) ? undefined : newColumn.fixed
+
     if (newColumn.children && newColumn.children.length > 0) {
       newColumn.hidden = !hasVisibleChild;
+      // newColumn.fixed = !hasVisibleChild ? undefined : newColumn.fixed
     }
     return newColumn;
   });
@@ -526,18 +532,6 @@ const getFirstSelectCell = selectCells => {
     col
   };
 };
-
-// export const getLastSelectCell = (selectCells: any): {row: number, col: number} => {
-//
-//   if (selectCells.size === 0) {
-//     return {row: 0, col: 0}
-//   }
-//   const lastValue = [...selectCells].pop();
-//
-//   const [row, col] = lastValue.split("-").map(Number);
-//   return {row, col};
-//
-// }
 exports.getFirstSelectCell = getFirstSelectCell;
 const getRowsPasteIndex = pasteRows => {
   if (!pasteRows) {
@@ -557,8 +551,25 @@ function addRows8(arr, n) {
   const addedRows = [];
 
   // Hàm kiểm tra kiểu date hợp lệ
-  const isValidDate = d => {
-    return !isNaN(Date.parse(d));
+  const isValidDate = item => {
+    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
+    // return !isNaN(Date.parse(d))
+
+    if (typeof item === 'number') {
+      // return 'number'
+      return false;
+    }
+    if (typeof item === 'string') {
+      // Kiểm tra nếu là chuỗi ISO date hợp lệ
+      const date = new Date(item);
+      if (!isNaN(date.getTime()) && item.includes('T')) {
+        // return 'date'
+        return true;
+      }
+      // return 'string'
+      return false;
+    }
+    return !isNaN(Date.parse(item));
   };
 
   // Lấy giá trị mẫu của cột j từ hàng đầu tiên
@@ -768,4 +779,57 @@ const convertFlatColumn = array => {
   });
   return result;
 };
-exports.convertFlatColumn = convertFlatColumn;
+exports.convertFlatColumn = convertFlatColumn;
+const convertColumns = cols => {
+  return cols.map(col => {
+    if (col === _useColumns.SELECTION_COLUMN) {
+      return _useColumns.SELECTION_COLUMN;
+    }
+    const transformedColumn = {
+      ...col,
+      dataIndex: col.field ?? col.dataIndex,
+      key: col.field ?? col.dataIndex ?? col.key,
+      // title: t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title,
+      // title: () => (<span>aaa</span>),
+      // title: () => (<HeaderContent column={{...col} as any} t={t}/>),
+      // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
+      ellipsis: col.ellipsis !== false,
+      align: col.textAlign ?? col.align,
+      fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+    };
+    if (transformedColumn.children && transformedColumn.children?.length) {
+      return {
+        ...transformedColumn,
+        children: convertColumns(transformedColumn.children)
+      };
+    }
+    if (["index", "#"].includes(col.field)) {
+      return {
+        ...transformedColumn,
+        onCell: () => ({
+          className: 'cell-number'
+        }),
+        render: (_, __, rowIndex) => rowIndex + 1
+      };
+    }
+    if (col.key === 'command') {
+      return {
+        ...transformedColumn,
+        onCell: () => ({
+          className: 'cell-number',
+          style: {
+            padding: '2px 8px'
+          }
+        })
+      };
+    }
+    return {
+      ...transformedColumn
+    };
+  });
+};
+exports.convertColumns = convertColumns;
+const checkChild = inputArray => {
+  return inputArray.some(item => item.children && item.children.length > 0);
+};
+exports.checkChild = checkChild;