es-grid-template 1.9.57 → 1.9.58

package/es/grid-component/type.d.ts

@@ -811,6 +811,7 @@ export type RangeState = {
     endColIndex: number | undefined;
     rowIds: string[];
     colIds: string[];
+    type?: string;
 };
 export type Sorter = {
     columnKey: string;

package/es/group-component/hook/utils.d.ts

@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth">);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/body/TableBodyCellEdit.js

@@ -1,6 +1,6 @@
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getEditType, getFormat, getNextEditableColumn, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getDragRightData, getEditType, getFormat, getNextEditableColumn, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
@@ -195,6 +195,7 @@ const TableBodyCellEdit = props => {
     setFocusedCell,
     setEditingKey,
     setRangeState,
+    rangePasteState,
     setRangePasteState,
     endCell,
     setEndCell,
@@ -317,7 +318,8 @@ const TableBodyCellEdit = props => {
     const colPasteds = getColIdsBetween(table, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
     const rowSelectIds = getRowIdsBetween(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
     const colSelectIds = getColIdsBetween(table, startCell?.colId ?? '', endCell?.colId ?? '');
-    const dataSelected = [];
+    const dataSelected = []; // data được copy
+
     rowSelectIds.forEach(rowId => {
       const row = allRows.find(r => r.id === rowId);
       if (!row) return;
@@ -331,49 +333,104 @@ const TableBodyCellEdit = props => {
     });
     const copyRows = flattenData('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
     let newRange;
-    if ((startRowIndex ?? 0) < (pasteRangeState.startRowIndex ?? 0)) {
+    if (pasteState.type === 'down') {
       // kéo xuóng
       setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell));
       newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowPasteIds.length) : addRowsDown(dataSelected, rowPasteIds.length);
-    } else {
+    } else if (pasteState.type === 'up') {
       // kéo lên
       setStartCell?.(endCell);
       setRangeState?.(getSelectedCellMatrix(table, endCell, endPasteCell));
       newRange = ctrlKey ? addRowsUpWithCtrl(dataSelected, rowPasteIds.length) : addRowsUp(dataSelected, rowPasteIds.length);
+    } else if (pasteState.type === 'right') {
+      // kéo phải
+      setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell));
+      // newRange = { addedRows: [], combined: [] }
+      // newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowPasteIds.length) : addRowsDown(dataSelected, rowPasteIds.length)
+      newRange = getDragRightData({
+        colPasteds,
+        colSelectIds,
+        copyRows,
+        rowSelectIds
+      });
+    } else if (pasteState.type === 'left') {
+      // kéo trái
+      setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell));
+      // newRange = { addedRows: [], combined: [] }
+      // newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowPasteIds.length) : addRowsDown(dataSelected, rowPasteIds.length)
+      newRange = getDragRightData({
+        colPasteds,
+        colSelectIds,
+        copyRows,
+        rowSelectIds
+      });
     }
 
     // Cập nhật data mới
     const newData = flattenArray([...dataSource]);
     const pastedRows = [];
-    newRange.addedRows.forEach((rowValues, rowIndex1) => {
-      const targetRow = pasteState.startRowIndex + rowIndex1;
+    if (pasteState.type === 'down' || pasteState.type === 'up') {
+      newRange.addedRows.forEach((rowValues, rowIndex1) => {
+        const targetRow = pasteState.startRowIndex + rowIndex1;
 
-      // Nếu vượt quá số dòng hiện có, thêm dòng mới
-      if (targetRow >= newData.length) {
-        newData.push({
-          id: undefined,
-          rowId: newGuid()
-        });
-      }
-      rowValues.forEach((cellValue, colIndex1) => {
-        const targetCol = startColIndex + colIndex1;
-        if (targetCol >= tmpCols.length) {
-          // Không vượt quá số cột
-          return;
-        }
-        const columnKey = tmpCols[targetCol].id;
-        const disable = !isEditable(tmpCols[targetCol].columnDef.meta, record);
-        if (!disable) {
-          newData[targetRow] = {
-            ...newData[targetRow],
-            [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
-          };
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= newData.length) {
+          newData.push({
+            id: undefined,
+            rowId: newGuid()
+          });
         }
+        rowValues.forEach((cellValue, colIndex1) => {
+          const targetCol = startColIndex + colIndex1;
+          if (targetCol >= tmpCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          const columnKey = tmpCols[targetCol].id;
+          const disable = !isEditable(tmpCols[targetCol].columnDef.meta, record);
+          if (!disable) {
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+            };
+          }
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
       });
+    }
+    if (pasteState.type === 'right' || pasteState.type === 'left') {
+      newRange.addedCols.forEach((rowValues, rowIndex1) => {
+        const targetRow = pasteState.startRowIndex + rowIndex1;
 
-      // Lưu dòng được paste
-      pastedRows.push(newData[targetRow]);
-    });
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= newData.length) {
+          newData.push({
+            id: undefined,
+            rowId: newGuid()
+          });
+        }
+        rowValues.forEach((cellValue, colIndex1) => {
+          const targetCol = pasteState.startColIndex + colIndex1;
+          if (targetCol >= tmpCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          const columnKey = tmpCols[targetCol].id;
+          const disable = !isEditable(tmpCols[targetCol].columnDef.meta, record);
+          if (!disable) {
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+            };
+          }
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
+      });
+    }
     const rsFilterData = updateOrInsert(flattenArray([...originData]), newData);
     const rs = unFlattenData(rsFilterData);
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
@@ -454,11 +511,22 @@ const TableBodyCellEdit = props => {
       });
     }
     if (isPasting) {
-      const absRowIndex = table.getRowModel().flatRows.findIndex(it => it.id === cell.row.id);
-      if ((startRowIndex ?? 0) > absRowIndex) {
-        // kéo lên
+      const allCols = table.getAllLeafColumns();
+      const absRowIndex = table.getRowModel().flatRows.findIndex(it => it.id === rowId); // row cell con chỏ chuột hiện tại
+      const absColIndex = allCols.findIndex(it => it.id === colId); // col cell con chỏ chuột hiện tại
 
-        const startRowPaste = allRows.find(it => it.index === (startRowIndex ?? 0) - 1);
+      // const absColIndex = allCols.findIndex((it) => it.id === endCell?.colId )
+
+      const endCellColIndex = allCols.findIndex(it => it.id === endCell?.colId); // col cuối cùng vùng được copy
+
+      const rowGap = absRowIndex - (endRowIndex ?? 0);
+      const colGap = absColIndex - (endCellColIndex ?? 0);
+      const absRowGap = rangeState?.rowRange.length === 1 ? rowGap : rowGap >= 0 ? rowGap : rowGap + (rangeState?.rowRange.length ?? 0) - 1;
+      const absColGap = rangeState?.colRange.length === 1 ? colGap : colGap >= 0 ? colGap : colGap + (rangeState?.colRange.length ?? 0) - 1;
+      if (rowGap > 0 && absRowGap > 0 && Math.abs(absRowGap) >= Math.abs(absColGap)) {
+        // kéo xuống : cell cuối trùng endCell
+        const findIndex = allRows.findIndex(it => it.id === endCell?.rowId);
+        const startRowPaste = allRows[findIndex + 1];
         setStartPasteCell?.({
           colId: startCell?.colId ?? '',
           rowId: startRowPaste?.id ?? ''
@@ -473,28 +541,57 @@ const TableBodyCellEdit = props => {
         }, {
           colId: endCell?.colId ?? '',
           rowId
-        }));
+        }, 'down'));
+        return;
       }
-      if ((startRowIndex ?? 0) < absRowIndex) {
-        // kéo xuống
-
-        const findIndex = allRows.findIndex(it => it.id === endCell?.rowId);
-        const startRowPaste = allRows[findIndex + 1];
-        setStartPasteCell?.({
-          colId: startCell?.colId ?? '',
-          rowId: startRowPaste?.id ?? ''
-        });
-        setEndPasteCell?.({
-          colId: endCell?.colId ?? '',
-          rowId
-        });
-        setRangePasteState?.(getSelectedCellMatrix(table, {
+      if (rowGap < 0 && absRowGap < 0 && Math.abs(absRowGap) >= Math.abs(absColGap)) {
+        //  kéo lên
+        const startRowPaste = allRows.find(it => it.index === (startRowIndex ?? 0) - 1);
+        const startPastCell = {
           colId: startCell?.colId ?? '',
           rowId: startRowPaste?.id ?? ''
-        }, {
+        };
+        const endPastCell = {
           colId: endCell?.colId ?? '',
           rowId
-        }));
+        };
+        setStartPasteCell?.(startPastCell);
+        setEndPasteCell?.(endPastCell);
+        setRangePasteState?.(getSelectedCellMatrix(table, startPastCell, endPastCell, 'up'));
+        return;
+      }
+      if (colGap > 0 && absColGap > 0 && Math.abs(absColGap) > Math.abs(absRowGap)) {
+        const startCol = allCols[(rangeState?.endColIndex ?? 0) + 1];
+        const startPastCell = {
+          colId: startCol?.id ?? '',
+          rowId: rangeState?.rowRange[0] ?? ''
+        };
+        const endPastCell = {
+          colId,
+          rowId: rangeState?.rowRange[rangeState?.rowRange.length - 1] ?? ''
+        };
+        setStartPasteCell?.(startPastCell);
+        setEndPasteCell?.(endPastCell);
+        setRangePasteState?.(getSelectedCellMatrix(table, startPastCell, endPastCell, 'right'));
+        return;
+      }
+      if (colGap < 0 && absColGap < 0 && Math.abs(absColGap) > Math.abs(absRowGap)) {
+        const endCol = allCols[(rangeState?.startColIndex ?? 0) - 1];
+        const startPastCell = {
+          colId: colId ?? '',
+          rowId: rangeState?.rowRange[0] ?? ''
+        };
+        const endPastCell = {
+          colId: endCol.id,
+          rowId: rangeState?.rowRange[rangeState?.rowRange.length - 1] ?? ''
+        };
+        setStartPasteCell?.(startPastCell);
+        setEndPasteCell?.(endPastCell);
+        setRangePasteState?.(getSelectedCellMatrix(table, startPastCell, endPastCell, 'left'));
+        return;
+      } else {
+        setStartPasteCell?.(undefined);
+        setEndPasteCell?.(undefined);
       }
     }
   }
@@ -522,14 +619,15 @@ const TableBodyCellEdit = props => {
     setIsSelecting?.(false);
     setIsPasting?.(false);
     const selectState = getSelectedCellMatrix(table, startCell, endCell);
-    const selectPasteState = getSelectedCellMatrix(table, startPasteCell, endPasteCell);
-    if (endPasteCell && endCell?.rowId !== endPasteCell?.rowId && isPasting) {
+    // const selectPasteState = getSelectedCellMatrix(table, startPasteCell, endPasteCell)
+    const selectPasteState = rangePasteState ? {
+      ...rangePasteState
+    } : {};
+
+    // if (endPasteCell && endCell?.rowId !== endPasteCell?.rowId && isPasting) {
+    if (selectPasteState.type && isPasting) {
       triggerDragPaste(selectPasteState, e.ctrlKey);
     } else {
-      // if ( endCell?.rowId !== rowId || endCell?.colId !== colId) {
-      //   setRangeState?.(selectState)
-      // }
-
       if (!isObjEqual(rangeState, selectState)) {
         setRangeState?.(selectState);
       }

package/es/table-component/hook/utils.d.ts

@@ -96,7 +96,7 @@ export declare const genPresets: (presets?: import("@ant-design/colors").Palette
 export declare const getEditType: <T>(column: ColumnTable<T>, rowData?: any) => EditType;
 export declare const getDefaultValue: (defaultValue: any) => AnyObject;
 export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
-export declare const getSelectedCellMatrix: (table: Table<any>, startCell: IPositionCell | undefined, endCell: IPositionCell | undefined) => RangeState;
+export declare const getSelectedCellMatrix: (table: Table<any>, startCell: IPositionCell | undefined, endCell: IPositionCell | undefined, type?: string) => RangeState;
 export declare function addRowsDownWithCtrl(arr: any, n: number): {
     combined: any;
     addedRows: any[];
@@ -125,6 +125,16 @@ export declare function addRowsUp(array: any, n: number): {
     combined: any[];
     addedRows: any[];
 };
+interface DragCopyParams {
+    rowSelectIds: string[];
+    colSelectIds: string[];
+    colPasteds: string[];
+    copyRows: any[];
+}
+export declare const getDragRightData: ({ rowSelectIds, colSelectIds, colPasteds, copyRows, }: DragCopyParams) => {
+    combined: any[][];
+    addedCols: any[][];
+};
 export declare const convertFilters: (filters: any[]) => any[];
 export declare const revertConvertFilters: (clauses: any[]) => FilterState[];
 export declare function getInvisibleColumns(columns: ColumnTable[]): Record<string, boolean>;
@@ -170,3 +180,4 @@ export declare function sumNumberFields(columns: ColumnTable[], data: any[], chi
 export declare const getTreeDepth: (rows: any[]) => number;
 export type FormatToken = 'YYYY' | 'MM' | 'DD' | 'HH' | 'mm' | 'ss';
 export declare const isDateChanged: (oldDate: string | Date, newDate: string | Date, format: string) => FormatToken | null;
+export {};

package/es/table-component/hook/utils.js

@@ -1355,7 +1355,7 @@ export const flattenData = (childrenColumnName, data) => {
   });
   return list;
 };
-export const getSelectedCellMatrix = (table, startCell, endCell) => {
+export const getSelectedCellMatrix = (table, startCell, endCell, type) => {
   if (!startCell || !endCell) return {
     rowIds: [],
     colIds: [],
@@ -1364,7 +1364,8 @@ export const getSelectedCellMatrix = (table, startCell, endCell) => {
     startColIndex: undefined,
     endColIndex: undefined,
     colRange: [],
-    rowRange: []
+    rowRange: [],
+    type
   };
 
   // const rowIds = table.getRowModel().rows.map(r => r.id);
@@ -1386,7 +1387,8 @@ export const getSelectedCellMatrix = (table, startCell, endCell) => {
     startColIndex,
     endColIndex,
     rowIds,
-    colIds
+    colIds,
+    type
   };
 };
 export function addRowsDownWithCtrl(arr, n) {
@@ -1935,6 +1937,30 @@ export function addRowsUp(array, n) {
     addedRows
   };
 }
+export const getDragRightData = ({
+  rowSelectIds,
+  colSelectIds,
+  colPasteds,
+  copyRows
+}) => {
+  const selectedRows = copyRows.filter(row => rowSelectIds.includes(String(row.rowId ?? row.id)));
+  const addedCols = selectedRows.map(row => {
+    return colPasteds.map((_, index) => {
+      const sourceCol = colSelectIds[index % colSelectIds.length];
+      return row[sourceCol] ?? '';
+    });
+  });
+  const combined = selectedRows.map((row, rowIndex) => {
+    const sourceValues = colSelectIds.map(col => {
+      return row[col] ?? '';
+    });
+    return [...sourceValues, ...addedCols[rowIndex]];
+  });
+  return {
+    combined,
+    addedCols
+  };
+};
 export const convertFilters = filters => {
   const result = [];
   filters.forEach(({

package/lib/grid-component/type.d.ts

@@ -811,6 +811,7 @@ export type RangeState = {
     endColIndex: number | undefined;
     rowIds: string[];
     colIds: string[];
+    type?: string;
 };
 export type Sorter = {
     columnKey: string;

package/lib/table-component/body/TableBodyCellEdit.js

@@ -202,6 +202,7 @@ const TableBodyCellEdit = props => {
     setFocusedCell,
     setEditingKey,
     setRangeState,
+    rangePasteState,
     setRangePasteState,
     endCell,
     setEndCell,
@@ -324,7 +325,8 @@ const TableBodyCellEdit = props => {
     const colPasteds = (0, _utils.getColIdsBetween)(table, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
     const rowSelectIds = (0, _utils.getRowIdsBetween)(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
     const colSelectIds = (0, _utils.getColIdsBetween)(table, startCell?.colId ?? '', endCell?.colId ?? '');
-    const dataSelected = [];
+    const dataSelected = []; // data được copy
+
     rowSelectIds.forEach(rowId => {
       const row = allRows.find(r => r.id === rowId);
       if (!row) return;
@@ -338,49 +340,104 @@ const TableBodyCellEdit = props => {
     });
     const copyRows = (0, _utils.flattenData)('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
     let newRange;
-    if ((startRowIndex ?? 0) < (pasteRangeState.startRowIndex ?? 0)) {
+    if (pasteState.type === 'down') {
       // kéo xuóng
       setRangeState?.((0, _utils.getSelectedCellMatrix)(table, startCell, endPasteCell));
       newRange = ctrlKey ? (0, _utils.addRowsDownWithCtrl)(dataSelected, rowPasteIds.length) : (0, _utils.addRowsDown)(dataSelected, rowPasteIds.length);
-    } else {
+    } else if (pasteState.type === 'up') {
       // kéo lên
       setStartCell?.(endCell);
       setRangeState?.((0, _utils.getSelectedCellMatrix)(table, endCell, endPasteCell));
       newRange = ctrlKey ? (0, _utils.addRowsUpWithCtrl)(dataSelected, rowPasteIds.length) : (0, _utils.addRowsUp)(dataSelected, rowPasteIds.length);
+    } else if (pasteState.type === 'right') {
+      // kéo phải
+      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, startCell, endPasteCell));
+      // newRange = { addedRows: [], combined: [] }
+      // newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowPasteIds.length) : addRowsDown(dataSelected, rowPasteIds.length)
+      newRange = (0, _utils.getDragRightData)({
+        colPasteds,
+        colSelectIds,
+        copyRows,
+        rowSelectIds
+      });
+    } else if (pasteState.type === 'left') {
+      // kéo trái
+      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, startCell, endPasteCell));
+      // newRange = { addedRows: [], combined: [] }
+      // newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowPasteIds.length) : addRowsDown(dataSelected, rowPasteIds.length)
+      newRange = (0, _utils.getDragRightData)({
+        colPasteds,
+        colSelectIds,
+        copyRows,
+        rowSelectIds
+      });
     }
 
     // Cập nhật data mới
     const newData = (0, _utils.flattenArray)([...dataSource]);
     const pastedRows = [];
-    newRange.addedRows.forEach((rowValues, rowIndex1) => {
-      const targetRow = pasteState.startRowIndex + rowIndex1;
+    if (pasteState.type === 'down' || pasteState.type === 'up') {
+      newRange.addedRows.forEach((rowValues, rowIndex1) => {
+        const targetRow = pasteState.startRowIndex + rowIndex1;
 
-      // Nếu vượt quá số dòng hiện có, thêm dòng mới
-      if (targetRow >= newData.length) {
-        newData.push({
-          id: undefined,
-          rowId: (0, _utils.newGuid)()
-        });
-      }
-      rowValues.forEach((cellValue, colIndex1) => {
-        const targetCol = startColIndex + colIndex1;
-        if (targetCol >= tmpCols.length) {
-          // Không vượt quá số cột
-          return;
-        }
-        const columnKey = tmpCols[targetCol].id;
-        const disable = !(0, _utils.isEditable)(tmpCols[targetCol].columnDef.meta, record);
-        if (!disable) {
-          newData[targetRow] = {
-            ...newData[targetRow],
-            [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
-          };
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= newData.length) {
+          newData.push({
+            id: undefined,
+            rowId: (0, _utils.newGuid)()
+          });
         }
+        rowValues.forEach((cellValue, colIndex1) => {
+          const targetCol = startColIndex + colIndex1;
+          if (targetCol >= tmpCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          const columnKey = tmpCols[targetCol].id;
+          const disable = !(0, _utils.isEditable)(tmpCols[targetCol].columnDef.meta, record);
+          if (!disable) {
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+            };
+          }
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
       });
+    }
+    if (pasteState.type === 'right' || pasteState.type === 'left') {
+      newRange.addedCols.forEach((rowValues, rowIndex1) => {
+        const targetRow = pasteState.startRowIndex + rowIndex1;
 
-      // Lưu dòng được paste
-      pastedRows.push(newData[targetRow]);
-    });
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= newData.length) {
+          newData.push({
+            id: undefined,
+            rowId: (0, _utils.newGuid)()
+          });
+        }
+        rowValues.forEach((cellValue, colIndex1) => {
+          const targetCol = pasteState.startColIndex + colIndex1;
+          if (targetCol >= tmpCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          const columnKey = tmpCols[targetCol].id;
+          const disable = !(0, _utils.isEditable)(tmpCols[targetCol].columnDef.meta, record);
+          if (!disable) {
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+            };
+          }
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
+      });
+    }
     const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), newData);
     const rs = (0, _utils.unFlattenData)(rsFilterData);
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
@@ -461,11 +518,22 @@ const TableBodyCellEdit = props => {
       });
     }
     if (isPasting) {
-      const absRowIndex = table.getRowModel().flatRows.findIndex(it => it.id === cell.row.id);
-      if ((startRowIndex ?? 0) > absRowIndex) {
-        // kéo lên
+      const allCols = table.getAllLeafColumns();
+      const absRowIndex = table.getRowModel().flatRows.findIndex(it => it.id === rowId); // row cell con chỏ chuột hiện tại
+      const absColIndex = allCols.findIndex(it => it.id === colId); // col cell con chỏ chuột hiện tại
 
-        const startRowPaste = allRows.find(it => it.index === (startRowIndex ?? 0) - 1);
+      // const absColIndex = allCols.findIndex((it) => it.id === endCell?.colId )
+
+      const endCellColIndex = allCols.findIndex(it => it.id === endCell?.colId); // col cuối cùng vùng được copy
+
+      const rowGap = absRowIndex - (endRowIndex ?? 0);
+      const colGap = absColIndex - (endCellColIndex ?? 0);
+      const absRowGap = rangeState?.rowRange.length === 1 ? rowGap : rowGap >= 0 ? rowGap : rowGap + (rangeState?.rowRange.length ?? 0) - 1;
+      const absColGap = rangeState?.colRange.length === 1 ? colGap : colGap >= 0 ? colGap : colGap + (rangeState?.colRange.length ?? 0) - 1;
+      if (rowGap > 0 && absRowGap > 0 && Math.abs(absRowGap) >= Math.abs(absColGap)) {
+        // kéo xuống : cell cuối trùng endCell
+        const findIndex = allRows.findIndex(it => it.id === endCell?.rowId);
+        const startRowPaste = allRows[findIndex + 1];
         setStartPasteCell?.({
           colId: startCell?.colId ?? '',
           rowId: startRowPaste?.id ?? ''
@@ -480,28 +548,57 @@ const TableBodyCellEdit = props => {
         }, {
           colId: endCell?.colId ?? '',
           rowId
-        }));
+        }, 'down'));
+        return;
       }
-      if ((startRowIndex ?? 0) < absRowIndex) {
-        // kéo xuống
-
-        const findIndex = allRows.findIndex(it => it.id === endCell?.rowId);
-        const startRowPaste = allRows[findIndex + 1];
-        setStartPasteCell?.({
-          colId: startCell?.colId ?? '',
-          rowId: startRowPaste?.id ?? ''
-        });
-        setEndPasteCell?.({
-          colId: endCell?.colId ?? '',
-          rowId
-        });
-        setRangePasteState?.((0, _utils.getSelectedCellMatrix)(table, {
+      if (rowGap < 0 && absRowGap < 0 && Math.abs(absRowGap) >= Math.abs(absColGap)) {
+        //  kéo lên
+        const startRowPaste = allRows.find(it => it.index === (startRowIndex ?? 0) - 1);
+        const startPastCell = {
           colId: startCell?.colId ?? '',
           rowId: startRowPaste?.id ?? ''
-        }, {
+        };
+        const endPastCell = {
           colId: endCell?.colId ?? '',
           rowId
-        }));
+        };
+        setStartPasteCell?.(startPastCell);
+        setEndPasteCell?.(endPastCell);
+        setRangePasteState?.((0, _utils.getSelectedCellMatrix)(table, startPastCell, endPastCell, 'up'));
+        return;
+      }
+      if (colGap > 0 && absColGap > 0 && Math.abs(absColGap) > Math.abs(absRowGap)) {
+        const startCol = allCols[(rangeState?.endColIndex ?? 0) + 1];
+        const startPastCell = {
+          colId: startCol?.id ?? '',
+          rowId: rangeState?.rowRange[0] ?? ''
+        };
+        const endPastCell = {
+          colId,
+          rowId: rangeState?.rowRange[rangeState?.rowRange.length - 1] ?? ''
+        };
+        setStartPasteCell?.(startPastCell);
+        setEndPasteCell?.(endPastCell);
+        setRangePasteState?.((0, _utils.getSelectedCellMatrix)(table, startPastCell, endPastCell, 'right'));
+        return;
+      }
+      if (colGap < 0 && absColGap < 0 && Math.abs(absColGap) > Math.abs(absRowGap)) {
+        const endCol = allCols[(rangeState?.startColIndex ?? 0) - 1];
+        const startPastCell = {
+          colId: colId ?? '',
+          rowId: rangeState?.rowRange[0] ?? ''
+        };
+        const endPastCell = {
+          colId: endCol.id,
+          rowId: rangeState?.rowRange[rangeState?.rowRange.length - 1] ?? ''
+        };
+        setStartPasteCell?.(startPastCell);
+        setEndPasteCell?.(endPastCell);
+        setRangePasteState?.((0, _utils.getSelectedCellMatrix)(table, startPastCell, endPastCell, 'left'));
+        return;
+      } else {
+        setStartPasteCell?.(undefined);
+        setEndPasteCell?.(undefined);
       }
     }
   }
@@ -529,14 +626,15 @@ const TableBodyCellEdit = props => {
     setIsSelecting?.(false);
     setIsPasting?.(false);
     const selectState = (0, _utils.getSelectedCellMatrix)(table, startCell, endCell);
-    const selectPasteState = (0, _utils.getSelectedCellMatrix)(table, startPasteCell, endPasteCell);
-    if (endPasteCell && endCell?.rowId !== endPasteCell?.rowId && isPasting) {
+    // const selectPasteState = getSelectedCellMatrix(table, startPasteCell, endPasteCell)
+    const selectPasteState = rangePasteState ? {
+      ...rangePasteState
+    } : {};
+
+    // if (endPasteCell && endCell?.rowId !== endPasteCell?.rowId && isPasting) {
+    if (selectPasteState.type && isPasting) {
       triggerDragPaste(selectPasteState, e.ctrlKey);
     } else {
-      // if ( endCell?.rowId !== rowId || endCell?.colId !== colId) {
-      //   setRangeState?.(selectState)
-      // }
-
       if (!(0, _utils.isObjEqual)(rangeState, selectState)) {
         setRangeState?.(selectState);
       }

package/lib/table-component/hook/utils.d.ts

@@ -96,7 +96,7 @@ export declare const genPresets: (presets?: import("@ant-design/colors").Palette
 export declare const getEditType: <T>(column: ColumnTable<T>, rowData?: any) => EditType;
 export declare const getDefaultValue: (defaultValue: any) => AnyObject;
 export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
-export declare const getSelectedCellMatrix: (table: Table<any>, startCell: IPositionCell | undefined, endCell: IPositionCell | undefined) => RangeState;
+export declare const getSelectedCellMatrix: (table: Table<any>, startCell: IPositionCell | undefined, endCell: IPositionCell | undefined, type?: string) => RangeState;
 export declare function addRowsDownWithCtrl(arr: any, n: number): {
     combined: any;
     addedRows: any[];
@@ -125,6 +125,16 @@ export declare function addRowsUp(array: any, n: number): {
     combined: any[];
     addedRows: any[];
 };
+interface DragCopyParams {
+    rowSelectIds: string[];
+    colSelectIds: string[];
+    colPasteds: string[];
+    copyRows: any[];
+}
+export declare const getDragRightData: ({ rowSelectIds, colSelectIds, colPasteds, copyRows, }: DragCopyParams) => {
+    combined: any[][];
+    addedCols: any[][];
+};
 export declare const convertFilters: (filters: any[]) => any[];
 export declare const revertConvertFilters: (clauses: any[]) => FilterState[];
 export declare function getInvisibleColumns(columns: ColumnTable[]): Record<string, boolean>;
@@ -170,3 +180,4 @@ export declare function sumNumberFields(columns: ColumnTable[], data: any[], chi
 export declare const getTreeDepth: (rows: any[]) => number;
 export type FormatToken = 'YYYY' | 'MM' | 'DD' | 'HH' | 'mm' | 'ss';
 export declare const isDateChanged: (oldDate: string | Date, newDate: string | Date, format: string) => FormatToken | null;
+export {};

package/lib/table-component/hook/utils.js

@@ -35,7 +35,7 @@ exports.getCellsByPosition = getCellsByPosition;
 exports.getColIdsBetween = getColIdsBetween;
 exports.getDateRangeFormat = exports.getCommonPinningStyles2 = exports.getCommonPinningStyles = void 0;
 exports.getDateValueType = getDateValueType;
-exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = void 0;
+exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDragRightData = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.getHiddenParentKeys1 = getHiddenParentKeys1;
 exports.getInvisibleColumns = getInvisibleColumns;
@@ -1476,7 +1476,7 @@ const flattenData = (childrenColumnName, data) => {
   return list;
 };
 exports.flattenData = flattenData;
-const getSelectedCellMatrix = (table, startCell, endCell) => {
+const getSelectedCellMatrix = (table, startCell, endCell, type) => {
   if (!startCell || !endCell) return {
     rowIds: [],
     colIds: [],
@@ -1485,7 +1485,8 @@ const getSelectedCellMatrix = (table, startCell, endCell) => {
     startColIndex: undefined,
     endColIndex: undefined,
     colRange: [],
-    rowRange: []
+    rowRange: [],
+    type
   };
 
   // const rowIds = table.getRowModel().rows.map(r => r.id);
@@ -1507,7 +1508,8 @@ const getSelectedCellMatrix = (table, startCell, endCell) => {
     startColIndex,
     endColIndex,
     rowIds,
-    colIds
+    colIds,
+    type
   };
 };
 exports.getSelectedCellMatrix = getSelectedCellMatrix;
@@ -2057,6 +2059,31 @@ function addRowsUp(array, n) {
     addedRows
   };
 }
+const getDragRightData = ({
+  rowSelectIds,
+  colSelectIds,
+  colPasteds,
+  copyRows
+}) => {
+  const selectedRows = copyRows.filter(row => rowSelectIds.includes(String(row.rowId ?? row.id)));
+  const addedCols = selectedRows.map(row => {
+    return colPasteds.map((_, index) => {
+      const sourceCol = colSelectIds[index % colSelectIds.length];
+      return row[sourceCol] ?? '';
+    });
+  });
+  const combined = selectedRows.map((row, rowIndex) => {
+    const sourceValues = colSelectIds.map(col => {
+      return row[col] ?? '';
+    });
+    return [...sourceValues, ...addedCols[rowIndex]];
+  });
+  return {
+    combined,
+    addedCols
+  };
+};
+exports.getDragRightData = getDragRightData;
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.57",
+  "version": "1.9.58",
   "description": "es-grid-template",
   "keywords": [
     "react",