es-grid-template 1.9.62 → 1.9.64

package/es/ali-table/InternalTable.js

@@ -4,13 +4,19 @@ import * as fusion from '@alifd/next';
 import { useLocale } from "rc-master-ui/es/locale";
 import { faker } from "@faker-js/faker";
 import React, { Fragment, useRef } from "react";
+import { useCopyToClipboard } from 'usehooks-ts';
 import "./base-table/styles.scss";
-import { addRowIdArray, findItemByKey, flatColumns2, flattenArray, flattenData,
+import { addRowIdArray, checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flatColumns2, flattenArray, flattenData, getColIdsBetween1,
 // getAllRowKey,
-getDefaultValue, getRowIdsBetween3, getRowIndexMap,
+getDefaultValue, getRowIdsBetween3, getRowIndexMap, getSelectedCellMatrix1, getVisibleFields,
 // getInvisibleColumns, 
-getVisibleFields, groupArrayByColumns, isTreeArray, newGuid, revertConvertFilters, sortByType, sumFields, unFlattenData, updateArrayByKey, updateOrInsert } from "../table-component/hook/utils";
-import { CustomProvider, ConfigProvider, Modal, Button, Dropdown } from 'rc-master-ui';
+// getVisibleFields,
+groupArrayByColumns, isDateValue, isEditable, isEmpty, isFormattedNumber, isTreeArray, newGuid, parseExcelClipboard, revertConvertFilters,
+// sortByType,
+sumFields, unFlattenData, updateArrayByKey
+// updateOrInsert
+} from "../table-component/hook/utils";
+import { CustomProvider, ConfigProvider, Modal, Button, Dropdown, Typography } from 'rc-master-ui';
 import { getLocale, getLocales } from "../locale/useLocale";
 import { TableContext } from "./useContext";
 import Grid from "./Grid";
@@ -20,13 +26,20 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { arrayMove } from "@dnd-kit/sortable";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { filterDataByColumns1 } from "./utils/utility";
+import { filterDataByColumns1, sortByType, updateOrInsert } from "./utils/utility";
 import { stateKeyEndCell, stateKeyFocusedCell, stateKeyIsEditing, stateKeyStartCell } from "./utils/constants";
 import classNames from "classnames";
-import { getToolbarTemplate } from "../grid-component/hooks";
+import { getEditType, getFormat, getToolbarTemplate } from "../grid-component/hooks";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
+import { collectNodes } from "./utils";
+import { removeNumericFormat } from "react-numeric-component";
+import moment from "moment";
 const MySwal = withReactContent(Swal);
+const {
+  Paragraph,
+  Title
+} = Typography;
 const InternalTable = props => {
   const {
     t,
@@ -69,6 +82,8 @@ const InternalTable = props => {
     defaultValue,
     commandSettings,
     headerData,
+    format,
+    onCellClick,
     ...rest
   } = props;
   const tableRef = useRef(null);
@@ -77,6 +92,7 @@ const InternalTable = props => {
   const childrenColumnName = 'children';
   const childrenKey = 'children';
   const [tableLocal] = useLocale('Table');
+  const [copiedText, copy] = useCopyToClipboard();
   const tableId = React.useMemo(() => {
     return faker.string.alpha(20);
   }, []);
@@ -86,6 +102,9 @@ const InternalTable = props => {
   const languages = React.useMemo(() => {
     return getLocales(lang);
   }, [lang]);
+
+  // const isCut = React.useRef<any>(false);
+
   const getWindowSize = () => {
     const {
       innerWidth,
@@ -119,18 +138,19 @@ const InternalTable = props => {
     return addRowIdArray(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
   const isDataTree = React.useMemo(() => {
-    return isTreeArray(convertData);
-  }, [convertData]);
+    return isTreeArray(dataSource);
+  }, [dataSource]);
   const mergedData = React.useMemo(() => {
     const shouldSkip = onFilter && onSorter;
     if (shouldSkip) {
       return convertData;
     }
-
-    // const rs  = filterDataByColumns(convertData, onFilter ? undefined : (filterState ?? defaultFilter), onSorter ? undefined : (sortState ?? defaultSorter), [], ignoreAccents)
     const rss = filterDataByColumns1(convertData, onFilter ? undefined : filterState ?? defaultFilter, onSorter ? undefined : sortState ?? defaultSorter, [], ignoreAccents);
     return rss;
   }, [convertData, filterState, ignoreAccents, sortState, onFilter, onSorter, defaultFilter, defaultSorter]);
+  const rowIndexMap = React.useMemo(() => {
+    return getRowIndexMap(convertData);
+  }, [convertData]);
   const footerData = React.useMemo(() => {
     if (!summary) {
       return undefined;
@@ -155,15 +175,15 @@ const InternalTable = props => {
     }
     return undefined;
   }, [defaultFilter]);
-
-  // const columnInVisibility = React.useMemo(() => {
-  //   return getInvisibleColumns(columns)
-  // }, [columns])
-
-  const dataIds = React.useMemo(() => mergedData.map(it => it.rowId), [mergedData]);
   const columnVisibility = React.useMemo(() => {
     return getVisibleFields(columns);
   }, [columns]);
+  const dataIds = React.useMemo(() => convertData.map(it => it.rowId), [convertData]);
+
+  // const columnVisibility = React.useMemo(() => {
+  //   return getVisibleFields(columns)
+  // }, [columns])
+
   const {
     control,
     handleSubmit,
@@ -194,7 +214,7 @@ const InternalTable = props => {
   }, [onDataChange]);
   const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
-      const rsFilterData = updateOrInsert(flattenArray([...convertData]), flattenArray([...callbackData]));
+      const rsFilterData = updateOrInsert(convertData, flattenArray(callbackData));
       const rs = unFlattenData(rsFilterData);
       triggerChangeData(rs, {
         type: 'OnPaste'
@@ -231,13 +251,10 @@ const InternalTable = props => {
   }, [onCellPaste, convertData, triggerChangeData]);
   const onSubmit = formData => {
     try {
-      // const record = (await form.validateFields()) as RecordType;
       const row = {
         ...formData
       };
-
-      // const newData = [...dataSource]
-      const newData = [...convertData];
+      const newData = convertData;
       const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = updateArrayByKey(newData, row, rowKey);
       if (index > -1) {
@@ -280,8 +297,7 @@ const InternalTable = props => {
             indexRow,
             rowData: record,
             rowId: key,
-            // rowsData: [...dataSource],
-            rowsData: [...convertData],
+            rowsData: convertData,
             sumValue: []
           }, handleChangeCallback);
         } else {
@@ -294,8 +310,7 @@ const InternalTable = props => {
             indexRow,
             rowData: record,
             rowId: key,
-            // rowsData: [...dataSource],
-            rowsData: [...convertData],
+            rowsData: dataSource,
             sumValue: []
           }, handleChangeCallback);
           onSubmit(record);
@@ -401,6 +416,7 @@ const InternalTable = props => {
     columns,
     mode: sortMultiple !== false ? 'multiple' : 'single',
     dataSource: convertData,
+    rowIndexMap,
     columnResizeMode: 'onChange',
     disableUserSelectWhenResizing: true,
     allowFiltering,
@@ -443,9 +459,12 @@ const InternalTable = props => {
     handleSubmit,
     onSubmit,
     triggerPaste,
+    headerEditAble,
     handleCellChange,
     handleHeaderCellChange,
-    headerData
+    headerData,
+    triggerChangeData,
+    onCellClick
   })).use(features.paginationFeature({
     pagination
   }));
@@ -456,14 +475,42 @@ const InternalTable = props => {
 
   // reorder rows after drag & drop
 
+  const isEditing = React.useMemo(() => {
+    return pipeline.getStateAtKey(stateKeyIsEditing);
+  }, [pipeline]);
+  const startCell = React.useMemo(() => {
+    return pipeline.getStateAtKey(stateKeyStartCell);
+  }, [pipeline]);
+  const endCell = React.useMemo(() => {
+    return pipeline.getStateAtKey(stateKeyEndCell);
+  }, [pipeline]);
+  const leafColumns = React.useMemo(() => {
+    return collectNodes(pipeline.getColumns(), 'leaf-only');
+  }, [pipeline]);
+  const rangeState = React.useMemo(() => {
+    return startCell && endCell ? getSelectedCellMatrix1(convertData, leafColumns, startCell, endCell) : undefined;
+  }, [convertData, endCell, leafColumns, startCell]);
+
+  // const rowIds = React.useMemo(() => {
+
+  //   return getKeys(convertData, 'rowId')
+
+  // }, [convertData])
+
+  // const colIds = React.useMemo(() => {
+
+  //   const leafColumns = collectNodes(pipeline.getColumns(), 'leaf-only')
+
+  //   return getKeys(leafColumns, 'field')
+
+  // }, [pipeline])
+
   React.useEffect(() => {
     const handleClickOutside = event => {
       if (!editAble) {
         return;
       }
       const isEditting = pipeline.getStateAtKey(stateKeyIsEditing);
-      const startCell = pipeline.getStateAtKey(stateKeyStartCell);
-      const endCell = pipeline.getStateAtKey(stateKeyEndCell);
       const focusedCell = pipeline.getStateAtKey(stateKeyFocusedCell);
       const element = event.target;
       const container = document.querySelector(".be-popup-container");
@@ -528,15 +575,11 @@ const InternalTable = props => {
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [tableId, pipeline, editAble, headerEditAble]);
+  }, [tableId, pipeline, editAble, headerEditAble, endCell, startCell]);
   const rowsFocus = React.useMemo(() => {
-    const startCell = pipeline.getStateAtKey(stateKeyStartCell);
-    const endCell = pipeline.getStateAtKey(stateKeyEndCell);
-    const allRows = pipeline.getDataSource(); // flat data
-    const rowIndexMap = getRowIndexMap(allRows);
     const selectRowIds = startCell && endCell ? getRowIdsBetween3(convertData, rowIndexMap, startCell.rowId, endCell.rowId) : [];
     return selectRowIds;
-  }, [convertData, pipeline]);
+  }, [convertData, endCell, rowIndexMap, startCell]);
   function handleDragEnd(event) {
     const {
       active,
@@ -547,7 +590,7 @@ const InternalTable = props => {
 
       const oldIndex = dataIds.indexOf(active.id);
       const newIndex = dataIds.indexOf(over.id);
-      const rs = arrayMove(mergedData, oldIndex, newIndex); // this is just a splice util
+      const rs = arrayMove(dataSource, oldIndex, newIndex); // this is just a splice util
 
       if (rowDnd?.onChange) {
         rowDnd?.onChange({
@@ -563,7 +606,7 @@ const InternalTable = props => {
         toolbar: item
       });
     } else {
-      const filterData = flattenArray([...convertData]);
+      const filterData = flattenArray(convertData);
       const rs = filterData.filter(it => !rowsFocus.includes(it[rowKey]));
       const newDaa = unFlattenData(rs);
       if (commandSettings && commandSettings.confirmDialog) {
@@ -582,7 +625,7 @@ const InternalTable = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([...newDaa], {
+            triggerChangeData?.(newDaa, {
               type: 'DELETE_ROWS',
               row: rowsFocus.length
             });
@@ -590,7 +633,7 @@ const InternalTable = props => {
         });
       } else {
         // không hiện dialog  
-        triggerChangeData?.([...newDaa], {
+        triggerChangeData?.(newDaa, {
           type: 'DELETE_ROWS',
           row: rowsFocus.length
         });
@@ -663,7 +706,7 @@ const InternalTable = props => {
     // không tính tree
 
     // Cập nhật data mới
-    const newData = flattenArray([...convertData]);
+    const newData = flattenArray(convertData);
     const focusedCell = pipeline.getStateAtKey(stateKeyFocusedCell);
     const duplicatedItem = newData.find(it => it.rowId === focusedCell?.rowId);
     const duplicatedItems = [{
@@ -700,7 +743,7 @@ const InternalTable = props => {
       if (!record?.parentId) {
         // Cập nhật data mới
 
-        const newData = [...convertData];
+        const newData = convertData;
         const newRows = Array.from({
           length: n
         }).map(() => defaultRowValue ? {
@@ -725,7 +768,7 @@ const InternalTable = props => {
           row: n
         });
       } else {
-        const newData = [...convertData];
+        const newData = convertData;
         const parent = findItemByKey(newData, rowKey, record.parentId);
         const newRows = Array.from({
           length: n
@@ -741,7 +784,7 @@ const InternalTable = props => {
         });
 
         // Cập nhật childData mới
-        const childData = parent?.children ? [...parent.children] : [];
+        const childData = parent?.children ? parent.children : [];
         const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
         childData.splice(index, 0, ...newRows);
         const newRowData = {
@@ -764,7 +807,7 @@ const InternalTable = props => {
 
     // const insertAfter = Math.max(...rowsFocus)
 
-    // const record: RecordType = flattenData(childrenColumnName, dataSource)[insertAfter]
+    // const record: RecordType = flattenData(childrenColumnName, convertData)[insertAfter]
 
     // const record: any = table.getRowModel().rows.find((it) => it.id === focusedCell?.rowId)?.original
     const record = convertData.find(it => it.rowId === focusedCell?.rowId);
@@ -775,7 +818,7 @@ const InternalTable = props => {
     } else {
       if (!record?.parentId) {
         // Cập nhật data mới
-        const newData = [...convertData];
+        const newData = convertData;
         const newRows = Array.from({
           length: n
         }).map(() => defaultRowValue ? {
@@ -800,7 +843,7 @@ const InternalTable = props => {
           row: n
         });
       } else {
-        const newData = [...convertData];
+        const newData = convertData;
         const parent = findItemByKey(newData, rowKey, record.parentId);
         const newRows = Array.from({
           length: n
@@ -822,7 +865,7 @@ const InternalTable = props => {
         // setMergedFilterKeys?.(rs)
 
         // Cập nhật childData mới
-        const childData = parent?.children ? [...parent.children] : [];
+        const childData = parent?.children ? parent.children : [];
         const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
         childData.splice(index + 1, 0, ...newRows);
         const newRowData = {
@@ -847,8 +890,7 @@ const InternalTable = props => {
         toolbar: item
       });
     } else {
-      // const newData = [...dataSource]
-      const newData = [...convertData];
+      const newData = convertData;
       let newElement;
       if (!record?.children || record?.children && record.children.length === 0) {
         newElement = {
@@ -900,6 +942,415 @@ const InternalTable = props => {
     //   setInnerExpandedKeys(newExpandedKeys)
     // }
   }, [convertData, defaultValue, pipeline, triggerChangeData]);
+
+  // Copy
+
+  const copySelectionToClipboard = React.useCallback(() => {
+    if (!startCell || !endCell) {
+      return;
+    }
+    const allRows = dataSource;
+    const rowIds = getRowIdsBetween3(convertData, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
+    const colIds = getColIdsBetween1(leafColumns, startCell?.colId ?? '', endCell?.colId ?? '');
+    const dataToCopy = [];
+    rowIds.forEach(rowId => {
+      const row = allRows.find(r => r.rowId === rowId);
+      if (!row) return;
+      const rowData = [];
+      colIds.forEach(colId => {
+        const value = row[colId];
+        rowData.push(value !== undefined ? String(value) : '');
+      });
+      dataToCopy.push(rowData);
+    });
+
+    // Convert to TSV string
+    const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
+    copy(tsv).then(() => {}).catch(() => {});
+  }, [startCell, endCell, dataSource, convertData, rowIndexMap, leafColumns, copy]);
+  React.useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !isEditing) {
+        e.preventDefault();
+        copySelectionToClipboard();
+      }
+      if (e.ctrlKey && e.key === 'x' && startCell && endCell && !isEditing) {
+        e.preventDefault();
+        if (startCell && endCell) {
+          const tmpData = flattenArray(convertData);
+          const rs = tmpData.map((row, index) => {
+            if (!rangeState?.rowRange.includes(row.rowId)) {
+              return row;
+            }
+            const updatedRow = {
+              ...row
+            };
+            for (const field of rangeState.colRange) {
+              const col = leafColumns.find(it => it.field === field);
+              const columnIndex = leafColumns.findIndex(it => it.field === field);
+              if (isEditable(col, row)) {
+                let newValue = '';
+                if (col.type === 'number') {
+                  newValue = 0;
+                }
+                if (col.type === 'boolean' || col.type === 'checkbox') {
+                  newValue = false;
+                }
+                const cellEditType = getEditType(col, row);
+                if (col.type === 'date' || col.type === 'datetime' || col.type === 'time' || col.type === 'month' || col.type === 'week' || col.type === 'year' || col.type === 'quarter' || cellEditType === 'asyncSelect' || cellEditType === 'select' || cellEditType === 'treeSelect' || cellEditType === 'selectTable') {
+                  newValue = undefined;
+                }
+                updatedRow[col.field] = newValue;
+                handleCellChange({
+                  key: row[rowKey],
+                  field: col.field,
+                  record: updatedRow,
+                  prevState: row[col.field],
+                  newState: newValue,
+                  option: '',
+                  indexCol: columnIndex,
+                  indexRow: index,
+                  type: e.key
+                });
+              }
+            }
+            return updatedRow;
+          });
+          const newData = unFlattenData(rs);
+          triggerChangeData?.(newData, {
+            type: 'DELETE_CONTENT'
+          });
+        }
+        copySelectionToClipboard();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [startCell, endCell, copySelectionToClipboard, isEditing, convertData, triggerChangeData, leafColumns, handleCellChange, rangeState?.rowRange, rangeState?.colRange]);
+
+  // Copy
+
+  // paste
+
+  const handlePasted = React.useCallback(pasteData => {
+    if (!startCell) {
+      return;
+    }
+    const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
+    const allRows = convertData;
+    const allCols = collectNodes(pipeline.getColumns(), 'leaf-only');
+    const startRowIdx = rowIndexMap.get(startCell.rowId);
+    const startColIdx = allCols.findIndex(c => c.field === startCell.colId);
+
+    // const record: any  = allRows[startRowIdx].original
+
+    // const record: any = table.getRow(startCell.rowId).original
+    const recordIndex = rowIndexMap.get(startCell.rowId);
+    const row = recordIndex ? allRows[recordIndex] : {};
+    if (!row.parentId) {
+      // Cập nhật data mới
+      const newData = flattenArray(convertData);
+
+      // Lấy vị trí bắt đầu
+
+      // const startRow = newData.findIndex((it) => it[rowKey as any] === record[rowKey])
+      const startRow = startRowIdx;
+      const startCol = startColIdx;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
+
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= newData.length) {
+          const newID = newGuid();
+          const defaultRowValue = getDefaultValue(defaultValue);
+          newData.push(defaultValue ? {
+            ...defaultRowValue,
+            id: undefined,
+            rowId: newID
+          } : {
+            id: undefined,
+            rowId: newID
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= allCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          const columnOri = allCols[targetCol];
+          const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(newData[targetRow]) : columnOri.editEnable;
+          if (isEdit) {
+            const columnKey = allCols[targetCol].field;
+            if (columnOri.type === 'number') {
+              if (cellValue.trim() === '') {
+                newData[targetRow] = {
+                  ...newData[targetRow],
+                  [columnKey]: null
+                };
+              }
+              if (isFormattedNumber(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
+                const colFormat = typeof columnOri.format === 'function' ? columnOri.format(row) : columnOri.format;
+                const valuePasteFormat = detectSeparators(cellValue.trim());
+                const cellFormat = getFormat(colFormat, format);
+                const thousandSeparator = valuePasteFormat?.thousandSeparator;
+                const decimalSeparator = valuePasteFormat?.decimalSeparator;
+                const dec = cellFormat?.decimalScale;
+                const numericFormatProps = {
+                  thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+                  decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+                  allowNegative: cellFormat?.allowNegative ?? true,
+                  prefix: cellFormat?.prefix,
+                  suffix: cellFormat?.suffix,
+                  decimalScale: dec,
+                  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+                };
+                const val = removeNumericFormat(cellValue.trim(), undefined, numericFormatProps);
+                newData[targetRow] = {
+                  ...newData[targetRow],
+                  [columnKey]: Number(val)
+                };
+              }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = isDateValue(cellValue.trim());
+              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim()).format() : null;
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: date
+              };
+            } else {
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: cellValue.trim()
+              };
+            }
+            pastedColumns.add(columnKey);
+          }
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      const rsFilterData = updateOrInsert(convertData, newData);
+      const rs = unFlattenData(rsFilterData);
+      triggerPaste?.(pastedRows, pastedColumnsArray, rs, []);
+    } else {
+      // const parent = findItemByKey(convertData, rowKey as any, record.parentId)
+      const parent = row.getParentRow()?.original;
+
+      // Cập nhật childData mới
+      const childData = parent?.children ? [...parent.children] : [];
+
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = childData.findIndex(it => it[rowKey] === row[rowKey]);
+      const startCol = startColIdx;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
+
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= childData.length) {
+          childData.push({
+            id: undefined,
+            rowId: newGuid(),
+            parentId: parent[rowKey ?? 'id']
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= allCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          const columnTarget = allCols[targetCol];
+          const columnOri = columnTarget.columnDef.meta ?? {};
+          const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(childData[targetRow]) : columnOri.editEnable;
+          if (isEdit) {
+            const columnKey = allCols[targetCol].id;
+            if (columnOri.type === 'number') {
+              if (cellValue.trim() === '') {
+                childData[targetRow] = {
+                  ...childData[targetRow],
+                  [columnKey]: null
+                };
+              }
+              if (isFormattedNumber(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
+                const colFormat = typeof columnOri.format === 'function' ? columnOri.format(row) : columnOri.format;
+                const valuePasteFormat = detectSeparators(cellValue.trim());
+                const cellFormat = getFormat(colFormat, format);
+                const thousandSeparator = valuePasteFormat?.thousandSeparator;
+                const decimalSeparator = valuePasteFormat?.decimalSeparator;
+                const dec = cellFormat?.decimalScale;
+                const numericFormatProps = {
+                  thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+                  decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+                  allowNegative: cellFormat?.allowNegative ?? true,
+                  prefix: cellFormat?.prefix,
+                  suffix: cellFormat?.suffix,
+                  decimalScale: dec,
+                  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+                };
+                const val = removeNumericFormat(cellValue.trim(), undefined, numericFormatProps);
+                childData[targetRow] = {
+                  ...childData[targetRow],
+                  [columnKey]: Number(val)
+                };
+              }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = isDateValue(cellValue.trim());
+              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim()).format() : null;
+              childData[targetRow] = {
+                ...childData[targetRow],
+                [columnKey]: date
+              };
+            } else {
+              childData[targetRow] = {
+                ...childData[targetRow],
+                [columnKey]: cellValue.trim()
+              };
+            }
+            pastedColumns.add(columnKey);
+          }
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(childData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      const newRowData = {
+        ...parent,
+        children: childData
+      }; // item đã được filter
+
+      const newDataSource = updateArrayByKey(convertData, newRowData, rowKey);
+      triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
+    }
+  }, [convertData, defaultValue, format, onCellPaste?.maxRowsPaste, pipeline, rowIndexMap, startCell, triggerPaste]);
+  const handlePasteToTable = React.useCallback((pasteData, e) => {
+    if (!startCell) return;
+    const rowsPasted = parseExcelClipboard(e);
+    if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
+      // bật popup thông báo
+
+      Modal.confirm({
+        content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, {
+          style: {
+            marginBottom: '.25rem',
+            fontSize: 14
+          }
+        }, "D\u1EEF li\u1EC7u sao ch\xE9p v\u01B0\u1EE3t qu\xE1 s\u1ED1 d\xF2ng cho ph\xE9p (", onCellPaste?.maxRowsPaste ?? 200, " d\xF2ng).Ph\u1EA7n m\u1EC1n s\u1EBD ch\u1EC9 l\u1EA5y (", onCellPaste?.maxRowsPaste ?? 200, " d\xF2ng \u0111\u1EA7u ti\xEAn."), /*#__PURE__*/React.createElement(Title, {
+          level: 5,
+          style: {
+            marginTop: '.75rem'
+          }
+        }, "B\u1EA1n c\xF3 mu\u1ED1n ti\u1EBFp t\u1EE5c sao ch\xE9p kh\xF4ng?")),
+        centered: true,
+        className: 'be-popup-container',
+        onOk: () => {
+          handlePasted(rowsPasted);
+        }
+      });
+    } else {
+      handlePasted(rowsPasted);
+    }
+  }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
+
+  // const handleDeleteContent = () => {
+
+  //   if (startCell && endCell) {
+
+  //     const tmpData = flattenArray([...convertData])
+
+  //     const rs = tmpData.map((row, index: number) => {
+
+  //       if (!rangeState?.rowRange.includes(row.rowId)) {
+  //         return row
+  //       }
+
+  //       const updatedRow = { ...row }
+
+  //       for (const colId of rangeState.colRange) {
+
+  //         const column = leafColumns.find((it) => it.field === colId)
+  //         const columnIndex = leafColumns.findIndex((it) => it.field === colId)
+
+  //         if (isEditable(column as any, row)) {
+
+  //           let newValue: any = ''
+
+  //           if (column.type === 'number') {
+  //             newValue = 0
+  //           }
+
+  //           if (column.type === 'boolean' || column.type === 'checkbox') {
+  //             newValue = false
+  //           }
+
+  //           const editType = getEditType(column as any, row)
+
+  //           if (column.type === 'date' ||
+  //             column.type === 'datetime' ||
+  //             column.type === 'time' ||
+  //             column.type === 'month' ||
+  //             column.type === 'week' ||
+  //             column.type === 'year' ||
+  //             column.type === 'quarter' ||
+  //             editType === 'asyncSelect' ||
+  //             editType === 'select' ||
+  //             editType === 'treeSelect' ||
+  //             editType === 'selectTable'
+  //           ) {
+  //             newValue = undefined
+  //           }
+
+  //           updatedRow[colId] = newValue
+
+  //           handleCellChange({
+  //             key: row[rowKey] as any,
+  //             field: column.field ?? column.dataIndex as any,
+  //             record: updatedRow,
+  //             prevState: row[column.field],
+  //             newState: newValue,
+  //             option: '',
+  //             indexCol: columnIndex,
+  //             indexRow: index,
+  //             type: 'blur'
+  //           }
+  //           )
+
+  //         }
+  //       }
+
+  //       return updatedRow;
+  //     })
+
+  //     const newData = unFlattenData(rs)
+
+  //     triggerChangeData?.([...newData], { type: 'DELETE_CONTENT' })
+
+  //   }
+
+  // }
+
+  React.useEffect(() => {
+    const handlePaste = e => {
+      if (startCell && !isEditing) {
+        e.preventDefault(); // Chặn hành vi mặc định
+        const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
+        handlePasteToTable(clipboardText, e);
+      }
+    };
+    document.addEventListener('paste', handlePaste);
+    return () => document.removeEventListener('paste', handlePaste);
+  }, [startCell, endCell, handlePasteToTable, isEditing, copiedText]);
+
+  // Paste
+
   const toolbarItemsBottom = React.useMemo(() => {
     // Chưa có dòng| ô được chọn
     if (!rowsFocus || rowsFocus.length === 0) {
@@ -1488,7 +1939,7 @@ const InternalTable = props => {
     // {...pipeline.getProps()}
     ,
     originData: convertData,
-    dataSource: dataSource,
+    dataSource: mergedData,
     originColumns: columns,
     groupColumns: groupColumns,
     setVisibleKeys: setVisibleKeys,