es-grid-template 1.4.4 → 1.4.6

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

@@ -24,7 +24,7 @@ import Message from "../../Message/Message";
 import { Toolbar, ConfigProvider, InputNumber } from "rc-master-ui";
 import classnames from "classnames";
 import { Plus, Trash2 } from "becoxy-icons";
-import { faker } from "@faker-js/faker";
+// import {faker} from "@faker-js/faker";
 import { SELECTION_COLUMN } from "../InternalTable";
 const {
   Paragraph,
@@ -178,16 +178,17 @@ const validateData = async (data, formSchema) => {
 };
 const GridEdit = props => {
   const {
-    id: tableId,
+    id,
     tableRef,
     t,
     columns,
     dataSource,
     components,
     allowResizing,
-    rowKey = 'rowId',
+    rowKey = 'id',
     selectionSettings,
     height,
+    scrollHeight,
     format,
     triggerChangeData,
     triggerChangeColumns,
@@ -229,20 +230,143 @@ const GridEdit = props => {
   const visibleCols = React.useMemo(() => {
     return flatColumns2(columns.filter(it => it.visible !== false));
   }, [columns]);
-  const id = React.useMemo(() => {
-    return tableId ?? faker.string.alpha(20);
-    // return tableId ?? newGuid()
-  }, [tableId]);
-  const itemsAdd = [{
-    key: '10',
-    label: '10 rows'
-  }, {
-    key: '50',
-    label: '50 rows'
-  }, {
-    key: '100',
-    label: '100 rows'
-  }];
+
+  //   const id  = React.useMemo(() => {
+  //
+  //   return tableId ?? faker.string.alpha(20)
+  //   // return tableId ?? newGuid()
+  //
+  // }, [tableId])
+
+  const itemsAdd = React.useMemo(() => {
+    return [{
+      key: '10',
+      label: `10 ${t ? t('rows') : 'rows'}`
+    }, {
+      key: '50',
+      label: `50 ${t ? t('rows') : 'rows'}`
+    }, {
+      key: '100',
+      label: `100 ${t ? t('rows') : 'rows'}`
+    }];
+  }, [t]);
+
+  // const defaultContext = React.useMemo(() => {
+  //   return  [
+  //     {
+  //       key: 'INSERT_BEFORE',
+  //       label: 'Thêm dòng bên trên',
+  //       icon: <Plus fontSize={14} />,
+  //       children: [
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_1',
+  //           label: 'Thêm 1 dòng',
+  //           row: 1
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_10',
+  //           label: 'Thêm 10 dòng',
+  //           row: 10
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_50',
+  //           label: 'Thêm 50 dòng',
+  //           row: 50
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_100',
+  //           label: 'Thêm 100 dòng',
+  //           row: 100
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_ADV',
+  //           label: 'Tùy chỉnh'
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       key: 'INSERT_AFTER',
+  //       label: 'Thêm dòng bên dưới',
+  //       icon: <Plus fontSize={14} />,
+  //       children: [
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_1',
+  //           label: 'Thêm 1 dòng',
+  //           row: 1
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_10',
+  //           label: 'Thêm 10 dòng',
+  //           row: 10
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_50',
+  //           label: 'Thêm 50 dòng',
+  //           row: 50
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_100',
+  //           label: 'Thêm 100 dòng',
+  //           row: 100
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_ADV',
+  //           label: 'Tùy chỉnh'
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       key: 'INSERT_CHILDREN',
+  //       // label: 'Insert item children',
+  //       label: 'Thêm cấp con',
+  //       icon: <Plus fontSize={14} />
+  //       // children: [
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_1',
+  //       //     label: 'Thêm 1 dòng',
+  //       //     row: 1
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_10',
+  //       //     label: 'Thêm 10 dòng',
+  //       //     row: 10
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_50',
+  //       //     label: 'Thêm 50 dòng',
+  //       //     row: 50
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_100',
+  //       //     label: 'Thêm 100 dòng',
+  //       //     row: 100
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_ADV',
+  //       //     label: 'Tùy chỉnh'
+  //       //   }
+  //       // ]
+  //     },
+  //     { key: 'DELETE_CONTENT', label: 'Xóa nội dung', icon: <Trash2 fontSize={14} /> },
+  //     { key: 'DELETE_ROWS', label: 'Xóa dòng', icon: <Trash2 fontSize={14} /> }
+  //   ]
+  // }, [])
+
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
   const [dataErrors, setDataErrors] = useState([]);
@@ -439,7 +563,7 @@ const GridEdit = props => {
         triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
       }
     }
-  }, [dataSource, defaultValue, id, isFilter, rowKey, rowsFocus, triggerChangeData]);
+  }, [dataSource, defaultValue, isFilter, rowKey, rowsFocus, triggerChangeData]);
 
   //thêm 1 dòng bên dưới
   const handleInsertAfter = React.useCallback((item, n) => {
@@ -524,7 +648,7 @@ const GridEdit = props => {
       });
     } else {
       const newData = [...dataSource];
-      let newElement = {};
+      let newElement;
       if (!record.children || record.children.length === 0) {
         newElement = {
           ...record,
@@ -575,7 +699,7 @@ const GridEdit = props => {
       });
       triggerChangeData?.([...newData], 'DELETE_ROWS');
     }
-  }, [dataSource, id, rowsFocus, triggerChangeData]);
+  }, [dataSource, rowsFocus, triggerChangeData]);
   const handleDeleteAll = React.useCallback(() => {
     triggerChangeData?.([], 'INSERT_BEFORE');
   }, [triggerChangeData]);
@@ -910,10 +1034,7 @@ const GridEdit = props => {
     }) => {
       table[row - minRow][col - minCol] = value;
     });
-    let newRange = {
-      combined: [],
-      addedRows: []
-    };
+    let newRange;
     if (rowPasteLast > rowSelectedFirst) {
       // kéo xuóng
       newRange = addRows8(table, getRowsPasteIndex(pastesArray).length);
@@ -993,278 +1114,550 @@ const GridEdit = props => {
     }
     pasteCells.current = new Set();
   };
-  const handlePointDoubleClick = e => {
-    // e.preventDefault()
-    e.stopPropagation();
-    const colStart = getFirstSelectCell(selectedCells.current).col;
-    const colEnd = getLastSelectCell(selectedCells.current).col;
-    const startPasteRow = getLastSelectCell(selectedCells.current).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}`);
-      }
-    }
-    hideDraggingPoint(selectedCells.current, id);
-    triggerDragPaste(newPasteCells);
-  };
-  const handleMouseDown = (record, row, col, e) => {
-    if (e.button === 2) {
-      e.stopPropagation();
-      return;
-    }
-    if (editingKey && editingKey === record[rowKey]) {
-      return;
-    }
-    if (record[rowKey] !== editingKey && editingKey !== '') {
-      setEditingKey('');
-    }
+  const handlePasted = (record, indexCol, rowNumber, pasteData) => {
+    const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
+    if (!record?.parentId) {
+      // Cập nhật data mới
+      const newData = [...dataSource];
 
-    // isDragMouse.current = true
-    isMouseDown.current = true;
-    if (e.ctrlKey) {
-      isSelecting.current = true;
-      startCell.current = {
-        row,
-        col
-      };
+      // const indexRows =  newData.findIndex((it) => it[rowKey as any] === record[rowKey])
 
-      // const cell: any  = new Set([`${row}-${col}`])
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = newData.findIndex(it => it[rowKey] === record[rowKey]);
+      const startCol = indexCol;
 
-      // setCurrentCtrlCells(cell)
-    } else {
-      isSelecting.current = true;
-      startCell.current = {
-        row,
-        col
-      };
-      const target = e.target;
-      if (target.closest('.dragging-point')) {
-        e.stopPropagation();
-        e.preventDefault();
-        return; // Không xử lý gì cả
-      } else {
-        // setStartSelectedCell({row, col})
+      // const flattData = flattenArray(newData);
 
-        startSelectedCells.current = {
-          row,
-          col
-        };
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
 
-        // setSelectedCells(new Set([`${row}-${col}`]));
+        // 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 >= visibleCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          if (visibleCols[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = visibleCols[targetCol].field;
 
-        const cells = new Set([`${row}-${col}`]);
-        if (selectedCells.current && selectedCells.current.size > 0) {
-          if (!isEqualSet(cells, rangeCells)) {
-            // onRemoveBgSelectedCell(rangeCells, id)
-            // onRemoveBorderSelectedCell(rangeCells, id)
-            hideDraggingPoint(rangeCells, id);
-            onRemoveBgCellIndex(selectedCells.current, id);
+            // @ts-ignore
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
           }
-        }
-        if (rowsSelected.current && rowsSelected.current.size > 0) {
-          removeClassCellIndexSelected(rowsSelected.current, id);
-        }
-        if (!isEqualSet(cells, selectedCells.current)) {
-          onRemoveBgSelectedCell(selectedCells.current, id);
-          hideDraggingPoint(selectedCells.current, id);
-          selectedCells.current = cells;
-          // setRangeCells(cells)
+        });
 
-          onAddBgCellIndex(cells, id);
-          onAddBorderSelectedCell(cells, id);
-          onAddBgSelectedCell(selectedCells.current, id, false);
-          showDraggingPoint(selectedCells.current, id);
-        }
+        // 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);
 
-        // setRowsSelected(new Set())
-        rowsSelected.current = new Set();
-      }
-    }
-  };
-  const handleMouseUp = e => {
-    isSelecting.current = false;
-    startCell.current = null;
-    isSelectingRow.current = false;
-    rowStart.current = null;
-    isDragMouse.current = false;
-    isMouseDown.current = false;
-    setIsPasteDragging(false);
-    if (e.ctrlKey) {
+      // Cập nhật childData mới
+      const childData = parent?.children ? [...parent.children] : [];
 
-      // setCtrlCells([...ctrlCells, currentCtrlCells])
-    }
+      // 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;
 
-    // nếu ctrlCell length > 0 thì set selectCells
+        // 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 >= visibleCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          if (visibleCols[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = visibleCols[targetCol].field;
 
-    if (pasteCells && pasteCells.current.size > 0) {
-      triggerDragPaste(pasteCells.current);
-    } else {
-      setRangeCells(selectedCells.current);
-      const target = e.target;
-      if (target.closest('.dragging-point')) {
-        e.stopPropagation();
-        e.preventDefault();
-        return; // Không xử lý gì cả
-      }
-      if (selectedCells.current && selectedCells.current.size > 1) {
-        hideDraggingPoint(selectedCells.current, id);
-        onAddBorderSelectedCell(selectedCells.current, id);
+            // @ts-ignore
+            childData[targetRow] = {
+              ...childData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
+          }
+        });
 
-        // showDraggingPoint(selectedCells.current, id)
-      }
-      showDraggingPoint(selectedCells.current, id);
-      // onAddBorderSelectedCell(selectedCells.current, id)
+        // 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 handleMouseEnter = (row, col, e) => {
-    if (!isSelecting.current || !startCell.current) {
-      return;
-    }
-    const {
-      row: startRow,
-      col: startCol
-    } = startCell.current;
-    if (e.ctrlKey) {
-      // const newCtrlCells = 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++) {
-      //     newCtrlCells.add(`${r}-${c}`)
-      //   }
-      // }
-
-      // setCurrentCtrlCells(newCtrlCells)
-
-      return;
-    }
-    if (!isPasteDragging) {
-      // chọn vùng copy
-
-      // setSelectIsDragging(true)
-
-      setIsPasteDragging(false);
-      // isPasteDragging.current = 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}`);
-        }
-      }
+  const handlePaste = (record, indexCol, rowNumber, e) => {
+    // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
+    const pasteData = e.clipboardData.getData("text/plain");
 
-      // setSelectedCells(newSelectedCells)
+    // Chuyển đổi dữ liệu từ clipboard thành mảng
+    const rowsPasted = pasteData.split("\n").map(row =>
+    // const rows = pasteData.split("\n").map((row: any) =>
+    row.replace(/\r/g, "").split("\t"));
+    if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
+      // bật popup thông báo
 
-      if (selectedCells.current && selectedCells.current.size > 0) {
-        onRemoveBgSelectedCell(selectedCells.current, id);
-      }
-      selectedCells.current = newSelectedCells;
-      onAddBgSelectedCell(newSelectedCells, id);
-    } 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.current).col;
-      const colEnd = getLastSelectCell(selectedCells.current).col;
-      const rowSelectedEnd = getLastSelectCell(selectedCells.current).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 (pasteCells.current && pasteCells.current.size > 0) {
-          removeClassBorderPasteCell(pasteCells.current, 'down', id);
-        }
-        pasteCells.current = newPasteCells;
-        addClassBorderPasteCell(newPasteCells, 'down', id);
-      }
-      if (row < rowSelectedEnd) {
-        // kéo lên trên
-
-        const rowSelectedStart = getFirstSelectCell(selectedCells.current).row;
-        if (row < rowSelectedStart) {
-          const newPasteCells = new Set();
-          for (let r = Math.min(rowSelectedStart, row); r <= Math.max(rowSelectedStart, row) - 1; r++) {
-            for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
-              newPasteCells.add(`${r}-${c}`);
-            }
+      Modal.confirm({
+        content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, {
+          style: {
+            marginBottom: '.25rem',
+            fontSize: 14
           }
-
-          // setPasteCells(newPasteCells)
-
-          if (pasteCells.current && pasteCells.current.size > 0) {
-            removeClassBorderPasteCell(pasteCells.current, 'up', id);
+        }, "D\u1EEF li\u1EC7u sao ch\xE9p v\u01B0\u1EE3t qu\xE1 s\u1ED1 d\xF2ng cho ph\xE9p (500 d\xF2ng).Ph\u1EA7n m\u1EC1n s\u1EBD ch\u1EC9 l\u1EA5y 500 d\xF2ng \u0111\u1EA7u ti\xEAn."), /*#__PURE__*/React.createElement(Title, {
+          level: 5,
+          style: {
+            marginTop: '.75rem'
           }
-          pasteCells.current = newPasteCells;
-          addClassBorderPasteCell(newPasteCells, 'up', id);
+        }, "B\u1EA1n c\xF3 mu\u1ED1n ti\u1EBFp t\u1EE5c sao ch\xE9p kh\xF4ng?")),
+        centered: true,
+        className: 'be-popup-container',
+        onOk: () => {
+          handlePasted(record, indexCol, rowNumber, rowsPasted);
         }
-      }
-      if (col > colEnd) {
-        // kéo sang phải
-      }
-      if (row < colStart) {
-        // kéo sang trái
-      }
+        // footer: (_, { OkBtn, CancelBtn }) => (
+        //   <>
+        //     <OkBtn />
+        //     <CancelBtn />
+        //   </>
+        // ),
+      });
+    } else {
+      handlePasted(record, indexCol, rowNumber, rowsPasted);
     }
+
+    // const rows = rowsPasted.slice(0, (onCellPaste?.maxRowsPaste ?? 200));
+    //
+    //
+    // if (!record?.parentId ) {
+    //
+    //   // Cập nhật data mới
+    //   const newData = [...dataSource];
+    //
+    //   // @ts-ignore
+    //   const indexRows =  newData.findIndex((it) => it[rowKey] === record[rowKey])
+    //
+    //   // Lấy vị trí bắt đầu
+    //   // const { row: startRow, col: startCol } = selectedCell;
+    //   const startRow = indexRows
+    //   const startCol = indexCol
+    //
+    //
+    //
+    //   // const flattData = flattenArray(newData);
+    //
+    //   const pastedRows: RecordType[] = [];
+    //   const pastedColumns = new Set()
+    //
+    //
+    //   rows.forEach((rowValues: any, rowIndex: any) => {
+    //     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: any, colIndex: any) => {
+    //       const targetCol = startCol + colIndex;
+    //       if (targetCol >= columns.length) { // Không vượt quá số cột
+    //         return
+    //       }
+    //
+    //       if (columns[targetCol].editEnable) {
+    //         // @ts-ignore
+    //         const columnKey = columns[targetCol].field;
+    //
+    //         // @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 as string[], newData)
+    //
+    //
+    // } else  {
+    //
+    //   // Cập nhật data mới
+    //   const newData = [...dataSource];
+    //
+    //   const parent  =  findItemByKey(newData, rowKey as any, record.parentId)
+    //
+    //   // Cập nhật childData mới
+    //   const childData: any[] = parent?.children ? [...parent.children] : []
+    //
+    //
+    //   // 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: RecordType[] = []
+    //   const pastedColumns = new Set()
+    //
+    //
+    //   rows.forEach((rowValues: any, rowIndex: any) => {
+    //     const targetRow = startRow + rowIndex
+    //
+    //     // 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: any, colIndex: any) => {
+    //       const targetCol = startCol + colIndex
+    //       if (targetCol >= columns.length) { // Không vượt quá số cột
+    //         return
+    //       }
+    //
+    //       if (columns[targetCol].editEnable) {
+    //
+    //         // @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 as string)
+    //
+    //   triggerPaste?.(pastedRows, pastedColumnsArray as string[], newDataSource )
+    // }
   };
-  const handleClickColHeader = (column, indexColumn) => {
-    const newSelectedCells = new Set();
-    for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
-      for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
-        newSelectedCells.add(`${r}-${c}`);
+  const handlePointDoubleClick = e => {
+    // e.preventDefault()
+    e.stopPropagation();
+    const colStart = getFirstSelectCell(selectedCells.current).col;
+    const colEnd = getLastSelectCell(selectedCells.current).col;
+    const startPasteRow = getLastSelectCell(selectedCells.current).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}`);
       }
     }
-
-    // setSelectedCells(new Set(newSelectedCells));
-
-    if (selectedCells.current && selectedCells.current.size > 0) {
-      // onRemoveBgSelectedCell(selectedCells.current, id)
-      // onRemoveBorderSelectedCell(selectedCells.current, id)
-    }
-    if (rowsSelected.current && rowsSelected.current.size > 0) {
-      removeClassCellIndexSelected(rowsSelected.current, id);
-    }
-    selectedCells.current = newSelectedCells;
-
-    // onAddBgSelectedCell(newSelectedCells, id)
-    // onAddBorderSelectedCell(newSelectedCells, id)
-
     hideDraggingPoint(selectedCells.current, id);
-    showDraggingPoint(newSelectedCells, id);
+    triggerDragPaste(newPasteCells);
   };
-  const handleMouseDownRowHeader = (row, col, column, e) => {
+  const handleMouseDown = (record, row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
       return;
     }
-    if (editingKey) {
-      setEditingKey('');
+    if (editingKey && editingKey === record[rowKey]) {
+      return;
     }
-    isSelectingRow.current = true;
-    rowStart.current = {
-      row,
-      col
-    };
-    const newSelectedCells = new Set();
-    const tCols = editAbleColumns(visibleCols);
-    for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
-      for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
-        newSelectedCells.add(`${r}-${c}`);
+    if (record[rowKey] !== editingKey && editingKey !== '') {
+      setTimeout(() => {
+        setEditingKey('');
+      });
+    }
+
+    // isDragMouse.current = true
+    isMouseDown.current = true;
+    if (e.ctrlKey) {
+      isSelecting.current = true;
+      startCell.current = {
+        row,
+        col
+      };
+
+      // const cell: any  = new Set([`${row}-${col}`])
+
+      // setCurrentCtrlCells(cell)
+    } else {
+      isSelecting.current = true;
+      startCell.current = {
+        row,
+        col
+      };
+      const target = e.target;
+      if (target.closest('.dragging-point')) {
+        e.stopPropagation();
+        e.preventDefault();
+        return; // Không xử lý gì cả
+      } else {
+        // setStartSelectedCell({row, col})
+
+        startSelectedCells.current = {
+          row,
+          col
+        };
+
+        // setSelectedCells(new Set([`${row}-${col}`]));
+
+        const cells = new Set([`${row}-${col}`]);
+        if (selectedCells.current && selectedCells.current.size > 0) {
+          if (!isEqualSet(cells, rangeCells)) {
+            // onRemoveBgSelectedCell(rangeCells, id)
+            // onRemoveBorderSelectedCell(rangeCells, id)
+            hideDraggingPoint(rangeCells, id);
+            onRemoveBgCellIndex(selectedCells.current, id);
+          }
+        }
+        if (rowsSelected.current && rowsSelected.current.size > 0) {
+          removeClassCellIndexSelected(rowsSelected.current, id);
+        }
+        if (!isEqualSet(cells, selectedCells.current)) {
+          onRemoveBgSelectedCell(selectedCells.current, id);
+          hideDraggingPoint(selectedCells.current, id);
+          selectedCells.current = cells;
+          // setRangeCells(cells)
+
+          onAddBgCellIndex(cells, id);
+          onAddBorderSelectedCell(cells, id);
+          onAddBgSelectedCell(selectedCells.current, id, false);
+          showDraggingPoint(selectedCells.current, id);
+        }
+
+        // setRowsSelected(new Set())
+        rowsSelected.current = new Set();
+      }
+    }
+  };
+  const handleMouseUp = e => {
+    isSelecting.current = false;
+    startCell.current = null;
+    isSelectingRow.current = false;
+    rowStart.current = null;
+    isDragMouse.current = false;
+    isMouseDown.current = false;
+    setIsPasteDragging(false);
+    if (e.ctrlKey) {
+
+      // setCtrlCells([...ctrlCells, currentCtrlCells])
+    }
+
+    // nếu ctrlCell length > 0 thì set selectCells
+
+    if (pasteCells && pasteCells.current.size > 0) {
+      triggerDragPaste(pasteCells.current);
+    } else {
+      setRangeCells(selectedCells.current);
+      const target = e.target;
+      if (target.closest('.dragging-point')) {
+        e.stopPropagation();
+        e.preventDefault();
+        return; // Không xử lý gì cả
+      }
+      if (selectedCells.current && selectedCells.current.size > 1) {
+        hideDraggingPoint(selectedCells.current, id);
+        onAddBorderSelectedCell(selectedCells.current, id);
+
+        // showDraggingPoint(selectedCells.current, id)
+      }
+      showDraggingPoint(selectedCells.current, id);
+      // onAddBorderSelectedCell(selectedCells.current, id)
+    }
+  };
+  const handleMouseEnter = (row, col, e) => {
+    if (!isSelecting.current || !startCell.current) {
+      return;
+    }
+    const {
+      row: startRow,
+      col: startCol
+    } = startCell.current;
+    if (e.ctrlKey) {
+      // const newCtrlCells = 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++) {
+      //     newCtrlCells.add(`${r}-${c}`)
+      //   }
+      // }
+
+      // setCurrentCtrlCells(newCtrlCells)
+
+      return;
+    }
+    if (!isPasteDragging) {
+      // chọn vùng copy
+
+      // setSelectIsDragging(true)
+
+      setIsPasteDragging(false);
+      // isPasteDragging.current = 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)
+
+      if (selectedCells.current && selectedCells.current.size > 0) {
+        onRemoveBgSelectedCell(selectedCells.current, id);
+      }
+      selectedCells.current = newSelectedCells;
+      onAddBgSelectedCell(newSelectedCells, id);
+    } 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.current).col;
+      const colEnd = getLastSelectCell(selectedCells.current).col;
+      const rowSelectedEnd = getLastSelectCell(selectedCells.current).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 (pasteCells.current && pasteCells.current.size > 0) {
+          removeClassBorderPasteCell(pasteCells.current, 'down', id);
+        }
+        pasteCells.current = newPasteCells;
+        addClassBorderPasteCell(newPasteCells, 'down', id);
+      }
+      if (row < rowSelectedEnd) {
+        // kéo lên trên
+
+        const rowSelectedStart = getFirstSelectCell(selectedCells.current).row;
+        if (row < rowSelectedStart) {
+          const newPasteCells = new Set();
+          for (let r = Math.min(rowSelectedStart, row); r <= Math.max(rowSelectedStart, row) - 1; r++) {
+            for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
+              newPasteCells.add(`${r}-${c}`);
+            }
+          }
+
+          // setPasteCells(newPasteCells)
+
+          if (pasteCells.current && pasteCells.current.size > 0) {
+            removeClassBorderPasteCell(pasteCells.current, 'up', id);
+          }
+          pasteCells.current = newPasteCells;
+          addClassBorderPasteCell(newPasteCells, 'up', id);
+        }
+      }
+      if (col > colEnd) {
+        // kéo sang phải
+      }
+      if (row < colStart) {
+        // kéo sang trái
+      }
+    }
+  };
+  const handleClickColHeader = (column, indexColumn) => {
+    const newSelectedCells = new Set();
+    for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
+      for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+
+    // setSelectedCells(new Set(newSelectedCells));
+
+    if (selectedCells.current && selectedCells.current.size > 0) {
+      // onRemoveBgSelectedCell(selectedCells.current, id)
+      // onRemoveBorderSelectedCell(selectedCells.current, id)
+    }
+    if (rowsSelected.current && rowsSelected.current.size > 0) {
+      removeClassCellIndexSelected(rowsSelected.current, id);
+    }
+    selectedCells.current = newSelectedCells;
+
+    // onAddBgSelectedCell(newSelectedCells, id)
+    // onAddBorderSelectedCell(newSelectedCells, id)
+
+    hideDraggingPoint(selectedCells.current, id);
+    showDraggingPoint(newSelectedCells, id);
+  };
+  const handleMouseDownRowHeader = (row, col, column, e) => {
+    if (e.button === 2) {
+      e.stopPropagation();
+      return;
+    }
+    if (editingKey) {
+      setEditingKey('');
+    }
+    isSelectingRow.current = true;
+    rowStart.current = {
+      row,
+      col
+    };
+    const newSelectedCells = new Set();
+    const tCols = editAbleColumns(visibleCols);
+    for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
+      for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
+        newSelectedCells.add(`${r}-${c}`);
       }
     }
     if (selectedCells.current && selectedCells.current.size > 0) {
@@ -1308,357 +1701,87 @@ const GridEdit = props => {
       for (let c = Math.min(editAbleColumns(columns).length, col) + 1; c <= Math.max(editAbleColumns(columns).length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
       }
-    }
-    if (selectedCells.current && selectedCells.current.size > 0) {
-      onRemoveBgSelectedCell(selectedCells.current, id);
-    }
-    selectedCells.current = newSelectedCells;
-    onAddBgSelectedCell(newSelectedCells, id);
-    if (rowsSelected.current && rowsSelected.current.size > 0) {
-      removeClassCellIndexSelected(rowsSelected.current, id);
-    }
-    rowsSelected.current = newSelectedRows;
-    addClassCellIndexSelected(newSelectedRows, id);
-  };
-  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.current).map(key => {
-      const [row, col] = key.split("-").map(Number);
-      // @ts-ignore
-      const columnKey = editAbleColumns(columns)[col - 1].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;
-    });
-
-    // Chuyển mảng 2D thành chuỗi định dạng Excel
-    const copyText = table.map(row => row.join("\t")).join("\n");
-
-    // Copy vào clipboard
-    e.preventDefault();
-    e.clipboardData.setData("text/plain", copyText);
-    Message(t ? t('CopySuccessful') : 'Copy Successful');
-  };
-  const handlePasted = (record, indexCol, rowNumber, pasteData) => {
-    const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
-    if (!record?.parentId) {
-      // Cập nhật data mới
-      const newData = [...dataSource];
-
-      // const indexRows =  newData.findIndex((it) => it[rowKey as any] === record[rowKey])
-
-      // Lấy vị trí bắt đầu
-      // const { row: startRow, col: startCol } = selectedCell;
-      const startRow = newData.findIndex(it => it[rowKey] === record[rowKey]);
-      const startCol = indexCol;
-
-      // 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 >= visibleCols.length) {
-            // Không vượt quá số cột
-            return;
-          }
-          if (visibleCols[targetCol].editEnable) {
-            // @ts-ignore
-            const columnKey = visibleCols[targetCol].field;
-
-            // @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);
-
-      // Cập nhật childData mới
-      const childData = parent?.children ? [...parent.children] : [];
-
-      // 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;
-
-        // 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 >= visibleCols.length) {
-            // Không vượt quá số cột
-            return;
-          }
-          if (visibleCols[targetCol].editEnable) {
-            // @ts-ignore
-            const columnKey = visibleCols[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 handlePaste = (record, indexCol, rowNumber, e) => {
-    // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
-    const pasteData = e.clipboardData.getData("text/plain");
-
-    // Chuyển đổi dữ liệu từ clipboard thành mảng
-    const rowsPasted = pasteData.split("\n").map(row =>
-    // const rows = pasteData.split("\n").map((row: any) =>
-    row.replace(/\r/g, "").split("\t"));
-    if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
-      // bật popup thông báo
-
-      Modal.confirm({
-        content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, {
-          style: {
-            marginBottom: '.25rem',
-            fontSize: 14
-          }
-        }, "D\u1EEF li\u1EC7u sao ch\xE9p v\u01B0\u1EE3t qu\xE1 s\u1ED1 d\xF2ng cho ph\xE9p (500 d\xF2ng).Ph\u1EA7n m\u1EC1n s\u1EBD ch\u1EC9 l\u1EA5y 500 d\xF2ng \u0111\u1EA7u ti\xEAn."), /*#__PURE__*/React.createElement(Title, {
-          level: 5,
-          style: {
-            marginTop: '.75rem'
-          }
-        }, "B\u1EA1n c\xF3 mu\u1ED1n ti\u1EBFp t\u1EE5c sao ch\xE9p kh\xF4ng?")),
-        centered: true,
-        className: 'be-popup-container',
-        onOk: () => {
-          handlePasted(record, indexCol, rowNumber, rowsPasted);
-        }
-        // footer: (_, { OkBtn, CancelBtn }) => (
-        //   <>
-        //     <OkBtn />
-        //     <CancelBtn />
-        //   </>
-        // ),
-      });
-    } else {
-      handlePasted(record, indexCol, rowNumber, rowsPasted);
-    }
-
-    // const rows = rowsPasted.slice(0, (onCellPaste?.maxRowsPaste ?? 200));
-    //
-    //
-    // if (!record?.parentId ) {
-    //
-    //   // Cập nhật data mới
-    //   const newData = [...dataSource];
-    //
-    //   // @ts-ignore
-    //   const indexRows =  newData.findIndex((it) => it[rowKey] === record[rowKey])
-    //
-    //   // Lấy vị trí bắt đầu
-    //   // const { row: startRow, col: startCol } = selectedCell;
-    //   const startRow = indexRows
-    //   const startCol = indexCol
-    //
-    //
-    //
-    //   // const flattData = flattenArray(newData);
-    //
-    //   const pastedRows: RecordType[] = [];
-    //   const pastedColumns = new Set()
-    //
-    //
-    //   rows.forEach((rowValues: any, rowIndex: any) => {
-    //     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: any, colIndex: any) => {
-    //       const targetCol = startCol + colIndex;
-    //       if (targetCol >= columns.length) { // Không vượt quá số cột
-    //         return
-    //       }
-    //
-    //       if (columns[targetCol].editEnable) {
-    //         // @ts-ignore
-    //         const columnKey = columns[targetCol].field;
-    //
-    //         // @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 as string[], newData)
-    //
-    //
-    // } else  {
-    //
-    //   // Cập nhật data mới
-    //   const newData = [...dataSource];
-    //
-    //   const parent  =  findItemByKey(newData, rowKey as any, record.parentId)
-    //
-    //   // Cập nhật childData mới
-    //   const childData: any[] = parent?.children ? [...parent.children] : []
-    //
-    //
-    //   // 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: RecordType[] = []
-    //   const pastedColumns = new Set()
-    //
-    //
-    //   rows.forEach((rowValues: any, rowIndex: any) => {
-    //     const targetRow = startRow + rowIndex
-    //
-    //     // 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: any, colIndex: any) => {
-    //       const targetCol = startCol + colIndex
-    //       if (targetCol >= columns.length) { // Không vượt quá số cột
-    //         return
-    //       }
-    //
-    //       if (columns[targetCol].editEnable) {
-    //
-    //         // @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 as string)
-    //
-    //   triggerPaste?.(pastedRows, pastedColumnsArray as string[], newDataSource )
-    // }
+    }
+    if (selectedCells.current && selectedCells.current.size > 0) {
+      onRemoveBgSelectedCell(selectedCells.current, id);
+    }
+    selectedCells.current = newSelectedCells;
+    onAddBgSelectedCell(newSelectedCells, id);
+    if (rowsSelected.current && rowsSelected.current.size > 0) {
+      removeClassCellIndexSelected(rowsSelected.current, id);
+    }
+    rowsSelected.current = newSelectedRows;
+    addClassCellIndexSelected(newSelectedRows, id);
+  };
+  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.current).map(key => {
+      const [row, col] = key.split("-").map(Number);
+      // @ts-ignore
+      const columnKey = editAbleColumns(columns)[col - 1].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;
+    });
+
+    // Chuyển mảng 2D thành chuỗi định dạng Excel
+    const copyText = table.map(row => row.join("\t")).join("\n");
+
+    // Copy vào clipboard
+    e.preventDefault();
+    e.clipboardData.setData("text/plain", copyText);
+    Message(t ? t('CopySuccessful') : 'Copy Successful');
   };
   const onSubmit = formData => {
     try {
@@ -1896,312 +2019,344 @@ const GridEdit = props => {
       focusNextCell(cellEdit, cell);
     }
   };
-  const convertColumns = React.useMemo(() => {
-    return flatColumns2(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
-      if (column === SELECTION_COLUMN) {
-        return SELECTION_COLUMN;
-      }
-      if (column.field === '#') {
-        return {
-          ...column,
-          className: 'rc-ui-cell-editable rc-ui-cell-index',
-          onCell: (record, rowIndex) => {
-            const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
-            return {
-              'data-row-index': rowNumber,
-              onPaste: event => {
-                if (editingKey === '') {
-                  handlePaste(record, colIndex + 1, rowNumber, event);
-                  event.preventDefault();
-                }
-              },
-              onCopy: e => {
-                if (editingKey === '') {
-                  handleCopy(e);
-                  e.preventDefault();
-                }
-              },
-              // onClick: () => {
-              //   if (record[rowKey] !== editingKey && (editingKey !== '')) {
-              //     setEditingKey('')
-              //   }
-              // },
-              tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
-            };
-          },
-          render: (value, record) => {
-            const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
-            return /*#__PURE__*/React.createElement("div", {
-              className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {}),
-              onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
-              onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
-              onMouseUp: event => handleMouseUp(event)
-            }, /*#__PURE__*/React.createElement("div", {
-              className: 'ui-rc_content'
-            }, findItemPath(dataSource, record, rowKey)));
-          }
-        };
-      }
-      if (column.field === 'command') {
-        return {
-          ...column
-        };
-      }
+  const convertColumns = flatColumns2(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
+    if (column === SELECTION_COLUMN) {
+      return SELECTION_COLUMN;
+    }
+    if (column.field === '#') {
       return {
         ...column,
+        className: 'rc-ui-cell-editable rc-ui-cell-index',
         onCell: (record, rowIndex) => {
           const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
           return {
-            ...column?.onCell?.(record, rowIndex),
-            onKeyDown: event => {
-              const key = getRowKey(record, dataSource.indexOf(record));
-              if (event.key === 'Control' && event.ctrlKey) {} else {
-                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-                  if (record[rowKey] !== editingKey && isEditable(column, record)) {
-                    // ~~ khi editingKey = ''
-                    event.preventDefault();
-                    event.stopPropagation();
-                    handleEdit(record, column, column.editType, event);
+            'data-row-index': rowNumber,
+            onPaste: event => {
+              if (editingKey === '') {
+                handlePaste(record, colIndex + 1, rowNumber, event);
+                event.preventDefault();
+              }
+            },
+            onCopy: e => {
+              if (editingKey === '') {
+                handleCopy(e);
+                e.preventDefault();
+              }
+            },
+            // onClick: () => {
+            //   if (record[rowKey] !== editingKey && (editingKey !== '')) {
+            //     setEditingKey('')
+            //   }
+            // },
+            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
+          };
+        },
+        render: (value, record) => {
+          const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+          return /*#__PURE__*/React.createElement("div", {
+            className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {}),
+            onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
+            onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
+            onMouseUp: event => handleMouseUp(event)
+          }, /*#__PURE__*/React.createElement("div", {
+            className: 'ui-rc_content'
+          }, findItemPath(dataSource, record, rowKey)));
+        }
+      };
+    }
+    if (column.field === 'command') {
+      return {
+        ...column
+      };
+    }
+    return {
+      ...column,
+      onCell: (record, rowIndex) => {
+        const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+        return {
+          ...column?.onCell?.(record, rowIndex),
+          onKeyDown: event => {
+            const key = getRowKey(record, dataSource.indexOf(record));
+            if (event.key === 'Control' && event.ctrlKey) {} else {
+              if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
+                if (record[rowKey] !== editingKey && isEditable(column, record)) {
+                  // ~~ khi editingKey = ''
+                  event.preventDefault();
+                  event.stopPropagation();
+                  handleEdit(record, column, column.editType, event);
 
-                    // onRemoveBgSelectedCell(selectedCells.current, id)
-                    // onRemoveBorderSelectedCell(selectedCells.current, id)
+                  // onRemoveBgSelectedCell(selectedCells.current, id)
+                  // onRemoveBorderSelectedCell(selectedCells.current, id)
 
-                    // selectedCells.current = new Set()
+                  // selectedCells.current = new Set()
 
-                    handleCellClick(rowNumber, record, column);
-                    const hasKey = mergedExpandedKeys.has(key);
-                    if (hasKey) {
-                      // mergedExpandedKeys.delete(key);
-                      // newExpandedKeys = [...mergedExpandedKeys];
-                    } else {
-                      onTriggerExpand(record);
-                    }
+                  handleCellClick(rowNumber, record, column);
+                  const hasKey = mergedExpandedKeys.has(key);
+                  if (hasKey) {
+                    // mergedExpandedKeys.delete(key);
+                    // newExpandedKeys = [...mergedExpandedKeys];
                   } else {
-                    if (event.key === 'Enter') {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
-                        handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
-                      } else {
-                        // // focus cell hiện tại và tắt edit
-                        // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
-                        // setEditingKey('')
-
-                        // thêm dòng mới
-
-                        handleAddSingle();
-                        handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true);
-                      }
-                    }
+                    onTriggerExpand(record);
                   }
-                }
-                if (event.key === 'Tab') {
-                  if (editingKey) {} else {
-                    if (colIndex + 1 !== visibleCols.length) {
-                      handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+                } else {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
+                      handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                     } else {
-                      event.stopPropagation();
-                      event.preventDefault();
+                      // // focus cell hiện tại và tắt edit
+                      // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
+                      // setEditingKey('')
+
+                      // thêm dòng mới
+
+                      handleAddSingle();
+                      handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true);
                     }
                   }
                 }
-                if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
-                  if (editingKey !== '') {} else {
+              }
+              if (event.key === 'Tab') {
+                if (editingKey) {} else {
+                  if (colIndex + 1 !== visibleCols.length) {
                     handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
-                  }
-                }
-                if (event.key === 'ArrowLeft' && colIndex > 0) {
-                  if (!column.dataIndex && !column.key || column.field === '#' || column.dataIndex === '#') {
+                  } else {
                     event.stopPropagation();
                     event.preventDefault();
-                  } else {
-                    if (editingKey !== '') {} else {
-                      handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
-                    }
                   }
                 }
-                if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
-                  if (isEditing(record) && (getEditType(column, record) === 'treeSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'asyncSelect')) {
-                    event.stopPropagation();
-                  } else {
-                    handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
-                  }
+              }
+              if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
+                if (editingKey !== '') {} else {
+                  handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
-                if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
-                  if (isEditing(record) && (getEditType(column, record) === 'asyncSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'treeSelect')) {
-                    event.stopPropagation();
-                  } else {
-                    handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
+              }
+              if (event.key === 'ArrowLeft' && colIndex > 0) {
+                if (!column.dataIndex && !column.key || column.field === '#' || column.dataIndex === '#') {
+                  event.stopPropagation();
+                  event.preventDefault();
+                } else {
+                  if (editingKey !== '') {} else {
+                    handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
                   }
                 }
-                if (event.key === 'Delete') {
-                  handleDeleteContent();
+              }
+              if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
+                if (isEditing(record) && (getEditType(column, record) === 'treeSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'asyncSelect')) {
+                  event.stopPropagation();
+                } else {
+                  handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                 }
-                if (event.key === 'Escape') {
-                  setEditingKey('');
+              }
+              if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
+                if (isEditing(record) && (getEditType(column, record) === 'asyncSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'treeSelect')) {
+                  event.stopPropagation();
+                } else {
+                  handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
                 }
               }
-            },
-            onPaste: event => {
-              if (editingKey === '') {
-                handlePaste(record, colIndex, rowNumber, event);
-                event.preventDefault();
+              if (event.key === 'Delete') {
+                handleDeleteContent();
               }
-            },
-            onCopy: e => {
-              if (editingKey === '') {
-                handleCopy(e);
-                e.preventDefault();
+              if (event.key === 'Escape') {
+                setEditingKey('');
               }
-            },
-            onDoubleClick: event => {
-              if (!isEditing(record) && record[rowKey] !== editingKey && isEditable(column, record)) {
-                handleEdit(record, column, getEditType(column, record), event);
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(record, colIndex, rowNumber, event);
+              event.preventDefault();
+            }
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onDoubleClick: event => {
+            if (!isEditing(record) && record[rowKey] !== editingKey && isEditable(column, record)) {
+              handleEdit(record, column, getEditType(column, record), event);
 
-                // onRemoveBgSelectedCell(selectedCells.current, id)
-                // onRemoveBorderSelectedCell(selectedCells.current, id)
-                handleCellClick(rowNumber, record, column);
-              }
-            },
-            onContextMenu: () => {
-              // isSelecting.current = true;
-              // startCell.current = { row: rowNumber, col: colIndex };
-
-              if (selectedCells.size === 0) {
-                // setStartSelectedCell({ row: rowNumber, col: colIndex })
-                // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
-
-                startSelectedCells.current = {
-                  row: rowNumber,
-                  col: colIndex
-                };
-                selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
-                rowsSelected.current = new Set();
-              }
-            },
-            onClick: () => {
-              if (record[rowKey] !== editingKey && editingKey !== '') {
-                // setEditingKey('')
-              } else {
-                if (record[rowKey] !== editingKey) {
-                  onAddBorderSelectedCell(selectedCells.current, id);
-                }
-                if (editingKey) {
-                  handleCellClick(rowNumber, record, column);
-                }
-              }
-            },
-            // className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column as any, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column as any, record) ? 'disable' : ''}`,
-            className: classNames('rc-ui-cell-editable', {
-              'cell-editing': isEditing(record),
-              'cell-editable': !isEditing(record)
-              // selected: isSelectedCell(rangeCells,rowIndex, colIndex),
-              // 'cell-border-bottom': isRangeCell(rangeCells, 'bottom',rowIndex, colIndex),
-              // 'cell-border-right': isRangeCell(rangeCells, 'right',rowIndex, colIndex),
-              // 'cell-border-top': isRangeCell(rangeCells, 'top',rowIndex, colIndex),
-              // 'cell-border-left': isRangeCell(rangeCells, 'left',rowIndex, colIndex),
-              // disable: !isEditable(column as any, record)
-            }),
-            record,
-            column: column,
-            editType: getEditType(column, record),
-            dataIndex: column.dataIndex,
-            indexRow: rowNumber,
-            indexCol: colIndex,
-            title: getValueCell(column, record[column.field], format),
-            'data-col-index': colIndex,
-            'data-row-index': rowNumber,
-            'data-tooltip-id': "tooltip-cell-content",
-            editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
-            cellEditing,
-            t,
-            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
-            style: isPasteDragging ? {
-              cursor: "crosshair"
-            } : {}
-          };
-        },
-        onHeaderCell: (data, index) => {
-          return {
-            ...(column.onHeaderCell ? column.onHeaderCell?.(data, index) : {}),
-            onClick: () => {
-              handleClickColHeader(column, colIndex);
-            },
-            onCopy: e => {
-              if (editingKey === '') {
-                handleCopy(e);
-                e.preventDefault();
+              // onRemoveBgSelectedCell(selectedCells.current, id)
+              // onRemoveBorderSelectedCell(selectedCells.current, id)
+              handleCellClick(rowNumber, record, column);
+            }
+          },
+          onContextMenu: () => {
+            // isSelecting.current = true;
+            // startCell.current = { row: rowNumber, col: colIndex };
+
+            if (selectedCells.size === 0) {
+              // setStartSelectedCell({ row: rowNumber, col: colIndex })
+              // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
+
+              startSelectedCells.current = {
+                row: rowNumber,
+                col: colIndex
+              };
+              selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
+              rowsSelected.current = new Set();
+            }
+          },
+          onClick: () => {
+            if (record[rowKey] !== editingKey && editingKey !== '') {
+              // setEditingKey('')
+            } else {
+              if (record[rowKey] !== editingKey) {
+                onAddBorderSelectedCell(selectedCells.current, id);
               }
-            },
-            onPaste: event => {
-              if (editingKey === '') {
-                handlePaste(dataSource[0], colIndex, 0, event);
-                event.preventDefault();
+              if (editingKey) {
+                handleCellClick(rowNumber, record, column);
               }
-            },
-            style: {
-              userSelect: 'none'
             }
-          };
-        },
-        render: (value, record, rowIndex) => {
-          const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
-          const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
-          const cellFormat = getFormat(colFormat, format);
-          const rowError = dataErrors.find(it => it.index === rowNumber);
-          const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
-
-          // const aaa =  dataErrors.find((it) => column?.field && it[column.field].field === column.field && it.index === rowNumber)
-          // const aaa =  column.field && rowError && rowError[column.field]?.field === column?.field
+          },
+          // className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column as any, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column as any, record) ? 'disable' : ''}`,
+          className: classNames('rc-ui-cell-editable', {
+            'cell-editing': isEditing(record),
+            'cell-editable': !isEditing(record),
+            // selected: isSelectedCell(rangeCells,rowIndex, colIndex),
+            // 'cell-border-bottom': isRangeCell(rangeCells, 'bottom',rowIndex, colIndex),
+            // 'cell-border-right': isRangeCell(rangeCells, 'right',rowIndex, colIndex),
+            // 'cell-border-top': isRangeCell(rangeCells, 'top',rowIndex, colIndex),
+            // 'cell-border-left': isRangeCell(rangeCells, 'left',rowIndex, colIndex),
+            disable: !isEditable(column, record)
+          }),
+          record,
+          column: column,
+          editType: getEditType(column, record),
+          dataIndex: column.dataIndex,
+          indexRow: rowNumber,
+          indexCol: colIndex,
+          title: getValueCell(column, record[column.field], format),
+          'data-col-index': colIndex,
+          'data-row-index': rowNumber,
+          'data-tooltip-id': "tooltip-cell-content",
+          editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
+          cellEditing,
+          t,
+          tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
+          style: isPasteDragging ? {
+            cursor: "crosshair"
+          } : {}
+        };
+      },
+      onHeaderCell: (data, index) => {
+        return {
+          ...(column.onHeaderCell ? column.onHeaderCell?.(data, index) : {}),
+          onClick: () => {
+            handleClickColHeader(column, colIndex);
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(dataSource[0], colIndex, 0, event);
+              event.preventDefault();
+            }
+          },
+          style: {
+            userSelect: 'none'
+          }
+        };
+      },
+      render: (value, record, rowIndex) => {
+        const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+        const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+        const cellFormat = getFormat(colFormat, format);
+        const rowError = dataErrors.find(it => it.index === rowNumber);
+        const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
+
+        // const aaa =  dataErrors.find((it) => column?.field && it[column.field].field === column.field && it.index === rowNumber)
+        // const aaa =  column.field && rowError && rowError[column.field]?.field === column?.field
+
+        return /*#__PURE__*/React.createElement("div", {
+          className: classNames('ui-rc_cell-content', {
+            // disable: !isEditable(column as any, record)
+            isValid: column.field && rowError && rowError[column.field]?.field === column?.field
+          }),
+          onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
+          onMouseEnter: event => {
+            // setTooltipContent(cellError ? cellError.message : renderContent(column as any, value, record, rowIndex, cellFormat))
+            setTooltipContent(cellError ? cellError.message : '');
+            handleMouseEnter(rowNumber, colIndex, event);
+          },
+          onMouseUp: handleMouseUp,
+          onMouseMove: () => {
+            if (selectedCells && selectedCells.current.size > 0 && isMouseDown.current) {
+              hideDraggingPoint(selectedCells.current, id);
+              isDragMouse.current = true;
+            }
+          }
 
-          return /*#__PURE__*/React.createElement("div", {
-            className: classNames('ui-rc_cell-content', {
-              // disable: !isEditable(column as any, record)
-              isValid: column.field && rowError && rowError[column.field]?.field === column?.field
-            }),
-            onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
-            onMouseEnter: event => {
-              // setTooltipContent(cellError ? cellError.message : renderContent(column as any, value, record, rowIndex, cellFormat))
-              setTooltipContent(cellError ? cellError.message : '');
-              handleMouseEnter(rowNumber, colIndex, event);
-            },
-            onMouseUp: handleMouseUp,
-            onMouseMove: () => {
-              if (selectedCells && selectedCells.current.size > 0 && isMouseDown.current) {
-                hideDraggingPoint(selectedCells.current, id);
-                isDragMouse.current = true;
-              }
+          // onClick={(event) => {
+          //
+          //   handleClickCell(event)
+          //
+          // }}
+        }, /*#__PURE__*/React.createElement("div", {
+          className: 'ui-rc_content'
+        }, renderContent(column, value, record, rowIndex, cellFormat)),
+        // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
+        // getLastSelectCell(selectedCells.current).col === colIndex &&
+        // isEditable(column as any, record) &&
+
+        !isDragMouse.current && /*#__PURE__*/React.createElement("div", {
+          className: 'dragging-point hidden',
+          onMouseDown: e => {
+            // e.stopPropagation()
+            e.preventDefault();
+            if (e.button === 0) {
+              setIsPasteDragging(true);
             }
+          },
+          onDoubleClick: handlePointDoubleClick
+        }, /*#__PURE__*/React.createElement("span", {
+          className: 'dot-point'
+        })));
+      }
+    };
+  });
+  //   [
+  //   cellEditing,
+  //   columns,
+  //   dataErrors,
+  //   dataSource,
+  //   editingKey,
+  //   format,
+  //   getRowKey,
+  //   handleAddSingle,
+  //   handleCellClick,
+  //   handleClickColHeader,
+  //   handleCopy,
+  //   handleDeleteContent,
+  //   handleEdit,
+  //   handleFocusCell,
+  //   handleMouseDown,
+  //   handleMouseDownRowHeader,
+  //   handleMouseEnter,
+  //   handleMouseEnterRowHeader,
+  //   handleMouseUp,
+  //   handlePaste,
+  //   handlePointDoubleClick,
+  //   id,
+  //   isEditing,
+  //   isPasteDragging,
+  //   mergedExpandedKeys,
+  //   onTriggerExpand,
+  //   rowEditable,
+  //   rowKey,
+  //   setTooltipContent,
+  //   t,
+  //   visibleCols.length
+  // ])
 
-            // onClick={(event) => {
-            //
-            //   handleClickCell(event)
-            //
-            // }}
-          }, /*#__PURE__*/React.createElement("div", {
-            className: 'ui-rc_content'
-          }, renderContent(column, value, record, rowIndex, cellFormat)),
-          // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
-          // getLastSelectCell(selectedCells.current).col === colIndex &&
-          // isEditable(column as any, record) &&
-
-          !isDragMouse.current && /*#__PURE__*/React.createElement("div", {
-            className: 'dragging-point hidden',
-            onMouseDown: e => {
-              // e.stopPropagation()
-              e.preventDefault();
-              if (e.button === 0) {
-                setIsPasteDragging(true);
-              }
-            },
-            onDoubleClick: handlePointDoubleClick
-          }, /*#__PURE__*/React.createElement("span", {
-            className: 'dot-point'
-          })));
-        }
-      };
-    });
-  }, [cellEditing, columns, dataErrors, dataSource, editingKey, format, getRowKey, handleAddSingle, handleCellClick, handleClickColHeader, handleCopy, handleDeleteContent, handleEdit, handleFocusCell, handleMouseDown, handleMouseDownRowHeader, handleMouseEnter, handleMouseEnterRowHeader, handleMouseUp, handlePaste, handlePointDoubleClick, id, isEditing, isPasteDragging, mergedExpandedKeys, onTriggerExpand, rangeCells, rowEditable, rowKey, setTooltipContent, t, visibleCols.length]);
   const transformColumns = React.useCallback(cols => {
     // @ts-ignore
     return cols.map(column => {
@@ -2209,6 +2364,14 @@ const GridEdit = props => {
       if (column === SELECTION_COLUMN) {
         return SELECTION_COLUMN;
       }
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
+        return {
+          ...column,
+          children: transformColumns(column.children)
+        };
+      }
       if (find) {
         return {
           ...find
@@ -2219,14 +2382,6 @@ const GridEdit = props => {
           ...column
         };
       }
-
-      // Xử lý đệ quy cho children
-      if (column.children?.length) {
-        return {
-          ...column,
-          children: transformColumns(column.children)
-        };
-      }
     });
   }, [convertColumns]);
   const mergedColumns = React.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
@@ -2309,10 +2464,12 @@ const GridEdit = props => {
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
+    $heightScroll: scrollHeight,
     style: {
       position: 'relative'
     },
-    ref: ref
+    ref: ref,
+    id: id
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
       rowKey,