es-grid-template 1.3.4 → 1.3.6

package/assets/index.css

@@ -222,6 +222,9 @@
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-left {
   border-inline-end: 1px dashed #949494;
 }
+.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-top {
+  border-bottom: 1px dashed #949494 !important;
+}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-border-right {
   border-inline-end: 1px solid #0550C5;
 }

package/assets/index.scss

@@ -426,6 +426,9 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         &.cell-paste-border-left {
           border-inline-end: 1px dashed #949494;
         }
+        &.cell-paste-border-top {
+          border-bottom: 1px dashed #949494 !important;
+        }
 
         &.cell-border-right {
           border-inline-end: 1px solid $border-selected-color;

package/es/grid-component/EditableCell.js

@@ -572,6 +572,7 @@ const EditableCell = props => {
           },
           treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
           filterTreeNode: filterTreeNode,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           onSelect: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();

package/es/grid-component/TableGrid.js

@@ -512,7 +512,10 @@ const TableGrid = props => {
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), bottomToolbar?.(), /*#__PURE__*/React.createElement(Tooltip, {
-    id: "tooltip-header"
+    id: "tooltip-header",
+    style: {
+      zIndex: 1999
+    }
   }));
 };
 export default TableGrid;

package/es/grid-component/hooks/columns/index.js

@@ -7,10 +7,14 @@ import { DatePicker, Empty, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
 import NumberRange from "../../number-range";
-import Number from "../../number";
+import NumberInput from "../../number";
+// import {Typography} from "antd";
 const {
   RangePicker
 } = DatePicker;
+
+// const { Text } = Typography;
+
 export function flatColumns(columns, parentKey = 'key') {
   // @ts-ignore
   return columns.filter(column => column && typeof column === 'object').reduce((list, column, index) => {
@@ -72,7 +76,8 @@ export const getValueCell = (column, value, format) => {
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
-      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(value.toFixed(dec)).toString() : value.toString() : '0';
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? tmpval.toFixed(dec) : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
         decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
@@ -140,7 +145,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
     case 'Number':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(Number, {
+      }, /*#__PURE__*/React.createElement(NumberInput, {
         t: t,
         value: selectedKeys[0],
         onChange: vals => {

package/es/grid-component/hooks/content/HeaderContent.js

@@ -67,7 +67,9 @@ const HeaderContent = props => {
     // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
     // style={{flex: 1}}
     className: classnames('', {}),
-    "data-tooltip-id": "tooltip-header",
+    "data-tooltip-id": "tooltip-header"
+    // data-tooltip-id="tooltip-cell-content"
+    ,
     "data-tooltip-content": tooltip,
     "data-tooltip-offset": 16
   }, headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text));

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

@@ -62,6 +62,13 @@ export declare function addRows8(arr: any, n: number): {
     combined: any[];
     addedRows: any[];
 };
+export declare function addRowsUp(array: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
 export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
 export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
 export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
@@ -93,3 +100,7 @@ export declare function isRightMostInRegion(rowIndex: number, colIndex: number,
 export declare function isEqualSet(setA: any, setB: any): boolean;
 export declare function isBottomMostInRanges(rowIndex: number, colIndex: number, regions: any[]): boolean;
 export declare const mergedSets: (arr: any[]) => Set<unknown>;
+export declare const sortedSetASC: (setValue: any) => Set<unknown>;
+export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
+export declare const onAddClassSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onRemoveClassSelectedCell: (selectedCells: any, id?: string) => void;

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

@@ -623,6 +623,146 @@ export function addRows8(arr, n) {
     addedRows
   };
 }
+export function addRowsUp(array, n) {
+  const arr = array.reverse();
+  if (!Array.isArray(arr) || arr.length === 0) return {
+    combined: arr,
+    addedRows: []
+  };
+  const m = arr.length;
+  const numCols = arr[0].length;
+  const addedRows = [];
+
+  // Hàm kiểm tra kiểu date hợp lệ
+  const isValidDate = item => {
+    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
+    // return !isNaN(Date.parse(d))
+
+    if (typeof item === 'number') {
+      // return 'number'
+      return false;
+    }
+    if (typeof item === 'string') {
+      // Kiểm tra nếu là chuỗi ISO date hợp lệ
+      const date = new Date(item);
+      if (!isNaN(date.getTime()) && item.includes('T')) {
+        // return 'date'
+        return true;
+      }
+      // return 'string'
+      return false;
+    }
+    return !isNaN(Date.parse(item));
+  };
+
+  // Lấy giá trị mẫu của cột j từ hàng đầu tiên
+  const getSample = j => arr[0][j];
+
+  // Xác định chế độ xử lý cho mỗi cột:
+  // mode = 'number-stepping' | 'date-stepping' | 'number-constant' | 'cycle'
+  const modes = [];
+  const steps = []; // bước tăng, nếu có (cho number hoặc date)
+
+  for (let j = 0; j < numCols; j++) {
+    const sample = getSample(j);
+    if (m === 1) {
+      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
+      if (typeof sample === "number") {
+        modes[j] = "number-constant";
+      } else if (isValidDate(sample)) {
+        modes[j] = "date-stepping";
+        steps[j] = 24 * 3600 * 1000; // 1 ngày = 86400000 ms
+      } else {
+        modes[j] = "cycle";
+      }
+    } else if (m === 2) {
+      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
+      const first = arr[0][j],
+        second = arr[1][j];
+      if (typeof first === "number" && typeof second === "number") {
+        modes[j] = "number-stepping";
+        steps[j] = second - first;
+      } else if (isValidDate(first) && isValidDate(second)) {
+        modes[j] = "date-stepping";
+        steps[j] = Date.parse(second) - Date.parse(first);
+      } else {
+        modes[j] = "cycle";
+      }
+    } else {
+      // Nếu mảng có >2 hàng
+      const first = arr[0][j],
+        second = arr[1][j],
+        third = arr[2][j];
+      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
+        const step1 = second - first;
+        const step2 = third - second;
+        if (step1 === step2) {
+          modes[j] = "number-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else if (isValidDate(first) && isValidDate(second) && isValidDate(third)) {
+        const step1 = Date.parse(second) - Date.parse(first);
+        const step2 = Date.parse(third) - Date.parse(second);
+        if (step1 === step2) {
+          modes[j] = "date-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else {
+        modes[j] = "cycle";
+      }
+    }
+  }
+
+  // Tạo các dòng mới (thêm n dòng)
+  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu và cộng thêm (i+1)*step
+  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
+  for (let i = n - 1; i >= 0; i--) {
+    const newRow = [];
+    for (let j = 0; j < numCols; j++) {
+      let newValue;
+      switch (modes[j]) {
+        case "number-constant":
+          // Mảng có 1 hàng, số giữ nguyên
+          newValue = arr[0][j];
+          break;
+        case "number-stepping":
+          {
+            // Lấy giá trị cuối của cột j trong mảng ban đầu
+
+            const lastValue = arr[m - 1][j];
+            newValue = lastValue - (i + 1) * steps[j] * -1;
+          }
+          break;
+        case "date-stepping":
+          {
+            // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
+
+            const lastDate = new Date(array[m - 1][j]);
+            const newTime = lastDate.getTime() - (i + 1) * steps[j] * -1;
+            newValue = moment(new Date(newTime)).format();
+          }
+          break;
+        case "cycle":
+        default:
+          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
+
+          newValue = arr[i % m][j];
+          break;
+      }
+      newRow.push(newValue);
+    }
+    addedRows.push(newRow);
+  }
+  const combined = arr.concat(addedRows);
+  return {
+    combined,
+    addedRows
+  };
+}
 export const transformColumns = (cols, convertColumns, t) => {
   // @ts-ignore
   return cols.map(column => {
@@ -1196,4 +1336,54 @@ export function isBottomMostInRanges(rowIndex, colIndex, regions) {
 }
 export const mergedSets = arr => {
   return new Set(arr.flatMap(set => Array.from(set)));
+};
+export const sortedSetASC = setValue => {
+  const sorted = Array.from(setValue).sort((a, b) => {
+    const [a1, a2] = a.split("-").map(Number);
+    const [b1, b2] = b.split("-").map(Number);
+    return a1 - b1 || a2 - b2;
+  });
+  return new Set(sorted);
+};
+export const sortedSetDSC = setValue => {
+  const sorted = Array.from(setValue).sort((a, b) => {
+    const [a1, a2] = a.split("-").map(Number);
+    const [b1, b2] = b.split("-").map(Number);
+    return b1 - a1 || b2 - a2;
+  });
+  return new Set(sorted);
+};
+export const onAddClassSelectedCell = (selectedCells, id) => {
+  const selectors = Array.from(selectedCells).map(pos => {
+    const [row1, col1] = pos.split('-');
+    return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
+  });
+
+  // const cells = document.querySelectorAll(selectors.join(','));
+
+  const table = document.querySelector(`#${id}`);
+  console.log('table', table);
+  const cells = table?.querySelectorAll(selectors.join(','));
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.add('selected');
+    });
+  }
+};
+export const onRemoveClassSelectedCell = (selectedCells, id) => {
+  const selectors = Array.from(selectedCells).map(pos => {
+    const [row, col] = pos.split('-');
+    return `[data-row-index="${row}"][data-col-index="${col}"]`;
+  });
+  const table = document.querySelector(`#${id}`);
+  const cells = table?.querySelectorAll(selectors.join(','));
+  // const cells = table?.querySelectorAll(selectors.join(','))
+
+  // const cells = table?.querySelectorAll('.ui-rc-table-cell.selected');
+
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.remove('selected');
+    });
+  }
 };

package/es/grid-component/number/index.d.ts

@@ -6,5 +6,5 @@ type Props = {
     value: number | string | undefined;
     onChange?: (values: any[]) => void;
 };
-declare const Number: (props: Props) => React.JSX.Element;
-export default Number;
+declare const NumberInput: (props: Props) => React.JSX.Element;
+export default NumberInput;

package/es/grid-component/number/index.js

@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 import { NumericFormat } from "react-numeric-component";
 import { Input } from "rc-master-ui";
 import { checkDecimalSeparator, checkThousandSeparator } from "../hooks";
-const Number = props => {
+const NumberInput = props => {
   const {
     t,
     value,
@@ -36,4 +36,4 @@ const Number = props => {
     autoFocus: true
   }));
 };
-export default Number;
+export default NumberInput;

package/es/grid-component/styles.scss

@@ -426,6 +426,9 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         &.cell-paste-border-left {
           border-inline-end: 1px dashed #949494;
         }
+        &.cell-paste-border-top {
+          border-bottom: 1px dashed #949494 !important;
+        }
 
         &.cell-border-right {
           border-inline-end: 1px solid $border-selected-color;

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

@@ -13,7 +13,7 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex,
+import { addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex,
 // isBottomMostInRanges,
 isBottomMostInRegion,
 // isContinuous,
@@ -21,7 +21,7 @@ isEditable,
 // isEqualSet,
 isObjEmpty, isRightMostInRegion, isTopMostInRegion,
 // mergedSets,
-newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
+newGuid, sortedSetASC, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 // import Command from "../Command";
 
@@ -801,8 +801,6 @@ const GridEdit = props => {
     };
   }, []);
   const handleMouseDown = (record, row, col, e) => {
-    // setEditingKey('')
-
     if (e.button === 2) {
       e.stopPropagation();
       return;
@@ -851,8 +849,14 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells, ...pastesArray]);
-    setSelectedCells(mergedSet);
+
+    // console.log('pastesArray', pastesArray)
+    // console.log('selectedCells', selectedCells)
+
+    setSelectedCells(sortedSetASC(mergedSet));
     setPasteCells(new Set());
+    const rowSelectedFirst = getFirstSelectCell(selectedCells).row;
+    const rowPasteLast = getLastSelectCell(pasteCells).row;
     const selectedArray = Array.from(selectedCells).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
@@ -886,7 +890,17 @@ const GridEdit = props => {
     }) => {
       table[row - minRow][col - minCol] = value;
     });
-    const newRange = addRows8(table, getRowsPasteIndex(pastesArray).length);
+    let newRange = {
+      combined: [],
+      addedRows: []
+    };
+    if (rowPasteLast > rowSelectedFirst) {
+      // kéo xuóng
+      newRange = addRows8(table, getRowsPasteIndex(pastesArray).length);
+    } else {
+      // kéo lên
+      newRange = addRowsUp(table, getRowsPasteIndex(pastesArray).length);
+    }
     const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pastesArray).row];
     if (!record?.parentId) {
       // Cập nhật data mới
@@ -1049,6 +1063,17 @@ const GridEdit = props => {
       }
       if (row < rowSelectedEnd) {
         // kéo lên trên
+
+        const rowSelectedStart = getFirstSelectCell(selectedCells).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 (col > colEnd) {
         // kéo sang phải
@@ -1153,7 +1178,7 @@ const GridEdit = props => {
       return {
         row,
         col,
-        value: flattenData(childrenColumnName, dataSource)[row][columnKey]
+        value: flattenData(childrenColumnName, dataSource)[row][columnKey] ?? ''
       };
       // return { row, col, value: '' };
     });
@@ -1297,7 +1322,7 @@ const GridEdit = props => {
   };
   const handlePaste = (record, indexCol, rowNumber, e) => {
     // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
-    const pasteData = e.clipboardData.getData("text/plain").trim();
+    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 =>
@@ -1695,7 +1720,9 @@ const GridEdit = props => {
     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';
@@ -1704,15 +1731,20 @@ const GridEdit = props => {
     const cellEnd = getLastSelectCell(selectedCells);
     const cellPasteStart = getFirstSelectCell(pasteCells);
     const cellPasteSEnd = getLastSelectCell(pasteCells);
-    const isPasteBottom = pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row);
+    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) && 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 && 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 ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''}` : cellClass;
+      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 = isBottomMostInRegion(rowIndex, colIndex, selectedCells);
     // const isBottom = isBottomMostInRanges(rowIndex, colIndex, [selectedCells, ...ctrlCells])
@@ -1724,7 +1756,7 @@ const GridEdit = props => {
     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 = flatColumns2(columns).map((column, colIndex) => {
+  const convertColumns = flatColumns2(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
     if (!column?.field && !column?.key) {
       return column;
     }
@@ -1918,6 +1950,10 @@ const GridEdit = props => {
           title: getValueCell(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
+          // 'data-tooltip-id': "tooltip-cell-content",
+          // 'data-tooltip-content': 'tooltip-cell-content',
+          // 'data-tooltip-delay-show': 1000,
+          // 'data-tooltip-content': getValueCell(column, record[column.field as any], format),
           editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
           cellEditing,
           t,
@@ -1978,7 +2014,9 @@ const GridEdit = props => {
           // onMouseEnter={(event) => handlePointEnter(event)}
           // onMouseLeave={() => handlePointLeave()}
           ,
-          onMouseDown: () => {
+          onMouseDown: e => {
+            // e.stopPropagation()
+            e.preventDefault();
             setIsPasteDragging(true);
           },
           onDoubleClick: handlePointDoubleClick
@@ -2000,6 +2038,11 @@ const GridEdit = props => {
           ...find
         };
       }
+      if (!find) {
+        return {
+          ...column
+        };
+      }
 
       // Xử lý đệ quy cho children
       if (column.children?.length) {

package/lib/grid-component/EditableCell.js

@@ -574,6 +574,7 @@ const EditableCell = props => {
           },
           treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
           filterTreeNode: filterTreeNode,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           onSelect: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();

package/lib/grid-component/TableGrid.js

@@ -513,7 +513,10 @@ const TableGrid = props => {
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), bottomToolbar?.(), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: "tooltip-header"
+    id: "tooltip-header",
+    style: {
+      zIndex: 1999
+    }
   }));
 };
 var _default = exports.default = TableGrid;

package/lib/grid-component/hooks/columns/index.js

@@ -19,9 +19,13 @@ var _numberRange = _interopRequireDefault(require("../../number-range"));
 var _number = _interopRequireDefault(require("../../number"));
 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 {Typography} from "antd";
 const {
   RangePicker
 } = _rcMasterUi.DatePicker;
+
+// const { Text } = Typography;
+
 function flatColumns(columns, parentKey = 'key') {
   // @ts-ignore
   return columns.filter(column => column && typeof column === 'object').reduce((list, column, index) => {
@@ -83,7 +87,8 @@ const getValueCell = (column, value, format) => {
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
-      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(value.toFixed(dec)).toString() : value.toString() : '0';
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? tmpval.toFixed(dec) : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),

package/lib/grid-component/hooks/content/HeaderContent.js

@@ -76,7 +76,9 @@ const HeaderContent = props => {
     // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
     // style={{flex: 1}}
     className: (0, _classnames.default)('', {}),
-    "data-tooltip-id": "tooltip-header",
+    "data-tooltip-id": "tooltip-header"
+    // data-tooltip-id="tooltip-cell-content"
+    ,
     "data-tooltip-content": tooltip,
     "data-tooltip-offset": 16
   }, headerTemplate ? (0, _utils.getTemplate)(headerTemplate) : t ? t(text) : text));

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

@@ -62,6 +62,13 @@ export declare function addRows8(arr: any, n: number): {
     combined: any[];
     addedRows: any[];
 };
+export declare function addRowsUp(array: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
 export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
 export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
 export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
@@ -93,3 +100,7 @@ export declare function isRightMostInRegion(rowIndex: number, colIndex: number,
 export declare function isEqualSet(setA: any, setB: any): boolean;
 export declare function isBottomMostInRanges(rowIndex: number, colIndex: number, regions: any[]): boolean;
 export declare const mergedSets: (arr: any[]) => Set<unknown>;
+export declare const sortedSetASC: (setValue: any) => Set<unknown>;
+export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
+export declare const onAddClassSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onRemoveClassSelectedCell: (selectedCells: any, id?: string) => void;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addRowIdArray = void 0;
 exports.addRows8 = addRows8;
+exports.addRowsUp = addRowsUp;
 exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = exports.buildConnectedRegions = void 0;
 exports.compareDate = compareDate;
 exports.compareDates = compareDates;
@@ -23,7 +24,7 @@ exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
 exports.isEqualSet = isEqualSet;
 exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = void 0;
 exports.isRightMostInRegion = isRightMostInRegion;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.removeFieldRecursive = exports.removeColumns = exports.parseCells = exports.parseBooleanToValue = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = void 0;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.removeFieldRecursive = exports.removeColumns = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveClassSelectedCell = exports.onAddClassSelectedCell = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -690,6 +691,146 @@ function addRows8(arr, n) {
     addedRows
   };
 }
+function addRowsUp(array, n) {
+  const arr = array.reverse();
+  if (!Array.isArray(arr) || arr.length === 0) return {
+    combined: arr,
+    addedRows: []
+  };
+  const m = arr.length;
+  const numCols = arr[0].length;
+  const addedRows = [];
+
+  // Hàm kiểm tra kiểu date hợp lệ
+  const isValidDate = item => {
+    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
+    // return !isNaN(Date.parse(d))
+
+    if (typeof item === 'number') {
+      // return 'number'
+      return false;
+    }
+    if (typeof item === 'string') {
+      // Kiểm tra nếu là chuỗi ISO date hợp lệ
+      const date = new Date(item);
+      if (!isNaN(date.getTime()) && item.includes('T')) {
+        // return 'date'
+        return true;
+      }
+      // return 'string'
+      return false;
+    }
+    return !isNaN(Date.parse(item));
+  };
+
+  // Lấy giá trị mẫu của cột j từ hàng đầu tiên
+  const getSample = j => arr[0][j];
+
+  // Xác định chế độ xử lý cho mỗi cột:
+  // mode = 'number-stepping' | 'date-stepping' | 'number-constant' | 'cycle'
+  const modes = [];
+  const steps = []; // bước tăng, nếu có (cho number hoặc date)
+
+  for (let j = 0; j < numCols; j++) {
+    const sample = getSample(j);
+    if (m === 1) {
+      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
+      if (typeof sample === "number") {
+        modes[j] = "number-constant";
+      } else if (isValidDate(sample)) {
+        modes[j] = "date-stepping";
+        steps[j] = 24 * 3600 * 1000; // 1 ngày = 86400000 ms
+      } else {
+        modes[j] = "cycle";
+      }
+    } else if (m === 2) {
+      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
+      const first = arr[0][j],
+        second = arr[1][j];
+      if (typeof first === "number" && typeof second === "number") {
+        modes[j] = "number-stepping";
+        steps[j] = second - first;
+      } else if (isValidDate(first) && isValidDate(second)) {
+        modes[j] = "date-stepping";
+        steps[j] = Date.parse(second) - Date.parse(first);
+      } else {
+        modes[j] = "cycle";
+      }
+    } else {
+      // Nếu mảng có >2 hàng
+      const first = arr[0][j],
+        second = arr[1][j],
+        third = arr[2][j];
+      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
+        const step1 = second - first;
+        const step2 = third - second;
+        if (step1 === step2) {
+          modes[j] = "number-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else if (isValidDate(first) && isValidDate(second) && isValidDate(third)) {
+        const step1 = Date.parse(second) - Date.parse(first);
+        const step2 = Date.parse(third) - Date.parse(second);
+        if (step1 === step2) {
+          modes[j] = "date-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else {
+        modes[j] = "cycle";
+      }
+    }
+  }
+
+  // Tạo các dòng mới (thêm n dòng)
+  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu và cộng thêm (i+1)*step
+  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
+  for (let i = n - 1; i >= 0; i--) {
+    const newRow = [];
+    for (let j = 0; j < numCols; j++) {
+      let newValue;
+      switch (modes[j]) {
+        case "number-constant":
+          // Mảng có 1 hàng, số giữ nguyên
+          newValue = arr[0][j];
+          break;
+        case "number-stepping":
+          {
+            // Lấy giá trị cuối của cột j trong mảng ban đầu
+
+            const lastValue = arr[m - 1][j];
+            newValue = lastValue - (i + 1) * steps[j] * -1;
+          }
+          break;
+        case "date-stepping":
+          {
+            // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
+
+            const lastDate = new Date(array[m - 1][j]);
+            const newTime = lastDate.getTime() - (i + 1) * steps[j] * -1;
+            newValue = (0, _moment.default)(new Date(newTime)).format();
+          }
+          break;
+        case "cycle":
+        default:
+          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
+
+          newValue = arr[i % m][j];
+          break;
+      }
+      newRow.push(newValue);
+    }
+    addedRows.push(newRow);
+  }
+  const combined = arr.concat(addedRows);
+  return {
+    combined,
+    addedRows
+  };
+}
 const transformColumns = (cols, convertColumns, t) => {
   // @ts-ignore
   return cols.map(column => {
@@ -1282,4 +1423,58 @@ function isBottomMostInRanges(rowIndex, colIndex, regions) {
 const mergedSets = arr => {
   return new Set(arr.flatMap(set => Array.from(set)));
 };
-exports.mergedSets = mergedSets;
+exports.mergedSets = mergedSets;
+const sortedSetASC = setValue => {
+  const sorted = Array.from(setValue).sort((a, b) => {
+    const [a1, a2] = a.split("-").map(Number);
+    const [b1, b2] = b.split("-").map(Number);
+    return a1 - b1 || a2 - b2;
+  });
+  return new Set(sorted);
+};
+exports.sortedSetASC = sortedSetASC;
+const sortedSetDSC = setValue => {
+  const sorted = Array.from(setValue).sort((a, b) => {
+    const [a1, a2] = a.split("-").map(Number);
+    const [b1, b2] = b.split("-").map(Number);
+    return b1 - a1 || b2 - a2;
+  });
+  return new Set(sorted);
+};
+exports.sortedSetDSC = sortedSetDSC;
+const onAddClassSelectedCell = (selectedCells, id) => {
+  const selectors = Array.from(selectedCells).map(pos => {
+    const [row1, col1] = pos.split('-');
+    return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
+  });
+
+  // const cells = document.querySelectorAll(selectors.join(','));
+
+  const table = document.querySelector(`#${id}`);
+  console.log('table', table);
+  const cells = table?.querySelectorAll(selectors.join(','));
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.add('selected');
+    });
+  }
+};
+exports.onAddClassSelectedCell = onAddClassSelectedCell;
+const onRemoveClassSelectedCell = (selectedCells, id) => {
+  const selectors = Array.from(selectedCells).map(pos => {
+    const [row, col] = pos.split('-');
+    return `[data-row-index="${row}"][data-col-index="${col}"]`;
+  });
+  const table = document.querySelector(`#${id}`);
+  const cells = table?.querySelectorAll(selectors.join(','));
+  // const cells = table?.querySelectorAll(selectors.join(','))
+
+  // const cells = table?.querySelectorAll('.ui-rc-table-cell.selected');
+
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.remove('selected');
+    });
+  }
+};
+exports.onRemoveClassSelectedCell = onRemoveClassSelectedCell;

package/lib/grid-component/number/index.d.ts

@@ -6,5 +6,5 @@ type Props = {
     value: number | string | undefined;
     onChange?: (values: any[]) => void;
 };
-declare const Number: (props: Props) => React.JSX.Element;
-export default Number;
+declare const NumberInput: (props: Props) => React.JSX.Element;
+export default NumberInput;

package/lib/grid-component/number/index.js

@@ -10,7 +10,7 @@ var _rcMasterUi = require("rc-master-ui");
 var _hooks = require("../hooks");
 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; }
-const Number = props => {
+const NumberInput = props => {
   const {
     t,
     value,
@@ -44,4 +44,4 @@ const Number = props => {
     autoFocus: true
   }));
 };
-var _default = exports.default = Number;
+var _default = exports.default = NumberInput;

package/lib/grid-component/styles.scss

@@ -426,6 +426,9 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         &.cell-paste-border-left {
           border-inline-end: 1px dashed #949494;
         }
+        &.cell-paste-border-top {
+          border-bottom: 1px dashed #949494 !important;
+        }
 
         &.cell-border-right {
           border-inline-end: 1px solid $border-selected-color;

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

@@ -801,8 +801,6 @@ const GridEdit = props => {
     };
   }, []);
   const handleMouseDown = (record, row, col, e) => {
-    // setEditingKey('')
-
     if (e.button === 2) {
       e.stopPropagation();
       return;
@@ -851,8 +849,14 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells, ...pastesArray]);
-    setSelectedCells(mergedSet);
+
+    // 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 [row, col] = key.split("-").map(Number);
       // @ts-ignore
@@ -886,7 +890,17 @@ const GridEdit = props => {
     }) => {
       table[row - minRow][col - minCol] = value;
     });
-    const newRange = (0, _hooks.addRows8)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
+    let newRange = {
+      combined: [],
+      addedRows: []
+    };
+    if (rowPasteLast > rowSelectedFirst) {
+      // kéo xuóng
+      newRange = (0, _hooks.addRows8)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
+    } else {
+      // kéo lên
+      newRange = (0, _hooks.addRowsUp)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
+    }
     const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[(0, _hooks.getFirstSelectCell)(pastesArray).row];
     if (!record?.parentId) {
       // Cập nhật data mới
@@ -1049,6 +1063,17 @@ const GridEdit = props => {
       }
       if (row < rowSelectedEnd) {
         // kéo lên trên
+
+        const rowSelectedStart = (0, _hooks.getFirstSelectCell)(selectedCells).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 (col > colEnd) {
         // kéo sang phải
@@ -1153,7 +1178,7 @@ const GridEdit = props => {
       return {
         row,
         col,
-        value: (0, _hooks.flattenData)(childrenColumnName, dataSource)[row][columnKey]
+        value: (0, _hooks.flattenData)(childrenColumnName, dataSource)[row][columnKey] ?? ''
       };
       // return { row, col, value: '' };
     });
@@ -1297,7 +1322,7 @@ const GridEdit = props => {
   };
   const handlePaste = (record, indexCol, rowNumber, e) => {
     // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
-    const pasteData = e.clipboardData.getData("text/plain").trim();
+    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 =>
@@ -1695,7 +1720,9 @@ const GridEdit = props => {
     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';
@@ -1704,15 +1731,20 @@ const GridEdit = props => {
     const cellEnd = (0, _hooks.getLastSelectCell)(selectedCells);
     const cellPasteStart = (0, _hooks.getFirstSelectCell)(pasteCells);
     const cellPasteSEnd = (0, _hooks.getLastSelectCell)(pasteCells);
-    const isPasteBottom = pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row);
+    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 ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` : ''} ${isPasteRight ? `next-cell-paste-border-left` : ''}` : cellClass;
+      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])
@@ -1724,7 +1756,7 @@ const GridEdit = props => {
     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).map((column, colIndex) => {
+  const convertColumns = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
     if (!column?.field && !column?.key) {
       return column;
     }
@@ -1918,6 +1950,10 @@ const GridEdit = props => {
           title: (0, _columns.getValueCell)(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
+          // 'data-tooltip-id': "tooltip-cell-content",
+          // 'data-tooltip-content': 'tooltip-cell-content',
+          // 'data-tooltip-delay-show': 1000,
+          // 'data-tooltip-content': getValueCell(column, record[column.field as any], format),
           editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
           cellEditing,
           t,
@@ -1978,7 +2014,9 @@ const GridEdit = props => {
           // onMouseEnter={(event) => handlePointEnter(event)}
           // onMouseLeave={() => handlePointLeave()}
           ,
-          onMouseDown: () => {
+          onMouseDown: e => {
+            // e.stopPropagation()
+            e.preventDefault();
             setIsPasteDragging(true);
           },
           onDoubleClick: handlePointDoubleClick
@@ -2000,6 +2038,11 @@ const GridEdit = props => {
           ...find
         };
       }
+      if (!find) {
+        return {
+          ...column
+        };
+      }
 
       // Xử lý đệ quy cho children
       if (column.children?.length) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
     "rc-checkbox": "^3.5.0",
     "rc-dropdown": "^4.2.1",
     "rc-field-form": "^2.6.0",
-    "rc-master-ui": "^1.1.23",
+    "rc-master-ui": "^1.1.24",
     "rc-select": "^14.16.3",
     "rc-tooltip": "^6.3.0",
     "rc-tree": "^5.10.1",