es-grid-template 1.4.0 → 1.4.2

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

@@ -5,6 +5,7 @@ import classNames from "classnames";
 import { Button, Dropdown, Form, Modal, Typography } from "antd";
 import { useForm } from 'react-hook-form';
 import { Toaster } from "react-hot-toast";
+import { yupResolver } from "@hookform/resolvers/yup";
 import { flatColumns2, getValueCell, renderContent } from "../hooks/columns";
 import EditableCell from "../EditableCell";
 import { GridStyle } from "../GridStyle";
@@ -13,19 +14,19 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addClassBorderPasteCell, addClassCellIndexSelected, addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, hideDraggingPoint, isEditable, isEqualSet, isObjEmpty, newGuid, onAddBorderSelectedCell, onAddBgSelectedCell, onRemoveBorderSelectedCell, onRemoveBgSelectedCell, removeClassBorderPasteCell, removeClassCellIndexSelected, showDraggingPoint, sortedSetASC, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addClassBorderPasteCell, addClassCellIndexSelected, addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, hideDraggingPoint, isEditable, isEqualSet, isObjEmpty, newGuid, onAddBorderSelectedCell, onAddBgSelectedCell, onRemoveBorderSelectedCell, onRemoveBgSelectedCell, removeClassBorderPasteCell, removeClassCellIndexSelected, showDraggingPoint, sortedSetASC, totalFixedWidth, updateArrayByKey, getFormat } from "../hooks";
 import Message from "../../Message/Message";
 import { Toolbar, ConfigProvider, InputNumber } from "rc-master-ui";
 import classnames from "classnames";
 import { Plus, Trash2 } from "becoxy-icons";
 import { faker } from "@faker-js/faker";
+import { SELECTION_COLUMN } from "../InternalTable";
 const {
   Paragraph,
   Title
 } = Typography;
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
-// const defaultContext: ContextMenuItem[] = [
 const defaultContext = [{
   key: 'INSERT_BEFORE',
   label: 'Thêm dòng bên trên',
@@ -88,6 +89,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.createElement(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',
@@ -101,6 +140,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,
@@ -129,6 +199,8 @@ const GridEdit = props => {
     rowEditable,
     contextMenuItems: propsContext,
     showDefaultContext,
+    validate,
+    setTooltipContent,
     ...rest
   } = props;
   const ref = useRef(null);
@@ -149,6 +221,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.useMemo(() => {
+    return flatColumns2(columns.filter(it => it.visible !== false));
+  }, [columns]);
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -165,33 +240,17 @@ const GridEdit = props => {
   }];
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
+  const [dataErrors, setDataErrors] = useState([]);
   const [isFilter, setIsFilter] = React.useState(false);
   const [rangeCells, setRangeCells] = 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] = useState({
     open: false,
     type: ''
   });
   const [rowsAdd, setRowsAdd] = useState(1);
   const [cellEditing, setCellEditing] = useState(null);
-
-  // const [isSelectDragging, setSelectIsDragging] = useState(false)
-
   const [isPasteDragging, setIsPasteDragging] = 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.useState(() => {
     // if (defaultExpandedRowKeys) {
     //   return defaultExpandedRowKeys;
@@ -202,6 +261,16 @@ const GridEdit = props => {
     // return [];
   });
   const mergedExpandedKeys = React.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
+  React.useEffect(() => {
+    if (validate && dataSource && dataSource.length) {
+      validateData(dataSource, validate).then(error => {
+        setDataErrors([...error]);
+        // if (getErrors) {
+        //   getErrors([...error])
+        // }
+      });
+    }
+  }, [validate, dataSource]);
   const rowsFocus = React.useMemo(() => {
     return [...new Set(Array.from(rangeCells).map(item => parseInt(item.split('-')[0])))] ?? [];
   }, [rangeCells]);
@@ -223,8 +292,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.useCallback(item => {
     const defaultRowValue = getDefaultValue(defaultValue);
     const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
     if (item && item.onClick) {
@@ -242,8 +314,8 @@ const GridEdit = props => {
       }];
       triggerChangeData?.(newData, 'Add');
     }
-  };
-  const handleAddMulti = (item, e) => {
+  }, [dataSource, defaultValue, triggerChangeData]);
+  const handleAddMulti = React.useCallback((item, e) => {
     if (item.onClick) {
       item.onClick({
         toolbar: item
@@ -263,8 +335,8 @@ const GridEdit = props => {
       const newData = dataSource.concat(newRows);
       triggerChangeData?.(newData, 'Add');
     }
-  };
-  const handleDuplicate = () => {
+  }, [dataSource, defaultValue, triggerChangeData]);
+  const handleDuplicate = React.useCallback(() => {
     // không tính tree
 
     // Cập nhật data mới
@@ -280,10 +352,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.useCallback((item, n) => {
     //
     onRemoveBgSelectedCell(selectedCells.current, id);
     onRemoveBorderSelectedCell(selectedCells.current, id);
@@ -362,10 +434,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.useCallback((item, n) => {
     const defaultRowValue = getDefaultValue(defaultValue);
     const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
 
@@ -436,8 +508,8 @@ const GridEdit = props => {
         triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
       }
     }
-  };
-  const handleInsertChild = item => {
+  }, [dataSource, defaultValue, isFilter, rowKey, rowsFocus, triggerChangeData]);
+  const handleInsertChild = React.useCallback(item => {
     const defaultRowValue = getDefaultValue(defaultValue);
     const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
     const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
@@ -478,8 +550,8 @@ const GridEdit = props => {
       const newExpandedKeys = [...mergedExpandedKeys, key];
       setInnerExpandedKeys(newExpandedKeys);
     }
-  };
-  const handleDeleteRows = item => {
+  }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
+  const handleDeleteRows = React.useCallback(item => {
     setTimeout(() => {
       onAddBgSelectedCell(selectedCells.current, id);
       onAddBorderSelectedCell(selectedCells.current, id);
@@ -498,16 +570,16 @@ const GridEdit = props => {
       });
       triggerChangeData?.([...newData], 'DELETE_ROWS');
     }
-  };
-  const handleDeleteAll = () => {
+  }, [dataSource, id, rowsFocus, triggerChangeData]);
+  const handleDeleteAll = React.useCallback(() => {
     triggerChangeData?.([], 'INSERT_BEFORE');
-  };
-  const handleDeleteContent = () => {
+  }, [triggerChangeData]);
+  const handleDeleteContent = React.useCallback(() => {
     if (selectedCells.current.size > 0) {
       const newData = [...dataSource];
 
       // colIndex => field
-      const colIndexToField = flatColumns2(columns).map(col => col.field);
+      const colIndexToField = flatColumns2(visibleCols).map(col => col.field);
 
       // Duyệt qua mỗi ô cần xóa
       for (const cell of selectedCells.current) {
@@ -522,7 +594,7 @@ const GridEdit = props => {
       }
       triggerChangeData?.([...newData], 'DELETE_CONTENT');
     }
-  };
+  }, [dataSource, triggerChangeData, visibleCols]);
   const toolbarItemsBottom = 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 => {
@@ -687,7 +759,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')));
           }
         };
       }
@@ -731,19 +803,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
+    }
   } = useForm({
-    mode: 'onChange'
-    // resolver: yupResolver(formSchema)
+    mode: 'onChange',
+    resolver: yupResolver(validate)
   });
-  const isEditing = record => record[rowKey] === editingKey;
+  const isEditing = React.useCallback(record => {
+    return record[rowKey] === editingKey;
+  }, [editingKey, rowKey]);
   useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
@@ -788,8 +865,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;
@@ -845,7 +925,7 @@ const GridEdit = props => {
             setTimeout(() => {
               onAddBgSelectedCell(cells, id);
               onAddBorderSelectedCell(cells, id);
-            }, 100);
+            }, 200);
           } else {
             onAddBgSelectedCell(cells, id);
             onAddBorderSelectedCell(cells, id);
@@ -859,7 +939,9 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
-    const tmpCols = flatColumns2(columns.filter(it => it.visible !== false));
+    const tmpCols = {
+      ...visibleCols
+    };
     const rowSelectedFirst = getFirstSelectCell(selectedCells.current).row;
     const rowPasteLast = getLastSelectCell(pasteCells.current).row;
     const selectedArray = Array.from(selectedCells.current).map(key => {
@@ -990,9 +1072,12 @@ const GridEdit = props => {
     // selectedCells.current = sortedSetASC(mergedSet)
     hideDraggingPoint(selectedCells.current, id);
     selectedCells.current = sortedSetASC(mergedSet);
-    onAddBgSelectedCell(sortedSetASC(mergedSet), id);
-    onAddBorderSelectedCell(sortedSetASC(mergedSet), id);
-    showDraggingPoint(sortedSetASC(mergedSet), id);
+    setRangeCells(sortedSetASC(mergedSet));
+    setTimeout(() => {
+      onAddBgSelectedCell(sortedSetASC(mergedSet), id);
+      onAddBorderSelectedCell(sortedSetASC(mergedSet), id);
+      showDraggingPoint(sortedSetASC(mergedSet), id);
+    }, 50);
 
     // setPasteCells(new Set())
 
@@ -1016,27 +1101,6 @@ const GridEdit = props => {
     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;
@@ -1076,15 +1140,6 @@ const GridEdit = props => {
       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;
@@ -1190,32 +1245,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++) {
@@ -1250,7 +1279,7 @@ const GridEdit = props => {
       col
     };
     const newSelectedCells = new Set();
-    const tCols = editAbleColumns(columns);
+    const tCols = 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}`);
@@ -1270,7 +1299,7 @@ const GridEdit = props => {
     hideDraggingPoint(selectedCells.current, id);
     selectedCells.current = newSelectedCells;
     rowsSelected.current = new Set([`${row}-${col}`]);
-    onAddBgSelectedCell(newSelectedCells, id);
+    onAddBgSelectedCell(newSelectedCells, id, false);
     onAddBorderSelectedCell(newSelectedCells, id);
     addClassCellIndexSelected(new Set([`${row}-${col}`]), id);
   };
@@ -1412,13 +1441,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] = {
@@ -1461,13 +1490,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] = {
@@ -1726,6 +1755,7 @@ const GridEdit = props => {
     }
   };
   const handleEdit = (record, col, editType, e) => {
+    setTooltipContent('');
     // @ts-ignore
     setEditingKey(record[rowKey]);
     setCellEditing({
@@ -1783,7 +1813,7 @@ const GridEdit = props => {
   // }, []);
 
   const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
-    const fixedWidth = totalFixedWidth(columns, 'left', selectionSettings);
+    const fixedWidth = totalFixedWidth(visibleCols, 'left', selectionSettings);
     if (scrollType === 'horizontal') {
       if (tableRef.current) {
         tableRef.current.scrollTo({
@@ -1876,10 +1906,10 @@ const GridEdit = props => {
     }
   };
   const convertColumns = flatColumns2(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
-    if (!column?.field && !column?.key) {
-      return column;
+    if (column === SELECTION_COLUMN) {
+      return SELECTION_COLUMN;
     }
-    if (column.dataIndex === '#' || column.dataIndex === '#') {
+    if (column.field === '#') {
       return {
         ...column,
         className: 'rc-ui-cell-editable rc-ui-cell-index',
@@ -1904,7 +1934,7 @@ const GridEdit = props => {
                 setEditingKey('');
               }
             },
-            tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
           };
         },
         render: (value, record) => {
@@ -1920,7 +1950,7 @@ const GridEdit = props => {
         }
       };
     }
-    if ((column.key || column.field) === 'command') {
+    if (column.field === 'command') {
       return {
         ...column
       };
@@ -1971,14 +2001,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);
                 }
@@ -2051,16 +2083,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 ${!isEditable(column, record) ? 'disable' : ''}`,
+          className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column, record) ? 'disable' : ''}`,
           record,
           column: column,
           editType: getEditType(column, record),
@@ -2077,7 +2109,7 @@ const GridEdit = props => {
           editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
           cellEditing,
           t,
-          tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
+          tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
           } : {}
@@ -2108,12 +2140,25 @@ const GridEdit = props => {
       },
       render: (value, record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+        const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+        const cellFormat = 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.createElement("div", {
           className: classNames('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) {
@@ -2129,7 +2174,7 @@ const GridEdit = props => {
           // }}
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, column.format ? typeof column.format === 'function' ? column.format(record) : column.format : format)),
+        }, 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) &&
@@ -2153,9 +2198,9 @@ const GridEdit = props => {
   const transformColumns = React.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 === SELECTION_COLUMN) {
+        return SELECTION_COLUMN;
       }
       if (find) {
         return {
@@ -2222,6 +2267,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;
@@ -2264,6 +2313,7 @@ const GridEdit = props => {
       format,
       control,
       trigger,
+      errors,
       getValues,
       handleCellChange,
       getRowKey
@@ -2320,7 +2370,7 @@ const GridEdit = props => {
     },
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
-    expandable: {
+    expandable: expandable ? {
       expandIconColumnIndex: checkChild(dataSource) ? 3 : undefined,
       ...expandable,
       expandedRowKeys: innerExpandedKeys,
@@ -2355,7 +2405,7 @@ const GridEdit = props => {
           });
         }
       }
-    },
+    } : undefined,
     triggerChangeColumns: triggerChangeColumns,
     clickHeaderToSort: false,
     isFilter: isFilter,