es-grid-template 1.3.6 → 1.3.8

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

@@ -23,16 +23,10 @@ var _TableGrid = _interopRequireDefault(require("../TableGrid"));
 var _hooks = require("../hooks");
 var _Message = _interopRequireDefault(require("../../Message/Message"));
 var _rcMasterUi = require("rc-master-ui");
-var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var _becoxyIcons = require("becoxy-icons");
+var _faker = require("@faker-js/faker");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// import Command from "../Command";
-
-// import type {ContextMenuItem} from "../type";
-// import {ContextInfo, ContextMenuItem} from "../type";
-// import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
-
 const {
   Paragraph,
   Title
@@ -117,7 +111,7 @@ const defaultContext = [{
 }];
 const GridEdit = props => {
   const {
-    id,
+    id: tableId,
     tableRef,
     t,
     columns,
@@ -145,24 +139,28 @@ const GridEdit = props => {
     showDefaultContext,
     ...rest
   } = props;
-  const {
-    mode,
-    type,
-    // checkboxOnly,
-    // hideSelectAll,
-    columnWidth
-    // selectedRowKeys,
-    // defaultSelectedRowKeys
-  } = selectionSettings || {};
   const ref = (0, _react.useRef)(null);
   const isSelecting = (0, _react.useRef)(false);
   const startCell = (0, _react.useRef)(null);
   const childrenColumnName = 'children';
   const isSelectingRow = (0, _react.useRef)(false);
   const rowStart = (0, _react.useRef)(null);
-
-  // const [getRecordByKey] = useLazyKVMap(dataSource, childrenColumnName, getRowKey);
-
+  const rowsSelected = (0, _react.useRef)(new Set());
+  const selectedCells = (0, _react.useRef)(new Set());
+  const pasteCells = (0, _react.useRef)(new Set());
+  const startSelectedCells = (0, _react.useRef)(null);
+
+  // quét vùng chọn
+  const isDragMouse = (0, _react.useRef)(false);
+  const isMouseDown = (0, _react.useRef)(false);
+
+  // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
+  // const isPasteDragging = useRef(false);
+
+  const id = _react.default.useMemo(() => {
+    return tableId ?? _faker.faker.string.alpha(20);
+    // return tableId ?? newGuid()
+  }, [tableId]);
   const itemsAdd = [{
     key: '10',
     label: '10 rows'
@@ -176,7 +174,9 @@ const GridEdit = props => {
   const [form] = _antd.Form.useForm();
   const [editingKey, setEditingKey] = (0, _react.useState)('');
   const [isFilter, setIsFilter] = _react.default.useState(false);
-  const [selectedCells, setSelectedCells] = (0, _react.useState)(new Set());
+  const [rangeCells, setRangeCells] = (0, _react.useState)(new Set());
+
+  // const [pasteCells, setPasteCells] = useState(new Set())
 
   // const defaultModalPaste = {open: false, rowIndex: -1, colIndex: -1, record: {}, rowsPasted: []}
 
@@ -189,16 +189,17 @@ const GridEdit = props => {
     open: false,
     type: ''
   });
-  // const [openModalPaste, setOpenModalPaste] = useState(defaultModalPaste)
-
   const [rowsAdd, setRowsAdd] = (0, _react.useState)(1);
-  const [pasteCells, setPasteCells] = (0, _react.useState)(new Set());
   const [cellEditing, setCellEditing] = (0, _react.useState)(null);
-  const [isSelectDragging, setSelectIsDragging] = (0, _react.useState)(false);
+
+  // const [isSelectDragging, setSelectIsDragging] = useState(false)
+
   const [isPasteDragging, setIsPasteDragging] = (0, _react.useState)(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
 
-  const [rowsSelected, setRowsSelected] = (0, _react.useState)(new Set());
-  const [startSelectedCells, setStartSelectedCell] = (0, _react.useState)(null);
+  // const [rowsSelected, setRowsSelected] = useState(new Set())
+
+  // const [startSelectedCells, setStartSelectedCell] = useState<{ row: number; col: number } | null>(null)
+
   const [innerExpandedKeys, setInnerExpandedKeys] = _react.default.useState(() => {
     // if (defaultExpandedRowKeys) {
     //   return defaultExpandedRowKeys;
@@ -209,12 +210,9 @@ const GridEdit = props => {
     // return [];
   });
   const mergedExpandedKeys = _react.default.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
-  const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)([], {
-    value: []
-  });
   const rowsFocus = _react.default.useMemo(() => {
-    return [...new Set(Array.from(selectedCells).map(item => parseInt(item.split('-')[0])))] ?? [];
-  }, [selectedCells]);
+    return [...new Set(Array.from(rangeCells).map(item => parseInt(item.split('-')[0])))] ?? [];
+  }, [rangeCells]);
   const contextMenuItems = _react.default.useMemo(() => {
     const a = showDefaultContext !== false ? [...defaultContext] : [];
     const b = propsContext ? [...propsContext, {
@@ -294,6 +292,15 @@ const GridEdit = props => {
 
   // thêm n dòng bên trên
   const handleInsertBefore = (item, n) => {
+    //
+    (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+    (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+    //
+
+    setTimeout(() => {
+      (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+    }, 10);
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
     // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
 
@@ -368,9 +375,6 @@ const GridEdit = props => {
   //thêm 1 dòng bên dưới
   const handleInsertAfter = (item, n) => {
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
-
-    // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
-
     const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
 
     // const record = getRecordByKey()
@@ -403,8 +407,6 @@ const GridEdit = props => {
           rowId: (0, _hooks.newGuid)()
         });
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
-
-        // newData.splice(index + 1, 0, { ...defaultRowValue, rowId, parentId: null })
         newData.splice(index + 1, 0, ...newRows);
         triggerChangeData?.(newData, 'INSERT_AFTER');
       } else {
@@ -486,6 +488,10 @@ const GridEdit = props => {
     }
   };
   const handleDeleteRows = item => {
+    setTimeout(() => {
+      (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+    });
     if (item.onClick) {
       item.onClick({
         toolbar: item
@@ -505,14 +511,14 @@ const GridEdit = props => {
     triggerChangeData?.([], 'INSERT_BEFORE');
   };
   const handleDeleteContent = () => {
-    if (selectedCells.size > 0) {
+    if (selectedCells.current.size > 0) {
       const newData = [...dataSource];
 
       // colIndex => field
       const colIndexToField = (0, _columns.flatColumns2)(columns).map(col => col.field);
 
       // Duyệt qua mỗi ô cần xóa
-      for (const cell of selectedCells) {
+      for (const cell of selectedCells.current) {
         const [rowIndexStr, colIndexStr] = cell.split("-");
         const rowIndex = Number(rowIndexStr);
         const colIndex = Number(colIndexStr);
@@ -741,10 +747,8 @@ const GridEdit = props => {
     trigger,
     getValues,
     reset
-    // formState: { errors }
   } = (0, _reactHookForm.useForm)({
     mode: 'onChange'
-    // defaultValues,
     // resolver: yupResolver(formSchema)
   });
   const isEditing = record => record[rowKey] === editingKey;
@@ -777,23 +781,16 @@ const GridEdit = props => {
         setEditingKey('');
         isSelecting.current = false;
         startCell.current = null;
-        setSelectedCells(new Set());
-        setRowsSelected(new Set());
+        // setSelectedCells(new Set())
+        // setRowsSelected(new Set())
+
+        (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+        (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+        rowsSelected.current = new Set();
+        selectedCells.current = new Set();
+        setRangeCells(new Set());
       }
-
-      // if (tableBodies.length > 0) {
-      //   const tableBody = tableBodies[0]; // Chọn tbody đầu tiên (nếu có nhiều)
-      //
-      //   if (!tableBody.contains(event.target as Node)) {
-      //     setEditingKey('')
-      //     isSelecting.current = false;
-      //     startCell.current = null;
-      //     setSelectedCells(new Set())
-      //     setRowsSelected(new Set())
-      //   } else {
-      //
-      //   }
-      // }
     };
     document.addEventListener("click", handleClickOutside);
     return () => {
@@ -805,6 +802,9 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
+
+    // isDragMouse.current = true
+    isMouseDown.current = true;
     if (e.ctrlKey) {
       isSelecting.current = true;
       startCell.current = {
@@ -821,45 +821,56 @@ const GridEdit = props => {
         row,
         col
       };
-      if (e.target.className === 'dragging-point') {
-        // e.stopPropagation()
-        // e.preventDefault()
+      const target = e.target;
+      if (target.closest('.dragging-point')) {
+        e.stopPropagation();
+        e.preventDefault();
+        return; // Không xử lý gì cả
       } else {
-        setStartSelectedCell({
+        // setStartSelectedCell({row, col})
+
+        startSelectedCells.current = {
           row,
           col
-        });
-        setSelectedCells(new Set([`${row}-${col}`]));
-        setRowsSelected(new Set());
+        };
+
+        // setSelectedCells(new Set([`${row}-${col}`]));
+
+        const cells = new Set([`${row}-${col}`]);
+        if (selectedCells.current && selectedCells.current.size > 0) {
+          if (!(0, _hooks.isEqualSet)(cells, rangeCells)) {
+            (0, _hooks.onRemoveBgSelectedCell)(rangeCells, id);
+            (0, _hooks.onRemoveBorderSelectedCell)(rangeCells, id);
+            (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+          }
+        }
+        if (rowsSelected.current && rowsSelected.current.size > 0) {
+          (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
+        }
+        if (!(0, _hooks.isEqualSet)(cells, selectedCells.current)) {
+          selectedCells.current = cells;
+          if (editingKey) {
+            setTimeout(() => {
+              (0, _hooks.onAddBgSelectedCell)(cells, id);
+              (0, _hooks.onAddBorderSelectedCell)(cells, id);
+            }, 100);
+          } else {
+            (0, _hooks.onAddBgSelectedCell)(cells, id);
+            (0, _hooks.onAddBorderSelectedCell)(cells, id);
+          }
+        }
+
+        // setRowsSelected(new Set())
+        rowsSelected.current = new Set();
       }
     }
-
-    // isSelecting.current = true;
-    // startCell.current = { row, col };
-    //
-    // if (e.target.className === 'dragging-point') {
-    //   // e.stopPropagation()
-    //   // e.preventDefault()
-    // } else {
-    //
-    //   setStartSelectedCell({row, col})
-    //   setSelectedCells(new Set([`${row}-${col}`]));
-    //   setRowsSelected(new Set())
-    // }
   };
   const triggerDragPaste = pastesArray => {
-    const mergedSet = new Set([...selectedCells, ...pastesArray]);
-
-    // console.log('pastesArray', pastesArray)
-    // console.log('selectedCells', selectedCells)
-
-    setSelectedCells((0, _hooks.sortedSetASC)(mergedSet));
-    setPasteCells(new Set());
-    const rowSelectedFirst = (0, _hooks.getFirstSelectCell)(selectedCells).row;
-    const rowPasteLast = (0, _hooks.getLastSelectCell)(pasteCells).row;
-    const selectedArray = Array.from(selectedCells).map(key => {
+    const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
+    const rowSelectedFirst = (0, _hooks.getFirstSelectCell)(selectedCells.current).row;
+    const rowPasteLast = (0, _hooks.getLastSelectCell)(pasteCells.current).row;
+    const selectedArray = Array.from(selectedCells.current).map(key => {
       const [row, col] = key.split("-").map(Number);
-      // @ts-ignore
       const columnKey = columns[col].field;
 
       // @ts-ignore
@@ -871,6 +882,35 @@ const GridEdit = props => {
       // return { row, col, value: '' };
     });
 
+    // let selectedArray = []
+    //
+    // if (rowPasteLast > rowSelectedFirst) {
+    //   // kéo xuóng
+    //    selectedArray = Array.from(selectedCells).map((key: any) => {
+    //
+    //     const [row, col] = key.split("-").map(Number);
+    //     // @ts-ignore
+    //     const columnKey = columns[col].field;
+    //
+    //     // @ts-ignore
+    //     return { row, col, value: flattenData(childrenColumnName as any,dataSource)[row][columnKey] };
+    //     // return { row, col, value: '' };
+    //   });
+    // } else {
+    //   // kéo lên
+    //
+    //    selectedArray = Array.from(sortedSetDSC(selectedCells)).map((key: any) => {
+    //
+    //     const [row, col] = key.split("-").map(Number);
+    //     // @ts-ignore
+    //     const columnKey = columns[col].field;
+    //
+    //     // @ts-ignore
+    //     return { row, col, value: flattenData(childrenColumnName as any,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));
@@ -909,7 +949,7 @@ const GridEdit = props => {
       // Lấy vị trí bắt đầu
       // const { row: startRow, col: startCol } = selectedCell;
       const startRow = (0, _hooks.getFirstSelectCell)(pastesArray).row;
-      const startCol = (0, _hooks.getFirstSelectCell)(selectedCells).col;
+      const startCol = (0, _hooks.getFirstSelectCell)(selectedCells.current).col;
       const pastedRows = [];
       const pastedColumns = new Set();
       newRange.addedRows.forEach((rowValues, rowIndex) => {
@@ -947,19 +987,40 @@ const GridEdit = props => {
       const pastedColumnsArray = Array.from(pastedColumns) ?? [];
       triggerPaste?.(pastedRows, pastedColumnsArray, newData);
     }
+
+    /// cập nhật cell class
+    if (selectedCells.current && selectedCells.current.size > 0) {
+      (0, _hooks.onRemoveBgSelectedCell)(rangeCells, id);
+      (0, _hooks.onRemoveBorderSelectedCell)(rangeCells, id);
+    }
+
+    // selectedCells.current = sortedSetASC(mergedSet)
+    (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+    selectedCells.current = (0, _hooks.sortedSetASC)(mergedSet);
+    (0, _hooks.onAddBgSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
+    (0, _hooks.onAddBorderSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
+    (0, _hooks.showDraggingPoint)((0, _hooks.sortedSetASC)(mergedSet), id);
+
+    // setPasteCells(new Set())
+
+    if (pasteCells.current && pasteCells.current.size > 0) {
+      (0, _hooks.removeClassBorderPasteCell)(pasteCells.current, 'up', id);
+    }
+    pasteCells.current = new Set();
   };
   const handlePointDoubleClick = e => {
-    e.preventDefault();
+    // e.preventDefault()
     e.stopPropagation();
-    const colStart = (0, _hooks.getFirstSelectCell)(selectedCells).col;
-    const colEnd = (0, _hooks.getLastSelectCell)(selectedCells).col;
-    const startPasteRow = (0, _hooks.getLastSelectCell)(selectedCells).row;
+    const colStart = (0, _hooks.getFirstSelectCell)(selectedCells.current).col;
+    const colEnd = (0, _hooks.getLastSelectCell)(selectedCells.current).col;
+    const startPasteRow = (0, _hooks.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}`);
       }
     }
+    (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     triggerDragPaste(newPasteCells);
   };
 
@@ -988,8 +1049,12 @@ const GridEdit = props => {
     startCell.current = null;
     isSelectingRow.current = false;
     rowStart.current = null;
+    isDragMouse.current = false;
+    isMouseDown.current = false;
     setIsPasteDragging(false);
-    setSelectIsDragging(false);
+
+    // isPasteDragging.current = false
+    // setSelectIsDragging(false);
 
     // setCurrentCtrlCells(new Set())
 
@@ -1000,10 +1065,33 @@ const GridEdit = props => {
 
     // nếu ctrlCell length > 0 thì set selectCells
 
-    if (pasteCells.size > 0) {
-      triggerDragPaste(pasteCells);
+    if (pasteCells && pasteCells.current.size > 0) {
+      triggerDragPaste(pasteCells.current);
+    } else {
+      setRangeCells(selectedCells.current);
+      (0, _hooks.onRemoveBorderSelectedCell)(rangeCells, id);
+      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+      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 > 0) {
+        (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+      }
+      (0, _hooks.showDraggingPoint)(selectedCells.current, id);
     }
   };
+
+  // const handlePointEnter = () => {
+  //   isPointEnter.current = true;
+  // }
+  //
+  // const handlePointLeave = () => {
+  //   isPointEnter.current = false;
+  // }
+
   const handleMouseEnter = (row, col, e) => {
     if (!isSelecting.current || !startCell.current) {
       return;
@@ -1027,29 +1115,41 @@ const GridEdit = props => {
     if (!isPasteDragging) {
       // chọn vùng copy
 
-      setSelectIsDragging(true);
+      // 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);
+
+      // setSelectedCells(newSelectedCells)
+
+      if (selectedCells.current && selectedCells.current.size > 0) {
+        (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+      }
+      selectedCells.current = newSelectedCells;
+      (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
     } else {
       // chọn vùng paste
 
-      setSelectIsDragging(false);
-      setIsPasteDragging(true);
+      // 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 = (0, _hooks.getFirstSelectCell)(selectedCells).col;
-      const colEnd = (0, _hooks.getLastSelectCell)(selectedCells).col;
-      const rowSelectedEnd = (0, _hooks.getLastSelectCell)(selectedCells).row;
+      const colStart = (0, _hooks.getFirstSelectCell)(selectedCells.current).col;
+      const colEnd = (0, _hooks.getLastSelectCell)(selectedCells.current).col;
+      const rowSelectedEnd = (0, _hooks.getLastSelectCell)(selectedCells.current).row;
       if (row >= rowSelectedEnd) {
         // kéo xuống dưới
 
@@ -1059,12 +1159,19 @@ const GridEdit = props => {
             newPasteCells.add(`${r}-${c}`);
           }
         }
-        setPasteCells(newPasteCells);
+
+        // setPasteCells(newPasteCells)
+
+        if (pasteCells.current && pasteCells.current.size > 0) {
+          (0, _hooks.removeClassBorderPasteCell)(pasteCells.current, 'down', id);
+        }
+        pasteCells.current = newPasteCells;
+        (0, _hooks.addClassBorderPasteCell)(newPasteCells, 'down', id);
       }
       if (row < rowSelectedEnd) {
         // kéo lên trên
 
-        const rowSelectedStart = (0, _hooks.getFirstSelectCell)(selectedCells).row;
+        const rowSelectedStart = (0, _hooks.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++) {
@@ -1072,7 +1179,14 @@ const GridEdit = props => {
               newPasteCells.add(`${r}-${c}`);
             }
           }
-          setPasteCells(newPasteCells);
+
+          // setPasteCells(newPasteCells)
+
+          if (pasteCells.current && pasteCells.current.size > 0) {
+            (0, _hooks.removeClassBorderPasteCell)(pasteCells.current, 'up', id);
+          }
+          pasteCells.current = newPasteCells;
+          (0, _hooks.addClassBorderPasteCell)(newPasteCells, 'up', id);
         }
       }
       if (col > colEnd) {
@@ -1083,16 +1197,32 @@ const GridEdit = props => {
       }
     }
   };
-  const handleClickRowHeader = (row, col) => {
-    const newSelectedCells = new Set();
-    const tCols = (0, _hooks.editAbleColumns)(columns);
-    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}`);
-      }
-    }
-    setSelectedCells(newSelectedCells);
-  };
+
+  // const handleClickRowHeader = (row: any, col: any) => {
+  //
+  //   const newSelectedCells = new Set()
+  //
+  //   const tCols = editAbleColumns(columns)
+  //
+  //   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}`)
+  //     }
+  //   }
+  //
+  //   // setSelectedCells(newSelectedCells)
+  //
+  //   if (selectedCells.current && selectedCells.current.size > 0) {
+  //     onRemoveBgSelectedCell(selectedCells.current, id)
+  //   }
+  //
+  //   selectedCells.current = newSelectedCells
+  //
+  //   onAddBgSelectedCell(newSelectedCells, id)
+  //
+  //
+  // };
+
   const handleClickColHeader = (column, indexColumn) => {
     const newSelectedCells = new Set();
     for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
@@ -1100,9 +1230,23 @@ const GridEdit = props => {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
-    setSelectedCells(new Set(newSelectedCells));
+
+    // setSelectedCells(new Set(newSelectedCells));
+
+    if (selectedCells.current && selectedCells.current.size > 0) {
+      (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+    }
+    if (rowsSelected.current && rowsSelected.current.size > 0) {
+      (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
+    }
+    selectedCells.current = newSelectedCells;
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
+    (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+    (0, _hooks.showDraggingPoint)(newSelectedCells, id);
   };
-  const handleMouseDownColIndex = (row, col, e) => {
+  const handleMouseDownRowHeader = (row, col, column, e) => {
     if (e.button === 2) {
       e.stopPropagation();
       return;
@@ -1112,9 +1256,32 @@ const GridEdit = props => {
       row,
       col
     };
-    setRowsSelected(new Set([`${row}-${col}`]));
+    const newSelectedCells = new Set();
+    const tCols = (0, _hooks.editAbleColumns)(columns);
+    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}`);
+      }
+    }
+
+    // setSelectedCells(newSelectedCells)
+    // setRowsSelected(new Set([`${row}-${col}`]));
+
+    if (selectedCells.current && selectedCells.current.size > 0) {
+      (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+    }
+    if (rowsSelected.current && rowsSelected.current.size > 0) {
+      (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
+    }
+    (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+    selectedCells.current = newSelectedCells;
+    rowsSelected.current = new Set([`${row}-${col}`]);
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
+    (0, _hooks.addClassCellIndexSelected)(new Set([`${row}-${col}`]), id);
   };
-  const handleMouseEnterColIndex = (row, col, e) => {
+  const handleMouseEnterRowHeader = (row, col, e) => {
     // dừng sự kiện kéo để chọn từ các column khác khi vừa gặp column index
     if (isSelecting) {
       startCell.current = null;
@@ -1138,8 +1305,18 @@ const GridEdit = props => {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
-    setRowsSelected(newSelectedRows);
-    setSelectedCells(newSelectedCells);
+    if (selectedCells.current && selectedCells.current.size > 0) {
+      (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+    }
+    // setSelectedCells(newSelectedCells)
+    selectedCells.current = newSelectedCells;
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
+    if (rowsSelected.current && rowsSelected.current.size > 0) {
+      (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
+    }
+    // setRowsSelected(newSelectedRows)
+    rowsSelected.current = newSelectedRows;
+    (0, _hooks.addClassCellIndexSelected)(newSelectedRows, id);
   };
   const handleCellClick = (indexRow, record, column) => {
     const cellClickCallback = newOptions => {
@@ -1169,7 +1346,7 @@ const GridEdit = props => {
     }
   };
   const handleCopy = e => {
-    const selectedArray = Array.from(selectedCells).map(key => {
+    const selectedArray = Array.from(selectedCells.current).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
       const columnKey = (0, _hooks.editAbleColumns)(columns)[col - 1].field;
@@ -1511,9 +1688,6 @@ const GridEdit = props => {
       indexRow,
       key
     } = args;
-
-    // const newRecord = getValues()
-
     if (changeType === 'enter') {}
     if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
@@ -1534,7 +1708,7 @@ const GridEdit = props => {
             indexRow,
             rowData: record,
             rowId: key,
-            rowsData: [],
+            rowsData: [...dataSource],
             sumValue: []
           }, handleChangeCallback);
         } else {
@@ -1547,7 +1721,7 @@ const GridEdit = props => {
             indexRow,
             rowData: record,
             rowId: key,
-            rowsData: [],
+            rowsData: [...dataSource],
             sumValue: []
           }, handleChangeCallback);
           onSubmit(record);
@@ -1580,35 +1754,17 @@ const GridEdit = props => {
         // }
       });
     }
-
-    // columns.forEach(column => {
-    //
-    //   const dateFormat  = getDatepickerFormat(editType, column)
-    //
-    //   // @ts-ignore
-    //   if ((column.editType === 'date' || column.editType === 'datetime') && record[column.dataIndex]) {
-    //
-    //     // @ts-ignore
-    //     formattedRecord[column.dataIndex] = !isEmpty(record[column.dataIndex]) ? convertDateToDayjs(new Date(record[column.dataIndex]), dateFormat) : null
-    //   }
-    //
-    // });
-
     if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
       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 (startSelectedCells?.row !== undefined && startSelectedCells?.col !== undefined) {
+    if (startSelectedCells.current && startSelectedCells.current.row !== undefined && startSelectedCells.current.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="${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="${startSelectedCells?.col}"] .ant-select-selection-search input`);
+        const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] input`);
+        const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells.current.col}"] .ant-select-selection-search input`);
         if (input) {
           input.focus();
         }
@@ -1660,11 +1816,25 @@ const GridEdit = props => {
     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 = () => {
-      setStartSelectedCell({
+      // setStartSelectedCell({ row: rowIndex, col: colIndex });
+      startSelectedCells.current = {
         row: rowIndex,
         col: colIndex
-      });
-      setSelectedCells(new Set([`${rowIndex}-${colIndex}`]));
+      };
+      // setSelectedCells(new Set([`${rowIndex}-${colIndex}`]));
+
+      const cells = new Set([`${rowIndex}-${colIndex}`]);
+      if (selectedCells.current && selectedCells.current.size > 0) {
+        (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+      }
+      (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+      selectedCells.current = cells;
+      setTimeout(() => {
+        (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+      }, 50);
+      (0, _hooks.showDraggingPoint)(cells, id);
     };
     const focusNextCell = (editingCell, cellEditable) => {
       if (isEdit) {
@@ -1711,62 +1881,18 @@ const GridEdit = props => {
       focusNextCell(cellEdit, cell);
     }
   };
-  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 topPasteCellKey = `${rowIndex + 1}-${colIndex}`;
-    const isPasteSelected = pasteCells.has(cellKey);
-    const isPasteTopSelected = pasteCells.has(topPasteCellKey);
-    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 = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowIndex + 1];
-    const cellStart = (0, _hooks.getFirstSelectCell)(selectedCells);
-    const cellEnd = (0, _hooks.getLastSelectCell)(selectedCells);
-    const cellPasteStart = (0, _hooks.getFirstSelectCell)(pasteCells);
-    const cellPasteSEnd = (0, _hooks.getLastSelectCell)(pasteCells);
-    const isPasteBottom = cellPasteSEnd.row > cellStart.row && pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row);
-
-    // const rowSelectedFirst = getFirstSelectCell(selectedCells).row
-    // const rowPasteLast = getLastSelectCell(pasteCells).row
-
-    if (!isSelected && !isPasteSelected) {
-      // const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && rowIndex === Math.min(cellStart.row - 1, cellEnd?.row);
-      const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && (0, _hooks.isTopMostInRegion)(rowIndex + 1, colIndex, selectedCells);
-      const isLeft = colIndex + 1 === Math.min(cellStart.col, cellEnd?.col);
-      const isRight = colIndex - 1 === Math.max(cellStart.col, cellEnd?.col);
-      const isPasteTop = cellPasteSEnd.row < cellStart.row && (0, _hooks.isTopMostInRegion)(rowIndex + 1, colIndex, pasteCells);
-      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 || isPasteTopSelected ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''} ${isPasteTop ? `cell-paste-border-top` : ''}` : cellClass;
-    }
-    const isBottom = (0, _hooks.isBottomMostInRegion)(rowIndex, colIndex, selectedCells);
-    // const isBottom = isBottomMostInRanges(rowIndex, colIndex, [selectedCells, ...ctrlCells])
-
-    // const isRight = cellEnd && colIndex === Math.max(cellStart.col, cellEnd.col)
-    const isRight = (0, _hooks.isRightMostInRegion)(rowIndex, colIndex, selectedCells);
-    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} ${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 = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
     if (!column?.field && !column?.key) {
       return column;
     }
-    if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
+    if (column.dataIndex === '#' || column.dataIndex === '#') {
       return {
         ...column,
-        className: 'rc-ui-cell-editable',
+        className: 'rc-ui-cell-editable rc-ui-cell-index',
         onCell: (record, rowIndex) => {
           const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
           return {
+            'data-row-index': rowNumber,
             onPaste: event => {
               if (editingKey === '') {
                 handlePaste(record, colIndex + 1, rowNumber, event);
@@ -1790,13 +1916,9 @@ const GridEdit = props => {
         render: (value, record) => {
           const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/_react.default.createElement("div", {
-            className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {
-              selected: rowsSelected.has(`${rowNumber}-${colIndex}`),
-              focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowNumber}-`))
-            }),
-            onMouseDown: event => handleMouseDownColIndex(rowNumber, colIndex, event),
-            onMouseEnter: event => handleMouseEnterColIndex(rowNumber, colIndex, event),
-            onClick: () => handleClickRowHeader(rowNumber, colIndex),
+            className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {}),
+            onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
+            onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
             onMouseUp: handleMouseUp
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: 'ui-rc_content'
@@ -1816,16 +1938,16 @@ const GridEdit = props => {
         return {
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
-            if (event.key === 'Control' && event.ctrlKey) {
-
-              // setIsCtrlDown(true)
-            } else {
+            if (event.key === 'Control' && event.ctrlKey) {} else {
               if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
                 if (record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
                   // ~~ khi editingKey = ''
                   event.preventDefault();
                   event.stopPropagation();
                   handleEdit(record, column, column.editType, event);
+                  (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+                  (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+                  selectedCells.current = new Set();
                   handleCellClick(rowNumber, record, column);
                   const hasKey = mergedExpandedKeys.has(key);
                   if (hasKey) {
@@ -1867,7 +1989,7 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'ArrowLeft' && colIndex > 0) {
-                if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
+                if (!column.dataIndex && !column.key || column.field === '#' || column.dataIndex === '#') {
                   event.stopPropagation();
                   event.preventDefault();
                 } else {
@@ -1898,13 +2020,6 @@ const GridEdit = props => {
               }
             }
           },
-          // onKeyUp: (event: any) => {
-          //   if (event.key === 'Control' && event.ctrlKey) {
-          //
-          //     console.log('onKeyUp')
-          //   }
-          // },
-
           onPaste: event => {
             if (editingKey === '') {
               handlePaste(record, colIndex, rowNumber, event);
@@ -1920,6 +2035,8 @@ const GridEdit = props => {
           onDoubleClick: event => {
             if (!isEditing(record) && record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
               handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
+              (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+              (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
               handleCellClick(rowNumber, record, column);
             }
           },
@@ -1928,12 +2045,15 @@ const GridEdit = props => {
             // startCell.current = { row: rowNumber, col: colIndex };
 
             if (selectedCells.size === 0) {
-              setStartSelectedCell({
+              // setStartSelectedCell({ row: rowNumber, col: colIndex })
+              // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
+
+              startSelectedCells.current = {
                 row: rowNumber,
                 col: colIndex
-              });
-              setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
-              setRowsSelected(new Set());
+              };
+              selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
+              rowsSelected.current = new Set();
             }
           },
           onClick: () => {
@@ -1941,12 +2061,13 @@ const GridEdit = props => {
               setEditingKey('');
             }
           },
-          // className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
-          className: getCellClass(record, rowNumber, colIndex),
+          className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : `rc-ui-cell-editable cell-editable ${!(0, _hooks.isEditable)(column, record) ? 'disable' : ''}`,
           record,
           column: column,
           editType: (0, _hooks.getEditType)(column, record),
           dataIndex: column.dataIndex,
+          indexRow: rowNumber,
+          indexCol: colIndex,
           title: (0, _columns.getValueCell)(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
@@ -1957,7 +2078,6 @@ const GridEdit = props => {
           editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
           cellEditing,
           t,
-          // editing: isEditing(record) && rowEditable?.(record) !== false,
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
@@ -1991,14 +2111,18 @@ const GridEdit = props => {
         const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _classnames.default)('ui-rc_cell-content', {
-            // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
-            // selected: selectedCells.has(`${rowNumber}-${colIndex}`) || currentCtrlCells.has(`${rowNumber}-${colIndex}`) || mergedSets([selectedCells, ...ctrlCells]).has(`${rowNumber}-${colIndex}`),
-            selected: selectedCells.has(`${rowNumber}-${colIndex}`),
-            disable: !(0, _hooks.isEditable)(column, record)
+            // disable: !isEditable(column as any, record)
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: event => handleMouseEnter(rowNumber, colIndex, event),
-          onMouseUp: handleMouseUp
+          onMouseUp: handleMouseUp,
+          onMouseMove: () => {
+            if (selectedCells && selectedCells.current.size > 0 && isMouseDown.current) {
+              (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+              isDragMouse.current = true;
+            }
+          }
+
           // onClick={(event) => {
           //
           //   handleClickCell(event)
@@ -2006,18 +2130,19 @@ const GridEdit = props => {
           // }}
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && (0, _hooks.getLastSelectCell)(selectedCells).row === rowNumber && (0, _hooks.getLastSelectCell)(selectedCells).col === colIndex && (0, _hooks.isEditable)(column, record) && !isSelectDragging && rowIndex !== dataSource.length - 1 &&
-        /*#__PURE__*/
-        // showDraggingPoint &&
-        _react.default.createElement("div", {
-          className: 'dragging-point'
-          // onMouseEnter={(event) => handlePointEnter(event)}
-          // onMouseLeave={() => handlePointLeave()}
-          ,
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, column.format ? typeof column.format === 'function' ? column.format(record) : column.format : format)),
+        // 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.default.createElement("div", {
+          className: 'dragging-point hidden',
           onMouseDown: e => {
             // e.stopPropagation()
             e.preventDefault();
-            setIsPasteDragging(true);
+            if (e.button === 0) {
+              setIsPasteDragging(true);
+            }
           },
           onDoubleClick: handlePointDoubleClick
         }, /*#__PURE__*/_react.default.createElement("span", {
@@ -2071,9 +2196,6 @@ const GridEdit = props => {
       }
     }));
   };
-  const onSelectChange = keys => {
-    setMergedSelectedKeys(keys);
-  };
   const contextMenuClick = args => {
     if (args.item?.parentKey && args.item.parentKey === 'INSERT_BEFORE') {
       if (args.item.key === 'INSERT_BEFORE_ADV') {
@@ -2131,12 +2253,11 @@ const GridEdit = props => {
     setRowsAdd(val);
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
-    heightTable: height,
+    $heightTable: height,
     style: {
       position: 'relative'
     },
     ref: ref
-    // onMouseUp={handleMouseUp}
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
       rowKey,
@@ -2176,9 +2297,7 @@ const GridEdit = props => {
     components: {
       ...components,
       body: {
-        // wrapper: () => <div></div>,
         cell: _EditableCell.default
-        // cell: () =>  <EditableCell  />,
       }
     },
     className: (0, _classnames.default)(className, 'grid-editable'),
@@ -2194,9 +2313,11 @@ const GridEdit = props => {
     ,
     selectionSettings: selectionSettings ? {
       ...selectionSettings,
-      checkboxOnly: true
+      checkboxOnly: true,
+      arrowKey: false
     } : {
-      checkboxOnly: true
+      checkboxOnly: true,
+      arrowKey: false
     },
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
@@ -2238,25 +2359,27 @@ const GridEdit = props => {
     },
     triggerChangeColumns: triggerChangeColumns,
     clickHeaderToSort: false,
-    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
-    },
     isFilter: isFilter,
     setIsFilter: setIsFilter,
     contextMenuItems: contextMenuItems,
-    contextMenuClick: contextMenuClick
+    contextMenuClick: contextMenuClick,
+    onScroll: () => {
+      if (selectedCells.current && selectedCells.current.size > 0) {
+        (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+        (0, _hooks.showDraggingPoint)(selectedCells.current, id);
+      }
+      if (rowsSelected && rowsSelected.current.size > 0) {
+        (0, _hooks.addClassCellIndexSelected)(rowsSelected.current, id);
+      }
+    }
   })))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
     position: toast,
     toastOptions: {
       className: 'react-hot-toast'
     }
-  }), /*#__PURE__*/_react.default.createElement(_antd.Modal
-  // title="Thêm dòng"
-  , {
+  }), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    title: "Th\xEAm d\xF2ng",
     open: openModalAddRow.open,
     onOk: onOkAddRow,
     onCancel: hideModalAddRow,