es-grid-template 1.9.57 → 1.9.59

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";
@@ -8,6 +8,7 @@ import { TableContext } from "../useContext";
 import EditableCell from "./EditableCell";
 import { nonActionColumn } from "../../grid-component/hooks";
 import { getValueCellString, renderValueCell, toggleRowSelection } from "../hook/useColumns";
+import { Dropdown } from "rc-master-ui";
 const renderCellIndex = props => {
   const {
     parrents,
@@ -195,6 +196,7 @@ const TableBodyCellEdit = props => {
     setFocusedCell,
     setEditingKey,
     setRangeState,
+    rangePasteState,
     setRangePasteState,
     endCell,
     setEndCell,
@@ -238,13 +240,6 @@ const TableBodyCellEdit = props => {
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
-
-  // const tooltipContent = (isOpenTooltip === false)
-  //   ? ''
-  //   : columnMeta?.tooltipDescription
-  //     ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
-  //     : cell.getValue()
-
   const canEdit = isEditable(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -317,7 +312,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 +327,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 +505,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 +535,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 +613,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);
       }
@@ -1175,6 +1267,18 @@ const TableBodyCellEdit = props => {
   const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
   const cellFormat = getFormat(colFormat, format);
   const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
+  const cellContent = columnMeta?.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.template : fomatedValue;
+  const linkContent = columnMeta?.linkTemplate ? typeof columnMeta.linkTemplate === 'function' ? columnMeta.linkTemplate({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.linkTemplate : cellContent;
   return /*#__PURE__*/React.createElement("div", {
     key: cell.id,
     ref: el => {
@@ -1189,7 +1293,7 @@ const TableBodyCellEdit = props => {
     "data-row-key": cell.row.id,
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-delay-show": 500,
-    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : tooltipContent,
+    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : columnMeta?.type === 'link' ? '' : tooltipContent,
     className: classNames(`${prefix}-grid-cell cell-editable editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -1208,7 +1312,8 @@ const TableBodyCellEdit = props => {
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta?.type === 'number',
+      [`${prefix}-grid-cell-link`]: columnMeta?.type === 'link'
     }),
     style: {
       display: 'flex',
@@ -1308,8 +1413,31 @@ const TableBodyCellEdit = props => {
     record: record,
     visibleColumns: visibleColumns,
     handleNextCell: handleNextCell
-    // rowKey={rowKey}
-  }) : /*#__PURE__*/React.createElement("div", {
+  }) : columnMeta?.type === 'link' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ['hover'],
+    menu: {
+      items: [{
+        key: '1',
+        label: ''
+      }]
+    },
+    dropdownRender: () => /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '1rem',
+        backgroundColor: '#ffffff',
+        borderRadius: 6,
+        boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)'
+      }
+    }, linkContent && typeof linkContent === 'string' ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      href: linkContent,
+      target: "_blank",
+      rel: "noreferrer"
+    }, linkContent)) : linkContent ? linkContent : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      href: typeof cellContent === 'string' ? cellContent : '',
+      target: "_blank",
+      rel: "noreferrer"
+    }, cellContent)))
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {
       'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes(getEditType(columnMeta, record))
     })
@@ -1349,17 +1477,57 @@ const TableBodyCellEdit = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), columnMeta.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
-    field: columnMeta.field,
-    index: cell.row.index,
-    rowData: cell.row.original,
-    value: cell.getValue()
-  }) : columnMeta.template : fomatedValue, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
+  }))), cellContent, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
+    className: 'caret-down',
+    onClick: e => {
+      handleEdit(e);
+    }
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc_cell-content', {
+      'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes(getEditType(columnMeta, record))
+    })
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsExpandClick(true);
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), cellContent, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
     className: 'caret-down',
     onClick: e => {
       handleEdit(e);
     }
-  })), !isSelecting && !isEditing && rowRange &&
+  }))), !isSelecting && !isEditing && rowRange &&
   // rowNumber === rangeState?.endRowIndex &&
   cell.row.id === rowRange[rowRange?.length - 1] && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
     className: 'dragging-point',

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/es/table-component/style.js

@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-link{text-decoration:underline;color:#336cc9;&:has(textarea){text-decoration:none;}}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

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

@@ -1,9 +1,9 @@
 import type * as React from "react";
 import dayjs from "dayjs";
-import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
+import type { TypeFilter } from "rc-master-ui";
 import type { Key } from "react";
 import type { ColumnsTable } from "./../index";
-import type { AnyObject, ColumnTable, GetRowKey, IFormat } from "../type";
+import type { AnyObject, ColumnTable, EditType, GetRowKey, IColumnType, IFormat } from "../type";
 export declare const newGuid: () => any;
 export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;

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

@@ -48,19 +48,9 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
 var _colors = require("@ant-design/colors");
-// import type {ColumnTable, GetRowKey, IFormat, Presets} from "./../ type"
-
-// import type {SelectionSettings} from "../type"
-// import type {AnyObject} from "../type"
-
-// import {Table} from "rc-master-ui"
-// import {flatColumns2} from "./columns"
-// import {SELECTION_COLUMN} from "./useColumns"
-
 const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return (0, _uuid.v4)();
   }
 };

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

@@ -94,10 +94,10 @@ export type IFormat = {
     yearFormat?: string;
 };
 export type RowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
-export type EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime' | 'time' | 'week' | 'month' | 'quarter' | 'year' | 'select' | 'checkbox' | 'currency' | 'image' | 'selectTable' | 'customSelect' | 'form' | 'color' | 'treeSelect' | 'file';
+export type EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime' | 'time' | 'week' | 'month' | 'quarter' | 'year' | 'select' | 'checkbox' | 'currency' | 'image' | 'selectTable' | 'customSelect' | 'form' | 'color' | 'link' | 'treeSelect' | 'file';
 export type ITextAlign = 'center' | 'left' | 'right';
 export type TypeFilter = 'Text' | 'Date' | 'Time' | 'Datetime' | 'DateRange' | 'Month' | 'Quarter' | 'Year' | 'Week' | 'Number' | 'NumberRange' | 'Dropdown' | 'DropTree' | 'Checkbox' | 'CheckboxTree' | 'CheckboxDropdown';
-export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | null | undefined;
+export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | 'link' | null | undefined;
 export type FilterOperator = 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal' | 'startswith' | 'endswith' | 'contains';
 export type FixedType = 'left' | 'right' | boolean;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
@@ -241,6 +241,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     textAlign?: ITextAlign;
     /** Template custom render cell */
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
+    linkTemplate?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     /** Hiển thị tooltip cell */
     showTooltip?: boolean;
     /** Nội dung tooltip của cell */
@@ -811,6 +812,7 @@ export type RangeState = {
     endColIndex: number | undefined;
     rowIds: string[];
     colIds: string[];
+    type?: any;
 };
 export type Sorter = {
     columnKey: string;

package/lib/group-component/body/EditableCell.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import type { EditType } from "rc-master-ui";
-import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { ColumnTable, EditType, IFormat } from "../../grid-component/type";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;
     dataIndex: string;

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

@@ -189,6 +189,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
     template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;

package/lib/table-component/body/EditableCell.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import type { EditType } from "rc-master-ui";
-import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { ColumnTable, EditType, IFormat } from "../../grid-component/type";
 import type { Column } from "@tanstack/react-table";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;