es-grid-template 1.7.24 → 1.7.25

package/lib/table-component/TableContainer.js

@@ -5,18 +5,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _TableHead = _interopRequireDefault(require("./header/TableHead"));
 var _utils = require("./hook/utils");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _TableBody = _interopRequireDefault(require("./body/TableBody"));
 var _useContext = require("./useContext");
+var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
+var _rcMasterUi = require("rc-master-ui");
+var _becoxyIcons = require("becoxy-icons");
+var _ColumnsChoose = require("./ColumnsChoose");
+var _TableFooter = _interopRequireDefault(require("./footer/TableFooter"));
+var _TableBody = _interopRequireDefault(require("./body/TableBody"));
+var _reactNumericComponent = require("react-numeric-component");
 // import type { Dispatch, SetStateAction } from "react";
 
+// import TableBody from './body/TableBody'
+
 const TableContainer = props => {
   const {
-    // t,
+    t,
     table,
     id,
     prefix,
@@ -36,10 +45,36 @@ const TableContainer = props => {
     contextMenuItems,
     setSorterChange,
     setFilterChange,
-    tableHeight
+    height,
+    showToolbar,
+    toolbarItems,
+    actionTemplate,
+    pagination,
+    fullScreen,
+    showColumnChoose,
+    summary,
+    locale,
+    groupColumns,
+    columns,
+    propsColumns,
+    triggerChangeColumns,
+    columnHidden,
+    expanded,
+    setExpanded
   } = props;
   const tableContainerRef = _react.default.useRef(null);
+  const containerRef = _react.default.useRef(null);
+  const bottomToolbarRef = _react.default.useRef(null);
+  const topToolbarRef = _react.default.useRef(null);
   const visibleColumns = table.getVisibleLeafColumns();
+  const [isFullScreen] = _react.default.useState(false);
+  const [tableHeight, settableHeight] = _react.default.useState(0);
+  _react.default.useEffect(() => {
+    const totalHeight = height;
+    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
+      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
+    }
+  }, [id, height, editAble]);
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
   const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
@@ -50,15 +85,6 @@ const TableContainer = props => {
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
     overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
   });
-
-  // const columnSizingState = table.getState().columnSizing
-
-  // React.useEffect(() => {
-  //   requestAnimationFrame(() => {
-  //     columnVirtualizer.measure()
-  //   })
-  // }, [columnSizingState, columnVirtualizer])
-
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
   const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
@@ -75,6 +101,61 @@ const TableContainer = props => {
     virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
   }
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    id: id
+  }, (showToolbar !== false || fullScreen !== false) && /*#__PURE__*/_react.default.createElement("div", {
+    ref: topToolbarRef,
+    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    rootClassName: 'top-pagination',
+    showTotal: (total, range) =>
+    // @ts-ignore
+    `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    columnHidden: columnHidden,
+    columns: columns,
+    originColumns: propsColumns,
+    t: t,
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefix}-grid-container`, {
       'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
       'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
@@ -91,11 +172,14 @@ const TableContainer = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      locale,
       prefix,
       id,
       rowKey,
       format,
       expandable,
+      expanded,
+      setExpanded,
       dataSource,
       originData,
       // triggerFilter,
@@ -132,6 +216,42 @@ const TableContainer = props => {
     commandClick: commandClick,
     editAble: editAble,
     contextMenuItems: contextMenuItems
+  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default
+  // tableContainerRef={tableContainerRef}
+  , {
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    ref: bottomToolbarRef
+  }, pagination && /*#__PURE__*/_react.default.createElement(_pagination.default
+  // style={{padding: '0.75rem 1rem'}}
+  , (0, _extends2.default)({}, pagination, {
+    rootClassName: 'pagination-template',
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    total: pagination.total,
+    pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
+    showTotal: (total, range) => `${(0, _reactNumericComponent.numericFormatter)((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${(0, _reactNumericComponent.numericFormatter)((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${(0, _reactNumericComponent.numericFormatter)((total ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} items`,
+    pageSizeOptions: [20, 50, 100, 1000, 10000],
+    onChange: (page, pageSize) => {
+      if (pagination.onChange) {
+        pagination.onChange(page, pageSize);
+      } else {
+        table.setPageIndex(page - 1);
+        table.setPageSize(pageSize);
+      }
+    }
   }))));
 };
 var _default = exports.default = TableContainer;

package/lib/table-component/TableContainerEdit.d.ts

@@ -1,13 +1,14 @@
 import type { Dispatch, SetStateAction } from "react";
 import React from "react";
-import type { Table } from "@tanstack/react-table";
-import type { TableProps } from "./type";
+import type { ColumnDef, Table } from "@tanstack/react-table";
+import type { ColumnsTable, TableProps } from "./type";
 type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     table: Table<T>;
     prefix: string;
     id: string;
     rowKey: any;
     originData: T[];
+    propsColumns: ColumnsTable;
     setIsSelectionChange: Dispatch<SetStateAction<{
         isChange: boolean;
         type: string;
@@ -18,11 +19,13 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     onContextMenu?: (data: T) => (event: any) => void;
     tableHeight?: number;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
-    triggerChangeData?: (newData: T[], type: string) => void;
-    mergedFilterKeys: any;
-    setMergedFilterKeys: any;
-    setExpanded: any;
-    expanded: any;
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
+    setExpanded?: any;
+    expanded?: any;
+    columns: ColumnDef<T>[];
+    triggerChangeColumns: any;
+    columnHidden: any;
 };
 declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainerEdit;

package/lib/table-component/TableContainerEdit.js

@@ -21,12 +21,45 @@ var _rcMasterUi = require("rc-master-ui");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _becoxyIcons = require("becoxy-icons");
 var _ColumnsChoose = require("./ColumnsChoose");
+var _TableFooter = _interopRequireDefault(require("./footer/TableFooter"));
 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 {
   Paragraph,
   Title
 } = _antd.Typography;
+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,
+            id: data[i].rowId
+          };
+        }, {}));
+      }
+    }
+    return errors;
+  }
+};
 const TableContainerEdit = props => {
   const {
     t,
@@ -51,14 +84,16 @@ const TableContainerEdit = props => {
     setFilterChange,
     // tableHeight,
     onCellPaste,
-    triggerPaste,
+    // triggerPaste,
     validate,
-    triggerChangeData,
+    // triggerChangeData,
     onCellChange,
+    onDataChange,
     defaultValue,
     toolbarItems,
     mergedFilterKeys,
     setMergedFilterKeys,
+    expanded,
     setExpanded,
     onBlur,
     fullScreen,
@@ -66,7 +101,14 @@ const TableContainerEdit = props => {
     showToolbar,
     actionTemplate,
     showColumnChoose,
-    height
+    height,
+    summary,
+    locale,
+    groupColumns,
+    columns,
+    propsColumns,
+    triggerChangeColumns,
+    columnHidden
   } = props;
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -94,7 +136,7 @@ const TableContainerEdit = props => {
     // },
 
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
-    overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
+    overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
   });
   const columnSizingState = table.getState().columnSizing;
   const itemsAdd = _react.default.useMemo(() => {
@@ -109,11 +151,22 @@ const TableContainerEdit = props => {
       label: `100 ${t ? t('rows') : 'rows'}`
     }];
   }, [t]);
+  const [dataErrors, setDataErrors] = _react.default.useState([]);
   _react.default.useEffect(() => {
     requestAnimationFrame(() => {
       columnVirtualizer.measure();
     });
   }, [columnSizingState, columnVirtualizer]);
+  _react.default.useEffect(() => {
+    if (validate && dataSource && dataSource.length) {
+      validateData(dataSource, validate).then(error => {
+        setDataErrors([...error]);
+        // if (getErrors) {
+        //   getErrors([...error])
+        // }
+      });
+    }
+  }, [validate, dataSource]);
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
   const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
@@ -194,8 +247,41 @@ const TableContainerEdit = props => {
     // Copy to clipboard
     navigator.clipboard.writeText(tsv).then(() => {});
   }, [startCell, endCell, table]);
+  const triggerChangeData = _react.default.useCallback(newData => {
+    onDataChange?.(newData);
+  }, [onDataChange]);
+  const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
+    const handlePasteCallback = callbackData => {
+      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...dataSource]), callbackData);
+      const rs = (0, _utils.unFlattenData)(rsFilterData);
+      triggerChangeData(rs);
+    };
+    if (onCellPaste && onCellPaste.onPasted) {
+      if (onCellPaste.onPasted.length > 1) {
+        // có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          copyRows,
+          type: 'onPaste',
+          data: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+      } else {
+        // không có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          type: 'onPaste',
+          copyRows,
+          data: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+        triggerChangeData(newData);
+      }
+    } else {
+      triggerChangeData(newData);
+    }
+  }, [dataSource, onCellPaste, triggerChangeData]);
   const handlePasted = _react.default.useCallback(pasteData => {
-    console.log('ooooooo');
     if (!startCell) {
       return;
     }
@@ -280,7 +366,6 @@ const TableContainerEdit = props => {
       const pastedColumnsArray = Array.from(pastedColumns) ?? [];
       const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), newData);
       const rs = (0, _utils.unFlattenData)(rsFilterData);
-      console.log('2');
       triggerPaste?.(pastedRows, pastedColumnsArray, rs, []);
     } else {
       // const parent = findItemByKey(dataSource, rowKey as any, record.parentId)
@@ -338,7 +423,6 @@ const TableContainerEdit = props => {
       }; // item đã được filter
 
       const newDataSource = (0, _utils.updateArrayByKey)(originData, newRowData, rowKey);
-      console.log('1');
       triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
     }
   }, [dataSource, format, onCellPaste?.maxRowsPaste, originData, rowKey, startCell, table, triggerPaste]);
@@ -383,38 +467,25 @@ const TableContainerEdit = props => {
     }
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
   _react.default.useEffect(() => {
-
-    // const handleKeyDown = (e: KeyboardEvent) => {
-    //   console.log('copySelectionToClipboard')
-    //   if (e.ctrlKey && e.key === 'c' && startCell && endCell) {
-
-    //     e.preventDefault();
-    //     copySelectionToClipboard();
-
-    //   }
-    // };
-
-    // window.addEventListener('keydown', handleKeyDown);
-    // return () => window.removeEventListener('keydown', handleKeyDown);
+    const handleKeyDown = e => {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell) {
+        e.preventDefault();
+        copySelectionToClipboard();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
   }, [startCell, endCell, table, copySelectionToClipboard]);
   _react.default.useEffect(() => {
-
-    // console.log('handlePaste')
-
-    // const handlePaste = (e: any) => {
-
-    //   if (startCell) {
-
-    //     e.preventDefault(); // Chặn hành vi mặc định
-    //     const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
-
-    //     handlePasteToTable(clipboardText);
-    //   }
-
-    // };
-
-    // window.addEventListener('paste', handlePaste);
-    // return () => window.removeEventListener('paste', handlePaste);
+    const handlePaste = e => {
+      if (startCell) {
+        e.preventDefault(); // Chặn hành vi mặc định
+        const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
+        handlePasteToTable(clipboardText);
+      }
+    };
+    window.addEventListener('paste', handlePaste);
+    return () => window.removeEventListener('paste', handlePaste);
   }, [startCell, endCell, table, handlePasteToTable]);
   _react.default.useEffect(() => {
     const handleClickOutside = event => {
@@ -429,11 +500,9 @@ const TableContainerEdit = props => {
       const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
       const isInsideHeader = itemHeader && itemHeader.contains(event.target);
       if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext) {
-        console.log('55555');
         return;
       }
       if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
-        console.log('55555');
         if (editingKey) {
           onBlur?.(dataSource);
         }
@@ -462,14 +531,14 @@ const TableContainerEdit = props => {
     if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
       settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
     }
-  }, [id, height]);
+  }, [id, height, editAble]);
   const {
     control,
     handleSubmit,
     setValue,
     // trigger,
     getValues,
-    // reset,
+    reset,
     formState: {
       errors
     }
@@ -491,7 +560,7 @@ const TableContainerEdit = props => {
       const index = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = (0, _utils.updateArrayByKey)(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs, 'onChange');
+        triggerChangeData?.(rs);
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -575,7 +644,7 @@ const TableContainerEdit = props => {
       const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
       setMergedFilterKeys?.(rs);
       const newData = dataSource.concat(newRows);
-      triggerChangeData?.(newData, 'Add');
+      triggerChangeData?.(newData);
     }
   }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
   const handleDuplicate = _react.default.useCallback(() => {
@@ -607,7 +676,7 @@ const TableContainerEdit = props => {
     const rs = (0, _utils.updateOrInsert)(originData, rsFilter);
     // const rs2  = mergeWithFilter(originData, rsFilter)
 
-    triggerChangeData?.(rs, 'DUPLICATE');
+    triggerChangeData?.(rs);
   }, [dataSource, focusedCell, originData, rowKey, table, triggerChangeData]);
 
   // thêm n dòng bên trên
@@ -640,7 +709,7 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index, 0, ...newRows);
-        triggerChangeData?.(newData, 'INSERT_BEFORE');
+        triggerChangeData?.(newData);
       } else {
         const newData = [...originData];
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
@@ -666,7 +735,7 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = (0, _utils.updateArrayByKey)(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+        triggerChangeData?.(newDataSource);
       }
     }
   }, [defaultValue, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
@@ -704,7 +773,7 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index + 1, 0, ...newRows);
-        triggerChangeData?.(newData, 'INSERT_AFTER');
+        triggerChangeData?.(newData);
       } else {
         const newData = [...originData];
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
@@ -733,7 +802,7 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = (0, _utils.updateArrayByKey)(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+        triggerChangeData?.(newDataSource);
       }
     }
   }, [defaultValue, table, focusedCell?.rowId, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
@@ -771,7 +840,7 @@ const TableContainerEdit = props => {
       const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
       setMergedFilterKeys?.(rs);
       const newDataSource = (0, _utils.updateArrayByKey)(newData, newElement, rowKey);
-      triggerChangeData?.(newDataSource, 'INSERT_CHILDREN');
+      triggerChangeData?.(newDataSource);
     }
     setTimeout(() => {
       const row = table.getRowModel().rows.find(it => it.id === focusedCell?.rowId);
@@ -798,11 +867,11 @@ const TableContainerEdit = props => {
       const filterData = (0, _utils.flattenArray)([...originData]);
       const rs = filterData.filter(it => !rowsFocus.includes(it[rowKey]));
       const newDaa = (0, _utils.unFlattenData)(rs);
-      triggerChangeData?.([...newDaa], 'DELETE_ROWS');
+      triggerChangeData?.([...newDaa]);
     }
   }, [originData, rowKey, rowsFocus, triggerChangeData]);
   const handleDeleteAll = _react.default.useCallback(() => {
-    triggerChangeData?.([], 'INSERT_BEFORE');
+    triggerChangeData?.([]);
   }, [triggerChangeData]);
   const handleDeleteContent = _react.default.useCallback(() => {
     if (startCell && endCell) {
@@ -823,7 +892,7 @@ const TableContainerEdit = props => {
         return updatedRow;
       });
       const newData = (0, _utils.unFlattenData)(rs);
-      triggerChangeData?.([...newData], 'DELETE_CONTENT');
+      triggerChangeData?.([...newData]);
     }
   }, [dataSource, endCell, rangeState, startCell, table, triggerChangeData]);
   const toolbarItemsBottom = _react.default.useMemo(() => {
@@ -1038,7 +1107,7 @@ const TableContainerEdit = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || showColumnChoose) && /*#__PURE__*/_react.default.createElement("div", {
     ref: topToolbarRef,
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -1084,10 +1153,12 @@ const TableContainerEdit = props => {
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
-    columns: [],
+    columns: columns,
+    originColumns: propsColumns,
     t: t,
-    columnsGroup: []
-    // triggerChangeColumns={triggerChangeColumns}
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns,
+    columnHidden: columnHidden
   })))), /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -1106,11 +1177,14 @@ const TableContainerEdit = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      locale,
       prefix,
       id,
       rowKey,
       format,
       expandable,
+      expanded,
+      setExpanded,
       dataSource,
       originData,
       wrapSettings,
@@ -1146,10 +1220,12 @@ const TableContainerEdit = props => {
       errors,
       getValues,
       setValue,
+      reset,
       handleCellChange,
       triggerPaste,
       handleDeleteContent,
-      handleAddMulti
+      handleAddMulti,
+      dataErrors
     }
   }, /*#__PURE__*/_react.default.createElement("table", {
     // className={`${prefix}-grid-container`}
@@ -1177,6 +1253,13 @@ const TableContainerEdit = props => {
     commandClick: commandClick,
     editAble: editAble,
     contextMenuItems: contextMenuItems
+  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
   }))))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
@@ -1199,7 +1282,7 @@ const TableContainerEdit = props => {
     }
   })), pagination && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}
-  , {
+  , (0, _extends2.default)({}, pagination, {
     rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,
@@ -1214,7 +1297,14 @@ const TableContainerEdit = props => {
         table.setPageIndex(page - 1);
         table.setPageSize(pageSize);
       }
-    }
-  })));
+    },
+    showTotal: (total, range) => `${(0, _reactNumericComponent.numericFormatter)((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${(0, _reactNumericComponent.numericFormatter)((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${(0, _reactNumericComponent.numericFormatter)((total ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} items`
+  }))));
 };
 var _default = exports.default = TableContainerEdit;