es-grid-template 1.4.0 → 1.4.2

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

@@ -12,6 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _antd = require("antd");
 var _reactHookForm = require("react-hook-form");
 var _reactHotToast = require("react-hot-toast");
+var _yup = require("@hookform/resolvers/yup");
 var _columns = require("../hooks/columns");
 var _EditableCell = _interopRequireDefault(require("../EditableCell"));
 var _GridStyle = require("../GridStyle");
@@ -25,6 +26,7 @@ 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; }
 const {
@@ -33,7 +35,6 @@ const {
 } = _antd.Typography;
 _dayjs.default.extend(_customParseFormat.default);
 const toast = 'top-right';
-// const defaultContext: ContextMenuItem[] = [
 const defaultContext = [{
   key: 'INSERT_BEFORE',
   label: 'Thêm dòng bên trên',
@@ -96,6 +97,44 @@ const defaultContext = [{
     key: 'INSERT_AFTER_ADV',
     label: 'Tùy chỉnh'
   }]
+}, {
+  key: 'INSERT_CHILDREN',
+  // label: 'Insert item children',
+  label: 'Thêm cấp con',
+  icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.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',
@@ -109,6 +148,37 @@ const defaultContext = [{
     fontSize: 14
   })
 }];
+const validateData = async (data, formSchema) => {
+  if (!formSchema) {
+    return [];
+  } else {
+    const errors = [];
+    for (let i = 0; i < data.length; i++) {
+      try {
+        await formSchema.validate(data[i], {
+          abortEarly: false
+        });
+      } catch (error) {
+        errors.push(error.inner.reduce((acc, err) => {
+          acc[err.path] = {
+            field: err.path,
+            index: i,
+            message: err.message,
+            type: err.type,
+            ref: {
+              name: err.path
+            }
+          };
+          return {
+            ...acc,
+            index: i
+          };
+        }, {}));
+      }
+    }
+    return errors;
+  }
+};
 const GridEdit = props => {
   const {
     id: tableId,
@@ -137,6 +207,8 @@ const GridEdit = props => {
     rowEditable,
     contextMenuItems: propsContext,
     showDefaultContext,
+    validate,
+    setTooltipContent,
     ...rest
   } = props;
   const ref = (0, _react.useRef)(null);
@@ -157,6 +229,9 @@ const GridEdit = props => {
   // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
   // const isPasteDragging = useRef(false);
 
+  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()
@@ -173,33 +248,17 @@ const GridEdit = props => {
   }];
   const [form] = _antd.Form.useForm();
   const [editingKey, setEditingKey] = (0, _react.useState)('');
+  const [dataErrors, setDataErrors] = (0, _react.useState)([]);
   const [isFilter, setIsFilter] = _react.default.useState(false);
   const [rangeCells, setRangeCells] = (0, _react.useState)(new Set());
-
-  // const [pasteCells, setPasteCells] = useState(new Set())
-
-  // const defaultModalPaste = {open: false, rowIndex: -1, colIndex: -1, record: {}, rowsPasted: []}
-
-  // const [isCtrlDown, setIsCtrlDown] = useState(false)
-
-  // const [ctrlCells, setCtrlCells] = useState<any>([])
-  // const [currentCtrlCells, setCurrentCtrlCells] = useState<any>(new Set())
-
   const [openModalAddRow, setOpenModalAddRow] = (0, _react.useState)({
     open: false,
     type: ''
   });
   const [rowsAdd, setRowsAdd] = (0, _react.useState)(1);
   const [cellEditing, setCellEditing] = (0, _react.useState)(null);
-
-  // const [isSelectDragging, setSelectIsDragging] = useState(false)
-
   const [isPasteDragging, setIsPasteDragging] = (0, _react.useState)(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
 
-  // const [rowsSelected, setRowsSelected] = useState(new Set())
-
-  // const [startSelectedCells, setStartSelectedCell] = useState<{ row: number; col: number } | null>(null)
-
   const [innerExpandedKeys, setInnerExpandedKeys] = _react.default.useState(() => {
     // if (defaultExpandedRowKeys) {
     //   return defaultExpandedRowKeys;
@@ -210,6 +269,16 @@ const GridEdit = props => {
     // return [];
   });
   const mergedExpandedKeys = _react.default.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
+  _react.default.useEffect(() => {
+    if (validate && dataSource && dataSource.length) {
+      validateData(dataSource, validate).then(error => {
+        setDataErrors([...error]);
+        // if (getErrors) {
+        //   getErrors([...error])
+        // }
+      });
+    }
+  }, [validate, dataSource]);
   const rowsFocus = _react.default.useMemo(() => {
     return [...new Set(Array.from(rangeCells).map(item => parseInt(item.split('-')[0])))] ?? [];
   }, [rangeCells]);
@@ -231,8 +300,11 @@ const GridEdit = props => {
       newExpandedKeys = [...mergedExpandedKeys, key];
     }
     setInnerExpandedKeys(newExpandedKeys);
-  }, [getRowKey, mergedExpandedKeys, dataSource]);
-  const handleAddSingle = item => {
+    //
+    // onAddBgSelectedCell(rangeCells, id)
+    // onAddBorderSelectedCell(rangeCells, id)
+  }, [getRowKey, dataSource, mergedExpandedKeys]);
+  const handleAddSingle = _react.default.useCallback(item => {
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
     const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
     if (item && item.onClick) {
@@ -250,8 +322,8 @@ const GridEdit = props => {
       }];
       triggerChangeData?.(newData, 'Add');
     }
-  };
-  const handleAddMulti = (item, e) => {
+  }, [dataSource, defaultValue, triggerChangeData]);
+  const handleAddMulti = _react.default.useCallback((item, e) => {
     if (item.onClick) {
       item.onClick({
         toolbar: item
@@ -271,8 +343,8 @@ const GridEdit = props => {
       const newData = dataSource.concat(newRows);
       triggerChangeData?.(newData, 'Add');
     }
-  };
-  const handleDuplicate = () => {
+  }, [dataSource, defaultValue, triggerChangeData]);
+  const handleDuplicate = _react.default.useCallback(() => {
     // không tính tree
 
     // Cập nhật data mới
@@ -288,10 +360,10 @@ const GridEdit = props => {
     const insertAfter = Math.max(...rowsFocus);
     const rs = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
     triggerChangeData?.(rs, 'DUPLICATE');
-  };
+  }, [dataSource, rowsFocus, triggerChangeData]);
 
   // thêm n dòng bên trên
-  const handleInsertBefore = (item, n) => {
+  const handleInsertBefore = _react.default.useCallback((item, n) => {
     //
     (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
     (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
@@ -370,10 +442,10 @@ const GridEdit = props => {
         triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
       }
     }
-  };
+  }, [dataSource, defaultValue, id, isFilter, rowKey, rowsFocus, triggerChangeData]);
 
   //thêm 1 dòng bên dưới
-  const handleInsertAfter = (item, n) => {
+  const handleInsertAfter = _react.default.useCallback((item, n) => {
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
     const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
 
@@ -444,8 +516,8 @@ const GridEdit = props => {
         triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
       }
     }
-  };
-  const handleInsertChild = item => {
+  }, [dataSource, defaultValue, isFilter, rowKey, rowsFocus, triggerChangeData]);
+  const handleInsertChild = _react.default.useCallback(item => {
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
     const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
     const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
@@ -486,8 +558,8 @@ const GridEdit = props => {
       const newExpandedKeys = [...mergedExpandedKeys, key];
       setInnerExpandedKeys(newExpandedKeys);
     }
-  };
-  const handleDeleteRows = item => {
+  }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
+  const handleDeleteRows = _react.default.useCallback(item => {
     setTimeout(() => {
       (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
       (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
@@ -506,16 +578,16 @@ const GridEdit = props => {
       });
       triggerChangeData?.([...newData], 'DELETE_ROWS');
     }
-  };
-  const handleDeleteAll = () => {
+  }, [dataSource, id, rowsFocus, triggerChangeData]);
+  const handleDeleteAll = _react.default.useCallback(() => {
     triggerChangeData?.([], 'INSERT_BEFORE');
-  };
-  const handleDeleteContent = () => {
+  }, [triggerChangeData]);
+  const handleDeleteContent = _react.default.useCallback(() => {
     if (selectedCells.current.size > 0) {
       const newData = [...dataSource];
 
       // colIndex => field
-      const colIndexToField = (0, _columns.flatColumns2)(columns).map(col => col.field);
+      const colIndexToField = (0, _columns.flatColumns2)(visibleCols).map(col => col.field);
 
       // Duyệt qua mỗi ô cần xóa
       for (const cell of selectedCells.current) {
@@ -530,7 +602,7 @@ const GridEdit = props => {
       }
       triggerChangeData?.([...newData], 'DELETE_CONTENT');
     }
-  };
+  }, [dataSource, triggerChangeData, visibleCols]);
   const toolbarItemsBottom = (0, _react.useMemo)(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
       return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
@@ -695,7 +767,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertChild(item),
               className: "d-flex toolbar-button"
-            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
           }
         };
       }
@@ -739,19 +811,24 @@ const GridEdit = props => {
         ...item
       };
     });
-  }, [handleAddMulti, handleAddSingle, itemsAdd, rowsFocus.length, t, toolbarItems]);
+  }, [handleAddMulti, handleAddSingle, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
   const {
     control,
     handleSubmit,
     setValue,
     trigger,
     getValues,
-    reset
+    reset,
+    formState: {
+      errors
+    }
   } = (0, _reactHookForm.useForm)({
-    mode: 'onChange'
-    // resolver: yupResolver(formSchema)
+    mode: 'onChange',
+    resolver: (0, _yup.yupResolver)(validate)
   });
-  const isEditing = record => record[rowKey] === editingKey;
+  const isEditing = _react.default.useCallback(record => {
+    return record[rowKey] === editingKey;
+  }, [editingKey, rowKey]);
   (0, _react.useEffect)(() => {
     const handleClickOutside = event => {
       const element = event.target;
@@ -796,8 +873,11 @@ const GridEdit = props => {
     return () => {
       document.removeEventListener("click", handleClickOutside);
     };
-  }, []);
+  }, [id]);
   const handleMouseDown = (record, row, col, e) => {
+    if (editingKey && editingKey === record[rowKey]) {
+      return;
+    }
     if (e.button === 2) {
       e.stopPropagation();
       return;
@@ -853,7 +933,7 @@ const GridEdit = props => {
             setTimeout(() => {
               (0, _hooks.onAddBgSelectedCell)(cells, id);
               (0, _hooks.onAddBorderSelectedCell)(cells, id);
-            }, 100);
+            }, 200);
           } else {
             (0, _hooks.onAddBgSelectedCell)(cells, id);
             (0, _hooks.onAddBorderSelectedCell)(cells, id);
@@ -867,7 +947,9 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
-    const tmpCols = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
+    const tmpCols = {
+      ...visibleCols
+    };
     const rowSelectedFirst = (0, _hooks.getFirstSelectCell)(selectedCells.current).row;
     const rowPasteLast = (0, _hooks.getLastSelectCell)(pasteCells.current).row;
     const selectedArray = Array.from(selectedCells.current).map(key => {
@@ -998,9 +1080,12 @@ const GridEdit = props => {
     // selectedCells.current = sortedSetASC(mergedSet)
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     selectedCells.current = (0, _hooks.sortedSetASC)(mergedSet);
-    (0, _hooks.onAddBgSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
-    (0, _hooks.onAddBorderSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
-    (0, _hooks.showDraggingPoint)((0, _hooks.sortedSetASC)(mergedSet), id);
+    setRangeCells((0, _hooks.sortedSetASC)(mergedSet));
+    setTimeout(() => {
+      (0, _hooks.onAddBgSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
+      (0, _hooks.onAddBorderSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
+      (0, _hooks.showDraggingPoint)((0, _hooks.sortedSetASC)(mergedSet), id);
+    }, 50);
 
     // setPasteCells(new Set())
 
@@ -1024,27 +1109,6 @@ const GridEdit = props => {
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     triggerDragPaste(newPasteCells);
   };
-
-  // const handleClickCell = (e: any) => {
-  //
-  //   if (e.ctrlKey) {
-  //
-  //     const cell: any  = new Set([`${row}-${col}`])
-  //
-  //     const found = ctrlCells.find((s: any) => isEqualSet(s, cell));
-  //
-  //     if (found) {
-  //       const rs = ctrlCells.filter((s: any) => !isEqualSet(s, cell));
-  //
-  //       setCtrlCells(rs)
-  //
-  //     } else {
-  //       setCtrlCells([...ctrlCells, cell])
-  //     }
-  //
-  //   }
-  // }
-
   const handleMouseUp = e => {
     isSelecting.current = false;
     startCell.current = null;
@@ -1084,15 +1148,6 @@ const GridEdit = props => {
       (0, _hooks.showDraggingPoint)(selectedCells.current, id);
     }
   };
-
-  // const handlePointEnter = () => {
-  //   isPointEnter.current = true;
-  // }
-  //
-  // const handlePointLeave = () => {
-  //   isPointEnter.current = false;
-  // }
-
   const handleMouseEnter = (row, col, e) => {
     if (!isSelecting.current || !startCell.current) {
       return;
@@ -1198,32 +1253,6 @@ const GridEdit = props => {
       }
     }
   };
-
-  // const handleClickRowHeader = (row: any, col: any) => {
-  //
-  //   const newSelectedCells = new Set()
-  //
-  //   const tCols = editAbleColumns(columns)
-  //
-  //   for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
-  //     for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
-  //       newSelectedCells.add(`${r}-${c}`)
-  //     }
-  //   }
-  //
-  //   // setSelectedCells(newSelectedCells)
-  //
-  //   if (selectedCells.current && selectedCells.current.size > 0) {
-  //     onRemoveBgSelectedCell(selectedCells.current, id)
-  //   }
-  //
-  //   selectedCells.current = newSelectedCells
-  //
-  //   onAddBgSelectedCell(newSelectedCells, id)
-  //
-  //
-  // };
-
   const handleClickColHeader = (column, indexColumn) => {
     const newSelectedCells = new Set();
     for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
@@ -1258,7 +1287,7 @@ const GridEdit = props => {
       col
     };
     const newSelectedCells = new Set();
-    const tCols = (0, _hooks.editAbleColumns)(columns);
+    const tCols = (0, _hooks.editAbleColumns)(visibleCols);
     for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
       for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
@@ -1278,7 +1307,7 @@ const GridEdit = props => {
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     selectedCells.current = newSelectedCells;
     rowsSelected.current = new Set([`${row}-${col}`]);
-    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id, false);
     (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
     (0, _hooks.addClassCellIndexSelected)(new Set([`${row}-${col}`]), id);
   };
@@ -1420,13 +1449,13 @@ const GridEdit = props => {
         }
         rowValues.forEach((cellValue, colIndex) => {
           const targetCol = startCol + colIndex;
-          if (targetCol >= columns.length) {
+          if (targetCol >= visibleCols.length) {
             // Không vượt quá số cột
             return;
           }
-          if (columns[targetCol].editEnable) {
+          if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
-            const columnKey = columns[targetCol].field;
+            const columnKey = visibleCols[targetCol].field;
 
             // @ts-ignore
             newData[targetRow] = {
@@ -1469,13 +1498,13 @@ const GridEdit = props => {
         }
         rowValues.forEach((cellValue, colIndex) => {
           const targetCol = startCol + colIndex;
-          if (targetCol >= columns.length) {
+          if (targetCol >= visibleCols.length) {
             // Không vượt quá số cột
             return;
           }
-          if (columns[targetCol].editEnable) {
+          if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
-            const columnKey = columns[targetCol].field;
+            const columnKey = visibleCols[targetCol].field;
 
             // @ts-ignore
             childData[targetRow] = {
@@ -1734,6 +1763,7 @@ const GridEdit = props => {
     }
   };
   const handleEdit = (record, col, editType, e) => {
+    setTooltipContent('');
     // @ts-ignore
     setEditingKey(record[rowKey]);
     setCellEditing({
@@ -1791,7 +1821,7 @@ const GridEdit = props => {
   // }, []);
 
   const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
-    const fixedWidth = (0, _hooks.totalFixedWidth)(columns, 'left', selectionSettings);
+    const fixedWidth = (0, _hooks.totalFixedWidth)(visibleCols, 'left', selectionSettings);
     if (scrollType === 'horizontal') {
       if (tableRef.current) {
         tableRef.current.scrollTo({
@@ -1884,10 +1914,10 @@ const GridEdit = props => {
     }
   };
   const convertColumns = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
-    if (!column?.field && !column?.key) {
-      return column;
+    if (column === _InternalTable.SELECTION_COLUMN) {
+      return _InternalTable.SELECTION_COLUMN;
     }
-    if (column.dataIndex === '#' || column.dataIndex === '#') {
+    if (column.field === '#') {
       return {
         ...column,
         className: 'rc-ui-cell-editable rc-ui-cell-index',
@@ -1912,7 +1942,7 @@ const GridEdit = props => {
                 setEditingKey('');
               }
             },
-            tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
           };
         },
         render: (value, record) => {
@@ -1928,7 +1958,7 @@ const GridEdit = props => {
         }
       };
     }
-    if ((column.key || column.field) === 'command') {
+    if (column.field === 'command') {
       return {
         ...column
       };
@@ -1979,14 +2009,16 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'Tab') {
-                if (colIndex + 1 !== columns.length) {
-                  handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
-                } else {
-                  event.stopPropagation();
-                  event.preventDefault();
+                if (editingKey) {} else {
+                  if (colIndex + 1 !== visibleCols.length) {
+                    handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+                  } else {
+                    event.stopPropagation();
+                    event.preventDefault();
+                  }
                 }
               }
-              if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
+              if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
                 if (editingKey !== '') {} else {
                   handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
@@ -2059,16 +2091,16 @@ const GridEdit = props => {
               rowsSelected.current = new Set();
             }
           },
-          // onMouseEnter: () => {
-          //
-          // },
-
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
+            } else {
+              if (editingKey) {
+                handleCellClick(rowNumber, record, column);
+              }
             }
           },
-          className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : `rc-ui-cell-editable cell-editable ${!(0, _hooks.isEditable)(column, record) ? 'disable' : ''}`,
+          className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!(0, _hooks.isEditable)(column, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!(0, _hooks.isEditable)(column, record) ? 'disable' : ''}`,
           record,
           column: column,
           editType: (0, _hooks.getEditType)(column, record),
@@ -2085,7 +2117,7 @@ const GridEdit = props => {
           editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
           cellEditing,
           t,
-          tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
+          tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
           } : {}
@@ -2116,12 +2148,25 @@ const GridEdit = props => {
       },
       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 => handleMouseEnter(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) {
@@ -2137,7 +2182,7 @@ const GridEdit = props => {
           // }}
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, column.format ? typeof column.format === 'function' ? column.format(record) : column.format : format)),
+        }, (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) &&
@@ -2161,9 +2206,9 @@ const GridEdit = props => {
   const transformColumns = _react.default.useCallback(cols => {
     // @ts-ignore
     return cols.map(column => {
-      const find = convertColumns.find(it => it.key === column.key);
-      if (!column?.field && !column?.key) {
-        return column;
+      const find = convertColumns.find(it => it?.field === column.field);
+      if (column === _InternalTable.SELECTION_COLUMN) {
+        return _InternalTable.SELECTION_COLUMN;
       }
       if (find) {
         return {
@@ -2230,6 +2275,10 @@ const GridEdit = props => {
       }
       return;
     }
+    if (args.item.key === 'INSERT_CHILDREN') {
+      handleInsertChild(args.item);
+      return;
+    }
     if (args.item.key === 'DELETE_ROWS') {
       handleDeleteRows(args.item);
       return;
@@ -2272,6 +2321,7 @@ const GridEdit = props => {
       format,
       control,
       trigger,
+      errors,
       getValues,
       handleCellChange,
       getRowKey
@@ -2328,7 +2378,7 @@ const GridEdit = props => {
     },
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
-    expandable: {
+    expandable: expandable ? {
       expandIconColumnIndex: (0, _hooks.checkChild)(dataSource) ? 3 : undefined,
       ...expandable,
       expandedRowKeys: innerExpandedKeys,
@@ -2363,7 +2413,7 @@ const GridEdit = props => {
           });
         }
       }
-    },
+    } : undefined,
     triggerChangeColumns: triggerChangeColumns,
     clickHeaderToSort: false,
     isFilter: isFilter,