es-grid-template 1.4.0 → 1.4.2

package/lib/grid-component/InternalTable.js

@@ -4,10 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.SELECTION_COLUMN = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactResizable = require("react-resizable");
 require("react-resizable/css/styles.css");
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _hooks = require("./hooks");
@@ -18,27 +17,79 @@ 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 _columns = require("./hooks/columns");
 var _Group = _interopRequireDefault(require("./table/Group"));
 var _sweetalert = _interopRequireDefault(require("sweetalert2"));
 var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
 var _reactTooltip = require("react-tooltip");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _HeaderContent = _interopRequireDefault(require("./hooks/content/HeaderContent"));
+var _becoxyIcons = require("becoxy-icons");
+var _rcMasterUi = require("rc-master-ui");
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _modifiers = require("@dnd-kit/modifiers");
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _reactResizable = require("react-resizable");
 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; }
-_dayjs.default.extend(_customParseFormat.default);
-const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
+// import {Resizable} from "react-resizable";
 
-// const ASCEND = 'ascend';
-// const DESCEND = 'descend';
+// import useColumns from "./hooks/useColumns";
 
+// import {CSS} from "@dnd-kit/utilities";
+
+_dayjs.default.extend(_customParseFormat.default);
+const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
+const ASCEND = 'ascend';
+const DESCEND = 'descend';
+const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
+const dragActiveStyle = (dragState, id) => {
+  const {
+    active,
+    over,
+    direction
+  } = dragState;
+  // drag active style
+  let style = {};
+  if (active && active === id) {
+    style = {
+      backgroundColor: '#c0c0c0',
+      opacity: 0.3
+    };
+  }
+  // dragover dashed style
+  else if (over && id === over && active !== over) {
+    style = direction === 'right' ? {
+      borderRight: '1px dashed gray'
+    } : {
+      borderLeft: '1px dashed gray'
+    };
+  }
+  return style;
+};
+const DragIndexContext = /*#__PURE__*/(0, _react.createContext)({
+  active: -1,
+  over: -1
+});
 const ResizableTitle = props => {
   const {
     onResize,
     width,
     ...restProps
   } = props;
+  const dragState = (0, _react.useContext)(DragIndexContext);
+
+  // const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: props.id });
+
+  const style = {
+    ...props.style,
+    // cursor: 'move',
+    // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
+    ...dragActiveStyle(dragState, props.id)
+  };
   if (!width) {
     return /*#__PURE__*/_react.default.createElement("th", restProps);
   }
@@ -58,9 +109,47 @@ const ResizableTitle = props => {
       draggableOpts: {
         enableUserSelectHack: false
       }
-    }, /*#__PURE__*/_react.default.createElement("th", restProps))
+    }, /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({}, restProps, {
+      style: style
+    })))
   );
 };
+const TableBodyCell = props => {
+  const dragState = (0, _react.useContext)(DragIndexContext);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, props, {
+    style: {
+      ...props.style,
+      ...dragActiveStyle(dragState, props.id)
+    }
+  }));
+};
+const SortableHeaderCell = ({
+  children,
+  columnKey
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging
+  } = (0, _sortable.useSortable)({
+    id: columnKey
+  });
+  const style = {
+    // ...props.style,
+    cursor: 'move',
+    ...(isDragging ? {
+      position: 'relative',
+      zIndex: 9999,
+      userSelect: 'none'
+    } : {})
+    // ...dragActiveStyle(dragState, props.id),
+  };
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setNodeRef,
+    style: style
+  }, attributes, listeners), children);
+};
 const InternalTable = props => {
   const {
     t,
@@ -89,11 +178,12 @@ const InternalTable = props => {
     groupColumns,
     commandClick,
     commandSettings,
+    pagination,
     ...rest
   } = props;
   const rowKey = _react.default.useMemo(() => {
-    return editAble ? 'rowId' : propRowKey ?? 'id';
-  }, [editAble, propRowKey]);
+    return propRowKey ?? 'rowId';
+  }, [propRowKey]);
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
   const buddhistLocale = {
     ...local,
@@ -106,32 +196,19 @@ const InternalTable = props => {
   // const [isFilter, setIsFilter] = React.useState<boolean>(false);
   // const [cellTooltip, seCellTooltip] = React.useState<any>(undefined);
 
-  const mergerdData = _react.default.useMemo(() => {
-    // return filterDataByColumns2(addRowIdArray(dataSource), filterStates)
-    // return filterDataByColumns3(addRowIdArray(dataSource), filterStates)
+  const [dragIndex, setDragIndex] = (0, _react.useState)({
+    active: -1,
+    over: -1
+  });
+  const [tooltipContent, setTooltipContent] = (0, _react.useState)('');
+  const mergedData = _react.default.useMemo(() => {
     return (0, _hooks.addRowIdArray)(dataSource);
-    // return dataSource
   }, [dataSource]);
   const [columns, setColumns] = _react.default.useState([]);
   const tableRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
     setColumns(propsColumns);
   }, [propsColumns]);
-  // }, [!!propsColumns.length && !!propsColumns])
-
-  // const [data, setData] = useState<RecordType[]>([]);
-
-  // const [isManualUpdate, setIsManualUpdate] = useState(false);
-
-  // useEffect(() => {
-  //   if (!isManualUpdate) {
-  //     const mergedData = addRowIdArray(dataSource)
-  //
-  //     setData(mergedData || []);
-  //   }
-  //   setIsManualUpdate(false);
-  // }, [dataSource, isManualUpdate])
-
   const handleResize = column => (e, {
     size
   }) => {
@@ -152,31 +229,287 @@ const InternalTable = props => {
     return record => record?.[rowKey];
   }, [rowKey]);
 
-  // const onMouseHover = (record: any, col: ColumnTable) => {
-  //
-  // }
+  // const [transformSelectionColumns] = useColumns<RecordType>(
+  //   {
+  //     locale,
+  //     t,
+  //     rowKey,
+  //     // dataSource: mergerdData,
+  //     dataSource,
+  //     buddhistLocale,
+  //     dataSourceFilter: propDataSourceFilter,
+  //     format,
+  //     sortMultiple,
+  //     groupAble,
+  //     groupSetting,
+  //     groupColumns,
+  //     handleResize,
+  //     // onMouseHover
+  //   },
+  // );
 
-  const [transformSelectionColumns] = (0, _useColumns.default)({
-    locale,
-    t,
-    rowKey,
-    // dataSource: mergerdData,
-    dataSource,
-    buddhistLocale,
-    dataSourceFilter: propDataSourceFilter,
-    format,
-    sortMultiple,
-    groupAble,
-    groupSetting,
-    groupColumns,
-    handleResize
-    // onMouseHover
-  });
-  const mergedColumns = _react.default.useMemo(() => {
-    return transformSelectionColumns(columns);
-  }, [columns, transformSelectionColumns]);
+  // const mergedColumns: any = React.useMemo(() => {
+  //   return transformSelectionColumns(columns)
+  // }, [columns, transformSelectionColumns])
 
-  // const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
+  const firstNonGroupColumn = (0, _columns.flatColumns2)(columns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
+  const nonGroupColumns = (0, _columns.flatColumns2)(columns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
+  const getColumnSearchProps = (0, _react.useCallback)(column => ({
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      setOperatorKey,
+      operatorKey,
+      visible,
+      searchValue,
+      setSearchValue
+    }) => {
+      const type = (0, _hooks.getTypeFilter)(column);
+      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, _columns.renderFilter)(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], 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})
+          confirm();
+          // handleSearch(selectedKeys as string[], 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 ? '#E3165B' : '#283046'
+      }
+    }),
+    filterDropdownProps: {
+      onOpenChange(open) {
+        if (open) {
+          // setTimeout(() => searchInput.current?.select(), 100)
+        }
+      }
+    }
+  }), [buddhistLocale, propDataSourceFilter, locale, t]);
+  const convertColumns = _react.default.useMemo(() => {
+    return (0, _columns.flatColumns2)(columns).map((column, colIndex) => {
+      if (column === SELECTION_COLUMN) {
+        return SELECTION_COLUMN;
+      }
+      const transformedColumn = {
+        ...column,
+        dataIndex: column.field ?? column.dataIndex,
+        // key: column.field ?? column.dataIndex ?? column.key,
+        // title: () => (<HeaderContent column={{...column} as any} t={t}/>),
+        title: /*#__PURE__*/_react.default.createElement(SortableHeaderCell, {
+          columnKey: column.field
+        }, /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
+          column: {
+            ...column
+          },
+          t: t
+        })),
+        ellipsis: column.ellipsis !== false,
+        align: column.textAlign ?? column.align,
+        fixed: column.fixedType ?? column.fixed,
+        isSummary: column.isSummary ?? column.haveSum,
+        hidden: column.hidden ?? column.visible === false
+      };
+      if (transformedColumn.field === '#') {
+        return {
+          ...transformedColumn,
+          onCell: () => ({
+            className: 'cell-number'
+          }),
+          render: (val, record) => {
+            if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
+              return (0, _hooks.findItemPath)(mergedData, record, rowKey, pagination.currentPage, pagination.pageSize);
+            }
+            return (0, _hooks.findItemPath)(mergedData, record, rowKey);
+          }
+        };
+      }
+      if (transformedColumn.field === 'command') {
+        return {
+          ...transformedColumn,
+          onCell: () => ({
+            className: 'cell-number',
+            style: {
+              padding: '2px 8px'
+            }
+          })
+        };
+      }
+      return {
+        ...transformedColumn,
+        ...(transformedColumn.allowFiltering === false ? {} : {
+          ...getColumnSearchProps(column)
+        }),
+        sorter: column.sorter === false ? undefined : {
+          compare: a => a,
+          multiple: sortMultiple ? colIndex : undefined
+        },
+        sortIcon: args => {
+          const {
+            sortOrder
+          } = args;
+          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !sortOrder && /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowUp, {
+            fontSize: 15,
+            style: {
+              display: 'flex',
+              opacity: 0,
+              marginLeft: 4
+            },
+            className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
+              active: true
+            })
+          }), sortOrder === ASCEND && /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
+              active: sortOrder === ASCEND
+            }),
+            style: {
+              display: 'flex',
+              marginLeft: 4
+            }
+          }, /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowUp, {
+            fontSize: 15,
+            color: '#000'
+          })), sortOrder === DESCEND && /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
+              active: sortOrder === DESCEND
+            }),
+            style: {
+              display: 'flex',
+              marginLeft: 4
+            }
+          }, /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowDown, {
+            fontSize: 15,
+            color: '#000'
+          })));
+        },
+        onHeaderCell: () => ({
+          id: `${column.field}`,
+          width: column.width,
+          onResize: handleResize?.(column),
+          className: column.headerTextAlign === 'center' ? 'head-align-center' : column.headerTextAlign === 'right' ? 'head-align-right' : ''
+        }),
+        onCell: (data, index) => {
+          return {
+            id: `${column.field}`,
+            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
+            // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
+            ...transformedColumn?.onCell?.(data, index),
+            className: (0, _classnames.default)(transformedColumn?.onCell?.(data, index).className ?? '', {
+              'cell-group': groupColumns && data.children,
+              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field
+            }),
+            'data-tooltip-id': "tooltip-cell-content"
+          };
+        },
+        render: (value, record, rowIndex) => {
+          const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+          const cellFormat = (0, _hooks.getFormat)(colFormat, format);
+          if (groupSetting && groupSetting.hiddenColumnGroup === false) {
+            if (record.children) {
+              return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
+            }
+            if (groupColumns?.includes(column.field)) {
+              return '';
+            }
+            return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
+          }
+          if (column.field === firstNonGroupColumn?.field && record.children) {
+            const currentGroupColumn = (0, _columns.flatColumns2)(columns).find(it => it.field === record.field);
+            if (currentGroupColumn?.template) {
+              return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
+            }
+            return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
+          }
+          return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
+        },
+        hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(column.field) ? true : transformedColumn.hidden
+      };
+    });
+  }, [columns, t, getColumnSearchProps, sortMultiple, groupSetting, groupAble, groupColumns, pagination, mergedData, rowKey, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
+  const transformColumns = _react.default.useCallback(cols => {
+    return cols.map(column => {
+      const find = convertColumns.find(it => it.field === column.field);
+      if (column === SELECTION_COLUMN) {
+        return SELECTION_COLUMN;
+      }
+      if (find) {
+        return {
+          ...find
+        };
+      }
+      if (!find) {
+        return {
+          ...column
+        };
+      }
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
+        return {
+          ...column,
+          children: transformColumns(column.children)
+        };
+      }
+    });
+  }, [convertColumns]);
+  const mergedColumns = _react.default.useMemo(() => {
+    return transformColumns(columns);
+  }, [columns, transformColumns]);
+  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
+    activationConstraint: {
+      distance: 1
+    }
+  }));
   const triggerChangeColumns = (newColumns, type) => {
     setColumns(newColumns);
     if (tableRef.current && type === 'columnChoose') {
@@ -191,6 +524,34 @@ const InternalTable = props => {
       flattenColumns: []
     });
   };
+  const onDragEnd = ({
+    active,
+    over
+  }) => {
+    if (active.id !== over?.id) {
+      const targetColumn = (0, _columns.flatColumns2)(columns).find(it => it.field === over?.id);
+      const activeIndex = (0, _columns.flatColumns2)(columns).findIndex(i => i.field === active?.id);
+      const overIndex = (0, _columns.flatColumns2)(columns).findIndex(i => i.field === over?.id);
+      const rs = (0, _sortable.arrayMove)(columns, activeIndex, overIndex);
+      triggerChangeColumns(rs, targetColumn && targetColumn.fixed === 'left' ? 'columnChoose' : '');
+    }
+    setDragIndex({
+      active: -1,
+      over: -1
+    });
+  };
+  const onDragOver = ({
+    active,
+    over
+  }) => {
+    const activeIndex = columns.findIndex(i => i.field === active.id);
+    const overIndex = columns.findIndex(i => i.field === over?.id);
+    setDragIndex({
+      active: active.id,
+      over: over?.id,
+      direction: overIndex > activeIndex ? 'right' : 'left'
+    });
+  };
   const triggerGroupColumns = groupedColumns => {
     setColumns((0, _hooks.updateColumnsByGroup)(mergedColumns, groupedColumns));
     if (groupSetting) {
@@ -232,20 +593,6 @@ const InternalTable = props => {
     onDataChange?.(newData);
     // onDataChange?.(removeFieldRecursive(newData, 'isFilterState'))
   };
-
-  // const triggerFilter = (queries: any) => {
-  //   console.log('queries', queries)
-  //   // console.log('data', dataSource)
-  //   setFilterState(queries)
-  //
-  //   if (queries && queries.length > 0) {
-  //     setIsFilter(true)
-  //   } else {
-  //     setIsFilter(false)
-  //   }
-  //
-  // }
-
   const triggerCommandClick = args => {
     const {
       id,
@@ -253,7 +600,7 @@ const InternalTable = props => {
       rowData,
       index
     } = args;
-    const tmpData = [...dataSource];
+    const tmpData = [...mergedData];
     if (id === 'DELETE') {
       // bật modal confirm
       if (commandSettings && commandSettings.confirmDialog) {
@@ -279,7 +626,7 @@ const InternalTable = props => {
 
               let newData = [];
               if (rowData?.parentId) {
-                const parent = (0, _hooks.findItemByKey)(dataSource, rowKey, rowData.parentId);
+                const parent = (0, _hooks.findItemByKey)(mergedData, rowKey, rowData.parentId);
                 const childData = parent?.children ? [...parent.children] : [];
                 const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
                 childData.splice(Number(findIndex), 1);
@@ -311,7 +658,7 @@ const InternalTable = props => {
                   rowId: rowData.rowId,
                   rowData,
                   index,
-                  rows: [...dataSource]
+                  rows: [...mergedData]
                 });
               }
             }
@@ -325,7 +672,7 @@ const InternalTable = props => {
 
           let newData2 = [];
           if (rowData?.parentId) {
-            const parent = (0, _hooks.findItemByKey)(dataSource, rowKey, rowData.parentId);
+            const parent = (0, _hooks.findItemByKey)(mergedData, rowKey, rowData.parentId);
             const childData = parent?.children ? [...parent.children] : [];
             const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
             childData.splice(Number(findIndex), 1);
@@ -355,7 +702,7 @@ const InternalTable = props => {
               rowId,
               rowData,
               index,
-              rows: [...dataSource]
+              rows: [...mergedData]
             });
           }
         }
@@ -368,7 +715,7 @@ const InternalTable = props => {
   };
   const triggerPaste = (pastedRows, pastedColumnsArray, newData) => {
     const handlePasteCallback = callbackData => {
-      const newDataUpdate = (0, _hooks.updateData)(dataSource, callbackData, rowKey);
+      const newDataUpdate = (0, _hooks.updateData)(mergedData, callbackData, rowKey);
       triggerChangeData(newDataUpdate);
 
       // onCellPaste?.dataChange?.(newDataUpdate)
@@ -379,7 +726,7 @@ const InternalTable = props => {
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
-          data: dataSource,
+          data: mergedData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
       } else {
@@ -387,7 +734,7 @@ const InternalTable = props => {
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
-          data: dataSource,
+          data: mergedData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
         triggerChangeData(newData);
@@ -399,22 +746,23 @@ const InternalTable = props => {
     }
   };
   const TableComponent = groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    sensors: sensors,
+    modifiers: [_modifiers.restrictToHorizontalAxis],
+    onDragEnd: onDragEnd,
+    onDragOver: onDragOver,
+    collisionDetection: _core.closestCenter
+  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: columns.map(i => i.field),
+    strategy: _sortable.horizontalListSortingStrategy
+  }, /*#__PURE__*/_react.default.createElement(DragIndexContext.Provider, {
+    value: dragIndex
+  }, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
     t: t,
     locale: locale,
     tableRef: tableRef,
-    dataSource: mergerdData
-    // dataSource={dataSource}
-    // components={components}
-    ,
-    components: {
-      header: {
-        cell: allowResizing ? ResizableTitle : undefined
-      }
-    },
-    format: format
-    // columns={columns}
-    ,
+    dataSource: mergedData,
+    format: format,
     columns: mergedColumns,
     showSorterTooltip: {
       target: 'sorter-icon'
@@ -429,25 +777,44 @@ const InternalTable = props => {
     groupSetting: groupSetting,
     groupAble: groupAble,
     groupColumns: groupColumns,
-    commandClick: triggerCommandClick
-    // triggerFilter={triggerFilter}
-    // isFilter={isFilter}
-    // setIsFilter={setIsFilter}
-    // onScroll={onScroll}
-  })), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+    commandClick: triggerCommandClick,
+    pagination: pagination,
+    components: {
+      header: {
+        cell: ResizableTitle
+      },
+      body: {
+        cell: TableBodyCell
+      }
+    },
+    setTooltipContent: setTooltipContent
+  })))), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
+    style: {
+      width: 100
+    }
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    style: {
+      backgroundColor: '#c4c4c4',
+      padding: 6,
+      borderRadius: 6,
+      fontWeight: 500
+    }
+  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+    id: "tooltip-form-error",
+    style: {
+      zIndex: 1999
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
     id: "tooltip-cell-content",
     style: {
       zIndex: 1999
+    },
+    render: () => {
+      if (tooltipContent) {
+        return /*#__PURE__*/_react.default.createElement("span", null, typeof tooltipContent === 'function' ? tooltipContent() : tooltipContent);
+      }
+      return undefined;
     }
-    // content={'sssss'}
-    // content={cellTooltip}
-    // render={() => {
-    //   return (
-    //     <span>
-    //       aaaa
-    //     </span>
-    //   )
-    // }}
   }));
 };
 var _default = exports.default = InternalTable;