es-grid-template 1.8.71 → 1.8.73

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

@@ -0,0 +1,1398 @@
+import { flexRender } from "@tanstack/react-table";
+import Space from "rc-master-ui/es/space";
+import Command from "../components/command/Command";
+import ReactDOMServer from 'react-dom/server';
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getEditType, 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";
+import { TableContext } from "../useContext";
+import EditableCell from "./EditableCell";
+import { nonActionColumn } from "../../grid-component/hooks";
+import { toggleRowSelection } from "../hook/useColumns";
+import { unGroupData } from "../../table-virtuoso/hook/utils";
+const renderCellIndex = props => {
+  const {
+    parrents,
+    cell,
+    pagination
+  } = props;
+  if (parrents && parrents.length > 0) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc_cell-content"
+    }, parrents.map(pr => {
+      return `${pr.index + 1}.`;
+    }), cell.row.index + 1);
+  }
+  if (pagination && pagination.onChange) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc_cell-content"
+    }, cell.row.index + (pagination ? ((pagination.currentPage ?? 1) - 1) * (pagination?.pageSize ?? 0) : 0) + 1);
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, cell.row.index + 1);
+};
+const renderCommand = args => {
+  const {
+    cell,
+    commandClick,
+    id,
+    data
+  } = args;
+  const col = cell.column.columnDef.meta ?? {};
+  const record = cell.row.original;
+
+  // const commandItems = args.cell.column.columnDef?.meta?.commandItems ?? []
+
+  const commands = col.commandItems ? col.commandItems.map(it => {
+    return {
+      ...it,
+      visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
+    };
+  }) : [];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc_cell-content"
+  }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
+    return /*#__PURE__*/React.createElement(Command, {
+      id: id,
+      key: item.id,
+      item: item,
+      record: record,
+      onClick: () => {
+        commandClick?.({
+          id: item.id,
+          // rowId: getRowKey(record, index) as any,
+          rowId: record.rowId,
+          rowData: record,
+          index: cell.row.index,
+          rows: [...data]
+        });
+      }
+    });
+  })));
+};
+const renderSelection = args => {
+  const {
+    row
+  } = args.cell;
+  const {
+    cell,
+    expandIconColumnIndex,
+    isDataTree,
+    expanded,
+    setExpanded
+  } = args;
+  const {
+    selectionSettings,
+    setIsSelectionChange,
+    isSelectionChange
+  } = args;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+
+      // paddingLeft: `${row.depth * 2}rem`,
+    }
+  }, 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();
+      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"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: row.getIsSelected() || row.getIsAllSubRowsSelected(),
+    indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single'
+    // indeterminate={row.getIsSomeSelected() }
+    // onChange={(e) => {
+
+    //   row.getToggleSelectedHandler()(e)
+
+    //   if (row.getIsSelected()) { // nếu đã chọn
+
+    //     const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)
+
+    //     setIsSelectionChange({
+    //       isChange: true,
+    //       type: 'rowSelected',
+    //       rowData: row.original,
+    //       rowsData: aaa ?? []
+    //     })
+
+    //   } else {
+
+    //     const { rowsData } = isSelectionChange ?? {}
+
+    //     const abc = rowsData && rowsData.length > 0 ? [...rowsData] : []
+
+    //     abc.push(row)
+
+    //     setIsSelectionChange({
+    //       isChange: true,
+    //       type: 'rowSelected',
+    //       rowData: row.original,
+    //       rowsData: abc
+    //     })
+    //   }
+
+    // }}
+    ,
+
+    onChange: e => {
+      toggleRowSelection({
+        e,
+        cell,
+        setIsSelectionChange,
+        isSelectionChange,
+        selectionSettings
+      });
+    },
+    disabled: !row.getCanSelect()
+  })));
+};
+const TableBodyCellEdit = props => {
+  const {
+    cell,
+    commandClick,
+    // tableId,
+    table,
+    isEditing,
+    isRowEditable,
+    columnVirtualizer,
+    rowVirtualizer
+    // virtualRow
+  } = props;
+  const {
+    id,
+    rowKey,
+    editingKey,
+    prefix,
+    focusedCell,
+    rangeState,
+    setFocusedCell,
+    setEditingKey,
+    setRangeState,
+    setRangePasteState,
+    endCell,
+    setEndCell,
+    isSelecting,
+    isPasting,
+    setEndPasteCell,
+    endPasteCell,
+    setIsPasting,
+    setIsSelecting,
+    setStartCell,
+    setStartPasteCell,
+    startCell,
+    startPasteCell,
+    originData,
+    dataSource,
+    triggerPaste,
+    handleDeleteContent,
+    reset,
+    setValue,
+    getValues,
+    handleCellChange,
+    handleCellChangeAndAddRow,
+    dataErrors,
+    expanded,
+    setExpanded,
+    expandable,
+    isDataTree,
+    handleCellClick,
+    isSelectionChange,
+    setIsSelectionChange,
+    selectionSettings,
+    pagination,
+    handleAddMulti,
+    groupColumns
+  } = React.useContext(TableContext);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex;
+  const record = cell.row.original;
+  const columnMeta = cell.column.columnDef.meta ?? {};
+  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(),
+    record
+  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
+  const canEdit = isEditable(cell.column.columnDef.meta, record) && isRowEditable !== false;
+
+  // const allRows = table.getRowModel().rows;
+  const allRows = table.getRowModel().flatRows;
+
+  // const rowNumber = virtualRow.index
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
+  const colIndex = cell.column.getIndex();
+  const isPinned = cell.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const selectRowIds = React.useMemo(() => {
+    return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
+  }, [endCell, startCell, table]);
+  const isCellSelected = React.useMemo(() => {
+    if (!startCell || !endCell) return false;
+
+    // const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
+    const colIds = getColIdsBetween(table, startCell.colId, endCell.colId);
+    return selectRowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
+  }, [cell.column.id, cell.row.id, endCell, selectRowIds, startCell, table]);
+  const editType = typeof columnMeta.editType === 'function' ? columnMeta.editType(record) : columnMeta.editType;
+  const {
+    rowRange,
+    colRange,
+    rowIds,
+    colIds,
+    startColIndex,
+    startRowIndex,
+    endColIndex,
+    endRowIndex
+  } = rangeState ?? {};
+  const pasteRangeState = getSelectedCellMatrix(table, startPasteCell, endPasteCell);
+  const isInRange = colRange && rowRange && rowRange.includes(cell.row.id) && colRange.includes(cell.column.id);
+  const isInRangePaste = pasteRangeState.rowRange && pasteRangeState.rowRange.includes(cell.row.id) && pasteRangeState.colRange.includes(cell.column.id);
+
+  // const isInRangePaste = rowRange && rowRange.includes(cell.row.id) && colRange.includes(cell.column.id);
+
+  const rowIdx = rowIds ? rowIds.indexOf(cell.row.id) : -1;
+  const colIdx = colIds ? colIds.indexOf(cell.column.id) : -1;
+  const rowIdxPaste = pasteRangeState.rowIds.indexOf(cell.row.id);
+  const colIdxPaste = pasteRangeState.colIds.indexOf(cell.column.id);
+  const isTop = rowIdx === startRowIndex;
+  const isBottom = rowIdx === endRowIndex;
+  const isLeft = colIdx === startColIndex;
+  const isRight = colIdx === endColIndex;
+  const isTopPaste = rowIdxPaste === pasteRangeState.startRowIndex;
+  const isBottomPaste = rowIdxPaste === pasteRangeState.endRowIndex;
+  const isLeftPaste = colIdxPaste === pasteRangeState.startColIndex;
+  const isRightPaste = colIdxPaste === pasteRangeState.endColIndex;
+  const parrents = cell.row.getParentRows();
+  const triggerDragPaste = (pasteState, ctrlKey) => {
+    const tmpCols = table.getVisibleLeafColumns();
+    const rowPasteIds = getRowIdsBetween(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
+    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 = [];
+    rowSelectIds.forEach(rowId => {
+      const row = allRows.find(r => r.id === rowId);
+      if (!row) return;
+      const rowData = [];
+      colSelectIds.forEach(colId => {
+        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
+        const value = cellll?.getValue();
+        rowData.push(value !== undefined ? value : '');
+      });
+      dataSelected.push(rowData);
+    });
+    const copyRows = flattenData('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
+    let newRange;
+    if ((startRowIndex ?? 0) < (pasteRangeState.startRowIndex ?? 0)) {
+      // kéo xuóng
+      setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell));
+      newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowPasteIds.length) : addRowsDown(dataSelected, rowPasteIds.length);
+    } else {
+      // kéo lên
+      setStartCell?.(endCell);
+      setRangeState?.(getSelectedCellMatrix(table, endCell, endPasteCell));
+      newRange = ctrlKey ? addRowsUpWithCtrl(dataSelected, rowPasteIds.length) : addRowsUp(dataSelected, rowPasteIds.length);
+    }
+
+    // Cập nhật data mới
+    const newData = flattenArray([...dataSource]);
+    const pastedRows = [];
+    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
+          };
+        }
+      });
+
+      // 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);
+
+    // // setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell))
+
+    setEndCell?.(endPasteCell);
+    setEndPasteCell?.(undefined);
+    setStartPasteCell?.(undefined);
+    setRangePasteState?.(undefined);
+  };
+  const triggerDragPasteGroup = (pasteState, ctrlKey) => {
+    const tmpCols = table.getVisibleLeafColumns();
+    const rowPasteIds = getRowIdsBetween(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
+    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 = [];
+    rowSelectIds.forEach(rowId => {
+      const row = allRows.find(r => r.id === rowId);
+      if (!row) return;
+      const rowData = [];
+      colSelectIds.forEach(colId => {
+        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
+        const value = cellll?.getValue();
+        rowData.push(value !== undefined ? value : '');
+      });
+      dataSelected.push(rowData);
+    });
+    const copyRows = flattenData('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
+    // const copyRows = flattenData('children', originData).filter((it) => rowSelectIds.includes(it[rowKey]))
+
+    let newRange;
+    if ((startRowIndex ?? 0) < (pasteRangeState.startRowIndex ?? 0)) {
+      // kéo xuóng
+      setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell));
+      newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowPasteIds.length) : addRowsDown(dataSelected, rowPasteIds.length);
+    } else {
+      // kéo lên
+      setStartCell?.(endCell);
+      setRangeState?.(getSelectedCellMatrix(table, endCell, endPasteCell));
+      newRange = ctrlKey ? addRowsUpWithCtrl(dataSelected, rowPasteIds.length) : addRowsUp(dataSelected, rowPasteIds.length);
+    }
+
+    // Cập nhật data mới
+    const newData = flattenArray([...dataSource]);
+    const pastedRows = [];
+    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
+          };
+        }
+      });
+
+      // Lưu dòng được paste
+      pastedRows.push(newData[targetRow]);
+    });
+
+    // return
+
+    const rsFilterData = updateOrInsert(flattenArray([...dataSource]), newData);
+    // const rsFilterData = updateOrInsert(flattenArray([...originData]), newData)
+
+    const rs = unFlattenData(rsFilterData);
+    const dta = unGroupData(rs, originData);
+    triggerPaste?.(pastedRows, colPasteds, dta, copyRows);
+
+    // // setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell))
+
+    setEndCell?.(endPasteCell);
+    setEndPasteCell?.(undefined);
+    setStartPasteCell?.(undefined);
+    setRangePasteState?.(undefined);
+  };
+  const triggerPointPaste = (pasteState, cellStart, cellEnd, ctrlKey) => {
+    const tmpCols = table.getVisibleLeafColumns();
+    const rowPasteIds = getRowIdsBetween(table, cellStart?.rowId ?? '', cellEnd?.rowId ?? '');
+    const colPasteds = getColIdsBetween(table, cellStart?.colId ?? '', cellEnd?.colId ?? '');
+    const rowSelectIds = getRowIdsBetween(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
+    const colSelectIds = getColIdsBetween(table, startCell?.colId ?? '', endCell?.colId ?? '');
+    const dataSelected = [];
+    rowSelectIds.forEach(rowId => {
+      const row = allRows.find(r => r.id === rowId);
+      if (!row) return;
+      const rowData = [];
+      colSelectIds.forEach(colId => {
+        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
+        const value = cellll?.getValue();
+        rowData.push(value !== undefined ? value : '');
+      });
+      dataSelected.push(rowData);
+    });
+    const copyRows = flattenData('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
+
+    // kéo xuóng
+    // setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell))
+    const newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowPasteIds.length) : addRowsDown(dataSelected, rowPasteIds.length);
+
+    // Cập nhật data mới
+    const newData = flattenArray([...dataSource]);
+    const pastedRows = [];
+    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;
+        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);
+  };
+  function handleMouseEnter(e, rowId, colId) {
+    if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+      setIsOpenTooltip(true);
+    }
+    if (isSelecting) {
+      setEndCell?.({
+        rowId,
+        colId
+      });
+    }
+    if (isPasting) {
+      const absRowIndex = table.getRowModel().flatRows.findIndex(it => it.id === cell.row.id);
+      if ((startRowIndex ?? 0) > absRowIndex) {
+        // kéo lên
+
+        const startRowPaste = allRows.find(it => it.index === (startRowIndex ?? 0) - 1);
+        setStartPasteCell?.({
+          colId: startCell?.colId ?? '',
+          rowId: startRowPaste?.id ?? ''
+        });
+        setEndPasteCell?.({
+          colId: endCell?.colId ?? '',
+          rowId
+        });
+        setRangePasteState?.(getSelectedCellMatrix(table, {
+          colId: startCell?.colId ?? '',
+          rowId: startRowPaste?.id ?? ''
+        }, {
+          colId: endCell?.colId ?? '',
+          rowId
+        }));
+      }
+      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, {
+          colId: startCell?.colId ?? '',
+          rowId: startRowPaste?.id ?? ''
+        }, {
+          colId: endCell?.colId ?? '',
+          rowId
+        }));
+      }
+    }
+  }
+  const handlePointDoubleClick = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const rowEnd = table.getRowModel().flatRows[table.getRowModel().flatRows.length - 1];
+    const cellEnd = {
+      rowId: rowEnd.id,
+      colId: cell.column.id
+    };
+    const currentRowId = allRows.findIndex(it => it.id === cell.row.id);
+    const pasteStartRow = allRows[currentRowId + 1];
+    const cellStart = {
+      rowId: pasteStartRow.id,
+      colId: endCell?.colId ?? ''
+    };
+    const selectState = getSelectedCellMatrix(table, startCell, cellEnd);
+    const selectPasteState = getSelectedCellMatrix(table, cellStart, cellEnd);
+    setRangeState?.(selectState);
+    setEndCell?.(cellEnd);
+    triggerPointPaste(selectPasteState, cellStart, cellEnd, e.ctrlKey);
+  };
+  function handleMouseUp(e) {
+    setIsSelecting?.(false);
+    setIsPasting?.(false);
+    const selectState = getSelectedCellMatrix(table, startCell, endCell);
+    const selectPasteState = getSelectedCellMatrix(table, startPasteCell, endPasteCell);
+    if (endPasteCell && endCell?.rowId !== endPasteCell?.rowId && isPasting) {
+      // triggerDragPaste(selectPasteState, e.ctrlKey)
+
+      if (groupColumns && groupColumns.length > 0) {
+        triggerDragPasteGroup(selectPasteState, e.ctrlKey);
+      } else {
+        triggerDragPaste(selectPasteState, e.ctrlKey);
+      }
+    } else {
+      // if ( endCell?.rowId !== rowId || endCell?.colId !== colId) {
+      //   setRangeState?.(selectState)
+      // }
+
+      if (!isObjEqual(rangeState, selectState)) {
+        setRangeState?.(selectState);
+      }
+    }
+
+    // setRangePasteState(selectPasteState)
+  }
+  const handleEdit = (e, isKeyDown) => {
+    setEditingKey?.(record[rowKey]);
+    // setTooltipContent('')
+
+    handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
+    reset?.();
+
+    // const formattedRecord = { ...record };
+
+    if (!isObjEmpty(record)) {
+      Object.entries(record).forEach(([name, value]) => {
+        setValue?.(name, value);
+      });
+    }
+    if (isKeyDown) {
+      if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
+        setValue(columnMeta.field, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
+      }
+    }
+    if (editType === 'select') {
+
+      // setSearchValue(e.key)
+      // setOpen(true)
+    }
+    if (focusedCell?.rowId) {
+      setTimeout(() => {
+        // const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] input`) as HTMLInputElement
+        // const textarea = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowNumber}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] textarea`) as any
+        const textarea = document.querySelector(`.ui-rc-grid-row .cell-editing[data-row-key="${focusedCell.rowId}"].cell-editing[data-col-key="${focusedCell.colId}"] textarea`);
+        // const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells.current.col}"] .ant-select-selection-search input`)
+
+        if (textarea) {
+          textarea.focus();
+          textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+        }
+        // if (input) {
+        //   input.focus()
+        // }
+
+        // if (select) {
+        //   // @ts-ignore
+        //   select.searchValue = e.key
+        //   // @ts-ignore
+        //   select.focus()
+        // }
+      }, 10);
+    }
+  };
+  function handleKeyDown(e, rowId, colId) {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const allCols = table.getVisibleLeafColumns();
+      const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
+      const nextCol = allCols[currentColIndex + 1];
+      if (nextCol) {
+        setFocusedCell?.({
+          rowId,
+          colId: nextCol.id
+        });
+        setStartCell?.({
+          rowId,
+          colId: nextCol.id
+        });
+        setEndCell?.({
+          rowId,
+          colId: nextCol.id
+        });
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId,
+          colId: nextCol.id
+        }, {
+          rowId,
+          colId: nextCol.id
+        }));
+        columnVirtualizer.scrollToIndex(nextCol.getIndex(), {
+          align: 'center'
+        });
+      } else {
+        // Nếu là cột cuối cùng, có thể nhảy xuống dòng tiếp theo
+
+        const currentRowIndex = allRows.findIndex(r => r.id === rowId);
+        const nextRow = allRows[currentRowIndex + 1];
+        const nextRowCol = allCols[2];
+        if (nextRow) {
+          setFocusedCell?.({
+            rowId: nextRow.id,
+            colId: nextRowCol.id
+          }); // sang dòng, cột đầu
+
+          setStartCell?.({
+            rowId: nextRow.id,
+            colId: nextRowCol.id
+          });
+          setEndCell?.({
+            rowId: nextRow.id,
+            colId: nextRowCol.id
+          });
+          setRangeState?.(getSelectedCellMatrix(table, {
+            rowId: nextRow.id,
+            colId: nextRowCol.id
+          }, {
+            rowId: nextRow.id,
+            colId: nextRowCol.id
+          }));
+          columnVirtualizer.scrollToIndex(nextRowCol.getIndex());
+          rowVirtualizer.scrollToIndex(nextRow.index, {
+            align: 'auto'
+          });
+        }
+      }
+      return;
+    }
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      e.stopPropagation();
+      const allCols = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
+      const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
+      const nextCol = allCols[currentColIndex + 1];
+      if (nextCol) {
+        setFocusedCell?.({
+          rowId,
+          colId: nextCol.id
+        });
+        setStartCell?.({
+          rowId,
+          colId: nextCol.id
+        });
+        setEndCell?.({
+          rowId,
+          colId: nextCol.id
+        });
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId,
+          colId: nextCol.id
+        }, {
+          rowId,
+          colId: nextCol.id
+        }));
+        columnVirtualizer.scrollToIndex(nextCol.getIndex(), {
+          align: 'center'
+        });
+      }
+      return;
+    }
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      const allCols = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
+
+      // const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
+      const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
+      const nextCol = allCols[currentColIndex - 1];
+      if (nextCol) {
+        setFocusedCell?.({
+          rowId,
+          colId: nextCol.id
+        });
+        setStartCell?.({
+          rowId,
+          colId: nextCol.id
+        });
+        setEndCell?.({
+          rowId,
+          colId: nextCol.id
+        });
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId,
+          colId: nextCol.id
+        }, {
+          rowId,
+          colId: nextCol.id
+        }));
+        columnVirtualizer.scrollToIndex(nextCol.getIndex(), {
+          align: 'center'
+        });
+      }
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      // e.preventDefault()
+      // e.stopPropagation()
+
+      let nextRowIndex = rowNumber + 1;
+      let nextRow = table.getRowModel().rows[nextRowIndex];
+
+      // Nếu nextRow có children và chưa được expand, thì tìm tiếp dòng tiếp theo
+      while (nextRow && nextRow.subRows && nextRow.subRows.length > 0) {
+        nextRowIndex++;
+        nextRow = table.getRowModel().rows[nextRowIndex];
+      }
+      if (nextRow) {
+        const nextRowId = nextRow.id;
+        setFocusedCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setStartCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setEndCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId: nextRowId,
+          colId
+        }, {
+          rowId: nextRowId,
+          colId
+        }));
+
+        // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
+        // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
+
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      // e.preventDefault()
+      // e.stopPropagation()
+
+      // const nextRow = table.getRowModel().rows[rowNumber - 1]
+
+      let prevRowIndex = rowNumber - 1;
+      let prevRow = table.getRowModel().rows[prevRowIndex];
+
+      // Nếu nextRow có children và chưa được expand, thì tìm tiếp dòng tiếp theo
+      while (prevRow && prevRow.subRows && prevRow.subRows.length > 0) {
+        prevRowIndex--;
+        prevRow = table.getRowModel().rows[prevRowIndex];
+      }
+      if (prevRow) {
+        const nextRowId = prevRow.id;
+        setFocusedCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setStartCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setEndCell?.({
+          rowId: nextRowId,
+          colId
+        });
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId: nextRowId,
+          colId
+        }, {
+          rowId: nextRowId,
+          colId
+        }));
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      return;
+    }
+    if (e.key === 'Delete') {
+      handleDeleteContent?.();
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      handleEdit(e, true);
+      return;
+    }
+    if (e.key.length === 1 && !e.ctrlKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleEdit(e, true);
+      // setValue(cell.column.id, editType === 'numeric' ? (!isNaN(Number(e.key)) ? Number(e.key) : '') : e.key)
+    }
+  }
+  function handleMouseDown(rowId, colId) {
+    setIsSelecting?.(true);
+    if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
+      setStartCell?.({
+        rowId,
+        colId
+      });
+      setEndCell?.({
+        rowId,
+        colId
+      });
+      setRangeState?.(getSelectedCellMatrix(table, {
+        rowId,
+        colId
+      }, {
+        rowId,
+        colId
+      }));
+    }
+    if (focusedCell?.rowId !== cell.row.id || focusedCell?.colId !== cell.column.id) {
+      setFocusedCell?.({
+        rowId: cell.row.id,
+        colId: cell.column.id
+      });
+    }
+  }
+  const handleMouseDownIndex = rowId => {
+    setIsSelecting?.(true);
+    const allColumns = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
+    const firstCOlSpin = findFirst(allColumns);
+    const startCol = allColumns[0].id;
+    const endCol = allColumns[allColumns.length - 1].id;
+    setStartCell?.({
+      rowId,
+      colId: startCol
+    });
+    setEndCell?.({
+      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
+      });
+    }
+    setRangeState?.(getSelectedCellMatrix(table, {
+      rowId,
+      colId: startCol
+    }, {
+      rowId,
+      colId: endCol
+    }));
+  };
+  const handleMouseEnterIndex = rowId => {
+    if (isSelecting) {
+      const allColumns = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
+
+      // const firstCOl = findFirst(allColumns)
+
+      // const startCol = allColumns[0].id
+      const endCol = allColumns[allColumns.length - 1].id;
+
+      // setStartCell?.({ rowId, colId: startCol });
+      setEndCell?.({
+        rowId,
+        colId: endCol
+      });
+    }
+  };
+  const handleMouseUpIndex = () => {
+    setIsSelecting?.(false);
+    // setIsPasting?.(false);
+
+    const selectState = getSelectedCellMatrix(table, startCell, endCell);
+    if (!isObjEqual(rangeState, selectState)) {
+      setRangeState?.(selectState);
+    }
+  };
+  if (cell.column.id === "#") {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-index editable`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${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',
+        // [`${prefix}-grid-cell-index-selected`]: rowRange?.includes(cell.row.id),
+        [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(cell.row.id)
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        userSelect: 'none',
+        width: cell.column.getSize(),
+        // flexBasis: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      },
+      onMouseDown: () => {
+        if (record[rowKey] === editingKey) {
+          setFocusedCell?.({
+            rowId: cell.row.id,
+            colId: cell.column.id
+          });
+        } else {
+          handleMouseDownIndex(cell.row.id);
+          if (editingKey) {
+            setTimeout(() => {
+              setEditingKey?.('');
+              reset?.();
+            });
+          }
+
+          // reset?.()
+        }
+      },
+      onMouseEnter: () => {
+        handleMouseEnterIndex(cell.row.id);
+      },
+      onMouseUp: handleMouseUpIndex
+      // onMouseUp={() => {
+
+      //   handleMouseUpIndex()
+
+      // }}
+    }, 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();
+        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"
+    }))), renderCellIndex({
+      parrents,
+      cell,
+      pagination
+    }));
+  }
+  if (cell.column.id === "command") {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-command editable`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${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'
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, renderCommand({
+      cell,
+      commandClick,
+      id,
+      data: originData
+    }));
+  }
+  if (cell.column.id === "selection_column") {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-selection editable`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${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'
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, cell.column.id === "selection_column" && renderSelection({
+      cell,
+      table,
+      selectionSettings,
+      setIsSelectionChange,
+      expanded,
+      isDataTree,
+      setExpanded,
+      expandIconColumnIndex,
+      isSelectionChange
+    }));
+  }
+  const handleChange = () => {
+    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
+    const formState = getValues();
+    const itemState = getValues(cell.column.id);
+    const prevState = record[cell.column.id];
+    const newState = itemState;
+    if (newState !== prevState) {
+      handleCellChange?.({
+        key: cell.row.id,
+        field: cell.column.id,
+        record: formState,
+        prevState,
+        newState,
+        option: newState,
+        indexCol: cell.column.getIndex(),
+        indexRow: currentRowIndex,
+        type: 'blur'
+      });
+    } else {}
+  };
+  const handleChangeAndCreateRow = () => {
+    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
+    const formState = getValues();
+    const itemState = getValues(cell.column.id);
+    const prevState = record[cell.column.id];
+    const newState = itemState;
+    if (newState !== prevState) {
+      // vừa cell change + add new row
+      handleCellChangeAndAddRow?.({
+        key: cell.row.id,
+        field: cell.column.id,
+        record: formState,
+        prevState,
+        newState,
+        option: newState,
+        indexCol: cell.column.getIndex(),
+        indexRow: currentRowIndex,
+        type: 'blur'
+      });
+    } else {
+      // chỉ add new row
+
+      const newRowId = newGuid();
+      handleAddMulti?.({}, 1, newRowId);
+      setFocusedCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setStartCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setEndCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setTimeout(() => {
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }));
+      });
+      setTimeout(() => {
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+          cellFocus.focus();
+        }
+      }, 100);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    key: cell.id,
+    ref: el => {
+      if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
+        el?.focus();
+      }
+    },
+    tabIndex: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? 0 : -1,
+    "data-col-index": colIndex,
+    "data-row-index": rowNumber,
+    "data-col-key": cell.column.id,
+    "data-row-key": cell.row.id,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-delay-show": 500,
+    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent)),
+    className: classNames(`${prefix}-grid-cell cell-editable editable `, {
+      [`${prefix}-grid-cell-ellipsis`]: true,
+      'cell-editing': isEditing,
+      // disable: !isEditable(cell.column.columnDef.meta as any, record),
+      disable: !canEdit,
+      isValid: !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id,
+      [`${prefix}-grid-cell-selected`]: isCellSelected,
+      'cell-border-bottom': !isEditing && isInRange && isBottom,
+      'cell-border-right': !isEditing && isInRange && isRight,
+      'cell-border-top': !isEditing && isInRange && isTop,
+      'cell-border-left': !isEditing && isInRange && isLeft,
+      'cell-paste-border-bottom': isInRangePaste && isBottomPaste && (pasteRangeState.endRowIndex ?? 0) > (endRowIndex ?? 0),
+      'cell-paste-border-right': isInRangePaste && isRightPaste,
+      'cell-paste-border-top': isInRangePaste && isTopPaste && (pasteRangeState.endRowIndex ?? 0) < (endRowIndex ?? 0),
+      'cell-paste-border-left': isInRangePaste && isLeftPaste,
+      [`${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'
+    }),
+    style: {
+      display: 'flex',
+      width: cell.column.getSize(),
+      minWidth: cell.column.getSize(),
+      // flex: 1,
+      // maxWidth: cell.column.getSize(),
+      height: '36px',
+      ...getCommonPinningStyles(cell.column),
+      cursor: isPasting ? 'crosshair' : undefined
+    },
+    onMouseDown: () => {
+      if (record[rowKey] === editingKey) {
+        setFocusedCell?.({
+          rowId: cell.row.id,
+          colId: cell.column.id
+        });
+        if (canEdit) {
+          handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
+        }
+      } else {
+        handleMouseDown(cell.row.id, cell.column.id);
+        if (editingKey) {
+          setTimeout(() => {
+            setEditingKey?.('');
+            reset?.();
+          });
+        }
+      }
+    },
+    onMouseEnter: e => handleMouseEnter(e, cell.row.id, cell.column.id),
+    onMouseUp: e => handleMouseUp(e),
+    onKeyDown: e => {
+      if (!isEditing) {
+        handleKeyDown(e, cell.row.id, cell.column.id);
+      } else {
+        if (e.shiftKey && e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+        } else {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            const currentRowIndex = allRows.findIndex(r => r.id === cell.row.id);
+            const nextRow = allRows[currentRowIndex + 1];
+            if (nextRow) {
+              setFocusedCell?.({
+                rowId: nextRow.id,
+                colId: cell.column.id
+              });
+              setStartCell?.({
+                rowId: nextRow.id,
+                colId: cell.column.id
+              });
+              setEndCell?.({
+                rowId: nextRow.id,
+                colId: cell.column.id
+              });
+              setRangeState?.(getSelectedCellMatrix(table, {
+                rowId: nextRow.id,
+                colId: cell.column.id
+              }, {
+                rowId: nextRow.id,
+                colId: cell.column.id
+              }));
+              rowVirtualizer.scrollToIndex(nextRow.index, {
+                align: 'center'
+              });
+              handleChange();
+            } else {
+              handleChangeAndCreateRow();
+            }
+            setEditingKey?.('');
+            reset?.();
+          }
+        }
+      }
+    },
+    onDoubleClick: e => {
+      if (!canEdit) {
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
+      if (!(record[rowKey] === editingKey && canEdit)) {
+        handleEdit(e);
+      }
+    }
+  }, isEditing && canEdit ? /*#__PURE__*/React.createElement(EditableCell, {
+    cellEditing: {},
+    column: cell.column.columnDef.meta,
+    dataIndex: cell.column.id,
+    editType: getEditType(cell.column.columnDef.meta, record),
+    indexCol: cell.column.getIndex(),
+    indexRow: cell.row.index,
+    record: record
+    // rowKey={rowKey}
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc_cell-content', {
+      'select-cell': ['select', 'selectTable', 'asyncSelect'].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();
+      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"
+  }))), flexRender(cell.column.columnDef.cell, cell.getContext()), (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
+    className: 'caret-down',
+    onClick: e => {
+      handleEdit(e);
+      // setEditingKey?.(cell.row.id)
+    }
+  })), !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',
+    onMouseDown: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.button === 0) {
+        setIsPasting?.(true);
+      }
+    },
+    onDoubleClick: handlePointDoubleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: 'dot-point'
+  })), !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id && /*#__PURE__*/React.createElement("span", {
+    className: "isValid"
+  }));
+};
+export default TableBodyCellEdit;