es-grid-template 1.2.0 → 1.2.2

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

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { Button, Dropdown, Form } from "antd";
 import { useForm } from 'react-hook-form';
 import { Toaster } from "react-hot-toast";
-import { flatColumns, renderContent } from "../hooks/useColumns";
+import { flatColumns2, getValueCell, renderContent } from "../hooks/columns";
 import EditableCell from "../EditableCell";
 import { GridStyle } from "../GridStyle";
 import { TableContext } from "../useContext";
@@ -13,13 +13,16 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { getEditType, getRowNumber, isObjEmpty, totalFixedWidth } from "../hooks";
+import { addRows8, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 
 // import Command from "../Command";
 
-import { Toolbar } from "rc-master-ui";
+import { Toolbar, ConfigProvider } from "rc-master-ui";
 import classnames from "classnames";
+import useMergedState from "rc-util/es/hooks/useMergedState";
+// import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
+
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
 const GridEdit = props => {
@@ -34,24 +37,37 @@ const GridEdit = props => {
     selectionSettings,
     height,
     format,
-    // onDataChange,
     triggerChangeData,
+    triggerChangeColumns,
     onCellPaste,
     onCellChange,
+    triggerPaste,
     style,
     getRowKey,
     className,
     toolbarItems,
+    defaultValue,
+    expandable,
+    onCellClick,
     ...rest
   } = props;
-
-  // const forceUpdate = useForceUpdate();
-  // const [updateKey, setUpdateKey] = useState(0);
-
+  const {
+    mode,
+    type,
+    // checkboxOnly,
+    // hideSelectAll,
+    columnWidth
+    // selectedRowKeys,
+    // defaultSelectedRowKeys
+  } = selectionSettings || {};
   const isSelecting = useRef(false);
   const startCell = useRef(null);
+  const childrenColumnName = 'children';
   const isSelectingRow = useRef(false);
   const rowStart = useRef(null);
+
+  // const [getRecordByKey] = useLazyKVMap(dataSource, childrenColumnName, getRowKey);
+
   const itemsAdd = [{
     key: '10',
     label: '10 rows'
@@ -65,71 +81,346 @@ const GridEdit = props => {
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
   const [selectedCells, setSelectedCells] = useState(new Set());
+  const [pasteCells, setPasteCells] = useState(new Set());
+  const [isSelectDragging, setSelectIsDragging] = useState(false);
+  const [isPasteDragging, setIsPasteDragging] = useState(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
+
+  // const [showDraggingPoint, setShowDraggingPoint] = useState(false);
+
   const [rowsSelected, setRowsSelected] = useState(new Set());
-  const [selectedCell, setSelectedCell] = useState(null);
-  const handleAdd = item => {
-    console.log(item);
+  const [startSelectedCells, setStartSelectedCell] = useState(null);
+  const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(() => {
+    // if (defaultExpandedRowKeys) {
+    //   return defaultExpandedRowKeys;
+    // }
+    // if (defaultExpandAllRows) {
+    return findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? [];
+    // }
+    // return [];
+  });
+  const mergedExpandedKeys = React.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
+  const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState([], {
+    value: []
+  });
+  const rowsFocus = React.useMemo(() => {
+    return [...new Set(Array.from(selectedCells).map(item => parseInt(item.split('-')[0])))] ?? [];
+  }, [selectedCells]);
+  const onTriggerExpand = React.useCallback(record => {
+    const key = getRowKey(record, dataSource.indexOf(record));
+    let newExpandedKeys;
+    const hasKey = mergedExpandedKeys.has(key);
+    if (hasKey) {
+      mergedExpandedKeys.delete(key);
+      newExpandedKeys = [...mergedExpandedKeys];
+    } else {
+      newExpandedKeys = [...mergedExpandedKeys, key];
+    }
+    setInnerExpandedKeys(newExpandedKeys);
+  }, [getRowKey, mergedExpandedKeys, dataSource]);
+  const handleAddSingle = item => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const newData = [...dataSource, defaultValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId
+      } : {
+        id: undefined,
+        rowId
+      }];
+      triggerChangeData?.(newData, 'Add');
+    }
+  };
+  const handleAddMulti = (item, e) => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const defaultRowValue = getDefaultValue(defaultValue);
+      const newRows = Array.from({
+        length: Number(e.key)
+      }).map(() => defaultRowValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId: newGuid()
+      } : {
+        id: undefined,
+        rowId: newGuid()
+      });
+      const newData = dataSource.concat(newRows);
+      triggerChangeData?.(newData, 'Add');
+    }
+  };
+  const handleDuplicate = () => {
+    // không tính tree
+
+    // Cập nhật data mới
+    const newData = [...dataSource];
+    const duplicatedItems = rowsFocus.map(index => ({
+      ...newData[index],
+      rowId: newGuid(),
+      id: undefined,
+      isDuplicate: true
+    }));
+
+    // Vị trí chèn là ngay sau phần tử lớn nhất trong rowsFocus
+    const insertAfter = Math.max(...rowsFocus);
+    const rs = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
+    triggerChangeData?.(rs, 'DUPLICATE');
+  };
+  const handleInsertBefore = item => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+    const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (!record.parentId) {
+        // Cập nhật data mới
+        const newData = [...dataSource];
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: null,
+          id: undefined
+        });
+        triggerChangeData?.(newData, 'INSERT_BEFORE');
+      } else {
+        const newData = [...dataSource];
+        const parent = findItemByKey(newData, rowKey, record.parentId);
+
+        // Cập nhật childData mới
+        const childData = parent?.children ? [...parent.children] : [];
+        const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        childData.splice(index, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: record.parentId,
+          id: undefined
+        });
+        const newRowData = {
+          ...parent,
+          children: childData
+        };
+        const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
+        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+      }
+    }
+  };
+  const handleInsertAfter = item => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+    const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
+
+    // const record = getRecordByKey()
+
     if (item.onClick) {
-      console.log('cccccccccccccccc');
+      item.onClick({
+        toolbar: item
+      });
     } else {
-      console.log('bbbbbbbbbbbbb');
+      if (!record.parentId) {
+        // Cập nhật data mới
+        const newData = [...dataSource];
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index + 1, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: null
+        });
+        triggerChangeData?.(newData, 'INSERT_AFTER');
+      } else {
+        const newData = [...dataSource];
+        const parent = findItemByKey(newData, rowKey, record.parentId);
+
+        // Cập nhật childData mới
+        const childData = parent?.children ? [...parent.children] : [];
+        const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        childData.splice(index + 1, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: record.parentId
+        });
+        const newRowData = {
+          ...parent,
+          children: childData
+        };
+        const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
+        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+      }
     }
   };
-  const handleDuplicate = () => {};
-  const handleInsertBefore = () => {};
-  const handleInsertAfter = () => {};
   const handleDeleteAll = () => {};
   const toolbarItemsBottom = useMemo(() => {
-    return toolbarItems?.filter(it => it.position === 'Bottom').map(item => {
-      return {
-        ...item,
-        template: () => {
-          return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/React.createElement(Dropdown.Button, {
-            menu: {
-              items: itemsAdd,
-              onClick: () => handleAdd(item)
+    if (!rowsFocus || rowsFocus.length === 0) {
+      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER').map(item => {
+        if (item.key === 'ADD') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+                className: classnames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+                style: {
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
+                },
+                className: 'toolbar-button toolbar-dropdown-button',
+                menu: {
+                  items: itemsAdd,
+                  onClick: e => handleAddMulti(item, e)
+                }
+              }, /*#__PURE__*/React.createElement("span", {
+                style: {
+                  color: '#28c76f'
+                },
+                onClick: () => handleAddSingle(item)
+              }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))));
             }
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item')), item.key === 'DUPLICATE' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/React.createElement(Button, {
-            color: "green",
-            variant: 'outlined',
-            onClick: handleDuplicate,
-            className: "d-flex be-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')), item.key === 'INSERT_BEFORE' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/React.createElement(Button, {
-            color: "green",
-            variant: 'outlined',
-            onClick: handleInsertBefore,
-            className: "d-flex be-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')), item.key === 'INSERT_AFTER' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/React.createElement(Button, {
-            color: "green",
-            variant: 'outlined',
-            onClick: handleInsertAfter,
-            className: "d-flex be-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')), item.key === 'DELETE' && item.visible !== false && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
-          }, /*#__PURE__*/React.createElement(Button, {
-            color: "primary",
-            variant: 'outlined',
-            onClick: handleDeleteAll,
-            className: "d-flex be-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item')));
+          };
         }
+        if (item.key === 'DELETE') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement("div", {
+                className: classnames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Button, {
+                style: {
+                  color: '#eb4619',
+                  borderColor: '#eb4619'
+                },
+                variant: 'outlined',
+                onClick: handleDeleteAll,
+                className: "d-flex toolbar-button"
+              }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item'));
+            }
+          };
+        }
+        return {
+          ...item
+        };
+      });
+    }
+    return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
+      if (item.key === 'ADD') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleAddMulti(item, e)
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleAddSingle(item)
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))));
+          }
+        };
+      }
+      if (item.key === 'DUPLICATE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: handleDuplicate,
+              className: "d-flex toolbar-button"
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')));
+          }
+        };
+      }
+      if (item.key === 'INSERT_BEFORE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'INSERT_BEFORE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertBefore(item),
+              className: "d-flex toolbar-button"
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')));
+          }
+        };
+      }
+      if (item.key === 'INSERT_AFTER') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'INSERT_AFTER' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertAfter(item),
+              className: "d-flex toolbar-button"
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')));
+          }
+        };
+      }
+      if (item.key === 'DELETE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: handleDeleteAll,
+              className: "d-flex toolbar-button"
+            }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item'));
+          }
+        };
+      }
+      return {
+        ...item
       };
     });
-  }, [toolbarItems]);
+  }, [handleAddMulti, handleAddSingle, itemsAdd, rowsFocus.length, t, toolbarItems]);
   const {
     control,
     handleSubmit,
     setValue,
     trigger,
-    getValues
+    getValues,
+    reset
     // formState: { errors }
   } = useForm({
     mode: 'onChange'
@@ -141,13 +432,16 @@ const GridEdit = props => {
   const isEditing = record => record[rowKey] === editingKey;
   useEffect(() => {
     const handleClickOutside = event => {
-      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const element = event.target;
+      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const container = document.querySelector(".be-popup-container");
       // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
 
+      // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
+      const itemContainer = document.querySelector(".ui-rc-toolbar-selection-overflow-item");
       const isInsideContainer = element.closest(".be-popup-container") && container;
-      if (isInsideContainer) {
+      const isInsideToolbar = element.closest(".ui-rc-toolbar-selection-overflow-item") && itemContainer;
+      if (isInsideContainer || isInsideToolbar) {
         return;
       }
       if (tableBodies.length > 0) {
@@ -167,36 +461,237 @@ const GridEdit = props => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  const handleMouseDown = (row, col, e) => {
+  const handleMouseDown = (record, row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
       return;
     }
-    setSelectedCell({
-      row,
-      col
-    });
     isSelecting.current = true;
     startCell.current = {
       row,
       col
     };
-    setSelectedCells(new Set([`${row}-${col}`]));
-    setRowsSelected(new Set());
+    if (e.target.className === 'dragging-point') {
+      // e.stopPropagation()
+      // e.preventDefault()
+    } else {
+      // isSelecting.current = true;
+      // startCell.current = { row, col };
+
+      // if (!isPasteDragging) {
+      setStartSelectedCell({
+        row,
+        col
+      });
+      setSelectedCells(new Set([`${row}-${col}`]));
+      setRowsSelected(new Set());
+      // }
+    }
+
+    // setSelectIsDragging(true)
+
+    // isSelecting.current = true;
+    // startCell.current = { row, col };
+    //
+    // if (!isPasteDragging) {
+    //   setStartSelectedCell({ row, col })
+    //   setSelectedCells(new Set([`${row}-${col}`]));
+    //   setRowsSelected(new Set())
+    // }
+  };
+
+  // const handlePointEnter = (e: any) => {
+  //
+  //   if (e.button === 2) {
+  //     e.stopPropagation()
+  //     return
+  //   }
+  //
+  //   // setIsPasteDragging(true);
+  //
+  // };
+
+  // const handlePointLeave = () => {
+  //
+  //   if (isPasteDragging && !isSelectDragging) {
+  //     // setIsPasteDragging(false);
+  //   }
+  //
+  // };
+
+  const triggerDragPaste = pastesArray => {
+    const mergedSet = new Set([...selectedCells, ...pastesArray]);
+    setSelectedCells(mergedSet);
+    setPasteCells(new Set());
+    const selectedArray = Array.from(selectedCells).map(key => {
+      const [row, col] = key.split("-").map(Number);
+      // @ts-ignore
+      const columnKey = columns[col].field;
+
+      // @ts-ignore
+      return {
+        row,
+        col,
+        value: flattenData(childrenColumnName, dataSource)[row][columnKey]
+      };
+      // return { row, col, value: '' };
+    });
+
+    // Xác định min/max row và col để sắp xếp dữ liệu
+    const minRow = Math.min(...selectedArray.map(cell => cell.row));
+    const maxRow = Math.max(...selectedArray.map(cell => cell.row));
+    const minCol = Math.min(...selectedArray.map(cell => cell.col));
+    const maxCol = Math.max(...selectedArray.map(cell => cell.col));
+
+    // Tạo dữ liệu dạng bảng (mảng 2D)
+    const table = Array.from({
+      length: maxRow - minRow + 1
+    }, () => Array(maxCol - minCol + 1).fill(""));
+
+    // Gán giá trị vào bảng
+    selectedArray.forEach(({
+      row,
+      col,
+      value
+    }) => {
+      table[row - minRow][col - minCol] = value;
+    });
+    const newRange = addRows8(table, getRowsPasteIndex(pastesArray).length);
+    const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pastesArray).row];
+    if (!record.parentId) {
+      // Cập nhật data mới
+      const newData = [...dataSource];
+
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = getFirstSelectCell(pastesArray).row;
+      const startCol = getFirstSelectCell(selectedCells).col;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      newRange.addedRows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
+
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= newData.length) {
+          // @ts-ignore
+          newData.push({
+            id: undefined,
+            rowId: newGuid()
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= columns.length) {
+            // Không vượt quá số cột
+            return;
+          }
+
+          // @ts-ignore
+          const columnKey = columns[targetCol].field;
+
+          // @ts-ignore
+          newData[targetRow] = {
+            ...newData[targetRow],
+            [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+          };
+          pastedColumns.add(columnKey);
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      triggerPaste?.(pastedRows, pastedColumnsArray, newData);
+    }
+  };
+  const handlePointDoubleClick = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const colStart = getFirstSelectCell(selectedCells).col;
+    const colEnd = getLastSelectCell(selectedCells).col;
+    const startPasteRow = getLastSelectCell(selectedCells).row;
+    const newPasteCells = new Set();
+    for (let r = Math.min(startPasteRow, dataSource.length - 1) + 1; r <= Math.max(startPasteRow, dataSource.length - 1); r++) {
+      for (let c = Math.min(colStart, colStart); c <= Math.max(colStart, colEnd); c++) {
+        newPasteCells.add(`${r}-${c}`);
+      }
+    }
+    triggerDragPaste(newPasteCells);
+  };
+  const handleMouseUp = () => {
+    isSelecting.current = false;
+    startCell.current = null;
+    isSelectingRow.current = false;
+    rowStart.current = null;
+    setIsPasteDragging(false);
+    setSelectIsDragging(false);
+    if (pasteCells.size > 0) {
+      triggerDragPaste(pasteCells);
+    }
   };
   const handleMouseEnter = (row, col) => {
-    if (!isSelecting.current || !startCell.current) return;
+    if (!isSelecting.current || !startCell.current) {
+      return;
+    }
     const {
       row: startRow,
       col: startCol
     } = startCell.current;
-    const newSelectedCells = new Set();
-    for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
-      for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
-        newSelectedCells.add(`${r}-${c}`);
+    if (!isPasteDragging) {
+      // chọn vùng copy
+
+      setSelectIsDragging(true);
+      setIsPasteDragging(false);
+      const newSelectedCells = new Set();
+      for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
+        for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
+          newSelectedCells.add(`${r}-${c}`);
+        }
+      }
+      setSelectedCells(newSelectedCells);
+    } else {
+      // chọn vùng paste
+
+      setSelectIsDragging(false);
+      setIsPasteDragging(true);
+      const newSelectedCells = new Set();
+      for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
+        for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
+          newSelectedCells.add(`${r}-${c}`);
+        }
+      }
+      const colStart = getFirstSelectCell(selectedCells).col;
+      const colEnd = getLastSelectCell(selectedCells).col;
+      const rowSelectedEnd = getLastSelectCell(selectedCells).row;
+      if (row >= rowSelectedEnd) {
+        // kéo xuống dưới
+
+        const newPasteCells = new Set();
+        for (let r = Math.min(startRow, row) + 1; r <= Math.max(startRow, row); r++) {
+          for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
+            newPasteCells.add(`${r}-${c}`);
+          }
+        }
+        setPasteCells(newPasteCells);
+      }
+      if (row < rowSelectedEnd) {
+        // kéo lên trên
+      }
+      if (col > colEnd) {
+        // kéo sang phải
       }
+      if (row < colStart) {
+        // kéo sang trái
+      }
+
+      // const newPasteCells = new Set()
+      // for (let r = Math.min(startRow, row) + 1; r <= Math.max(startRow, row); r++) {
+      //   for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
+      //     newPasteCells.add(`${r}-${c}`);
+      //   }
+      // }
+      // setPasteCells(newPasteCells)
     }
-    setSelectedCells(newSelectedCells);
   };
   const handleClickRowHeader = (row, col) => {
     const newSelectedCells = new Set();
@@ -265,23 +760,46 @@ const GridEdit = props => {
     setRowsSelected(newSelectedRows);
     setSelectedCells(newSelectedCells);
   };
-  const handleMouseUp = () => {
-    isSelecting.current = false;
-    startCell.current = null;
-    isSelectingRow.current = false;
-    rowStart.current = null;
+  const handleCellClick = (indexRow, record, column) => {
+    const cellClickCallback = newOptions => {
+      if (newOptions) {
+        const newElem = {
+          ...column,
+          editSelectSettings: {
+            ...(column?.editSelectSettings ? {
+              ...column?.editSelectSettings
+            } : {}),
+            options: newOptions
+          }
+        };
+        const rrr = updateArrayByKey([...columns], newElem, 'field');
+        triggerChangeColumns?.(rrr, 'click');
+      }
+    };
+    if (onCellClick) {
+      onCellClick({
+        index: indexRow,
+        rowId: record.rowId,
+        cellValue: record[record.field],
+        type: "Editing",
+        field: column.field,
+        rowData: record
+      }, cellClickCallback);
+    }
   };
   const handleCopy = e => {
     const selectedArray = Array.from(selectedCells).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
-      const columnKey = columns[col].dataIndex;
+      const columnKey = columns[col].field;
+
       // @ts-ignore
       return {
         row,
         col,
-        value: dataSource[row][columnKey]
+        value: flattenData(childrenColumnName, dataSource)[row][columnKey]
       };
+      // return { row, col, value: '' };
     });
 
     // Xác định min/max row và col để sắp xếp dữ liệu
@@ -312,133 +830,131 @@ const GridEdit = props => {
     e.clipboardData.setData("text/plain", copyText);
     Message(t ? t('CopySuccessful') : 'Copy Successful');
   };
-  const handlePaste = (e, indexCol, indexRow) => {
+  const handlePaste = (record, indexCol, rowNumber, e) => {
     // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
     const pasteData = e.clipboardData.getData("text/plain").trim();
 
     // Chuyển đổi dữ liệu từ clipboard thành mảng
     const rows = pasteData.split("\n").map(row => row.replace(/\r/g, "").split("\t"));
+    if (!record.parentId) {
+      // Cập nhật data mới
+      const newData = [...dataSource];
 
-    // Lấy vị trí bắt đầu
-    // const { row: startRow, col: startCol } = selectedCell;
-    const startRow = indexRow;
-    const startCol = indexCol;
+      // @ts-ignore
+      const indexRows = newData.findIndex(it => it[rowKey] === record[rowKey]);
 
-    // Cập nhật data mới
-    const newData = [...dataSource];
-    const pastedRows = [];
-    const pastedColumns = new Set();
-    rows.forEach((rowValues, rowIndex) => {
-      const targetRow = startRow + rowIndex;
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = indexRows;
+      const startCol = indexCol;
 
-      // Nếu vượt quá số dòng hiện có, thêm dòng mới
-      if (targetRow >= newData.length) {
-        // @ts-ignore
-        // newData.push({ id: newGuid()});
-        newData.push({
-          id: newGuid()
+      // const flattData = flattenArray(newData);
+
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
+
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= newData.length) {
+          // @ts-ignore
+          // newData.push({ id: newGuid()});
+          newData.push({
+            id: undefined,
+            rowId: newGuid()
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= columns.length) {
+            // Không vượt quá số cột
+            return;
+          }
+
+          // @ts-ignore
+          const columnKey = columns[targetCol].field;
+
+          // @ts-ignore
+          newData[targetRow] = {
+            ...newData[targetRow],
+            [columnKey]: cellValue.trim()
+          };
+          pastedColumns.add(columnKey);
         });
-      }
-      rowValues.forEach((cellValue, colIndex) => {
-        const targetCol = startCol + colIndex;
-        if (targetCol >= columns.length) return; // Không vượt quá số cột
 
-        // @ts-ignore
-        const columnKey = columns[targetCol].dataIndex;
-        // @ts-ignore
-        newData[targetRow] = {
-          ...newData[targetRow],
-          [columnKey]: cellValue.trim()
-        };
-        pastedColumns.add(columnKey);
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
       });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      triggerPaste?.(pastedRows, pastedColumnsArray, newData);
+    } else {
+      // Cập nhật data mới
+      const newData = [...dataSource];
+      const parent = findItemByKey(newData, rowKey, record.parentId);
 
-      // Lưu dòng được paste
-      pastedRows.push(newData[targetRow]);
-    });
-    const pastedColumnsArray = Array.from(pastedColumns) ?? [];
-    console.log(pastedColumnsArray);
-    console.log(pastedRows);
+      // Cập nhật childData mới
+      const childData = parent?.children ? [...parent.children] : [];
 
-    //  // trigger DataChange + trigger paste
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = childData.findIndex(it => it[rowKey] === record[rowKey]);
+      const startCol = indexCol;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
 
-    // const handlePasteCallback = (callbackData: RecordType[]) => {
-    //
-    //   const newDataUpdate  = updateData(dataSource, callbackData, rowKey as any)
-    //
-    //   // setData(newDataUpdate)
-    //   // onDataChange?.(newData)
-    //   onCellPaste?.dataChange?.(newDataUpdate)
-    // }
-    //
-    //
-    // if (onCellPaste && onCellPaste.onPasted) {
-    //
-    //   if (onCellPaste.onPasted.length > 1) {
-    //     onCellPaste.onPasted({
-    //       pasteData: pastedRows,
-    //       type: 'onPaste',
-    //       data: dataSource,
-    //       pastedColumns: pastedColumnsArray as string[]
-    //     }, handlePasteCallback)
-    //
-    //   } else {
-    //     onCellPaste.onPasted({
-    //       pasteData: pastedRows,
-    //       type: 'onPaste',
-    //       data: dataSource,
-    //       pastedColumns: ['']
-    //     }, handlePasteCallback)
-    //
-    //     onCellPaste.dataChange?.(newData)
-    //
-    //     // setData(newData);
-    //     // onDataChange?.(newData)
-    //   }
-    //
-    // }
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= childData.length) {
+          childData.push({
+            id: undefined,
+            rowId: newGuid(),
+            parentId: parent[rowKey ?? 'id']
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= columns.length) {
+            // Không vượt quá số cột
+            return;
+          }
+
+          // @ts-ignore
+          const columnKey = columns[targetCol].field;
+
+          // @ts-ignore
+          childData[targetRow] = {
+            ...childData[targetRow],
+            [columnKey]: cellValue.trim()
+          };
+          pastedColumns.add(columnKey);
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(childData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      const newRowData = {
+        ...parent,
+        children: childData
+      };
+      const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
+      triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource);
+    }
   };
   const onSubmit = formData => {
-    console.log('onSubmit', formData);
     try {
       // const record = (await form.validateFields()) as RecordType;
       const row = {
         ...formData
       };
-      // const rowData = { ...record };
-
-      // columns.forEach(column => {
-      //
-      //   // @ts-ignore
-      //   if (column.editType === 'date' && rowData[column.dataIndex]) {
-      //     // @ts-ignore
-      //     rowData[column.dataIndex] = !isEmpty(record[column.dataIndex]) ? moment(row[column.dataIndex]).format() : null
-      //   }
-      // });
-
       const newData = [...dataSource];
+
       // @ts-ignore
       const index = newData.findIndex(item => formData[rowKey] === item[rowKey]);
-
-      // setIsManualUpdate(true);
-
+      const rs = updateArrayByKey(dataSource, row, rowKey);
       if (index > -1) {
-        const item = newData[index];
-        newData.splice(index, 1, {
-          ...item,
-          ...row
-        });
-        triggerChangeData?.(newData, 'onChange');
-
-        // trigger DataChange
-        // setData(newData);
-        // onDataChange?.(newData)
-      } else {
-        newData.push(row);
-        // trigger DataChange
-
-        // setData(newData);
-        // onDataChange?.(newData)
+        triggerChangeData?.(rs, 'onChange');
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -447,29 +963,18 @@ const GridEdit = props => {
   const handleCellChange = args => {
     const {
       record,
-      type,
+      type: changeType,
       newState,
       prevState,
       option,
       field
     } = args;
 
-    // console.log('newState', newState)
-    //
-    // console.log('getValues()', getValues())
-
     // const newRecord = getValues()
 
-    if (type === 'enter') {
-      console.log('aaaaaa enter');
-    }
-    if (type === 'blur') {
-      // onCellChange
-
+    if (changeType === 'enter') {}
+    if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
-        // const newDataUpdate  = updateData(data, callbackData, rowKey as any)
-
-        console.log('callbackData', callbackData);
         const callbackRecord = callbackData;
         Object.entries(callbackRecord).forEach(([name, value]) => {
           setValue(name, value);
@@ -478,7 +983,6 @@ const GridEdit = props => {
       };
       if (onCellChange) {
         if (onCellChange.length > 1) {
-          console.log('onCellChange Callback');
           onCellChange({
             field,
             indexCol: 1,
@@ -492,7 +996,6 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
-          console.log('onCellChange');
           onCellChange({
             field,
             indexCol: 1,
@@ -508,16 +1011,15 @@ const GridEdit = props => {
           onSubmit(record);
         }
       }
-      console.log('aaaaaa blur');
     }
-    if (prevState && newState && prevState !== newState && type === 'enter') {
-      console.log('enter');
+    if (prevState && newState && prevState !== newState && changeType === 'enter') {
       onSubmit(record);
     }
   };
   const handleEdit = (record, col, editType, e) => {
     // @ts-ignore
     setEditingKey(record[rowKey]);
+    reset();
 
     // const formattedRecord = { ...record };
 
@@ -547,19 +1049,20 @@ const GridEdit = props => {
     // });
 
     if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
-      setValue(col.dataIndex, e.key);
+      setValue(col.dataIndex, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
+      // setValue(col.dataIndex, e.key)
     }
     if (editType === 'select') {
       // setSearchValue(e.key)
       // setOpen(true)
     }
-    if (selectedCell?.row !== undefined && selectedCell?.col !== undefined) {
+    if (startSelectedCells?.row !== undefined && startSelectedCells?.col !== undefined) {
       setTimeout(() => {
         // const input = document.querySelector(`.ui-rc-table-row[data-row-key="${selectedCell.row}"] .cell-editing[data-col-index="${selectedCell.col}"] input`) as HTMLInputElement;
-        const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${selectedCell.row}"].cell-editing[data-col-index="${selectedCell.col}"] input`);
+        const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.row}"].cell-editing[data-col-index="${startSelectedCells.col}"] input`);
         // const input =  document.getElementById(`col${selectedCell.col}-record${selectedCell.row}`) as HTMLInputElement;
 
-        const select = document.querySelector(`div.cell-editing[tabindex="${selectedCell?.col}"] .ant-select-selection-search input`);
+        const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells?.col}"] .ant-select-selection-search input`);
         if (input) {
           input.focus();
         }
@@ -572,18 +1075,21 @@ const GridEdit = props => {
       }, 0);
     }
   };
-  useEffect(() => {
-    const tableBody = document.querySelector(".ui-rc-table-tbody");
-    const tableHeader = document.querySelector(".ui-rc-table-header");
-    if (tableBody && tableHeader) {
-      tableBody.addEventListener("scroll", () => {
-        tableHeader.scrollLeft = tableBody.scrollLeft;
-      });
-    }
-  }, []);
-  const scrollToCell = (rowIndex, colIndex, cell, type) => {
+
+  // useEffect(() => {
+  //   const tableBody = document.querySelector(".ui-rc-table-tbody");
+  //   const tableHeader = document.querySelector(".ui-rc-table-header");
+  //
+  //   if (tableBody && tableHeader) {
+  //     tableBody.addEventListener("scroll", () => {
+  //       tableHeader.scrollLeft = tableBody.scrollLeft;
+  //     });
+  //   }
+  // }, []);
+
+  const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
     const fixedWidth = totalFixedWidth(columns, 'left', selectionSettings);
-    if (type === 'horizontal') {
+    if (scrollType === 'horizontal') {
       if (tableRef.current) {
         tableRef.current.scrollTo({
           left: cell.offsetLeft - fixedWidth,
@@ -603,15 +1109,12 @@ const GridEdit = props => {
       });
     }
   };
-  const handleFocusCell = (rowIndex, colIndex, col, type, e) => {
+  const handleFocusCell = (rowIndex, colIndex, col, scrollType, e) => {
     const isEdit = editingKey !== '';
-    // const cellEdit: any = document.querySelector(`.ui-rc-table-row[data-row-key="${rowIndex}"] .cell-editing[data-col-index="${colIndex}"]`);
-    // const cell: any = document.querySelector(`.ui-rc-table-row[data-row-key="${rowIndex}"] .cell-editable[data-col-index="${colIndex}"]`);
-
     const cellEdit = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
     const cell = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
     const updateSelection = () => {
-      setSelectedCell({
+      setStartSelectedCell({
         row: rowIndex,
         col: colIndex
       });
@@ -624,10 +1127,10 @@ const GridEdit = props => {
           cellEdit.focus();
         }
       }
-      if (type === 'horizontal' && cellEdit) {
+      if (scrollType === 'horizontal' && cellEdit) {
         scrollToCell(rowIndex, colIndex, cellEdit, 'horizontal');
       }
-      if (type === 'vertical' && cell) {
+      if (scrollType === 'vertical' && cell) {
         setEditingKey('');
         updateSelection();
         scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
@@ -643,11 +1146,52 @@ const GridEdit = props => {
         }
       }
       if (cell) {
-        scrollToCell(rowIndex, colIndex, cell, type);
+        scrollToCell(rowIndex, colIndex, cell, scrollType);
       }
     }
   };
-  const convertColumns = flatColumns(columns).map((column, colIndex) => {
+  const getCellClass = (record, rowIndex, colIndex) => {
+    const cellKey = `${rowIndex}-${colIndex}`;
+    const topCellKey = `${rowIndex + 1}-${colIndex}`;
+    const leftCellKey = `${rowIndex}-${colIndex + 1}`;
+    const rightCellKey = `${rowIndex}-${colIndex - 1}`;
+    const isSelected = selectedCells.has(cellKey);
+    const isTopSelected = selectedCells.has(topCellKey);
+    const isLeftSelected = selectedCells.has(leftCellKey);
+    const isRightSelected = selectedCells.has(rightCellKey);
+    const isPasteSelected = pasteCells.has(cellKey);
+    const isPasteLeftSelected = pasteCells.has(leftCellKey);
+    const isPasteRightSelected = pasteCells.has(rightCellKey);
+    const cellClass = isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable';
+    const prevRecordEditing = flattenData(childrenColumnName, dataSource)[rowIndex + 1];
+    const cellStart = getFirstSelectCell(selectedCells);
+    const cellEnd = getLastSelectCell(selectedCells);
+    const cellPasteStart = getFirstSelectCell(pasteCells);
+    const cellPasteSEnd = getLastSelectCell(pasteCells);
+    const isPasteBottom = pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row);
+    if (!isSelected && !isPasteSelected) {
+      const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && rowIndex === Math.min(cellStart.row - 1, cellEnd?.row);
+      const isLeft = colIndex + 1 === Math.min(cellStart.col, cellEnd?.col);
+      const isRight = colIndex - 1 === Math.max(cellStart.col, cellEnd?.col);
+      const isPasteLeft = colIndex + 1 === Math.min(cellPasteStart.col, cellPasteSEnd?.col);
+      const isPasteRight = colIndex - 1 === Math.max(cellPasteStart.col, cellPasteSEnd?.col);
+      return isTopSelected || isLeftSelected || isRightSelected ? `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isPasteBottom ? `cell-paste-border-bottom` : ''} ${isRight ? `next-cell-border-left` : ''}` : isPasteLeftSelected || isPasteRightSelected ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''}` :
+      // (isPasteLeftSelected || isPasteRightSelected) ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` :  ''}` :
+
+      cellClass;
+    }
+    const isBottom = cellEnd && rowIndex === Math.max(cellStart.row, cellEnd.row);
+    const isRight = cellEnd && colIndex === Math.max(cellStart.col, cellEnd.col);
+    const isLeft = colIndex === Math.min(cellStart.col, cellEnd?.col);
+    const isPasteRight = cellPasteSEnd && colIndex === Math.max(cellPasteStart.col, cellPasteSEnd.col);
+    const isPasteLeft = colIndex === Math.min(cellPasteStart.col, cellPasteSEnd?.col);
+
+    // return `${cellClass}  ${isBottom ? `cell-border-bottom` : ''}  ${isRight ? `cell-border-right` : '' } ${isBottom && isRight ? `cell-border-end` : '' }
+    // return `${cellClass} ${isPasteBottom ? `cell-paste-border-bottom` :  ''}  ${isBottom ? `cell-border-bottom` :  ''}  ${isRight ? `cell-border-right` : '' } ${isLeft ? `fixed-cell-border-left` : '' } ${isBottom && isRight ? `cell-border-end` : '' }`
+
+    return `${cellClass} ${isPasteBottom ? `cell-paste-border-bottom` : ''} ${isPasteSelected && isPasteRight ? `cell-paste-border-right` : ''} ${isPasteSelected && isPasteLeft ? `fixed-cell-paste-border-left` : ''}  ${isBottom ? `cell-border-bottom` : ''}  ${isRight ? `cell-border-right` : ''} ${isLeft ? `fixed-cell-border-left` : ''} ${isBottom && isRight ? `cell-border-end` : ''}`;
+  };
+  const convertColumns = flatColumns2(columns).map((column, colIndex) => {
     if (!column?.field && !column?.key) {
       return column;
     }
@@ -678,83 +1222,96 @@ const GridEdit = props => {
     }
     return {
       ...column,
-      // editType: getEditType(column, record),
-      onCell: (record, rowIndex) => ({
-        onKeyDown: event => {
-          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-            if (!isEditing(record) && record[rowKey] !== editingKey) {
-              handleEdit(record, column, column.editType, event);
+      onCell: (record, rowIndex) => {
+        const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+        return {
+          onKeyDown: event => {
+            const key = getRowKey(record, dataSource.indexOf(record));
+            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
+              if (!isEditing(record) && record[rowKey] !== editingKey) {
+                handleEdit(record, column, column.editType, event);
+                handleCellClick(rowNumber, record, column);
+                const hasKey = mergedExpandedKeys.has(key);
+                if (hasKey) {
+                  // mergedExpandedKeys.delete(key);
+                  // newExpandedKeys = [...mergedExpandedKeys];
+                } else {
+                  onTriggerExpand(record);
+                }
+              }
+              if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
+                handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+              }
             }
-            if (editingKey && editingKey !== '' && (rowIndex ?? 0) + 1 < dataSource.length && event.key === 'Enter') {
-              handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', event);
+            if (event.key === 'Tab') {
+              if (colIndex + 1 !== columns.length) {
+                handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+              } else {
+                event.stopPropagation();
+                event.preventDefault();
+              }
             }
-          }
-          if (event.key === 'Tab') {
-            if (colIndex + 1 !== columns.length) {
-              handleFocusCell(rowIndex, colIndex + 1, column, 'horizontal', event);
-            } else {
-              event.stopPropagation();
-              event.preventDefault();
+            if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
+              if (editingKey !== '') {} else {
+                handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+              }
             }
-          }
-          if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
-            if (editingKey !== '') {} else {
-              handleFocusCell(rowIndex, colIndex + 1, column, 'horizontal', event);
+            if (event.key === 'ArrowLeft' && colIndex > 0) {
+              if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
+                event.stopPropagation();
+                event.preventDefault();
+              } else {
+                if (editingKey !== '') {} else {
+                  handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
+                }
+              }
             }
-          }
-          if (event.key === 'ArrowLeft' && colIndex > 0) {
-            if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
-              event.stopPropagation();
+            if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
+              handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+            }
+            if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
+              handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(record, colIndex, rowNumber, event);
               event.preventDefault();
-            } else {
-              if (editingKey !== '') {} else {
-                handleFocusCell(rowIndex, colIndex - 1, column, 'horizontal', event);
-              }
             }
-          }
-          if (event.key === 'ArrowDown' && (rowIndex ?? 0) + 1 < dataSource.length) {
-            handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', event);
-          }
-          if (event.key === 'ArrowUp' && (rowIndex ?? 0) > 0) {
-            handleFocusCell((rowIndex ?? 0) - 1, colIndex, column, 'vertical', event);
-          }
-        },
-        onPaste: event => {
-          if (editingKey === '') {
-            handlePaste(event, colIndex, rowIndex);
-            event.preventDefault();
-          }
-        },
-        onCopy: e => {
-          if (editingKey === '') {
-            handleCopy(e);
-            e.preventDefault();
-          }
-        },
-        onDoubleClick: event => {
-          if (!isEditing(record) && record[rowKey] !== editingKey) {
-            handleEdit(record, column, getEditType(column, record), event);
-          }
-        },
-        onClick: () => {
-          if (record[rowKey] !== editingKey && editingKey !== '') {
-            setEditingKey('');
-          }
-        },
-        className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
-        record,
-        column: column,
-        editType: getEditType(column, record),
-        dataIndex: column.dataIndex,
-        title: column.title,
-        'data-col-index': colIndex,
-        'data-row-index': rowIndex,
-        // colIndex: colIndex,
-        indexCol: colIndex,
-        indexRow: rowIndex,
-        editing: isEditing(record),
-        tabIndex: (rowIndex ?? 0) * columns.length + colIndex
-      }),
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onDoubleClick: event => {
+            if (!isEditing(record) && record[rowKey] !== editingKey) {
+              handleEdit(record, column, getEditType(column, record), event);
+              handleCellClick(rowNumber, record, column);
+            }
+          },
+          onClick: () => {
+            if (record[rowKey] !== editingKey && editingKey !== '') {
+              setEditingKey('');
+            }
+          },
+          // className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
+          className: getCellClass(record, rowNumber, colIndex),
+          record,
+          column: column,
+          editType: getEditType(column, record),
+          dataIndex: column.dataIndex,
+          title: getValueCell(column, record[column.field], format),
+          'data-col-index': colIndex,
+          'data-row-index': rowNumber,
+          editing: isEditing(record),
+          tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
+          style: isPasteDragging ? {
+            cursor: "crosshair"
+          } : {}
+        };
+      },
       render: (value, record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/React.createElement("div", {
@@ -762,13 +1319,26 @@ const GridEdit = props => {
             // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
             selected: selectedCells.has(`${rowNumber}-${colIndex}`)
           }),
-          onMouseDown: event => handleMouseDown(rowNumber, colIndex, event)
-          // onMouseEnter={() => handleMouseEnter(record[rowKey], colIndex)}
-          ,
-          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex)
+          onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
+          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex),
+          onMouseUp: handleMouseUp
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, format)));
+        }, renderContent(column, value, record, rowIndex, format)), getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && !isSelectDragging &&
+        /*#__PURE__*/
+        // showDraggingPoint &&
+        React.createElement("div", {
+          className: 'dragging-point'
+          // onMouseEnter={(event) => handlePointEnter(event)}
+          // onMouseLeave={() => handlePointLeave()}
+          ,
+          onMouseDown: () => {
+            setIsPasteDragging(true);
+          },
+          onDoubleClick: handlePointDoubleClick
+        }, /*#__PURE__*/React.createElement("span", {
+          className: 'dot-point'
+        })));
       }
     };
   });
@@ -796,7 +1366,12 @@ const GridEdit = props => {
   }, [convertColumns]);
   const mergedColumns = React.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
   const bottomToolbar = () => {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Toolbar, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: 'ui-rc-toolbar-bottom',
+      style: {
+        borderBottom: '1px solid #e0e0e0'
+      }
+    }, /*#__PURE__*/React.createElement(Toolbar, {
       style: {
         width: '100%'
       },
@@ -807,6 +1382,9 @@ const GridEdit = props => {
       // }}
     }));
   };
+  const onSelectChange = keys => {
+    setMergedSelectedKeys(keys);
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
@@ -826,6 +1404,23 @@ const GridEdit = props => {
     }
   }, /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619',
+          cellFontSize: 12,
+          cellFontSizeSM: 13,
+          headerBg: '#ffffff'
+          // cellPaddingBlock: 0,
+          // cellPaddingBlockSM: 0,
+          // cellPaddingInlineSM: 0,
+          // cellPaddingInline: 0
+        }
+      }
+    }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
     tableRef: tableRef,
@@ -838,6 +1433,7 @@ const GridEdit = props => {
     },
     className: classNames(className, 'grid-editable'),
     rowKey: rowKey,
+    getRowKey: getRowKey,
     columns: mergedColumns,
     showSorterTooltip: {
       target: 'sorter-icon'
@@ -848,13 +1444,51 @@ const GridEdit = props => {
       ...selectionSettings,
       checkboxOnly: true
     } : undefined,
-    style: {
-      ...style,
-      minHeight: height
-    },
     rowHoverable: false,
-    bottomToolbar: bottomToolbar
-  }))))), /*#__PURE__*/React.createElement(Toaster, {
+    bottomToolbar: bottomToolbar,
+    expandable: {
+      ...expandable,
+      expandedRowKeys: innerExpandedKeys,
+      expandIcon: args => {
+        const {
+          record,
+          expanded
+        } = args;
+
+        // @ts-ignore
+        if (record?.children?.length > 0 || record?.isChildren) {
+          return expanded ? /*#__PURE__*/React.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTriggerExpand(record);
+              // onExpand(record, e)
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
+          }) : /*#__PURE__*/React.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTriggerExpand(record);
+              // onExpand(record, e)
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+          });
+        } else {
+          return /*#__PURE__*/React.createElement("button", {
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
+          });
+        }
+      }
+    },
+    rowSelection: columns && columns.length === 0 ? undefined : {
+      type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
+      onChange: onSelectChange,
+      selectedRowKeys: mergedSelectedKeys,
+      preserveSelectedRowKeys: true
+    }
+  })))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {
       className: 'react-hot-toast'