es-grid-template 1.4.1 → 1.4.2

package/es/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/es/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/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";
@@ -19,13 +20,13 @@ 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);
@@ -168,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;
@@ -205,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]);
@@ -226,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) {
@@ -245,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
@@ -266,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
@@ -283,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);
@@ -365,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]];
 
@@ -439,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]];
@@ -481,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);
@@ -501,11 +570,11 @@ 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];
 
@@ -525,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 => {
@@ -690,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')));
           }
         };
       }
@@ -734,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;
@@ -791,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;
@@ -848,7 +925,7 @@ const GridEdit = props => {
             setTimeout(() => {
               onAddBgSelectedCell(cells, id);
               onAddBorderSelectedCell(cells, id);
-            }, 100);
+            }, 200);
           } else {
             onAddBgSelectedCell(cells, id);
             onAddBorderSelectedCell(cells, id);
@@ -995,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())
 
@@ -1021,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;
@@ -1081,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;
@@ -1195,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++) {
@@ -1731,6 +1755,7 @@ const GridEdit = props => {
     }
   };
   const handleEdit = (record, col, editType, e) => {
+    setTooltipContent('');
     // @ts-ignore
     setEditingKey(record[rowKey]);
     setCellEditing({
@@ -1881,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',
@@ -1925,7 +1950,7 @@ const GridEdit = props => {
         }
       };
     }
-    if ((column.key || column.field) === 'command') {
+    if (column.field === 'command') {
       return {
         ...column
       };
@@ -1978,10 +2003,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();
                   }
@@ -2060,10 +2083,6 @@ const GridEdit = props => {
               rowsSelected.current = new Set();
             }
           },
-          // onMouseEnter: () => {
-          //
-          // },
-
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
@@ -2073,7 +2092,7 @@ const GridEdit = props => {
               }
             }
           },
-          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),
@@ -2123,12 +2142,23 @@ const GridEdit = props => {
         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) {
@@ -2168,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 {
@@ -2237,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;
@@ -2279,6 +2313,7 @@ const GridEdit = props => {
       format,
       control,
       trigger,
+      errors,
       getValues,
       handleCellChange,
       getRowKey
@@ -2335,7 +2370,7 @@ const GridEdit = props => {
     },
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
-    expandable: {
+    expandable: expandable ? {
       expandIconColumnIndex: checkChild(dataSource) ? 3 : undefined,
       ...expandable,
       expandedRowKeys: innerExpandedKeys,
@@ -2370,7 +2405,7 @@ const GridEdit = props => {
           });
         }
       }
-    },
+    } : undefined,
     triggerChangeColumns: triggerChangeColumns,
     clickHeaderToSort: false,
     isFilter: isFilter,

package/es/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/es/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/es/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>;