es-grid-template 1.4.4 → 1.4.5

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

@@ -25,10 +25,11 @@ var _hooks = require("../hooks");
 var _Message = _interopRequireDefault(require("../../Message/Message"));
 var _rcMasterUi = require("rc-master-ui");
 var _becoxyIcons = require("becoxy-icons");
-var _faker = require("@faker-js/faker");
 var _InternalTable = require("../InternalTable");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import {faker} from "@faker-js/faker";
+
 const {
   Paragraph,
   Title
@@ -181,16 +182,17 @@ const validateData = async (data, formSchema) => {
 };
 const GridEdit = props => {
   const {
-    id: tableId,
+    id,
     tableRef,
     t,
     columns,
     dataSource,
     components,
     allowResizing,
-    rowKey = 'rowId',
+    rowKey = 'id',
     selectionSettings,
     height,
+    scrollHeight,
     format,
     triggerChangeData,
     triggerChangeColumns,
@@ -232,20 +234,143 @@ const GridEdit = props => {
   const visibleCols = _react.default.useMemo(() => {
     return (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
   }, [columns]);
-  const id = _react.default.useMemo(() => {
-    return tableId ?? _faker.faker.string.alpha(20);
-    // return tableId ?? newGuid()
-  }, [tableId]);
-  const itemsAdd = [{
-    key: '10',
-    label: '10 rows'
-  }, {
-    key: '50',
-    label: '50 rows'
-  }, {
-    key: '100',
-    label: '100 rows'
-  }];
+
+  //   const id  = React.useMemo(() => {
+  //
+  //   return tableId ?? faker.string.alpha(20)
+  //   // return tableId ?? newGuid()
+  //
+  // }, [tableId])
+
+  const itemsAdd = _react.default.useMemo(() => {
+    return [{
+      key: '10',
+      label: `10 ${t ? t('rows') : 'rows'}`
+    }, {
+      key: '50',
+      label: `50 ${t ? t('rows') : 'rows'}`
+    }, {
+      key: '100',
+      label: `100 ${t ? t('rows') : 'rows'}`
+    }];
+  }, [t]);
+
+  // const defaultContext = React.useMemo(() => {
+  //   return  [
+  //     {
+  //       key: 'INSERT_BEFORE',
+  //       label: 'Thêm dòng bên trên',
+  //       icon: <Plus fontSize={14} />,
+  //       children: [
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_1',
+  //           label: 'Thêm 1 dòng',
+  //           row: 1
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_10',
+  //           label: 'Thêm 10 dòng',
+  //           row: 10
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_50',
+  //           label: 'Thêm 50 dòng',
+  //           row: 50
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_100',
+  //           label: 'Thêm 100 dòng',
+  //           row: 100
+  //         },
+  //         {
+  //           parentKey: 'INSERT_BEFORE',
+  //           key: 'INSERT_BEFORE_ADV',
+  //           label: 'Tùy chỉnh'
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       key: 'INSERT_AFTER',
+  //       label: 'Thêm dòng bên dưới',
+  //       icon: <Plus fontSize={14} />,
+  //       children: [
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_1',
+  //           label: 'Thêm 1 dòng',
+  //           row: 1
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_10',
+  //           label: 'Thêm 10 dòng',
+  //           row: 10
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_50',
+  //           label: 'Thêm 50 dòng',
+  //           row: 50
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_100',
+  //           label: 'Thêm 100 dòng',
+  //           row: 100
+  //         },
+  //         {
+  //           parentKey: 'INSERT_AFTER',
+  //           key: 'INSERT_AFTER_ADV',
+  //           label: 'Tùy chỉnh'
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       key: 'INSERT_CHILDREN',
+  //       // label: 'Insert item children',
+  //       label: 'Thêm cấp con',
+  //       icon: <Plus fontSize={14} />
+  //       // children: [
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_1',
+  //       //     label: 'Thêm 1 dòng',
+  //       //     row: 1
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_10',
+  //       //     label: 'Thêm 10 dòng',
+  //       //     row: 10
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_50',
+  //       //     label: 'Thêm 50 dòng',
+  //       //     row: 50
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_100',
+  //       //     label: 'Thêm 100 dòng',
+  //       //     row: 100
+  //       //   },
+  //       //   {
+  //       //     parentKey: 'INSERT_AFTER',
+  //       //     key: 'INSERT_AFTER_ADV',
+  //       //     label: 'Tùy chỉnh'
+  //       //   }
+  //       // ]
+  //     },
+  //     { key: 'DELETE_CONTENT', label: 'Xóa nội dung', icon: <Trash2 fontSize={14} /> },
+  //     { key: 'DELETE_ROWS', label: 'Xóa dòng', icon: <Trash2 fontSize={14} /> }
+  //   ]
+  // }, [])
+
   const [form] = _antd.Form.useForm();
   const [editingKey, setEditingKey] = (0, _react.useState)('');
   const [dataErrors, setDataErrors] = (0, _react.useState)([]);
@@ -442,7 +567,7 @@ const GridEdit = props => {
         triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
       }
     }
-  }, [dataSource, defaultValue, id, isFilter, rowKey, rowsFocus, triggerChangeData]);
+  }, [dataSource, defaultValue, isFilter, rowKey, rowsFocus, triggerChangeData]);
 
   //thêm 1 dòng bên dưới
   const handleInsertAfter = _react.default.useCallback((item, n) => {
@@ -527,7 +652,7 @@ const GridEdit = props => {
       });
     } else {
       const newData = [...dataSource];
-      let newElement = {};
+      let newElement;
       if (!record.children || record.children.length === 0) {
         newElement = {
           ...record,
@@ -578,7 +703,7 @@ const GridEdit = props => {
       });
       triggerChangeData?.([...newData], 'DELETE_ROWS');
     }
-  }, [dataSource, id, rowsFocus, triggerChangeData]);
+  }, [dataSource, rowsFocus, triggerChangeData]);
   const handleDeleteAll = _react.default.useCallback(() => {
     triggerChangeData?.([], 'INSERT_BEFORE');
   }, [triggerChangeData]);
@@ -913,10 +1038,7 @@ const GridEdit = props => {
     }) => {
       table[row - minRow][col - minCol] = value;
     });
-    let newRange = {
-      combined: [],
-      addedRows: []
-    };
+    let newRange;
     if (rowPasteLast > rowSelectedFirst) {
       // kéo xuóng
       newRange = (0, _hooks.addRows8)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
@@ -1899,312 +2021,344 @@ const GridEdit = props => {
       focusNextCell(cellEdit, cell);
     }
   };
-  const convertColumns = _react.default.useMemo(() => {
-    return (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
-      if (column === _InternalTable.SELECTION_COLUMN) {
-        return _InternalTable.SELECTION_COLUMN;
-      }
-      if (column.field === '#') {
-        return {
-          ...column,
-          className: 'rc-ui-cell-editable rc-ui-cell-index',
-          onCell: (record, rowIndex) => {
-            const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
-            return {
-              'data-row-index': rowNumber,
-              onPaste: event => {
-                if (editingKey === '') {
-                  handlePaste(record, colIndex + 1, rowNumber, event);
-                  event.preventDefault();
-                }
-              },
-              onCopy: e => {
-                if (editingKey === '') {
-                  handleCopy(e);
-                  e.preventDefault();
-                }
-              },
-              // onClick: () => {
-              //   if (record[rowKey] !== editingKey && (editingKey !== '')) {
-              //     setEditingKey('')
-              //   }
-              // },
-              tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
-            };
-          },
-          render: (value, record) => {
-            const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {}),
-              onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
-              onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
-              onMouseUp: event => handleMouseUp(event)
-            }, /*#__PURE__*/_react.default.createElement("div", {
-              className: 'ui-rc_content'
-            }, (0, _hooks.findItemPath)(dataSource, record, rowKey)));
-          }
-        };
-      }
-      if (column.field === 'command') {
-        return {
-          ...column
-        };
-      }
+  const convertColumns = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
+    if (column === _InternalTable.SELECTION_COLUMN) {
+      return _InternalTable.SELECTION_COLUMN;
+    }
+    if (column.field === '#') {
       return {
         ...column,
+        className: 'rc-ui-cell-editable rc-ui-cell-index',
         onCell: (record, rowIndex) => {
           const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
           return {
-            ...column?.onCell?.(record, rowIndex),
-            onKeyDown: event => {
-              const key = getRowKey(record, dataSource.indexOf(record));
-              if (event.key === 'Control' && event.ctrlKey) {} else {
-                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-                  if (record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
-                    // ~~ khi editingKey = ''
-                    event.preventDefault();
-                    event.stopPropagation();
-                    handleEdit(record, column, column.editType, event);
+            'data-row-index': rowNumber,
+            onPaste: event => {
+              if (editingKey === '') {
+                handlePaste(record, colIndex + 1, rowNumber, event);
+                event.preventDefault();
+              }
+            },
+            onCopy: e => {
+              if (editingKey === '') {
+                handleCopy(e);
+                e.preventDefault();
+              }
+            },
+            // onClick: () => {
+            //   if (record[rowKey] !== editingKey && (editingKey !== '')) {
+            //     setEditingKey('')
+            //   }
+            // },
+            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
+          };
+        },
+        render: (value, record) => {
+          const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {}),
+            onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
+            onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
+            onMouseUp: event => handleMouseUp(event)
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: 'ui-rc_content'
+          }, (0, _hooks.findItemPath)(dataSource, record, rowKey)));
+        }
+      };
+    }
+    if (column.field === 'command') {
+      return {
+        ...column
+      };
+    }
+    return {
+      ...column,
+      onCell: (record, rowIndex) => {
+        const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
+        return {
+          ...column?.onCell?.(record, rowIndex),
+          onKeyDown: event => {
+            const key = getRowKey(record, dataSource.indexOf(record));
+            if (event.key === 'Control' && event.ctrlKey) {} else {
+              if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
+                if (record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
+                  // ~~ khi editingKey = ''
+                  event.preventDefault();
+                  event.stopPropagation();
+                  handleEdit(record, column, column.editType, event);
 
-                    // onRemoveBgSelectedCell(selectedCells.current, id)
-                    // onRemoveBorderSelectedCell(selectedCells.current, id)
+                  // onRemoveBgSelectedCell(selectedCells.current, id)
+                  // onRemoveBorderSelectedCell(selectedCells.current, id)
 
-                    // selectedCells.current = new Set()
+                  // selectedCells.current = new Set()
 
-                    handleCellClick(rowNumber, record, column);
-                    const hasKey = mergedExpandedKeys.has(key);
-                    if (hasKey) {
-                      // mergedExpandedKeys.delete(key);
-                      // newExpandedKeys = [...mergedExpandedKeys];
-                    } else {
-                      onTriggerExpand(record);
-                    }
+                  handleCellClick(rowNumber, record, column);
+                  const hasKey = mergedExpandedKeys.has(key);
+                  if (hasKey) {
+                    // mergedExpandedKeys.delete(key);
+                    // newExpandedKeys = [...mergedExpandedKeys];
                   } else {
-                    if (event.key === 'Enter') {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
-                        handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
-                      } else {
-                        // // focus cell hiện tại và tắt edit
-                        // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
-                        // setEditingKey('')
-
-                        // thêm dòng mới
-
-                        handleAddSingle();
-                        handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true);
-                      }
-                    }
+                    onTriggerExpand(record);
                   }
-                }
-                if (event.key === 'Tab') {
-                  if (editingKey) {} else {
-                    if (colIndex + 1 !== visibleCols.length) {
-                      handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+                } else {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
+                      handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                     } else {
-                      event.stopPropagation();
-                      event.preventDefault();
+                      // // focus cell hiện tại và tắt edit
+                      // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
+                      // setEditingKey('')
+
+                      // thêm dòng mới
+
+                      handleAddSingle();
+                      handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true);
                     }
                   }
                 }
-                if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
-                  if (editingKey !== '') {} else {
+              }
+              if (event.key === 'Tab') {
+                if (editingKey) {} else {
+                  if (colIndex + 1 !== visibleCols.length) {
                     handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
-                  }
-                }
-                if (event.key === 'ArrowLeft' && colIndex > 0) {
-                  if (!column.dataIndex && !column.key || column.field === '#' || column.dataIndex === '#') {
+                  } else {
                     event.stopPropagation();
                     event.preventDefault();
-                  } else {
-                    if (editingKey !== '') {} else {
-                      handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
-                    }
                   }
                 }
-                if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length) {
-                  if (isEditing(record) && ((0, _hooks.getEditType)(column, record) === 'treeSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'asyncSelect')) {
-                    event.stopPropagation();
-                  } else {
-                    handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
-                  }
+              }
+              if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
+                if (editingKey !== '') {} else {
+                  handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
-                if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
-                  if (isEditing(record) && ((0, _hooks.getEditType)(column, record) === 'asyncSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'treeSelect')) {
-                    event.stopPropagation();
-                  } else {
-                    handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
+              }
+              if (event.key === 'ArrowLeft' && colIndex > 0) {
+                if (!column.dataIndex && !column.key || column.field === '#' || column.dataIndex === '#') {
+                  event.stopPropagation();
+                  event.preventDefault();
+                } else {
+                  if (editingKey !== '') {} else {
+                    handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
                   }
                 }
-                if (event.key === 'Delete') {
-                  handleDeleteContent();
+              }
+              if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length) {
+                if (isEditing(record) && ((0, _hooks.getEditType)(column, record) === 'treeSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'asyncSelect')) {
+                  event.stopPropagation();
+                } else {
+                  handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                 }
-                if (event.key === 'Escape') {
-                  setEditingKey('');
+              }
+              if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
+                if (isEditing(record) && ((0, _hooks.getEditType)(column, record) === 'asyncSelect' || (0, _hooks.getEditType)(column, record) === 'select' || (0, _hooks.getEditType)(column, record) === 'selectTable' || (0, _hooks.getEditType)(column, record) === 'treeSelect')) {
+                  event.stopPropagation();
+                } else {
+                  handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
                 }
               }
-            },
-            onPaste: event => {
-              if (editingKey === '') {
-                handlePaste(record, colIndex, rowNumber, event);
-                event.preventDefault();
+              if (event.key === 'Delete') {
+                handleDeleteContent();
               }
-            },
-            onCopy: e => {
-              if (editingKey === '') {
-                handleCopy(e);
-                e.preventDefault();
+              if (event.key === 'Escape') {
+                setEditingKey('');
               }
-            },
-            onDoubleClick: event => {
-              if (!isEditing(record) && record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
-                handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(record, colIndex, rowNumber, event);
+              event.preventDefault();
+            }
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onDoubleClick: event => {
+            if (!isEditing(record) && record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
+              handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
 
-                // onRemoveBgSelectedCell(selectedCells.current, id)
-                // onRemoveBorderSelectedCell(selectedCells.current, id)
-                handleCellClick(rowNumber, record, column);
-              }
-            },
-            onContextMenu: () => {
-              // isSelecting.current = true;
-              // startCell.current = { row: rowNumber, col: colIndex };
-
-              if (selectedCells.size === 0) {
-                // setStartSelectedCell({ row: rowNumber, col: colIndex })
-                // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
-
-                startSelectedCells.current = {
-                  row: rowNumber,
-                  col: colIndex
-                };
-                selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
-                rowsSelected.current = new Set();
-              }
-            },
-            onClick: () => {
-              if (record[rowKey] !== editingKey && editingKey !== '') {
-                // setEditingKey('')
-              } else {
-                if (record[rowKey] !== editingKey) {
-                  (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
-                }
-                if (editingKey) {
-                  handleCellClick(rowNumber, record, column);
-                }
-              }
-            },
-            // className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column as any, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column as any, record) ? 'disable' : ''}`,
-            className: (0, _classnames.default)('rc-ui-cell-editable', {
-              'cell-editing': isEditing(record),
-              'cell-editable': !isEditing(record)
-              // selected: isSelectedCell(rangeCells,rowIndex, colIndex),
-              // 'cell-border-bottom': isRangeCell(rangeCells, 'bottom',rowIndex, colIndex),
-              // 'cell-border-right': isRangeCell(rangeCells, 'right',rowIndex, colIndex),
-              // 'cell-border-top': isRangeCell(rangeCells, 'top',rowIndex, colIndex),
-              // 'cell-border-left': isRangeCell(rangeCells, 'left',rowIndex, colIndex),
-              // disable: !isEditable(column as any, record)
-            }),
-            record,
-            column: column,
-            editType: (0, _hooks.getEditType)(column, record),
-            dataIndex: column.dataIndex,
-            indexRow: rowNumber,
-            indexCol: colIndex,
-            title: (0, _columns.getValueCell)(column, record[column.field], format),
-            'data-col-index': colIndex,
-            'data-row-index': rowNumber,
-            'data-tooltip-id': "tooltip-cell-content",
-            editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
-            cellEditing,
-            t,
-            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
-            style: isPasteDragging ? {
-              cursor: "crosshair"
-            } : {}
-          };
-        },
-        onHeaderCell: (data, index) => {
-          return {
-            ...(column.onHeaderCell ? column.onHeaderCell?.(data, index) : {}),
-            onClick: () => {
-              handleClickColHeader(column, colIndex);
-            },
-            onCopy: e => {
-              if (editingKey === '') {
-                handleCopy(e);
-                e.preventDefault();
+              // onRemoveBgSelectedCell(selectedCells.current, id)
+              // onRemoveBorderSelectedCell(selectedCells.current, id)
+              handleCellClick(rowNumber, record, column);
+            }
+          },
+          onContextMenu: () => {
+            // isSelecting.current = true;
+            // startCell.current = { row: rowNumber, col: colIndex };
+
+            if (selectedCells.size === 0) {
+              // setStartSelectedCell({ row: rowNumber, col: colIndex })
+              // setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
+
+              startSelectedCells.current = {
+                row: rowNumber,
+                col: colIndex
+              };
+              selectedCells.current = new Set([`${rowNumber}-${colIndex}`]);
+              rowsSelected.current = new Set();
+            }
+          },
+          onClick: () => {
+            if (record[rowKey] !== editingKey && editingKey !== '') {
+              // setEditingKey('')
+            } else {
+              if (record[rowKey] !== editingKey) {
+                (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
               }
-            },
-            onPaste: event => {
-              if (editingKey === '') {
-                handlePaste(dataSource[0], colIndex, 0, event);
-                event.preventDefault();
+              if (editingKey) {
+                handleCellClick(rowNumber, record, column);
               }
-            },
-            style: {
-              userSelect: 'none'
             }
-          };
-        },
-        render: (value, record, rowIndex) => {
-          const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
-          const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
-          const cellFormat = (0, _hooks.getFormat)(colFormat, format);
-          const rowError = dataErrors.find(it => it.index === rowNumber);
-          const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
-
-          // const aaa =  dataErrors.find((it) => column?.field && it[column.field].field === column.field && it.index === rowNumber)
-          // const aaa =  column.field && rowError && rowError[column.field]?.field === column?.field
+          },
+          // className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column as any, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column as any, record) ? 'disable' : ''}`,
+          className: (0, _classnames.default)('rc-ui-cell-editable', {
+            'cell-editing': isEditing(record),
+            'cell-editable': !isEditing(record),
+            // selected: isSelectedCell(rangeCells,rowIndex, colIndex),
+            // 'cell-border-bottom': isRangeCell(rangeCells, 'bottom',rowIndex, colIndex),
+            // 'cell-border-right': isRangeCell(rangeCells, 'right',rowIndex, colIndex),
+            // 'cell-border-top': isRangeCell(rangeCells, 'top',rowIndex, colIndex),
+            // 'cell-border-left': isRangeCell(rangeCells, 'left',rowIndex, colIndex),
+            disable: !(0, _hooks.isEditable)(column, record)
+          }),
+          record,
+          column: column,
+          editType: (0, _hooks.getEditType)(column, record),
+          dataIndex: column.dataIndex,
+          indexRow: rowNumber,
+          indexCol: colIndex,
+          title: (0, _columns.getValueCell)(column, record[column.field], format),
+          'data-col-index': colIndex,
+          'data-row-index': rowNumber,
+          'data-tooltip-id': "tooltip-cell-content",
+          editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
+          cellEditing,
+          t,
+          tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
+          style: isPasteDragging ? {
+            cursor: "crosshair"
+          } : {}
+        };
+      },
+      onHeaderCell: (data, index) => {
+        return {
+          ...(column.onHeaderCell ? column.onHeaderCell?.(data, index) : {}),
+          onClick: () => {
+            handleClickColHeader(column, colIndex);
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(dataSource[0], colIndex, 0, event);
+              event.preventDefault();
+            }
+          },
+          style: {
+            userSelect: 'none'
+          }
+        };
+      },
+      render: (value, record, rowIndex) => {
+        const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
+        const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+        const cellFormat = (0, _hooks.getFormat)(colFormat, format);
+        const rowError = dataErrors.find(it => it.index === rowNumber);
+        const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
+
+        // const aaa =  dataErrors.find((it) => column?.field && it[column.field].field === column.field && it.index === rowNumber)
+        // const aaa =  column.field && rowError && rowError[column.field]?.field === column?.field
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)('ui-rc_cell-content', {
+            // disable: !isEditable(column as any, record)
+            isValid: column.field && rowError && rowError[column.field]?.field === column?.field
+          }),
+          onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
+          onMouseEnter: event => {
+            // setTooltipContent(cellError ? cellError.message : renderContent(column as any, value, record, rowIndex, cellFormat))
+            setTooltipContent(cellError ? cellError.message : '');
+            handleMouseEnter(rowNumber, colIndex, event);
+          },
+          onMouseUp: handleMouseUp,
+          onMouseMove: () => {
+            if (selectedCells && selectedCells.current.size > 0 && isMouseDown.current) {
+              (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+              isDragMouse.current = true;
+            }
+          }
 
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: (0, _classnames.default)('ui-rc_cell-content', {
-              // disable: !isEditable(column as any, record)
-              isValid: column.field && rowError && rowError[column.field]?.field === column?.field
-            }),
-            onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
-            onMouseEnter: event => {
-              // setTooltipContent(cellError ? cellError.message : renderContent(column as any, value, record, rowIndex, cellFormat))
-              setTooltipContent(cellError ? cellError.message : '');
-              handleMouseEnter(rowNumber, colIndex, event);
-            },
-            onMouseUp: handleMouseUp,
-            onMouseMove: () => {
-              if (selectedCells && selectedCells.current.size > 0 && isMouseDown.current) {
-                (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
-                isDragMouse.current = true;
-              }
+          // onClick={(event) => {
+          //
+          //   handleClickCell(event)
+          //
+          // }}
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'ui-rc_content'
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat)),
+        // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
+        // getLastSelectCell(selectedCells.current).col === colIndex &&
+        // isEditable(column as any, record) &&
+
+        !isDragMouse.current && /*#__PURE__*/_react.default.createElement("div", {
+          className: 'dragging-point hidden',
+          onMouseDown: e => {
+            // e.stopPropagation()
+            e.preventDefault();
+            if (e.button === 0) {
+              setIsPasteDragging(true);
             }
+          },
+          onDoubleClick: handlePointDoubleClick
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: 'dot-point'
+        })));
+      }
+    };
+  });
+  //   [
+  //   cellEditing,
+  //   columns,
+  //   dataErrors,
+  //   dataSource,
+  //   editingKey,
+  //   format,
+  //   getRowKey,
+  //   handleAddSingle,
+  //   handleCellClick,
+  //   handleClickColHeader,
+  //   handleCopy,
+  //   handleDeleteContent,
+  //   handleEdit,
+  //   handleFocusCell,
+  //   handleMouseDown,
+  //   handleMouseDownRowHeader,
+  //   handleMouseEnter,
+  //   handleMouseEnterRowHeader,
+  //   handleMouseUp,
+  //   handlePaste,
+  //   handlePointDoubleClick,
+  //   id,
+  //   isEditing,
+  //   isPasteDragging,
+  //   mergedExpandedKeys,
+  //   onTriggerExpand,
+  //   rowEditable,
+  //   rowKey,
+  //   setTooltipContent,
+  //   t,
+  //   visibleCols.length
+  // ])
 
-            // onClick={(event) => {
-            //
-            //   handleClickCell(event)
-            //
-            // }}
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            className: 'ui-rc_content'
-          }, (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat)),
-          // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
-          // getLastSelectCell(selectedCells.current).col === colIndex &&
-          // isEditable(column as any, record) &&
-
-          !isDragMouse.current && /*#__PURE__*/_react.default.createElement("div", {
-            className: 'dragging-point hidden',
-            onMouseDown: e => {
-              // e.stopPropagation()
-              e.preventDefault();
-              if (e.button === 0) {
-                setIsPasteDragging(true);
-              }
-            },
-            onDoubleClick: handlePointDoubleClick
-          }, /*#__PURE__*/_react.default.createElement("span", {
-            className: 'dot-point'
-          })));
-        }
-      };
-    });
-  }, [cellEditing, columns, dataErrors, dataSource, editingKey, format, getRowKey, handleAddSingle, handleCellClick, handleClickColHeader, handleCopy, handleDeleteContent, handleEdit, handleFocusCell, handleMouseDown, handleMouseDownRowHeader, handleMouseEnter, handleMouseEnterRowHeader, handleMouseUp, handlePaste, handlePointDoubleClick, id, isEditing, isPasteDragging, mergedExpandedKeys, onTriggerExpand, rangeCells, rowEditable, rowKey, setTooltipContent, t, visibleCols.length]);
   const transformColumns = _react.default.useCallback(cols => {
     // @ts-ignore
     return cols.map(column => {
@@ -2212,6 +2366,14 @@ const GridEdit = props => {
       if (column === _InternalTable.SELECTION_COLUMN) {
         return _InternalTable.SELECTION_COLUMN;
       }
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
+        return {
+          ...column,
+          children: transformColumns(column.children)
+        };
+      }
       if (find) {
         return {
           ...find
@@ -2222,14 +2384,6 @@ const GridEdit = props => {
           ...column
         };
       }
-
-      // Xử lý đệ quy cho children
-      if (column.children?.length) {
-        return {
-          ...column,
-          children: transformColumns(column.children)
-        };
-      }
     });
   }, [convertColumns]);
   const mergedColumns = _react.default.useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
@@ -2312,10 +2466,12 @@ const GridEdit = props => {
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     $heightTable: height,
+    $heightScroll: scrollHeight,
     style: {
       position: 'relative'
     },
-    ref: ref
+    ref: ref,
+    id: id
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
       rowKey,