es-grid-template 1.2.0 → 1.2.1

package/es/grid-component/table/GridEdit.js

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { Button, Dropdown, Form } from "antd";
 import { useForm } from 'react-hook-form';
 import { Toaster } from "react-hot-toast";
-import { flatColumns, renderContent } from "../hooks/useColumns";
+import { flatColumns2, getValueCell, renderContent } from "../hooks/columns";
 import EditableCell from "../EditableCell";
 import { GridStyle } from "../GridStyle";
 import { TableContext } from "../useContext";
@@ -13,13 +13,16 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { getEditType, getRowNumber, isObjEmpty, totalFixedWidth } from "../hooks";
+import { addRows8, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 
 // import Command from "../Command";
 
 import { Toolbar } from "rc-master-ui";
 import classnames from "classnames";
+import useMergedState from "rc-util/es/hooks/useMergedState";
+// import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
+
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
 const GridEdit = props => {
@@ -34,24 +37,37 @@ const GridEdit = props => {
     selectionSettings,
     height,
     format,
-    // onDataChange,
     triggerChangeData,
+    triggerChangeColumns,
     onCellPaste,
     onCellChange,
+    triggerPaste,
     style,
     getRowKey,
     className,
     toolbarItems,
+    defaultValue,
+    expandable,
+    onCellClick,
     ...rest
   } = props;
-
-  // const forceUpdate = useForceUpdate();
-  // const [updateKey, setUpdateKey] = useState(0);
-
+  const {
+    mode,
+    type,
+    // checkboxOnly,
+    // hideSelectAll,
+    columnWidth
+    // selectedRowKeys,
+    // defaultSelectedRowKeys
+  } = selectionSettings || {};
   const isSelecting = useRef(false);
   const startCell = useRef(null);
+  const childrenColumnName = 'children';
   const isSelectingRow = useRef(false);
   const rowStart = useRef(null);
+
+  // const [getRecordByKey] = useLazyKVMap(dataSource, childrenColumnName, getRowKey);
+
   const itemsAdd = [{
     key: '10',
     label: '10 rows'
@@ -65,19 +81,168 @@ const GridEdit = props => {
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
   const [selectedCells, setSelectedCells] = useState(new Set());
+  const [pasteCells, setPasteCells] = useState(new Set());
+  const [isSelectDragging, setSelectIsDragging] = useState(false);
+  const [isPasteDragging, setIsPasteDragging] = useState(false);
+
+  // const [showDraggingPoint, setShowDraggingPoint] = useState(false);
+
   const [rowsSelected, setRowsSelected] = useState(new Set());
-  const [selectedCell, setSelectedCell] = useState(null);
-  const handleAdd = item => {
-    console.log(item);
+  const [startSelectedCells, setStartSelectedCell] = useState(null);
+  const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(() => {
+    // if (defaultExpandedRowKeys) {
+    //   return defaultExpandedRowKeys;
+    // }
+    // if (defaultExpandAllRows) {
+    return findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? [];
+    // }
+    // return [];
+  });
+  const mergedExpandedKeys = React.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
+  const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState([], {
+    value: []
+  });
+  const rowsFocus = React.useMemo(() => {
+    return [...new Set(Array.from(selectedCells).map(item => parseInt(item.split('-')[0])))] ?? [];
+  }, [selectedCells]);
+  const onTriggerExpand = React.useCallback(record => {
+    const key = getRowKey(record, dataSource.indexOf(record));
+    let newExpandedKeys;
+    const hasKey = mergedExpandedKeys.has(key);
+    if (hasKey) {
+      mergedExpandedKeys.delete(key);
+      newExpandedKeys = [...mergedExpandedKeys];
+    } else {
+      newExpandedKeys = [...mergedExpandedKeys, key];
+    }
+    setInnerExpandedKeys(newExpandedKeys);
+  }, [getRowKey, mergedExpandedKeys, dataSource]);
+  const handleAddSingle = item => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
     if (item.onClick) {
-      console.log('cccccccccccccccc');
+      item.onClick({
+        toolbar: item
+      });
     } else {
-      console.log('bbbbbbbbbbbbb');
+      const newData = [...dataSource, defaultValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId
+      } : {
+        id: undefined,
+        rowId
+      }];
+      triggerChangeData?.(newData, 'Add');
+    }
+  };
+  const handleAddMulti = (item, e) => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const defaultRowValue = getDefaultValue(defaultValue);
+      const newRows = Array.from({
+        length: Number(e.key)
+      }).map(() => defaultRowValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId: newGuid()
+      } : {
+        id: undefined,
+        rowId: newGuid()
+      });
+      const newData = dataSource.concat(newRows);
+      triggerChangeData?.(newData, 'Add');
+    }
+  };
+  const handleDuplicate = () => {
+    console.log('rowsFocus', rowsFocus);
+  };
+  const handleInsertBefore = item => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+    const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (!record.parentId) {
+        // Cập nhật data mới
+        const newData = [...dataSource];
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: null
+        });
+        triggerChangeData?.(newData, 'INSERT_BEFORE');
+      } else {
+        const newData = [...dataSource];
+        const parent = findItemByKey(newData, rowKey, record.parentId);
+
+        // Cập nhật childData mới
+        const childData = parent?.children ? [...parent.children] : [];
+        const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        childData.splice(index, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: record.parentId
+        });
+        const newRowData = {
+          ...parent,
+          children: childData
+        };
+        const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
+        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+      }
+    }
+  };
+  const handleInsertAfter = item => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+    const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
+
+    // const record = getRecordByKey()
+
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (!record.parentId) {
+        // Cập nhật data mới
+        const newData = [...dataSource];
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index + 1, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: null
+        });
+        triggerChangeData?.(newData, 'INSERT_AFTER');
+      } else {
+        const newData = [...dataSource];
+        const parent = findItemByKey(newData, rowKey, record.parentId);
+
+        // Cập nhật childData mới
+        const childData = parent?.children ? [...parent.children] : [];
+        const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        childData.splice(index + 1, 0, {
+          ...defaultRowValue,
+          rowId,
+          parentId: record.parentId
+        });
+        const newRowData = {
+          ...parent,
+          children: childData
+        };
+        const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
+        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+      }
     }
   };
-  const handleDuplicate = () => {};
-  const handleInsertBefore = () => {};
-  const handleInsertAfter = () => {};
   const handleDeleteAll = () => {};
   const toolbarItemsBottom = useMemo(() => {
     return toolbarItems?.filter(it => it.position === 'Bottom').map(item => {
@@ -85,51 +250,55 @@ const GridEdit = props => {
         ...item,
         template: () => {
           return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
+            className: classnames(`be-toolbar-item`, item?.className)
           }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+            className: 'toolbar-button',
             menu: {
               items: itemsAdd,
-              onClick: () => handleAdd(item)
+              onClick: e => handleAddMulti(item, e)
             }
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item')), item.key === 'DUPLICATE' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
+          }, /*#__PURE__*/React.createElement("span", {
+            onClick: () => handleAddSingle(item)
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))), item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item`, item?.className)
           }, /*#__PURE__*/React.createElement(Button, {
             color: "green",
             variant: 'outlined',
             onClick: handleDuplicate,
-            className: "d-flex be-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')), item.key === 'INSERT_BEFORE' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
+            className: "d-flex toolbar-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')), item.key === 'INSERT_BEFORE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item`, item?.className)
           }, /*#__PURE__*/React.createElement(Button, {
             color: "green",
             variant: 'outlined',
-            onClick: handleInsertBefore,
-            className: "d-flex be-button"
-          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')), item.key === 'INSERT_AFTER' && item.visible !== false && editingKey && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
+            onClick: () => handleInsertBefore(item),
+            className: "d-flex toolbar-button"
+          }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')), item.key === 'INSERT_AFTER' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+            className: classnames(`be-toolbar-item`, item?.className)
           }, /*#__PURE__*/React.createElement(Button, {
             color: "green",
             variant: 'outlined',
-            onClick: handleInsertAfter,
-            className: "d-flex be-button"
+            onClick: () => handleInsertAfter(item),
+            className: "d-flex toolbar-button"
           }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')), item.key === 'DELETE' && item.visible !== false && /*#__PURE__*/React.createElement("div", {
-            className: classnames(`be-toolbar-item  ${item.className}`)
+            className: classnames(`be-toolbar-item`, item?.className)
           }, /*#__PURE__*/React.createElement(Button, {
             color: "primary",
             variant: 'outlined',
             onClick: handleDeleteAll,
-            className: "d-flex be-button"
+            className: "d-flex toolbar-button"
           }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item')));
         }
       };
     });
-  }, [toolbarItems]);
+  }, [handleAddMulti, handleAddSingle, itemsAdd, rowsFocus.length, t, toolbarItems]);
   const {
     control,
     handleSubmit,
     setValue,
     trigger,
-    getValues
+    getValues,
+    reset
     // formState: { errors }
   } = useForm({
     mode: 'onChange'
@@ -141,13 +310,16 @@ const GridEdit = props => {
   const isEditing = record => record[rowKey] === editingKey;
   useEffect(() => {
     const handleClickOutside = event => {
-      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const element = event.target;
+      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const container = document.querySelector(".be-popup-container");
       // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
 
+      // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
+      const itemContainer = document.querySelector(".ui-rc-toolbar-selection-overflow-item");
       const isInsideContainer = element.closest(".be-popup-container") && container;
-      if (isInsideContainer) {
+      const isInsideToolbar = element.closest(".ui-rc-toolbar-selection-overflow-item") && itemContainer;
+      if (isInsideContainer || isInsideToolbar) {
         return;
       }
       if (tableBodies.length > 0) {
@@ -167,36 +339,170 @@ const GridEdit = props => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  const handleMouseDown = (row, col, e) => {
+  const handleMouseDown = (record, row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
       return;
     }
-    setSelectedCell({
-      row,
-      col
-    });
+    setSelectIsDragging(true);
     isSelecting.current = true;
     startCell.current = {
       row,
       col
     };
-    setSelectedCells(new Set([`${row}-${col}`]));
-    setRowsSelected(new Set());
+    if (!isPasteDragging) {
+      setStartSelectedCell({
+        row,
+        col
+      });
+      setSelectedCells(new Set([`${row}-${col}`]));
+      setRowsSelected(new Set());
+      // setShowDraggingPoint(true)
+    }
+
+    // if (record[rowKey] !== editingKey && (editingKey !== '')) {
+    //   setEditingKey('')
+    // }
+  };
+  const handlePointEnter = e => {
+    if (e.button === 2) {
+      e.stopPropagation();
+      return;
+    }
+    setIsPasteDragging(true);
+  };
+  const handlePointLeave = () => {
+    if (isPasteDragging && !isSelectDragging) {
+      setIsPasteDragging(false);
+    }
+  };
+  const handleMouseUp = () => {
+    isSelecting.current = false;
+    startCell.current = null;
+    isSelectingRow.current = false;
+    rowStart.current = null;
+    setIsPasteDragging(false);
+    setSelectIsDragging(false);
+    if (pasteCells.size > 0) {
+      console.log('');
+      const mergedSet = new Set([...selectedCells, ...pasteCells]);
+      setSelectedCells(mergedSet);
+      setPasteCells(new Set());
+      const selectedArray = Array.from(selectedCells).map(key => {
+        const [row, col] = key.split("-").map(Number);
+        // @ts-ignore
+        const columnKey = columns[col].field;
+
+        // @ts-ignore
+        return {
+          row,
+          col,
+          value: flattenData(childrenColumnName, dataSource)[row][columnKey]
+        };
+        // return { row, col, value: '' };
+      });
+
+      // Xác định min/max row và col để sắp xếp dữ liệu
+      const minRow = Math.min(...selectedArray.map(cell => cell.row));
+      const maxRow = Math.max(...selectedArray.map(cell => cell.row));
+      const minCol = Math.min(...selectedArray.map(cell => cell.col));
+      const maxCol = Math.max(...selectedArray.map(cell => cell.col));
+
+      // Tạo dữ liệu dạng bảng (mảng 2D)
+      const table = Array.from({
+        length: maxRow - minRow + 1
+      }, () => Array(maxCol - minCol + 1).fill(""));
+
+      // Gán giá trị vào bảng
+      selectedArray.forEach(({
+        row,
+        col,
+        value
+      }) => {
+        table[row - minRow][col - minCol] = value;
+      });
+      const aaaa = addRows8(table, getRowsPasteIndex(pasteCells).length);
+      const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pasteCells).row];
+      if (!record.parentId) {
+        // Cập nhật data mới
+        const newData = [...dataSource];
+
+        // Lấy vị trí bắt đầu
+        // const { row: startRow, col: startCol } = selectedCell;
+        const startRow = getFirstSelectCell(pasteCells).row;
+        const startCol = getFirstSelectCell(selectedCells).col;
+        const pastedRows = [];
+        const pastedColumns = new Set();
+        aaaa.addedRows.forEach((rowValues, rowIndex) => {
+          const targetRow = startRow + rowIndex;
+
+          // Nếu vượt quá số dòng hiện có, thêm dòng mới
+          if (targetRow >= newData.length) {
+            // @ts-ignore
+            newData.push({
+              id: undefined,
+              rowId: newGuid()
+            });
+          }
+          rowValues.forEach((cellValue, colIndex) => {
+            const targetCol = startCol + colIndex;
+            if (targetCol >= columns.length) {
+              // Không vượt quá số cột
+              return;
+            }
+
+            // @ts-ignore
+            const columnKey = columns[targetCol].field;
+
+            // @ts-ignore
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+            };
+            pastedColumns.add(columnKey);
+          });
+
+          // Lưu dòng được paste
+          pastedRows.push(newData[targetRow]);
+        });
+        const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+        triggerPaste?.(pastedRows, pastedColumnsArray, newData);
+      }
+    }
   };
   const handleMouseEnter = (row, col) => {
-    if (!isSelecting.current || !startCell.current) return;
+    if (!isSelecting.current || !startCell.current) {
+      return;
+    }
     const {
       row: startRow,
       col: startCol
     } = startCell.current;
-    const newSelectedCells = new Set();
-    for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
-      for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
-        newSelectedCells.add(`${r}-${c}`);
+    if (!isPasteDragging) {
+      const newSelectedCells = new Set();
+      for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
+        for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
+          newSelectedCells.add(`${r}-${c}`);
+        }
+      }
+      setSelectedCells(newSelectedCells);
+    } else {
+      const newSelectedCells = new Set();
+      for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
+        for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
+          newSelectedCells.add(`${r}-${c}`);
+        }
+      }
+      const colStart = getFirstSelectCell(selectedCells).col;
+      const colEnd = getLastSelectCell(selectedCells).col;
+      const newPasteCells = new Set();
+      for (let r = Math.min(startRow, row) + 1; r <= Math.max(startRow, row); r++) {
+        for (let c = Math.min(colStart, col); c <= Math.max(colStart, colEnd); c++) {
+          newPasteCells.add(`${r}-${c}`);
+        }
       }
+      setPasteCells(newPasteCells);
     }
-    setSelectedCells(newSelectedCells);
   };
   const handleClickRowHeader = (row, col) => {
     const newSelectedCells = new Set();
@@ -265,23 +571,46 @@ const GridEdit = props => {
     setRowsSelected(newSelectedRows);
     setSelectedCells(newSelectedCells);
   };
-  const handleMouseUp = () => {
-    isSelecting.current = false;
-    startCell.current = null;
-    isSelectingRow.current = false;
-    rowStart.current = null;
+  const handleCellClick = (indexRow, record, column) => {
+    const cellClickCallback = newOptions => {
+      if (newOptions) {
+        const newElem = {
+          ...column,
+          editSelectSettings: {
+            ...(column?.editSelectSettings ? {
+              ...column?.editSelectSettings
+            } : {}),
+            options: newOptions
+          }
+        };
+        const rrr = updateArrayByKey([...columns], newElem, 'field');
+        triggerChangeColumns?.(rrr, 'click');
+      }
+    };
+    if (onCellClick) {
+      onCellClick({
+        index: indexRow,
+        rowId: record.rowId,
+        cellValue: record[record.field],
+        type: "Editing",
+        field: column.field,
+        rowData: record
+      }, cellClickCallback);
+    }
   };
   const handleCopy = e => {
     const selectedArray = Array.from(selectedCells).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
-      const columnKey = columns[col].dataIndex;
+      const columnKey = columns[col].field;
+
       // @ts-ignore
       return {
         row,
         col,
-        value: dataSource[row][columnKey]
+        value: flattenData(childrenColumnName, dataSource)[row][columnKey]
       };
+      // return { row, col, value: '' };
     });
 
     // Xác định min/max row và col để sắp xếp dữ liệu
@@ -312,133 +641,131 @@ const GridEdit = props => {
     e.clipboardData.setData("text/plain", copyText);
     Message(t ? t('CopySuccessful') : 'Copy Successful');
   };
-  const handlePaste = (e, indexCol, indexRow) => {
+  const handlePaste = (record, indexCol, rowNumber, e) => {
     // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
     const pasteData = e.clipboardData.getData("text/plain").trim();
 
     // Chuyển đổi dữ liệu từ clipboard thành mảng
     const rows = pasteData.split("\n").map(row => row.replace(/\r/g, "").split("\t"));
+    if (!record.parentId) {
+      // Cập nhật data mới
+      const newData = [...dataSource];
 
-    // Lấy vị trí bắt đầu
-    // const { row: startRow, col: startCol } = selectedCell;
-    const startRow = indexRow;
-    const startCol = indexCol;
+      // @ts-ignore
+      const indexRows = newData.findIndex(it => it[rowKey] === record[rowKey]);
 
-    // Cập nhật data mới
-    const newData = [...dataSource];
-    const pastedRows = [];
-    const pastedColumns = new Set();
-    rows.forEach((rowValues, rowIndex) => {
-      const targetRow = startRow + rowIndex;
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = indexRows;
+      const startCol = indexCol;
 
-      // Nếu vượt quá số dòng hiện có, thêm dòng mới
-      if (targetRow >= newData.length) {
-        // @ts-ignore
-        // newData.push({ id: newGuid()});
-        newData.push({
-          id: newGuid()
+      // const flattData = flattenArray(newData);
+
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
+
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= newData.length) {
+          // @ts-ignore
+          // newData.push({ id: newGuid()});
+          newData.push({
+            id: undefined,
+            rowId: newGuid()
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= columns.length) {
+            // Không vượt quá số cột
+            return;
+          }
+
+          // @ts-ignore
+          const columnKey = columns[targetCol].field;
+
+          // @ts-ignore
+          newData[targetRow] = {
+            ...newData[targetRow],
+            [columnKey]: cellValue.trim()
+          };
+          pastedColumns.add(columnKey);
         });
-      }
-      rowValues.forEach((cellValue, colIndex) => {
-        const targetCol = startCol + colIndex;
-        if (targetCol >= columns.length) return; // Không vượt quá số cột
 
-        // @ts-ignore
-        const columnKey = columns[targetCol].dataIndex;
-        // @ts-ignore
-        newData[targetRow] = {
-          ...newData[targetRow],
-          [columnKey]: cellValue.trim()
-        };
-        pastedColumns.add(columnKey);
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
       });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      triggerPaste?.(pastedRows, pastedColumnsArray, newData);
+    } else {
+      // Cập nhật data mới
+      const newData = [...dataSource];
+      const parent = findItemByKey(newData, rowKey, record.parentId);
 
-      // Lưu dòng được paste
-      pastedRows.push(newData[targetRow]);
-    });
-    const pastedColumnsArray = Array.from(pastedColumns) ?? [];
-    console.log(pastedColumnsArray);
-    console.log(pastedRows);
+      // Cập nhật childData mới
+      const childData = parent?.children ? [...parent.children] : [];
 
-    //  // trigger DataChange + trigger paste
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = childData.findIndex(it => it[rowKey] === record[rowKey]);
+      const startCol = indexCol;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
 
-    // const handlePasteCallback = (callbackData: RecordType[]) => {
-    //
-    //   const newDataUpdate  = updateData(dataSource, callbackData, rowKey as any)
-    //
-    //   // setData(newDataUpdate)
-    //   // onDataChange?.(newData)
-    //   onCellPaste?.dataChange?.(newDataUpdate)
-    // }
-    //
-    //
-    // if (onCellPaste && onCellPaste.onPasted) {
-    //
-    //   if (onCellPaste.onPasted.length > 1) {
-    //     onCellPaste.onPasted({
-    //       pasteData: pastedRows,
-    //       type: 'onPaste',
-    //       data: dataSource,
-    //       pastedColumns: pastedColumnsArray as string[]
-    //     }, handlePasteCallback)
-    //
-    //   } else {
-    //     onCellPaste.onPasted({
-    //       pasteData: pastedRows,
-    //       type: 'onPaste',
-    //       data: dataSource,
-    //       pastedColumns: ['']
-    //     }, handlePasteCallback)
-    //
-    //     onCellPaste.dataChange?.(newData)
-    //
-    //     // setData(newData);
-    //     // onDataChange?.(newData)
-    //   }
-    //
-    // }
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= childData.length) {
+          childData.push({
+            id: undefined,
+            rowId: newGuid(),
+            parentId: parent[rowKey ?? 'id']
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= columns.length) {
+            // Không vượt quá số cột
+            return;
+          }
+
+          // @ts-ignore
+          const columnKey = columns[targetCol].field;
+
+          // @ts-ignore
+          childData[targetRow] = {
+            ...childData[targetRow],
+            [columnKey]: cellValue.trim()
+          };
+          pastedColumns.add(columnKey);
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(childData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      const newRowData = {
+        ...parent,
+        children: childData
+      };
+      const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
+      triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource);
+    }
   };
   const onSubmit = formData => {
-    console.log('onSubmit', formData);
     try {
       // const record = (await form.validateFields()) as RecordType;
       const row = {
         ...formData
       };
-      // const rowData = { ...record };
-
-      // columns.forEach(column => {
-      //
-      //   // @ts-ignore
-      //   if (column.editType === 'date' && rowData[column.dataIndex]) {
-      //     // @ts-ignore
-      //     rowData[column.dataIndex] = !isEmpty(record[column.dataIndex]) ? moment(row[column.dataIndex]).format() : null
-      //   }
-      // });
-
       const newData = [...dataSource];
+
       // @ts-ignore
       const index = newData.findIndex(item => formData[rowKey] === item[rowKey]);
-
-      // setIsManualUpdate(true);
-
+      const rs = updateArrayByKey(dataSource, row, rowKey);
       if (index > -1) {
-        const item = newData[index];
-        newData.splice(index, 1, {
-          ...item,
-          ...row
-        });
-        triggerChangeData?.(newData, 'onChange');
-
-        // trigger DataChange
-        // setData(newData);
-        // onDataChange?.(newData)
-      } else {
-        newData.push(row);
-        // trigger DataChange
-
-        // setData(newData);
-        // onDataChange?.(newData)
+        triggerChangeData?.(rs, 'onChange');
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -447,29 +774,18 @@ const GridEdit = props => {
   const handleCellChange = args => {
     const {
       record,
-      type,
+      type: changeType,
       newState,
       prevState,
       option,
       field
     } = args;
 
-    // console.log('newState', newState)
-    //
-    // console.log('getValues()', getValues())
-
     // const newRecord = getValues()
 
-    if (type === 'enter') {
-      console.log('aaaaaa enter');
-    }
-    if (type === 'blur') {
-      // onCellChange
-
+    if (changeType === 'enter') {}
+    if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
-        // const newDataUpdate  = updateData(data, callbackData, rowKey as any)
-
-        console.log('callbackData', callbackData);
         const callbackRecord = callbackData;
         Object.entries(callbackRecord).forEach(([name, value]) => {
           setValue(name, value);
@@ -478,7 +794,6 @@ const GridEdit = props => {
       };
       if (onCellChange) {
         if (onCellChange.length > 1) {
-          console.log('onCellChange Callback');
           onCellChange({
             field,
             indexCol: 1,
@@ -492,7 +807,6 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
-          console.log('onCellChange');
           onCellChange({
             field,
             indexCol: 1,
@@ -508,16 +822,15 @@ const GridEdit = props => {
           onSubmit(record);
         }
       }
-      console.log('aaaaaa blur');
     }
-    if (prevState && newState && prevState !== newState && type === 'enter') {
-      console.log('enter');
+    if (prevState && newState && prevState !== newState && changeType === 'enter') {
       onSubmit(record);
     }
   };
   const handleEdit = (record, col, editType, e) => {
     // @ts-ignore
     setEditingKey(record[rowKey]);
+    reset();
 
     // const formattedRecord = { ...record };
 
@@ -547,19 +860,20 @@ const GridEdit = props => {
     // });
 
     if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
-      setValue(col.dataIndex, e.key);
+      setValue(col.dataIndex, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
+      // setValue(col.dataIndex, e.key)
     }
     if (editType === 'select') {
       // setSearchValue(e.key)
       // setOpen(true)
     }
-    if (selectedCell?.row !== undefined && selectedCell?.col !== undefined) {
+    if (startSelectedCells?.row !== undefined && startSelectedCells?.col !== undefined) {
       setTimeout(() => {
         // const input = document.querySelector(`.ui-rc-table-row[data-row-key="${selectedCell.row}"] .cell-editing[data-col-index="${selectedCell.col}"] input`) as HTMLInputElement;
-        const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${selectedCell.row}"].cell-editing[data-col-index="${selectedCell.col}"] input`);
+        const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.row}"].cell-editing[data-col-index="${startSelectedCells.col}"] input`);
         // const input =  document.getElementById(`col${selectedCell.col}-record${selectedCell.row}`) as HTMLInputElement;
 
-        const select = document.querySelector(`div.cell-editing[tabindex="${selectedCell?.col}"] .ant-select-selection-search input`);
+        const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells?.col}"] .ant-select-selection-search input`);
         if (input) {
           input.focus();
         }
@@ -572,18 +886,21 @@ const GridEdit = props => {
       }, 0);
     }
   };
-  useEffect(() => {
-    const tableBody = document.querySelector(".ui-rc-table-tbody");
-    const tableHeader = document.querySelector(".ui-rc-table-header");
-    if (tableBody && tableHeader) {
-      tableBody.addEventListener("scroll", () => {
-        tableHeader.scrollLeft = tableBody.scrollLeft;
-      });
-    }
-  }, []);
-  const scrollToCell = (rowIndex, colIndex, cell, type) => {
+
+  // useEffect(() => {
+  //   const tableBody = document.querySelector(".ui-rc-table-tbody");
+  //   const tableHeader = document.querySelector(".ui-rc-table-header");
+  //
+  //   if (tableBody && tableHeader) {
+  //     tableBody.addEventListener("scroll", () => {
+  //       tableHeader.scrollLeft = tableBody.scrollLeft;
+  //     });
+  //   }
+  // }, []);
+
+  const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
     const fixedWidth = totalFixedWidth(columns, 'left', selectionSettings);
-    if (type === 'horizontal') {
+    if (scrollType === 'horizontal') {
       if (tableRef.current) {
         tableRef.current.scrollTo({
           left: cell.offsetLeft - fixedWidth,
@@ -603,15 +920,12 @@ const GridEdit = props => {
       });
     }
   };
-  const handleFocusCell = (rowIndex, colIndex, col, type, e) => {
+  const handleFocusCell = (rowIndex, colIndex, col, scrollType, e) => {
     const isEdit = editingKey !== '';
-    // const cellEdit: any = document.querySelector(`.ui-rc-table-row[data-row-key="${rowIndex}"] .cell-editing[data-col-index="${colIndex}"]`);
-    // const cell: any = document.querySelector(`.ui-rc-table-row[data-row-key="${rowIndex}"] .cell-editable[data-col-index="${colIndex}"]`);
-
     const cellEdit = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
     const cell = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
     const updateSelection = () => {
-      setSelectedCell({
+      setStartSelectedCell({
         row: rowIndex,
         col: colIndex
       });
@@ -624,10 +938,10 @@ const GridEdit = props => {
           cellEdit.focus();
         }
       }
-      if (type === 'horizontal' && cellEdit) {
+      if (scrollType === 'horizontal' && cellEdit) {
         scrollToCell(rowIndex, colIndex, cellEdit, 'horizontal');
       }
-      if (type === 'vertical' && cell) {
+      if (scrollType === 'vertical' && cell) {
         setEditingKey('');
         updateSelection();
         scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
@@ -643,11 +957,38 @@ const GridEdit = props => {
         }
       }
       if (cell) {
-        scrollToCell(rowIndex, colIndex, cell, type);
+        scrollToCell(rowIndex, colIndex, cell, scrollType);
       }
     }
   };
-  const convertColumns = flatColumns(columns).map((column, colIndex) => {
+  const getCellClass = (record, rowIndex, colIndex) => {
+    const cellKey = `${rowIndex}-${colIndex}`;
+    const topCellKey = `${rowIndex + 1}-${colIndex}`;
+    const leftCellKey = `${rowIndex}-${colIndex + 1}`;
+    const rightCellKey = `${rowIndex}-${colIndex - 1}`;
+    const isSelected = selectedCells.has(cellKey);
+    const isTopSelected = selectedCells.has(topCellKey);
+    const isLeftSelected = selectedCells.has(leftCellKey);
+    const isRightSelected = selectedCells.has(rightCellKey);
+    const cellClass = isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable';
+    const prevRecordEditing = flattenData(childrenColumnName, dataSource)[rowIndex + 1];
+    const cellStart = getFirstSelectCell(selectedCells);
+    const cellEnd = getLastSelectCell(selectedCells);
+    if (!isSelected) {
+      const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && rowIndex === Math.min(cellStart.row - 1, cellEnd?.row);
+      const isLeft = colIndex + 1 === Math.min(cellStart.col, cellEnd?.col);
+      const isRight = colIndex - 1 === Math.max(cellStart.col, cellEnd?.col);
+      return isTopSelected || isLeftSelected || isRightSelected ? `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isRight ? `next-cell-border-left` : ''}` : cellClass;
+    }
+    const isBottom = cellEnd && rowIndex === Math.max(cellStart.row, cellEnd.row);
+    const isRight = cellEnd && colIndex === Math.max(cellStart.col, cellEnd.col);
+    const isLeft = colIndex === Math.min(cellStart.col, cellEnd?.col);
+
+    // return `${cellClass}  ${isBottom ? `cell-border-bottom` : ''}  ${isRight ? `cell-border-right` : '' } ${isBottom && isRight ? `cell-border-end` : '' }
+    return `${cellClass}  ${isBottom ? `cell-border-bottom` : ''}  ${isRight ? `cell-border-right` : ''} ${isLeft ? `fixed-cell-border-left` : ''} ${isBottom && isRight ? `cell-border-end` : ''}
+  `;
+  };
+  const convertColumns = flatColumns2(columns).map((column, colIndex) => {
     if (!column?.field && !column?.key) {
       return column;
     }
@@ -678,83 +1019,96 @@ const GridEdit = props => {
     }
     return {
       ...column,
-      // editType: getEditType(column, record),
-      onCell: (record, rowIndex) => ({
-        onKeyDown: event => {
-          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-            if (!isEditing(record) && record[rowKey] !== editingKey) {
-              handleEdit(record, column, column.editType, event);
+      onCell: (record, rowIndex) => {
+        const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+        return {
+          onKeyDown: event => {
+            const key = getRowKey(record, dataSource.indexOf(record));
+            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
+              if (!isEditing(record) && record[rowKey] !== editingKey) {
+                handleEdit(record, column, column.editType, event);
+                handleCellClick(rowNumber, record, column);
+                const hasKey = mergedExpandedKeys.has(key);
+                if (hasKey) {
+                  // mergedExpandedKeys.delete(key);
+                  // newExpandedKeys = [...mergedExpandedKeys];
+                } else {
+                  onTriggerExpand(record);
+                }
+              }
+              if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
+                handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+              }
             }
-            if (editingKey && editingKey !== '' && (rowIndex ?? 0) + 1 < dataSource.length && event.key === 'Enter') {
-              handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', event);
+            if (event.key === 'Tab') {
+              if (colIndex + 1 !== columns.length) {
+                handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+              } else {
+                event.stopPropagation();
+                event.preventDefault();
+              }
             }
-          }
-          if (event.key === 'Tab') {
-            if (colIndex + 1 !== columns.length) {
-              handleFocusCell(rowIndex, colIndex + 1, column, 'horizontal', event);
-            } else {
-              event.stopPropagation();
-              event.preventDefault();
+            if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
+              if (editingKey !== '') {} else {
+                handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+              }
             }
-          }
-          if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
-            if (editingKey !== '') {} else {
-              handleFocusCell(rowIndex, colIndex + 1, column, 'horizontal', event);
+            if (event.key === 'ArrowLeft' && colIndex > 0) {
+              if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
+                event.stopPropagation();
+                event.preventDefault();
+              } else {
+                if (editingKey !== '') {} else {
+                  handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
+                }
+              }
             }
-          }
-          if (event.key === 'ArrowLeft' && colIndex > 0) {
-            if (!column.dataIndex && !column.key || column.field === 'index' || column.field === '#' || column.dataIndex === 'index' || column.dataIndex === '#') {
-              event.stopPropagation();
+            if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
+              handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+            }
+            if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
+              handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(record, colIndex, rowNumber, event);
               event.preventDefault();
-            } else {
-              if (editingKey !== '') {} else {
-                handleFocusCell(rowIndex, colIndex - 1, column, 'horizontal', event);
-              }
             }
-          }
-          if (event.key === 'ArrowDown' && (rowIndex ?? 0) + 1 < dataSource.length) {
-            handleFocusCell((rowIndex ?? 0) + 1, colIndex, column, 'vertical', event);
-          }
-          if (event.key === 'ArrowUp' && (rowIndex ?? 0) > 0) {
-            handleFocusCell((rowIndex ?? 0) - 1, colIndex, column, 'vertical', event);
-          }
-        },
-        onPaste: event => {
-          if (editingKey === '') {
-            handlePaste(event, colIndex, rowIndex);
-            event.preventDefault();
-          }
-        },
-        onCopy: e => {
-          if (editingKey === '') {
-            handleCopy(e);
-            e.preventDefault();
-          }
-        },
-        onDoubleClick: event => {
-          if (!isEditing(record) && record[rowKey] !== editingKey) {
-            handleEdit(record, column, getEditType(column, record), event);
-          }
-        },
-        onClick: () => {
-          if (record[rowKey] !== editingKey && editingKey !== '') {
-            setEditingKey('');
-          }
-        },
-        className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
-        record,
-        column: column,
-        editType: getEditType(column, record),
-        dataIndex: column.dataIndex,
-        title: column.title,
-        'data-col-index': colIndex,
-        'data-row-index': rowIndex,
-        // colIndex: colIndex,
-        indexCol: colIndex,
-        indexRow: rowIndex,
-        editing: isEditing(record),
-        tabIndex: (rowIndex ?? 0) * columns.length + colIndex
-      }),
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onDoubleClick: event => {
+            if (!isEditing(record) && record[rowKey] !== editingKey) {
+              handleEdit(record, column, getEditType(column, record), event);
+              handleCellClick(rowNumber, record, column);
+            }
+          },
+          onClick: () => {
+            if (record[rowKey] !== editingKey && editingKey !== '') {
+              setEditingKey('');
+            }
+          },
+          // className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
+          className: getCellClass(record, rowNumber, colIndex),
+          record,
+          column: column,
+          editType: getEditType(column, record),
+          dataIndex: column.dataIndex,
+          title: getValueCell(column, record[column.field], format),
+          'data-col-index': colIndex,
+          'data-row-index': rowNumber,
+          editing: isEditing(record),
+          tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
+          style: isPasteDragging ? {
+            cursor: "crosshair"
+          } : {}
+        };
+      },
       render: (value, record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/React.createElement("div", {
@@ -762,13 +1116,21 @@ const GridEdit = props => {
             // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
             selected: selectedCells.has(`${rowNumber}-${colIndex}`)
           }),
-          onMouseDown: event => handleMouseDown(rowNumber, colIndex, event)
-          // onMouseEnter={() => handleMouseEnter(record[rowKey], colIndex)}
-          ,
-          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex)
+          onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
+          onMouseEnter: () => handleMouseEnter(rowNumber, colIndex),
+          onMouseUp: () => handleMouseUp()
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, format)));
+        }, renderContent(column, value, record, rowIndex, format)), getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && !isSelectDragging &&
+        /*#__PURE__*/
+        // showDraggingPoint &&
+        React.createElement("span", {
+          className: 'dragging-point',
+          onMouseEnter: event => handlePointEnter(event),
+          onMouseLeave: () => handlePointLeave()
+        }, /*#__PURE__*/React.createElement("span", {
+          className: 'dot-point'
+        })));
       }
     };
   });
@@ -796,7 +1158,12 @@ const GridEdit = props => {
   }, [convertColumns]);
   const mergedColumns = React.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
   const bottomToolbar = () => {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Toolbar, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: 'ui-rc-toolbar-bottom',
+      style: {
+        borderBottom: '1px solid #e0e0e0'
+      }
+    }, /*#__PURE__*/React.createElement(Toolbar, {
       style: {
         width: '100%'
       },
@@ -807,6 +1174,9 @@ const GridEdit = props => {
       // }}
     }));
   };
+  const onSelectChange = keys => {
+    setMergedSelectedKeys(keys);
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
@@ -838,6 +1208,7 @@ const GridEdit = props => {
     },
     className: classNames(className, 'grid-editable'),
     rowKey: rowKey,
+    getRowKey: getRowKey,
     columns: mergedColumns,
     showSorterTooltip: {
       target: 'sorter-icon'
@@ -848,12 +1219,50 @@ const GridEdit = props => {
       ...selectionSettings,
       checkboxOnly: true
     } : undefined,
-    style: {
-      ...style,
-      minHeight: height
-    },
     rowHoverable: false,
-    bottomToolbar: bottomToolbar
+    bottomToolbar: bottomToolbar,
+    expandable: {
+      ...expandable,
+      expandedRowKeys: innerExpandedKeys,
+      expandIcon: args => {
+        const {
+          record,
+          expanded
+        } = args;
+
+        // @ts-ignore
+        if (record?.children?.length > 0 || record?.isChildren) {
+          return expanded ? /*#__PURE__*/React.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTriggerExpand(record);
+              // onExpand(record, e)
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
+          }) : /*#__PURE__*/React.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTriggerExpand(record);
+              // onExpand(record, e)
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+          });
+        } else {
+          return /*#__PURE__*/React.createElement("button", {
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
+          });
+        }
+      }
+    },
+    rowSelection: columns && columns.length === 0 ? undefined : {
+      type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
+      onChange: onSelectChange,
+      selectedRowKeys: mergedSelectedKeys,
+      preserveSelectedRowKeys: true
+    }
   }))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {