es-grid-template 1.9.62 → 1.9.64

package/lib/ali-table/InternalTable.js

@@ -11,6 +11,7 @@ var fusion = _interopRequireWildcard(require("@alifd/next"));
 var _locale = require("rc-master-ui/es/locale");
 var _faker = require("@faker-js/faker");
 var _react = _interopRequireWildcard(require("react"));
+var _usehooksTs = require("usehooks-ts");
 require("./base-table/styles.scss");
 var _utils = require("../table-component/hook/utils");
 var _rcMasterUi = require("rc-master-ui");
@@ -29,9 +30,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("../grid-component/hooks");
 var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
 var _sweetalert = _interopRequireDefault(require("sweetalert2"));
+var _utils2 = require("./utils");
+var _reactNumericComponent = require("react-numeric-component");
+var _moment = _interopRequireDefault(require("moment"));
 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 MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
+const {
+  Paragraph,
+  Title
+} = _rcMasterUi.Typography;
 const InternalTable = props => {
   const {
     t,
@@ -74,6 +82,8 @@ const InternalTable = props => {
     defaultValue,
     commandSettings,
     headerData,
+    format,
+    onCellClick,
     ...rest
   } = props;
   const tableRef = (0, _react.useRef)(null);
@@ -82,6 +92,7 @@ const InternalTable = props => {
   const childrenColumnName = 'children';
   const childrenKey = 'children';
   const [tableLocal] = (0, _locale.useLocale)('Table');
+  const [copiedText, copy] = (0, _usehooksTs.useCopyToClipboard)();
   const tableId = _react.default.useMemo(() => {
     return _faker.faker.string.alpha(20);
   }, []);
@@ -91,6 +102,9 @@ const InternalTable = props => {
   const languages = _react.default.useMemo(() => {
     return (0, _useLocale.getLocales)(lang);
   }, [lang]);
+
+  // const isCut = React.useRef<any>(false);
+
   const getWindowSize = () => {
     const {
       innerWidth,
@@ -115,7 +129,7 @@ const InternalTable = props => {
   const [filterState, setFilterState] = _react.default.useState(undefined);
   const [sortState, setSortState] = _react.default.useState(undefined);
   const columns = _react.default.useMemo(() => {
-    return (0, _utils.sortByType)(propColumns, rowDnd);
+    return (0, _utility.sortByType)(propColumns, rowDnd);
   }, [propColumns, rowDnd]);
   const convertData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
@@ -124,18 +138,19 @@ const InternalTable = props => {
     return (0, _utils.addRowIdArray)(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
   const isDataTree = _react.default.useMemo(() => {
-    return (0, _utils.isTreeArray)(convertData);
-  }, [convertData]);
+    return (0, _utils.isTreeArray)(dataSource);
+  }, [dataSource]);
   const mergedData = _react.default.useMemo(() => {
     const shouldSkip = onFilter && onSorter;
     if (shouldSkip) {
       return convertData;
     }
-
-    // const rs  = filterDataByColumns(convertData, onFilter ? undefined : (filterState ?? defaultFilter), onSorter ? undefined : (sortState ?? defaultSorter), [], ignoreAccents)
     const rss = (0, _utility.filterDataByColumns1)(convertData, onFilter ? undefined : filterState ?? defaultFilter, onSorter ? undefined : sortState ?? defaultSorter, [], ignoreAccents);
     return rss;
   }, [convertData, filterState, ignoreAccents, sortState, onFilter, onSorter, defaultFilter, defaultSorter]);
+  const rowIndexMap = _react.default.useMemo(() => {
+    return (0, _utils.getRowIndexMap)(convertData);
+  }, [convertData]);
   const footerData = _react.default.useMemo(() => {
     if (!summary) {
       return undefined;
@@ -160,15 +175,15 @@ const InternalTable = props => {
     }
     return undefined;
   }, [defaultFilter]);
-
-  // const columnInVisibility = React.useMemo(() => {
-  //   return getInvisibleColumns(columns)
-  // }, [columns])
-
-  const dataIds = _react.default.useMemo(() => mergedData.map(it => it.rowId), [mergedData]);
   const columnVisibility = _react.default.useMemo(() => {
     return (0, _utils.getVisibleFields)(columns);
   }, [columns]);
+  const dataIds = _react.default.useMemo(() => convertData.map(it => it.rowId), [convertData]);
+
+  // const columnVisibility = React.useMemo(() => {
+  //   return getVisibleFields(columns)
+  // }, [columns])
+
   const {
     control,
     handleSubmit,
@@ -199,7 +214,7 @@ const InternalTable = props => {
   }, [onDataChange]);
   const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
-      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...convertData]), (0, _utils.flattenArray)([...callbackData]));
+      const rsFilterData = (0, _utility.updateOrInsert)(convertData, (0, _utils.flattenArray)(callbackData));
       const rs = (0, _utils.unFlattenData)(rsFilterData);
       triggerChangeData(rs, {
         type: 'OnPaste'
@@ -236,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 = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = (0, _utils.updateArrayByKey)(newData, row, rowKey);
       if (index > -1) {
@@ -285,8 +297,7 @@ const InternalTable = props => {
             indexRow,
             rowData: record,
             rowId: key,
-            // rowsData: [...dataSource],
-            rowsData: [...convertData],
+            rowsData: convertData,
             sumValue: []
           }, handleChangeCallback);
         } else {
@@ -299,8 +310,7 @@ const InternalTable = props => {
             indexRow,
             rowData: record,
             rowId: key,
-            // rowsData: [...dataSource],
-            rowsData: [...convertData],
+            rowsData: dataSource,
             sumValue: []
           }, handleChangeCallback);
           onSubmit(record);
@@ -406,6 +416,7 @@ const InternalTable = props => {
     columns,
     mode: sortMultiple !== false ? 'multiple' : 'single',
     dataSource: convertData,
+    rowIndexMap,
     columnResizeMode: 'onChange',
     disableUserSelectWhenResizing: true,
     allowFiltering,
@@ -448,9 +459,12 @@ const InternalTable = props => {
     handleSubmit,
     onSubmit,
     triggerPaste,
+    headerEditAble,
     handleCellChange,
     handleHeaderCellChange,
-    headerData
+    headerData,
+    triggerChangeData,
+    onCellClick
   })).use(_pipeline.features.paginationFeature({
     pagination
   }));
@@ -461,14 +475,42 @@ const InternalTable = props => {
 
   // reorder rows after drag & drop
 
+  const isEditing = _react.default.useMemo(() => {
+    return pipeline.getStateAtKey(_constants.stateKeyIsEditing);
+  }, [pipeline]);
+  const startCell = _react.default.useMemo(() => {
+    return pipeline.getStateAtKey(_constants.stateKeyStartCell);
+  }, [pipeline]);
+  const endCell = _react.default.useMemo(() => {
+    return pipeline.getStateAtKey(_constants.stateKeyEndCell);
+  }, [pipeline]);
+  const leafColumns = _react.default.useMemo(() => {
+    return (0, _utils2.collectNodes)(pipeline.getColumns(), 'leaf-only');
+  }, [pipeline]);
+  const rangeState = _react.default.useMemo(() => {
+    return startCell && endCell ? (0, _utils.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.default.useEffect(() => {
     const handleClickOutside = event => {
       if (!editAble) {
         return;
       }
       const isEditting = pipeline.getStateAtKey(_constants.stateKeyIsEditing);
-      const startCell = pipeline.getStateAtKey(_constants.stateKeyStartCell);
-      const endCell = pipeline.getStateAtKey(_constants.stateKeyEndCell);
       const focusedCell = pipeline.getStateAtKey(_constants.stateKeyFocusedCell);
       const element = event.target;
       const container = document.querySelector(".be-popup-container");
@@ -533,15 +575,11 @@ const InternalTable = props => {
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [tableId, pipeline, editAble, headerEditAble]);
+  }, [tableId, pipeline, editAble, headerEditAble, endCell, startCell]);
   const rowsFocus = _react.default.useMemo(() => {
-    const startCell = pipeline.getStateAtKey(_constants.stateKeyStartCell);
-    const endCell = pipeline.getStateAtKey(_constants.stateKeyEndCell);
-    const allRows = pipeline.getDataSource(); // flat data
-    const rowIndexMap = (0, _utils.getRowIndexMap)(allRows);
     const selectRowIds = startCell && endCell ? (0, _utils.getRowIdsBetween3)(convertData, rowIndexMap, startCell.rowId, endCell.rowId) : [];
     return selectRowIds;
-  }, [convertData, pipeline]);
+  }, [convertData, endCell, rowIndexMap, startCell]);
   function handleDragEnd(event) {
     const {
       active,
@@ -552,7 +590,7 @@ const InternalTable = props => {
 
       const oldIndex = dataIds.indexOf(active.id);
       const newIndex = dataIds.indexOf(over.id);
-      const rs = (0, _sortable.arrayMove)(mergedData, oldIndex, newIndex); // this is just a splice util
+      const rs = (0, _sortable.arrayMove)(dataSource, oldIndex, newIndex); // this is just a splice util
 
       if (rowDnd?.onChange) {
         rowDnd?.onChange({
@@ -568,7 +606,7 @@ const InternalTable = props => {
         toolbar: item
       });
     } else {
-      const filterData = (0, _utils.flattenArray)([...convertData]);
+      const filterData = (0, _utils.flattenArray)(convertData);
       const rs = filterData.filter(it => !rowsFocus.includes(it[rowKey]));
       const newDaa = (0, _utils.unFlattenData)(rs);
       if (commandSettings && commandSettings.confirmDialog) {
@@ -587,7 +625,7 @@ const InternalTable = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([...newDaa], {
+            triggerChangeData?.(newDaa, {
               type: 'DELETE_ROWS',
               row: rowsFocus.length
             });
@@ -595,7 +633,7 @@ const InternalTable = props => {
         });
       } else {
         // không hiện dialog  
-        triggerChangeData?.([...newDaa], {
+        triggerChangeData?.(newDaa, {
           type: 'DELETE_ROWS',
           row: rowsFocus.length
         });
@@ -668,7 +706,7 @@ const InternalTable = props => {
     // không tính tree
 
     // Cập nhật data mới
-    const newData = (0, _utils.flattenArray)([...convertData]);
+    const newData = (0, _utils.flattenArray)(convertData);
     const focusedCell = pipeline.getStateAtKey(_constants.stateKeyFocusedCell);
     const duplicatedItem = newData.find(it => it.rowId === focusedCell?.rowId);
     const duplicatedItems = [{
@@ -683,7 +721,7 @@ const InternalTable = props => {
     // const insertAfter = Math.max(...rowsFocus)
     const insertAfter = newData.findIndex(it => it[rowKey] === focusedCell?.rowId);
     const rsFilter = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
-    const rs = (0, _utils.updateOrInsert)(convertData, rsFilter);
+    const rs = (0, _utility.updateOrInsert)(convertData, rsFilter);
     triggerChangeData?.(rs, {
       type: 'DUPLICATE'
     });
@@ -705,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 ? {
@@ -730,7 +768,7 @@ const InternalTable = props => {
           row: n
         });
       } else {
-        const newData = [...convertData];
+        const newData = convertData;
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
         const newRows = Array.from({
           length: n
@@ -746,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 = {
@@ -769,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);
@@ -780,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 ? {
@@ -805,7 +843,7 @@ const InternalTable = props => {
           row: n
         });
       } else {
-        const newData = [...convertData];
+        const newData = convertData;
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
         const newRows = Array.from({
           length: n
@@ -827,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 = {
@@ -852,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 = {
@@ -905,6 +942,415 @@ const InternalTable = props => {
     //   setInnerExpandedKeys(newExpandedKeys)
     // }
   }, [convertData, defaultValue, pipeline, triggerChangeData]);
+
+  // Copy
+
+  const copySelectionToClipboard = _react.default.useCallback(() => {
+    if (!startCell || !endCell) {
+      return;
+    }
+    const allRows = dataSource;
+    const rowIds = (0, _utils.getRowIdsBetween3)(convertData, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
+    const colIds = (0, _utils.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.default.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 = (0, _utils.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 ((0, _utils.isEditable)(col, row)) {
+                let newValue = '';
+                if (col.type === 'number') {
+                  newValue = 0;
+                }
+                if (col.type === 'boolean' || col.type === 'checkbox') {
+                  newValue = false;
+                }
+                const cellEditType = (0, _hooks.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 = (0, _utils.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.default.useCallback(pasteData => {
+    if (!startCell) {
+      return;
+    }
+    const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
+    const allRows = convertData;
+    const allCols = (0, _utils2.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 = (0, _utils.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 = (0, _utils.newGuid)();
+          const defaultRowValue = (0, _utils.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 ((0, _utils.isFormattedNumber)(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
+                const colFormat = typeof columnOri.format === 'function' ? columnOri.format(row) : columnOri.format;
+                const valuePasteFormat = (0, _utils.detectSeparators)(cellValue.trim());
+                const cellFormat = (0, _hooks.getFormat)(colFormat, format);
+                const thousandSeparator = valuePasteFormat?.thousandSeparator;
+                const decimalSeparator = valuePasteFormat?.decimalSeparator;
+                const dec = cellFormat?.decimalScale;
+                const numericFormatProps = {
+                  thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+                  decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+                  allowNegative: cellFormat?.allowNegative ?? true,
+                  prefix: cellFormat?.prefix,
+                  suffix: cellFormat?.suffix,
+                  decimalScale: dec,
+                  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+                };
+                const val = (0, _reactNumericComponent.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 = (0, _utils.isDateValue)(cellValue.trim());
+              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(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 = (0, _utility.updateOrInsert)(convertData, newData);
+      const rs = (0, _utils.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: (0, _utils.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 ((0, _utils.isFormattedNumber)(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
+                const colFormat = typeof columnOri.format === 'function' ? columnOri.format(row) : columnOri.format;
+                const valuePasteFormat = (0, _utils.detectSeparators)(cellValue.trim());
+                const cellFormat = (0, _hooks.getFormat)(colFormat, format);
+                const thousandSeparator = valuePasteFormat?.thousandSeparator;
+                const decimalSeparator = valuePasteFormat?.decimalSeparator;
+                const dec = cellFormat?.decimalScale;
+                const numericFormatProps = {
+                  thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+                  decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+                  allowNegative: cellFormat?.allowNegative ?? true,
+                  prefix: cellFormat?.prefix,
+                  suffix: cellFormat?.suffix,
+                  decimalScale: dec,
+                  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+                };
+                const val = (0, _reactNumericComponent.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 = (0, _utils.isDateValue)(cellValue.trim());
+              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(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 = (0, _utils.updateArrayByKey)(convertData, newRowData, rowKey);
+      triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
+    }
+  }, [convertData, defaultValue, format, onCellPaste?.maxRowsPaste, pipeline, rowIndexMap, startCell, triggerPaste]);
+  const handlePasteToTable = _react.default.useCallback((pasteData, e) => {
+    if (!startCell) return;
+    const rowsPasted = (0, _utils.parseExcelClipboard)(e);
+    if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
+      // bật popup thông báo
+
+      _rcMasterUi.Modal.confirm({
+        content: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.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.default.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.default.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.default.useMemo(() => {
     // Chưa có dòng| ô được chọn
     if (!rowsFocus || rowsFocus.length === 0) {
@@ -1493,7 +1939,7 @@ const InternalTable = props => {
     // {...pipeline.getProps()}
     ,
     originData: convertData,
-    dataSource: dataSource,
+    dataSource: mergedData,
     originColumns: columns,
     groupColumns: groupColumns,
     setVisibleKeys: setVisibleKeys,