es-grid-template 1.2.0 → 1.2.1

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { GridTableProps } from "./type";
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import './styles.scss';
+declare const ConvertColumnTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
+export default ConvertColumnTable;

package/lib/grid-component/ConvertColumnTable.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactResizable = require("react-resizable");
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+require("dayjs/locale/vi");
+var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
+var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
+require("./styles.scss");
+var _InternalTable = _interopRequireDefault(require("./InternalTable"));
+var _useColumns = _interopRequireDefault(require("./hooks/useColumns"));
+var _hooks = require("./hooks");
+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; }
+// import classNames from "classnames";
+
+// import useMergedState from "rc-util/lib/hooks/useMergedState";
+
+_dayjs.default.extend(_customParseFormat.default);
+
+// const ASCEND = 'ascend';
+// const DESCEND = 'descend';
+
+const ResizableTitle = props => {
+  const {
+    onResize,
+    width,
+    ...restProps
+  } = props;
+  if (!width) {
+    return /*#__PURE__*/_react.default.createElement("th", restProps);
+  }
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    _react.default.createElement(_reactResizable.Resizable, {
+      width: width,
+      height: 0,
+      handle: /*#__PURE__*/_react.default.createElement("span", {
+        className: "react-resizable-handle",
+        onClick: e => {
+          e.stopPropagation();
+        }
+      }),
+      onResize: onResize,
+      draggableOpts: {
+        enableUserSelectHack: false
+      }
+    }, /*#__PURE__*/_react.default.createElement("th", restProps))
+  );
+};
+const ConvertColumnTable = props => {
+  const {
+    t,
+    columns: propsColumns,
+    dataSource,
+    lang,
+    locale,
+    format,
+    allowResizing,
+    dataSourceFilter: propDataSourceFilter,
+    onFilterClick,
+    editAble,
+    rowKey: propRowKey,
+    sortMultiple,
+    groupAble,
+    groupSetting,
+    groupColumns,
+    ...rest
+  } = props;
+  const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
+  const buddhistLocale = {
+    ...local,
+    lang: {
+      ...local.lang
+    }
+  };
+  const rowKey = (0, _react.useMemo)(() => {
+    return editAble ? 'rowId' : propRowKey ?? 'id';
+  }, [editAble, propRowKey]);
+  const [columns, setColumns] = _react.default.useState([]);
+
+  // ========================= Keys =========================
+  // const [columns, setColumns] = useMergedState(
+  //   propsColumns || [],
+  //   {
+  //     value: propsColumns,
+  //   },
+  // );
+
+  _react.default.useEffect(() => {
+    setColumns(propsColumns);
+  }, [propsColumns]);
+  const handleResize = column => (e, {
+    size
+  }) => {
+    const newColumn = {
+      ...column,
+      width: size.width
+    };
+    const newColumns = (0, _hooks.updateArrayByKey)(columns, newColumn, 'field');
+    setColumns(newColumns);
+  };
+  const [transformSelectionColumns] = (0, _useColumns.default)({
+    locale,
+    t,
+    buddhistLocale,
+    dataSourceFilter: propDataSourceFilter,
+    format,
+    sortMultiple,
+    groupAble,
+    groupSetting,
+    groupColumns,
+    handleResize
+  });
+  const mergedColumns = _react.default.useMemo(() => {
+    return transformSelectionColumns(columns);
+  }, [columns, transformSelectionColumns]);
+  const mergerdData = _react.default.useMemo(() => {
+    return dataSource;
+  }, [dataSource]);
+  return /*#__PURE__*/_react.default.createElement(_InternalTable.default, (0, _extends2.default)({}, rest, {
+    t: t,
+    editAble: editAble,
+    dataSource: mergerdData,
+    format: format,
+    locale: locale,
+    components: {
+      header: {
+        cell: allowResizing ? ResizableTitle : undefined
+      }
+    }
+    // columns={mergedColumns}
+    ,
+    columns: mergedColumns ?? [],
+    showSorterTooltip: {
+      target: 'sorter-icon'
+    },
+    rowKey: rowKey,
+    groupAble: groupAble,
+    groupSetting: groupSetting
+  }));
+};
+var _default = exports.default = ConvertColumnTable;

package/lib/grid-component/EditableCell.js

@@ -41,7 +41,7 @@ const EditableCell = props => {
     t,
     editing,
     dataIndex,
-    title,
+    // title,
     editType,
     record,
     index,

package/lib/grid-component/GridStyle.js

@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}}.react-resizable{position:relative;background-clip:padding-box;}.react-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : '50px', props => props.heightTable ? `${props.heightTable}px` : '50px');
+})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}}}.react-resizable{position:relative;background-clip:padding-box;}.react-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined);

package/lib/grid-component/InternalTable.js

@@ -6,28 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _rcMasterUi = require("rc-master-ui");
-var _antd = require("antd");
-var _icons = require("@ant-design/icons");
+var _react = _interopRequireDefault(require("react"));
 var _reactResizable = require("react-resizable");
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _hooks = require("./hooks");
-var _becoxyIcons = require("becoxy-icons");
-var _useColumns = require("./hooks/useColumns");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("dayjs/locale/es");
 require("dayjs/locale/vi");
+var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
+var _Grid = _interopRequireDefault(require("./table/Grid"));
 var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
 var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
+var _useColumns = _interopRequireDefault(require("./hooks/useColumns"));
 require("./styles.scss");
-var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
-var _Grid = _interopRequireDefault(require("./table/Grid"));
-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; }
-// import useMergedState from "rc-util/lib/hooks/useMergedState";
-
+var _columns = require("./hooks/columns");
+var _Group = _interopRequireDefault(require("./table/Group"));
 _dayjs.default.extend(_customParseFormat.default);
+
+// const ASCEND = 'ascend';
+// const DESCEND = 'descend';
+
 const ResizableTitle = props => {
   const {
     onResize,
@@ -59,6 +57,7 @@ const ResizableTitle = props => {
 const InternalTable = props => {
   const {
     t,
+    // columns,
     columns: propsColumns,
     lang,
     locale,
@@ -67,13 +66,24 @@ const InternalTable = props => {
     dataSourceFilter: propDataSourceFilter,
     onFilterClick,
     editAble,
-    rowKey,
+    rowKey: propRowKey,
     format,
     onDataChange,
     sortMultiple,
-    expandable,
+    // expandable,
+    // @ts-ignore
+    onCellPaste,
+    clickHeaderToSort = true,
+    components,
+    onChooseColumns,
+    groupAble,
+    groupSetting,
+    groupColumns,
     ...rest
   } = props;
+  const rowKey = _react.default.useMemo(() => {
+    return editAble ? 'rowId' : propRowKey ?? 'id';
+  }, [editAble, propRowKey]);
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
   const buddhistLocale = {
     ...local,
@@ -81,157 +91,28 @@ const InternalTable = props => {
       ...local.lang
     }
   };
-
-  // const [mergedColumns, setMergedColumns] = useMergedState(
-  //   propsColumns,
-  //   {
-  //     value: propsColumns,
-  //   },
-  // );
-
-  const tableRef = (0, _react.useRef)(null);
-  const [data, setData] = (0, _react.useState)([]);
-  const [columns, setColumns] = (0, _react.useState)([]);
-  const [isManualUpdate, setIsManualUpdate] = (0, _react.useState)(false);
-  // const [expandKeys, setExpandKeys] = useState<string[]>([]);
-  const [dataSourceFilter, setDataSourceFilter] = (0, _react.useState)(propDataSourceFilter ?? []);
-  (0, _react.useEffect)(() => {
-    const rs = propsColumns && propsColumns.length > 0 ? [_rcMasterUi.Table.SELECTION_COLUMN, ...propsColumns] : [];
-    // const  rs = propsColumns ? [...propsColumns] : []
-    setColumns(rs);
+  const mergerdData = _react.default.useMemo(() => {
+    return (0, _hooks.addRowIdArray)(dataSource);
+  }, [dataSource]);
+  const [columns, setColumns] = _react.default.useState([]);
+  const tableRef = _react.default.useRef(null);
+  _react.default.useEffect(() => {
+    setColumns(propsColumns);
   }, [propsColumns]);
-  (0, _react.useEffect)(() => {
-    if (!isManualUpdate) {
-      setData(dataSource || []);
-    }
-    setIsManualUpdate(false);
-  }, [dataSource, isManualUpdate]);
 
-  // const [columns, setColumns] = useMergedState(
-  //   propsColumns ? [Table.SELECTION_COLUMN, ...propsColumns] : [],
-  //   {
-  //     value: propsColumns ? [Table.SELECTION_COLUMN, ...propsColumns] : [],
-  //   },
-  // );
+  // const [data, setData] = useState<RecordType[]>([]);
 
-  // ============================ RowKey ============================
-  const getRowKey = _react.default.useMemo(() => {
-    if (typeof rowKey === 'function') {
-      return rowKey;
-    }
-    // @ts-ignore
-    return record => record?.[rowKey];
-  }, [rowKey]);
+  // const [isManualUpdate, setIsManualUpdate] = useState(false);
 
   // useEffect(() => {
-  //   const rrr = findAllChildrenKeys<any>(dataSource, getRowKey, 'children');
-  //   setExpandKeys(rrr as any)
-  // }, [dataSource, getRowKey])
+  //   if (!isManualUpdate) {
+  //     const mergedData = addRowIdArray(dataSource)
+  //
+  //     setData(mergedData || []);
+  //   }
+  //   setIsManualUpdate(false);
+  // }, [dataSource, isManualUpdate])
 
-  const handleSearch = (selectedKeys, confirm) => {
-    confirm();
-  };
-  const onFilterCallback = (key, filterDataCallback) => {
-    const find = dataSourceFilter.find(it => it.key === key);
-    if (find) {
-      const newData = (0, _hooks.updateArrayByKey)(dataSourceFilter, {
-        key,
-        data: filterDataCallback
-      }, 'key');
-      setDataSourceFilter(newData);
-    } else {
-      const newData = [...dataSourceFilter, {
-        key,
-        data: filterDataCallback
-      }];
-      setDataSourceFilter(newData);
-    }
-  };
-  const getColumnSearchProps = (0, _react.useCallback)(column => ({
-    filterDropdown: ({
-      setSelectedKeys,
-      selectedKeys,
-      confirm,
-      // close,
-      setOperatorKey,
-      operatorKey,
-      visible,
-      searchValue,
-      setSearchValue
-    }) => {
-      const type = (0, _hooks.getTypeFilter)(column);
-      // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
-      // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
-      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          padding: 8,
-          minWidth: 275
-        },
-        onKeyDown: e => e.stopPropagation()
-      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
-        className: 'mb-1'
-      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
-        options: (0, _hooks.translateOption)(operatorOptions, t),
-        style: {
-          width: '100%',
-          marginBottom: 8
-        },
-        value: operatorKey,
-        onChange: val => {
-          setOperatorKey(val);
-        }
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          marginBottom: 8
-        }
-      }, (0, _useColumns.renderFilter)(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t)), /*#__PURE__*/_react.default.createElement(_antd.Space, {
-        style: {
-          justifyContent: 'end',
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
-        type: "primary",
-        onClick: () => {
-          confirm({
-            closeDropdown: false
-          });
-          handleSearch(selectedKeys, confirm);
-        },
-        icon: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null),
-        size: "small",
-        style: {
-          width: 90
-        }
-      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-        type: "link",
-        size: "small",
-        onClick: () => {
-          // setSearchValue('')
-          setSelectedKeys([]);
-          confirm();
-          // handleSearch()
-          // close()
-        }
-      }, t ? t("Clear") : 'Clear')));
-    },
-    filterIcon: filtered => /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
-      fontSize: 12,
-      onClick: () => {
-        onFilterClick?.(column, onFilterCallback);
-      },
-      style: {
-        color: filtered ? '#283046' : undefined
-      }
-    }),
-    filterDropdownProps: {
-      onOpenChange(open) {
-        if (open) {
-          // setTimeout(() => searchInput.current?.select(), 100)
-        }
-      }
-    }
-  }), [buddhistLocale, dataSourceFilter, onFilterCallback, onFilterClick, t]);
   const handleResize = column => (e, {
     size
   }) => {
@@ -242,123 +123,136 @@ const InternalTable = props => {
     const newColumns = (0, _hooks.updateArrayByKey)(columns, newColumn, 'field');
     setColumns(newColumns);
   };
-  const convertColumns = (0, _useColumns.flatColumns2)(columns).map((column, colIndex) => {
-    if (!column?.dataIndex && !column.key && !column.field) {
-      return column;
-    }
-    const transformedColumn = {
-      ...column,
-      dataIndex: column.field ?? column.dataIndex,
-      key: column.field ?? column.dataIndex ?? column.key,
-      title: t ? t(column.headerText ?? column.title) : column.headerText ?? column.title,
-      ellipsis: column.ellipsis !== false,
-      align: column.textAlign ?? column.align,
-      fixed: column.frozen ? column.frozen.toLowerCase() : column.fixed
-    };
+  const [transformSelectionColumns] = (0, _useColumns.default)({
+    locale,
+    t,
+    buddhistLocale,
+    dataSourceFilter: propDataSourceFilter,
+    format,
+    sortMultiple,
+    groupAble,
+    groupSetting,
+    groupColumns,
+    handleResize
+  });
+  const mergedColumns = _react.default.useMemo(() => {
+    return transformSelectionColumns(columns);
+  }, [columns, transformSelectionColumns]);
 
-    // @ts-ignore
-    if (["index", "#"].includes(transformedColumn.dataIndex)) {
-      return {
-        ...transformedColumn,
-        onCell: () => ({
-          className: 'cell-number'
-        }),
-        render: (_, __, rowIndex) => rowIndex + 1
-      };
-    }
-    if (column.field === 'command') {
-      return {
-        ...transformedColumn,
-        onCell: () => ({
-          className: column.field === 'command' ? "ui-rc-cell-command" : ''
-        }),
-        onHeaderCell: () => ({
-          width: column.width,
-          onResize: handleResize(column)
-        })
-      };
+  // ============================ RowKey ============================
+  const getRowKey = _react.default.useMemo(() => {
+    if (typeof rowKey === 'function') {
+      return rowKey;
     }
-    return {
-      ...(column.allowFiltering === false ? {} : {
-        ...getColumnSearchProps(column)
-      }),
-      ...transformedColumn,
-      onFilter: value => {
-        return value;
-      },
-      sorter: column.sorter === false ? undefined : {
-        compare: a => a,
-        multiple: sortMultiple ? colIndex : undefined
-      },
-      onHeaderCell: () => ({
-        width: column.width,
-        onResize: handleResize(column)
-      }),
-      render: (value, record, rowIndex) => (0, _useColumns.renderContent)(column, value, record, rowIndex, format)
-    };
-  });
-  const transformColumns = _react.default.useCallback(cols => {
     // @ts-ignore
-    return cols.map(column => {
-      const find = convertColumns.find(it => it.key === column.field);
-      if (!column?.field && !column?.key) {
-        return column;
-      }
-      if (find) {
-        return {
-          ...find
-        };
-      }
+    return record => record?.[rowKey];
+  }, [rowKey]);
 
-      // Xử lý đệ quy cho children
-      if (column.children?.length) {
-        return {
-          ...column,
-          key: column.field ?? column.dataIndex ?? column.key,
-          title: t ? t(column.headerText ?? column.title) : column.headerText ?? column.title,
-          ellipsis: column.ellipsis !== false,
-          align: column.textAlign ?? column.align,
-          children: transformColumns(column.children)
-        };
-      }
-    });
-  }, [convertColumns]);
-  const mergedColumns = _react.default.useMemo(() => {
-    return transformColumns(columns);
-  }, [transformColumns, columns]);
+  // const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
   const triggerChangeColumns = newColumns => {
     setColumns(newColumns);
+    onChooseColumns?.({
+      showColumns: [],
+      columns: [],
+      flattenColumns: []
+    });
+  };
+  const triggerGroupColumns = groupedColumns => {
+    setColumns((0, _hooks.updateColumnsByGroup)(mergedColumns, groupedColumns));
+    if (groupSetting) {
+      if (groupSetting.client === false) {
+
+        // setIsTree(true)
+
+        // setGroupOpen([])
+
+        // const dt = ungroupArray(dataSource)
+
+        // const rs = groupArrayByColumns2(dt, [...value])
+
+        // setResource([...rs])
+
+        // if (groupSetting.onGroup) {
+        //   groupSetting.onGroup({
+        //     columnGrouped: value,
+        //     columns: removeColumns(columns as any, value),
+        //     flattenColumns: convertFlatColumn(removeColumns(columns as any, value)) as any
+        //
+        //   })
+        // }
+      } else {
+        if (groupSetting.onGroup) {
+          groupSetting.onGroup({
+            columnGrouped: groupedColumns,
+            columns: (0, _hooks.removeColumns)(columns, groupedColumns),
+            flattenColumns: (0, _columns.flatColumns2)((0, _hooks.removeColumns)(columns, groupedColumns))
+          });
+        }
+      }
+    }
   };
   const triggerChangeData = newData => {
-    setIsManualUpdate(true);
-    setData(newData);
+    // setIsManualUpdate(true)
+    // setData(newData)
     // setMergedData(newData)
     onDataChange?.(newData);
   };
-  const TableComponent = editAble ? _GridEdit.default : _Grid.default;
+  const triggerPaste = (pastedRows, pastedColumnsArray, newData) => {
+    const handlePasteCallback = callbackData => {
+      const newDataUpdate = (0, _hooks.updateData)(dataSource, callbackData, rowKey);
+      triggerChangeData(newDataUpdate);
+      onCellPaste?.dataChange?.(newDataUpdate);
+    };
+    if (onCellPaste && onCellPaste.onPasted) {
+      if (onCellPaste.onPasted.length > 1) {
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          type: 'onPaste',
+          data: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+      } else {
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          type: 'onPaste',
+          data: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+        triggerChangeData(newData);
+        onCellPaste.dataChange?.(newData);
+      }
+    }
+  };
+  const TableComponent = groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;
   return /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
     t: t,
     locale: locale,
     tableRef: tableRef,
-    dataSource: data
-    // mergedData={mergedData}
+    dataSource: mergerdData
+    // components={components}
     ,
     components: {
       header: {
         cell: allowResizing ? ResizableTitle : undefined
       }
     },
-    format: format,
-    columns: mergedColumns
-    // defaultColumns={mergedColumns}
+    format: format
+    // columns={columns}
     ,
+    columns: mergedColumns,
     showSorterTooltip: {
       target: 'sorter-icon'
     },
     triggerChangeColumns: triggerChangeColumns,
     triggerChangeData: triggerChangeData,
+    triggerGroupColumns: triggerGroupColumns,
     rowKey: rowKey,
-    getRowKey: getRowKey
+    getRowKey: getRowKey,
+    triggerPaste: triggerPaste,
+    clickHeaderToSort: clickHeaderToSort,
+    groupSetting: groupSetting,
+    groupAble: groupAble,
+    groupColumns: groupColumns
   }));
 };
 var _default = exports.default = InternalTable;

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

@@ -5,9 +5,12 @@ import type { ColumnsTable, GetRowKey, GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: (newData: T[], type: string) => void;
+    triggerGroupColumns?: (groupedColumns: string[]) => void;
     tableRef: any;
     bottomToolbar?: () => React.ReactElement;
-    getRowKey?: GetRowKey<T>;
+    getRowKey: GetRowKey<T>;
+    rowSelection?: any;
+    groupToolbar?: () => React.ReactNode;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;