es-grid-template 1.4.1 → 1.4.2

package/lib/grid-component/table/Grid.d.ts

@@ -8,6 +8,7 @@ type Props<T> = GridTableProps<T> & {
     triggerChangeData?: (newData: T[], type: string) => void;
     getRowKey: GetRowKey<T>;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
+    setTooltipContent?: any;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
     isFilter?: boolean;
     setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;

package/lib/grid-component/table/GridEdit.d.ts

@@ -11,6 +11,7 @@ type Props<RecordType> = TableProps<RecordType> & {
     triggerPaste?: (pastedRows: RecordType[], pastedColumnsArray: string[], newData: RecordType[]) => void;
     getRowKey: GetRowKey<RecordType>;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
+    setTooltipContent?: any;
 };
 declare const GridEdit: <RecordType extends AnyObject = AnyObject>(props: Props<RecordType>) => React.JSX.Element;
 export default GridEdit;

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);
@@ -176,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;
@@ -213,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]);
@@ -234,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) {
@@ -253,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
@@ -274,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
@@ -291,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);
@@ -373,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]];
 
@@ -447,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]];
@@ -489,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);
@@ -509,11 +578,11 @@ 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];
 
@@ -533,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 => {
@@ -698,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')));
           }
         };
       }
@@ -742,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;
@@ -799,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;
@@ -856,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);
@@ -1003,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())
 
@@ -1029,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;
@@ -1089,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;
@@ -1203,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++) {
@@ -1739,6 +1763,7 @@ const GridEdit = props => {
     }
   };
   const handleEdit = (record, col, editType, e) => {
+    setTooltipContent('');
     // @ts-ignore
     setEditingKey(record[rowKey]);
     setCellEditing({
@@ -1889,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',
@@ -1933,7 +1958,7 @@ const GridEdit = props => {
         }
       };
     }
-    if ((column.key || column.field) === 'command') {
+    if (column.field === 'command') {
       return {
         ...column
       };
@@ -1986,10 +2011,8 @@ const GridEdit = props => {
               if (event.key === 'Tab') {
                 if (editingKey) {} else {
                   if (colIndex + 1 !== visibleCols.length) {
-                    // console.log('bbbbb')
                     handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                   } else {
-                    // console.log('fffff')
                     event.stopPropagation();
                     event.preventDefault();
                   }
@@ -2068,10 +2091,6 @@ const GridEdit = props => {
               rowsSelected.current = new Set();
             }
           },
-          // onMouseEnter: () => {
-          //
-          // },
-
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
@@ -2081,7 +2100,7 @@ const GridEdit = props => {
               }
             }
           },
-          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),
@@ -2131,12 +2150,23 @@ const GridEdit = props => {
         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) {
@@ -2176,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 {
@@ -2245,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;
@@ -2287,6 +2321,7 @@ const GridEdit = props => {
       format,
       control,
       trigger,
+      errors,
       getValues,
       handleCellChange,
       getRowKey
@@ -2343,7 +2378,7 @@ const GridEdit = props => {
     },
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
-    expandable: {
+    expandable: expandable ? {
       expandIconColumnIndex: (0, _hooks.checkChild)(dataSource) ? 3 : undefined,
       ...expandable,
       expandedRowKeys: innerExpandedKeys,
@@ -2378,7 +2413,7 @@ const GridEdit = props => {
           });
         }
       }
-    },
+    } : undefined,
     triggerChangeColumns: triggerChangeColumns,
     clickHeaderToSort: false,
     isFilter: isFilter,

package/lib/grid-component/table/Group.d.ts

@@ -9,6 +9,7 @@ type Props<T> = GridTableProps<T> & {
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
     triggerFilter?: (queries: any) => void;
+    setTooltipContent?: any;
 };
 declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Group;

package/lib/grid-component/type.d.ts

@@ -1,7 +1,7 @@
 import type { Key, ReactElement, ReactNode } from "react";
 import type React from "react";
 import type { IOperator } from "./hooks";
-import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
+import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType, TablePaginationConfig } from "rc-master-ui";
 import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/interface";
 import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
@@ -135,12 +135,13 @@ export type ColumnTemplate<RecordType> = {
     field: string;
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
-export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
+export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination'> {
     editAble?: boolean;
     groupAble?: boolean;
     groupColumns?: string[];
     groupSetting?: IGroupSetting;
     onChooseColumns?: (props: IOnChooseColumns) => void;
+    pagination?: false | PaginationConfig;
     showCustomTooltip?: boolean;
     sortMultiple?: boolean;
     dataSource: RecordType[];
@@ -193,7 +194,11 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
     onCellClick?: (args: ICellClick, callback?: any) => void;
     rowEditable?: (rowData: RecordType) => boolean;
+    validate?: any;
 }
+export type PaginationConfig = TablePaginationConfig & {
+    currentPage?: number;
+};
 export type ICellClick = {
     index: number;
     indexCol?: number;

package/lib/grid-component/useContext.d.ts

@@ -12,6 +12,7 @@ export interface IContext<RecordType> {
     form?: any;
     format?: IFormat;
     control?: any;
+    errors?: any;
     trigger?: any;
     handleSubmit?: any;
     onSubmit?: SubmitHandler<any>;