es-grid-template 1.9.73 → 1.9.74

package/es/ali-table/pipeline/features/columnCustom.js

@@ -9,12 +9,13 @@ import { booleanOperator, findItemPath, isEditable, isObjEmpty, nonActionColumn,
 import classNames from 'classnames';
 import { Dropdown, Select, Space, Button } from 'rc-master-ui';
 import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, convertFilters, extendsObject,
+// findFirst,
 // flattenArray,
 flattenData, getColIdsBetween1, getDefaultOperator, getDragRightData, getEditType, getKeys, getNextColumn, getNextColumn1, getPrevColumn, getRowIdsBetween3,
 // getRowIndexMap,
 getSelectedCellMatrix1, getTypeFilter,
 // isObjEqual,
-newGuid } from "../../../table-component/hook/utils";
+newGuid, unFlattenData, updateOrInsert } from "../../../table-component/hook/utils";
 import { renderFilter } from "../../base-table/renderFilter";
 import { renderValueCell } from "../../../table-component/hook/useColumns";
 import EditCell from "../../base-table/cell/EditCell";
@@ -23,7 +24,7 @@ import { stateKeyResize, stateKeyColumnFilter, stateKeyFilter, stateKeyPaginatio
 //  state For edit
 stateKeyEndCell, stateKeyEndPasteCell, stateKeyStartCell, stateKeyStartPasteCell, stateKeyFocusedCell, stateKeyEditCellSettings, stateKeyIsEditing, stateKeyIsPasting, stateKeyIsSelecting } from "../../utils/constants";
 import { getColumnsAtLevel } from "../../base-table/utils";
-import { unFlattenData, updateOrInsert } from "../../utils/utility";
+// import { unFlattenData } from '../../utils/utility';
 // import { getMaxDepth } from '../../utils/utility';
 
 function clamp(min, x, max) {
@@ -50,6 +51,7 @@ export function columnCustom(opts) {
     wrapSettings,
     // ignoreAccents,
     dataSource,
+    dataFlatten,
     isDataTree,
     defaultSorter,
     defaultFilter,
@@ -440,7 +442,7 @@ export function columnCustom(opts) {
       }
 
       // Cập nhật data mới
-      const newData = allRows;
+      const newData = dataFlatten;
       const pastedRows = [];
       if (pasteState.type === 'down' || pasteState.type === 'up') {
         newRange.addedRows.forEach((rowValues, rowIndex1) => {
@@ -508,7 +510,7 @@ export function columnCustom(opts) {
       }
 
       // const rsFilterData = updateOrInsert(dataSource, newData)
-      const rsFilterData = updateOrInsert(allRows, newData);
+      const rsFilterData = updateOrInsert(dataFlatten, newData);
       const rs = unFlattenData(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
       pipeline.setStateAtKey(stateKeyEndCell, endPasteCell);
@@ -535,7 +537,7 @@ export function columnCustom(opts) {
       const newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowsPasteId.length) : addRowsDown(dataSelected, rowsPasteId.length);
 
       // Cập nhật data mới
-      const newData = allRows;
+      const newData = dataFlatten;
       const pastedRows = [];
       newRange.addedRows.forEach((rowValues, rowIndex1) => {
         const targetRow = pasteState?.startRowIndex + rowIndex1;
@@ -557,7 +559,7 @@ export function columnCustom(opts) {
       });
 
       // const rsFilterData = updateOrInsert(dataSource, newData)
-      const rsFilterData = updateOrInsert(dataSource, newData);
+      const rsFilterData = updateOrInsert(dataFlatten, newData);
       const rs = unFlattenData(rsFilterData);
       triggerPaste?.(pastedRows, colsPastedId, rs, copyRows);
     };
@@ -1061,6 +1063,73 @@ export function columnCustom(opts) {
       pipeline.setStateAtKey(stateKeyEndCell, cellEnd);
       triggerPointPaste(selectPasteState, cellStart, cellEnd, e.ctrlKey);
     };
+
+    // cell Số thứ tự
+
+    const handleMouseDownIndex = rowId => {
+      // setIsSelecting?.(true);
+      pipeline.setStateAtKey(stateKeyIsSelecting, true);
+      const allColumns = allCols.filter(it => !nonActionColumn.includes(it.field));
+
+      // const firstCOlSpin = findFirst(allColumns)
+
+      const startCol = allColumns[0].field;
+      const endCol = allColumns[allColumns.length - 1].field;
+
+      // setStartCell?.({ rowId, colId: startCol });
+      // setEndCell?.({ rowId, colId: endCol });
+
+      pipeline.setStateAtKey(stateKeyStartCell, {
+        rowId,
+        colId: startCol
+      });
+      pipeline.setStateAtKey(stateKeyEndCell, {
+        rowId,
+        colId: endCol
+      });
+
+      // if (firstCOlSpin) {
+      //   setFocusedCell?.({ rowId: cell.row.id, colId: firstCOlSpin.id })
+      // } else {
+      //   const firstCOlVisible = allColumns[0]
+      //   setFocusedCell?.({ rowId: cell.row.id, colId: firstCOlVisible.id })
+      // }
+      pipeline.setStateAtKey(stateKeyFocusedCell, {
+        rowId,
+        colId: startCol
+      });
+
+      // setRangeState?.(getSelectedCellMatrix(table, { rowId, colId: startCol }, { rowId, colId: endCol }))
+    };
+    const handleMouseEnterIndex = rowId => {
+      if (isSelecting) {
+        const allColumns = allCols.filter(it => !nonActionColumn.includes(it.field));
+
+        // const firstCOl = findFirst(allColumns)
+
+        // const startCol = allColumns[0].id
+        const endCol = allColumns[allColumns.length - 1].field;
+
+        //  // setStartCell?.({ rowId, colId: startCol });
+        // setEndCell?.({ rowId, colId: endCol });
+        pipeline.setStateAtKey(stateKeyEndCell, {
+          rowId,
+          colId: endCol
+        });
+      }
+    };
+    const handleMouseUpIndex = () => {
+      // setIsSelecting?.(false);
+
+      pipeline.setStateAtKey(stateKeyIsSelecting, false);
+
+      // const selectState = getSelectedCellMatrix(table, startCell, endCell)
+
+      // if (!isObjEqual(rangeState, selectState)) {
+
+      //   setRangeState?.(selectState)
+      // }
+    };
     pipeline.mapColumns(makeRecursiveMapper((col, params) => {
       const {
         startIndex,
@@ -1213,6 +1282,7 @@ export function columnCustom(opts) {
       // cell Index
       if (col.field === '#') {
         const prevContent = col.template;
+        const prevGetCellProps = col?.getCellProps;
         return {
           ...col,
           lock: !!col.fixed,
@@ -1247,7 +1317,73 @@ export function columnCustom(opts) {
               overflow: 'visible',
               position: 'relative'
             }
-          })
+          }),
+          getCellProps(value, record, rowIndex) {
+            const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
+
+            // const isCellSelected = (!startCell || !endCell) ? false : selectRowIds.includes(record.rowId) && cols.includes(col.field);
+
+            return mergeCellProps(prevCellProps, {
+              // @ts-ignore
+              'data-col-key': col.field,
+              ref: el => {
+                if (focusedCell?.rowId === record.rowId && focusedCell?.colId === col.field && !isEditing.editing) {
+                  el?.focus({
+                    preventScroll: true
+                  });
+                }
+              },
+              style: {
+                ...prevCellProps?.style,
+                userSelect: 'none'
+                // padding: cellEditing ? 0 : undefined
+                // ...cellStyles,
+              },
+              className: classNames(prevCellProps?.className, `${prefix}-grid-cell`, {
+                [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+                [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+                [`${prefix}-grid-cell-text-center`]: col?.textAlign === 'center',
+                [`${prefix}-grid-cell-text-right`]: col?.textAlign === 'right' || col.type === 'number',
+                [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(record.rowId),
+                'no-hover': editAble
+
+                // isValid: !isEditing && rowError && rowError[col.field]?.field === col.field,
+                // [`${prefix}-grid-cell-selected`]: isCellSelected,
+              }),
+              onMouseDown: e => {
+                prevCellProps?.onMouseDown?.(e);
+                if (editAble) {
+                  // if (record[rowKey] === editingKey) {
+                  if (isEditing.editing) {
+                    // setFocusedCell?.({ rowId: cell.row.id, colId: cell.column.id })
+                  } else {
+                    handleMouseDownIndex(record.rowId);
+                    if (isEditing.editing) {
+                      setTimeout(() => {
+                        // setEditingKey?.('')
+                        pipeline.setStateAtKey(stateKeyIsEditing, defaultCellEditing);
+                        reset?.();
+                      });
+                    }
+                  }
+                }
+              },
+              onMouseEnter: e => {
+                prevCellProps?.onMouseEnter?.(e);
+                // Edit
+
+                if (editAble) {
+                  handleMouseEnterIndex(record.rowId);
+                }
+              },
+              onMouseUp: e => {
+                prevCellProps?.onMouseUp?.(e);
+                if (editAble) {
+                  handleMouseUpIndex();
+                }
+              }
+            });
+          }
         };
       }
 
@@ -1514,9 +1650,6 @@ export function columnCustom(opts) {
         }),
         getCellProps(value, record, rowIndex) {
           const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
-
-          // console.log('record', record)
-
           const fomatedValue = ['color', 'checkbox', 'field'].includes(col.type ?? '') ? '' : renderValueCell(col, value, record, rowIndex, 0, format, false);
           const tooltipContent = isOpenTooltip === false ? '' : col?.tooltipDescription ? typeof col.tooltipDescription === 'function' ? col.tooltipDescription({
             value,

package/es/ali-table/utils/utility.d.ts

@@ -25,4 +25,15 @@ export declare function filterVisibleColumns<T extends ColumnTable>(columns: T[]
 export declare const sortByType: (arr: ColumnTable[], rowDnd?: RowDnd) => ColumnTable[];
 export declare function getVisibleColumnFields<T extends ColumnTable>(columns: T[]): string[];
 export declare const getOnlyInA: (a: string[], b: string[]) => string[];
+export declare const buildParentMap: <T extends {
+    id: string;
+    rowId: string;
+    children?: T[];
+}>(tree: T[]) => Map<string, T>;
+export declare const flattenTree: <T extends {
+    children?: T[];
+}>(tree: T[]) => T[];
+export declare const flattenTree2: <T extends {
+    children?: T[];
+}>(tree: T[]) => Omit<T, 'children'>[];
 export {};

package/es/ali-table/utils/utility.js

@@ -699,4 +699,53 @@ export function getVisibleColumnFields(columns) {
 export const getOnlyInA = (a, b) => {
   const setB = new Set(b);
   return a.filter(item => !setB.has(item));
+};
+export const buildParentMap = tree => {
+  const parentMap = new Map();
+  const stack = [...tree];
+  while (stack.length) {
+    const node = stack.pop();
+    const children = node.children;
+    if (!children?.length) continue;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      parentMap.set(child.rowId, node);
+      stack.push(child);
+    }
+  }
+  return parentMap;
+};
+export const flattenTree = tree => {
+  const result = [];
+  const stack = [...tree];
+  while (stack.length) {
+    const node = stack.pop();
+    result.push(node);
+    const children = node.children;
+    if (children?.length) {
+      // Push ngược để giữ nguyên thứ tự tree
+      for (let i = children.length - 1; i >= 0; i--) {
+        stack.push(children[i]);
+      }
+    }
+  }
+  return result;
+};
+export const flattenTree2 = tree => {
+  const result = [];
+  const stack = [...tree];
+  while (stack.length) {
+    const node = stack.pop();
+    const {
+      children,
+      ...item
+    } = node;
+    result.push(item);
+    if (children?.length) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        stack.push(children[i]);
+      }
+    }
+  }
+  return result;
 };

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

@@ -196,10 +196,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, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     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/lib/ali-table/Grid.js

@@ -179,7 +179,6 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
       //  setColumns(cols)
     } else {
-      console.log('setColumns');
       setColumns(cols);
       // pipeline.columns(cols)
 

package/lib/ali-table/InternalTable.js

@@ -85,6 +85,7 @@ const InternalTable = props => {
     headerData,
     format,
     onCellClick,
+    commandClick,
     ...rest
   } = props;
   const tableRef = (0, _react.useRef)(null);
@@ -149,6 +150,9 @@ const InternalTable = props => {
     }
     return (0, _utils.addRowIdArray)(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const dataFlatten = _react.default.useMemo(() => {
+    return (0, _utils.flattenArray)(convertData);
+  }, [convertData]);
   const isDataTree = _react.default.useMemo(() => {
     return (0, _utils.isTreeArray)(convertData);
   }, [convertData]);
@@ -161,8 +165,8 @@ const InternalTable = props => {
     return rss;
   }, [convertData, filterState, ignoreAccents, sortState, onFilter, onSorter, defaultFilter, defaultSorter]);
   const rowIndexMap = _react.default.useMemo(() => {
-    return (0, _utils.getRowIndexMap)(convertData);
-  }, [convertData]);
+    return (0, _utils.getRowIndexMap)(dataFlatten);
+  }, [dataFlatten]);
   const footerData = _react.default.useMemo(() => {
     if (!summary) {
       return undefined;
@@ -236,7 +240,8 @@ const InternalTable = props => {
   }, [onDataChange]);
   const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
-      const rsFilterData = (0, _utility.updateOrInsert)(convertData, (0, _utils.flattenArray)(callbackData));
+      // const rsFilterData = updateOrInsert(convertData as any, flattenArray(callbackData))
+      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...convertData]), (0, _utils.flattenArray)([...callbackData]));
       const rs = (0, _utils.unFlattenData)(rsFilterData);
       triggerChangeData(rs, {
         type: 'OnPaste'
@@ -557,6 +562,7 @@ const InternalTable = props => {
     groupColumns,
     mode: sortMultiple !== false ? 'multiple' : 'single',
     dataSource: convertData,
+    dataFlatten: dataFlatten,
     rowIndexMap,
     columnResizeMode: 'onChange',
     disableUserSelectWhenResizing: true,
@@ -623,7 +629,9 @@ const InternalTable = props => {
   // }
 
   // reorder rows after drag & drop
-
+  const parentMap = _react.default.useMemo(() => {
+    return (0, _utility.buildParentMap)(convertData);
+  }, [convertData]);
   const isEditing = _react.default.useMemo(() => {
     return pipeline.getStateAtKey(_constants.stateKeyIsEditing);
   }, [pipeline]);
@@ -726,9 +734,9 @@ const InternalTable = props => {
     };
   }, [tableId, pipeline, editAble, headerEditAble, endCell, startCell]);
   const rowsFocus = _react.default.useMemo(() => {
-    const selectRowIds = startCell && endCell ? (0, _utils.getRowIdsBetween3)(convertData, rowIndexMap, startCell.rowId, endCell.rowId) : [];
+    const selectRowIds = startCell && endCell ? (0, _utils.getRowIdsBetween3)(dataFlatten, rowIndexMap, startCell.rowId, endCell.rowId) : [];
     return selectRowIds;
-  }, [convertData, endCell, rowIndexMap, startCell]);
+  }, [dataFlatten, endCell, rowIndexMap, startCell]);
   function handleDragEnd(event) {
     const {
       active,
@@ -827,7 +835,7 @@ const InternalTable = props => {
     // không tính tree
 
     // Cập nhật data mới
-    const newData = (0, _utils.flattenArray)(convertData);
+    const newData = dataFlatten;
     const focusedCell = pipeline.getStateAtKey(_constants.stateKeyFocusedCell);
     const duplicatedItem = newData.find(it => it.rowId === focusedCell?.rowId);
     const duplicatedItems = [{
@@ -842,11 +850,11 @@ 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, _utility.updateOrInsert)(convertData, rsFilter);
+    const rs = (0, _utils.updateOrInsert)(dataFlatten, rsFilter);
     triggerChangeData?.(rs, {
       type: 'DUPLICATE'
     });
-  }, [convertData, pipeline, triggerChangeData]);
+  }, [dataFlatten, pipeline, triggerChangeData]);
 
   // thêm n dòng bên trên
   const handleInsertBefore = _react.default.useCallback((item, n) => {
@@ -1070,8 +1078,8 @@ const InternalTable = props => {
     if (!startCell || !endCell) {
       return;
     }
-    const allRows = dataSource;
-    const rowIds = (0, _utils.getRowIdsBetween3)(convertData, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
+    const allRows = pipeline.getDataSource();
+    const rowIds = (0, _utils.getRowIdsBetween3)(dataFlatten, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
     const colIds = (0, _utils.getColIdsBetween1)(leafColumns, startCell?.colId ?? '', endCell?.colId ?? '');
     const dataToCopy = [];
     rowIds.forEach(rowId => {
@@ -1088,14 +1096,14 @@ const InternalTable = props => {
     // 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]);
+  }, [startCell, endCell, pipeline, dataFlatten, rowIndexMap, leafColumns, copy]);
   _react.default.useEffect(() => {
     const handleKeyDown = e => {
-      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !isEditing) {
-        e.preventDefault();
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !isEditing.editing) {
+        // e.preventDefault();
         copySelectionToClipboard();
       }
-      if (e.ctrlKey && e.key === 'x' && startCell && endCell && !isEditing) {
+      if (e.ctrlKey && e.key === 'x' && startCell && endCell && !isEditing.editing) {
         e.preventDefault();
         if (startCell && endCell) {
           const tmpData = (0, _utils.flattenArray)(convertData);
@@ -1147,7 +1155,8 @@ const InternalTable = props => {
     };
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [startCell, endCell, copySelectionToClipboard, isEditing, convertData, triggerChangeData, leafColumns, rangeState?.rowRange, rangeState?.colRange]);
+  }, [startCell, endCell, copySelectionToClipboard, isEditing, convertData, triggerChangeData, leafColumns, rangeState?.rowRange, rangeState?.colRange, handleCellChange]);
+
   // }, [startCell, endCell, copySelectionToClipboard, isEditing, convertData, triggerChangeData, leafColumns, handleCellChange, rangeState?.rowRange, rangeState?.colRange]);
 
   // Copy
@@ -1159,7 +1168,9 @@ const InternalTable = props => {
       return;
     }
     const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
-    const allRows = convertData;
+
+    // const allRows = convertData
+    const allRows = dataFlatten;
     const allCols = (0, _utils2.collectNodes)(pipeline.getColumns(), 'leaf-only');
     const startRowIdx = rowIndexMap.get(startCell.rowId);
     const startColIdx = allCols.findIndex(c => c.field === startCell.colId);
@@ -1171,7 +1182,7 @@ const InternalTable = props => {
     const row = recordIndex ? allRows[recordIndex] : {};
     if (!row.parentId) {
       // Cập nhật data mới
-      const newData = (0, _utils.flattenArray)(convertData);
+      const newData = dataFlatten;
 
       // Lấy vị trí bắt đầu
 
@@ -1256,12 +1267,14 @@ const InternalTable = props => {
         pastedRows.push(newData[targetRow]);
       });
       const pastedColumnsArray = Array.from(pastedColumns) ?? [];
-      const rsFilterData = (0, _utility.updateOrInsert)(convertData, newData);
+      const rsFilterData = (0, _utils.updateOrInsert)(dataFlatten, 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;
+      // const parent: any = row.getParentRow()?.original
+
+      const parent = parentMap.get(row.rowId);
 
       // Cập nhật childData mới
       const childData = parent?.children ? [...parent.children] : [];
@@ -1289,11 +1302,14 @@ const InternalTable = props => {
             // Không vượt quá số cột
             return;
           }
-          const columnTarget = allCols[targetCol];
-          const columnOri = columnTarget.columnDef.meta ?? {};
+
+          // const columnTarget = allCols[targetCol]
+
+          // const columnOri: any = columnTarget.columnDef.meta ?? {}
+          const columnOri = allCols[targetCol];
           const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(childData[targetRow]) : columnOri.editEnable;
           if (isEdit) {
-            const columnKey = allCols[targetCol].id;
+            const columnKey = allCols[targetCol].field;
             if (columnOri.type === 'number') {
               if (cellValue.trim() === '') {
                 childData[targetRow] = {
@@ -1352,7 +1368,7 @@ const InternalTable = props => {
       const newDataSource = (0, _utils.updateArrayByKey)(convertData, newRowData, rowKey);
       triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
     }
-  }, [convertData, defaultValue, format, onCellPaste?.maxRowsPaste, pipeline, rowIndexMap, startCell, triggerPaste]);
+  }, [startCell, onCellPaste?.maxRowsPaste, dataFlatten, pipeline, rowIndexMap, triggerPaste, defaultValue, format, parentMap, convertData]);
   const handlePasteToTable = _react.default.useCallback((pasteData, e) => {
     if (!startCell) return;
     const rowsPasted = (0, _utils.parseExcelClipboard)(e);
@@ -1383,7 +1399,7 @@ const InternalTable = props => {
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
   _react.default.useEffect(() => {
     const handlePaste = e => {
-      if (startCell && !isEditing) {
+      if (startCell && !isEditing.editing) {
         e.preventDefault(); // Chặn hành vi mặc định
         const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
         handlePasteToTable(clipboardText, e);
@@ -1905,6 +1921,128 @@ const InternalTable = props => {
     }
     return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
   }, [toolbarItems]);
+  const triggerCommandClick = args => {
+    const {
+      id: idCommand,
+      rowId,
+      rowData,
+      index
+    } = args;
+    const tmpData = [...dataSource];
+    if (idCommand === 'DELETE') {
+      // bật modal confirm
+      if (commandSettings && commandSettings.confirmDialog) {
+        MySwal.fire({
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
+          // icon: 'warning',
+          allowOutsideClick: false,
+          showCancelButton: true,
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
+          customClass: {
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
+          },
+          buttonsStyling: false
+        }).then(async result => {
+          if (result.value) {
+            if (!commandSettings || commandSettings && commandSettings.client !== false) {
+              // client
+
+              // kiểm tra dòng hiện tại có parent
+
+              let newData = [];
+              if (rowData?.parentId) {
+                const parent = (0, _utils.findItemByKey)(tmpData, rowKey, rowData.parentId);
+                const childData = parent?.children ? [...parent.children] : [];
+                const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+                childData.splice(Number(findIndex), 1);
+                const newRowData = {
+                  ...parent,
+                  children: childData
+                };
+                // const newDataSource =  updateArrayByKey(tmpData, newRowData, rowKey as string)
+                newData = (0, _utils.updateArrayByKey)(tmpData, newRowData, rowKey);
+              } else {
+                tmpData.splice(Number(index), 1);
+                newData = [...tmpData];
+              }
+              if (commandClick) {
+                commandClick({
+                  id: idCommand,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  rows: [...newData]
+                });
+              }
+            } else {
+              // server ~~ không làm gì
+              if (commandClick) {
+                commandClick({
+                  id: idCommand,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  rows: [...convertData]
+                });
+              }
+            }
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // -------------------
+
+        if (!commandSettings || commandSettings && commandSettings.client !== false) {
+          // client
+
+          let newData2 = [];
+          if (rowData?.parentId) {
+            const parent = (0, _utils.findItemByKey)(convertData, rowKey, rowData.parentId);
+            const childData = parent?.children ? [...parent.children] : [];
+            const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+            childData.splice(Number(findIndex), 1);
+            const newRowData = {
+              ...parent,
+              children: childData
+            };
+            newData2 = (0, _utils.updateArrayByKey)(tmpData, newRowData, rowKey);
+          } else {
+            tmpData.splice(Number(index), 1);
+            newData2 = [...tmpData];
+          }
+          if (commandClick) {
+            commandClick({
+              id: idCommand,
+              rowId,
+              rowData,
+              index,
+              rows: [...newData2]
+            });
+          }
+        } else {
+          // server
+          if (commandClick) {
+            commandClick({
+              id: idCommand,
+              rowId,
+              rowData,
+              index,
+              rows: [...convertData]
+            });
+          }
+        }
+      }
+    } else {
+      if (commandClick) {
+        commandClick({
+          ...args,
+          rows: convertData
+        });
+      }
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
     locale: language,
     theme: {
@@ -2000,7 +2138,8 @@ const InternalTable = props => {
     toolbarItemTopRight: toolbarItemTopRight,
     toolbarItemsTop: toolbarItemsTop,
     toolbarItemsBottom: toolbarItemsBottom,
-    isDataTree: isDataTree
+    isDataTree: isDataTree,
+    commandClick: triggerCommandClick
   })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Modal, {
     open: isFullScreen,
     footer: null,
@@ -2058,7 +2197,8 @@ const InternalTable = props => {
     defaultFilter: defaultFilter,
     defaultSorter: defaultSorter,
     dataRowIds: dataIds,
-    editAble: editAble
+    editAble: editAble,
+    commandClick: triggerCommandClick
   }))))))));
 };
 var _default = exports.default = InternalTable;