@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/es/table/Table.js

@@ -12,36 +12,23 @@ import _find from "lodash/find";
 import _includes from "lodash/includes";
 import _noop from "lodash/noop";
 import _get from "lodash/get";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
 /* eslint-disable no-nested-ternary */
-
 /* eslint-disable prefer-const */
-
 /* eslint-disable prefer-destructuring */
-
 /* eslint-disable no-shadow */
-
 /* eslint-disable no-param-reassign */
-
 /* eslint-disable max-len */
-
 /* eslint-disable react/no-did-update-set-state */
-
 /* eslint-disable eqeqeq */
-
 /* eslint-disable max-lines-per-function */
-
-
 import React, { createRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -65,185 +52,381 @@ import ExpandedIcon from './CustomExpandIcon';
 import HeadTable from './HeadTable';
 import BodyTable from './Body';
 import { logger, cloneDeep, mergeComponents, mergeColumns } from './utils';
-
 class Table extends BaseComponent {
+  get adapter() {
+    var _this = this;
+    return Object.assign(Object.assign({}, super.adapter), {
+      resetScrollY: () => {
+        if (this.bodyWrapRef.current) {
+          this.bodyWrapRef.current.scrollTop = 0;
+        }
+      },
+      setSelectedRowKeys: selectedRowKeys => {
+        this.setState({
+          rowSelection: Object.assign(Object.assign({}, this.state.rowSelection), {
+            selectedRowKeys: [...selectedRowKeys],
+            selectedRowKeysSet: new Set(selectedRowKeys)
+          })
+        });
+      },
+      setDisabledRowKeys: disabledRowKeys => {
+        this.setState({
+          disabledRowKeys,
+          disabledRowKeysSet: new Set(disabledRowKeys)
+        });
+      },
+      setCurrentPage: currentPage => {
+        const {
+          pagination
+        } = this.state;
+        if (typeof pagination === 'object') {
+          this.setState({
+            pagination: Object.assign(Object.assign({}, pagination), {
+              currentPage
+            })
+          });
+        } else {
+          this.setState({
+            pagination: {
+              currentPage
+            }
+          });
+        }
+      },
+      setPagination: pagination => this.setState({
+        pagination
+      }),
+      setGroups: groups => this.setState({
+        groups
+      }),
+      setDataSource: dataSource => this.setState({
+        dataSource
+      }),
+      setExpandedRowKeys: expandedRowKeys => this.setState({
+        expandedRowKeys: [...expandedRowKeys]
+      }),
+      setQuery: function () {
+        let query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        let queries = [..._this.state.queries];
+        queries = mergeQueries(query, queries);
+        _this.setState({
+          queries
+        });
+      },
+      // Update queries when filtering or sorting
+      setQueries: queries => this.setState({
+        queries
+      }),
+      setFlattenData: flattenData => this.setState({
+        flattenData
+      }),
+      setAllRowKeys: allRowKeys => this.setState({
+        allRowKeys
+      }),
+      setHoveredRowKey: hoveredRowKey => {
+        this.store.setState({
+          hoveredRowKey
+        });
+      },
+      setCachedFilteredSortedDataSource: filteredSortedDataSource => {
+        this.cachedFilteredSortedDataSource = filteredSortedDataSource;
+      },
+      setCachedFilteredSortedRowKeys: filteredSortedRowKeys => {
+        this.cachedFilteredSortedRowKeys = filteredSortedRowKeys;
+        this.cachedFilteredSortedRowKeysSet = new Set(filteredSortedRowKeys);
+      },
+      setAllDisabledRowKeys: allDisabledRowKeys => {
+        const allDisabledRowKeysSet = new Set(allDisabledRowKeys);
+        this.setState({
+          allDisabledRowKeys,
+          allDisabledRowKeysSet
+        });
+      },
+      getCurrentPage: () => _get(this.state, 'pagination.currentPage', 1),
+      getCurrentPageSize: () => _get(this.state, 'pagination.pageSize', numbers.DEFAULT_PAGE_SIZE),
+      getCachedFilteredSortedDataSource: () => this.cachedFilteredSortedDataSource,
+      getCachedFilteredSortedRowKeys: () => this.cachedFilteredSortedRowKeys,
+      getCachedFilteredSortedRowKeysSet: () => this.cachedFilteredSortedRowKeysSet,
+      getAllDisabledRowKeys: () => this.state.allDisabledRowKeys,
+      getAllDisabledRowKeysSet: () => this.state.allDisabledRowKeysSet,
+      notifyFilterDropdownVisibleChange: (visible, dataIndex) => this._invokeColumnFn(dataIndex, 'onFilterDropdownVisibleChange', visible),
+      notifyChange: function () {
+        return _this.props.onChange(...arguments);
+      },
+      notifyExpand: function () {
+        return _this.props.onExpand(...arguments);
+      },
+      notifyExpandedRowsChange: function () {
+        return _this.props.onExpandedRowsChange(...arguments);
+      },
+      notifySelect: function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return _this._invokeRowSelection('onSelect', ...args);
+      },
+      notifySelectAll: function () {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        return _this._invokeRowSelection('onSelectAll', ...args);
+      },
+      notifySelectInvert: function () {
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+        return _this._invokeRowSelection('onSelectInvert', ...args);
+      },
+      notifySelectionChange: function () {
+        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+          args[_key4] = arguments[_key4];
+        }
+        return _this._invokeRowSelection('onChange', ...args);
+      },
+      isAnyColumnFixed: columns => _some(this.getColumns(columns || this.props.columns, this.props.children), column => Boolean(column.fixed)),
+      useFixedHeader: () => {
+        const {
+          scroll,
+          sticky
+        } = this.props;
+        if (_get(scroll, 'y')) {
+          return true;
+        }
+        if (sticky) {
+          return true;
+        }
+        return false;
+      },
+      getTableLayout: () => {
+        let isFixed = false;
+        const {
+          flattenColumns
+        } = this.state;
+        if (Array.isArray(flattenColumns)) {
+          isFixed = flattenColumns.some(column => Boolean(column.ellipsis) || Boolean(column.fixed));
+        }
+        return isFixed ? 'fixed' : 'auto';
+      },
+      setHeadWidths: function (headWidths) {
+        let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        if (!equalWith(_this.state.headWidths[index], headWidths)) {
+          // The map call depends on the last state
+          _this.setState(state => {
+            const newHeadWidths = [...state.headWidths];
+            newHeadWidths[index] = [...headWidths];
+            return {
+              headWidths: newHeadWidths
+            };
+          });
+        }
+      },
+      getHeadWidths: function () {
+        let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        if (_this.state.headWidths.length && typeof index === 'number') {
+          const configs = _this.state.headWidths[index] || [];
+          return configs.map(item => item.width);
+        }
+        return [];
+      },
+      // This method is called by row rendering function
+      getCellWidths: function (flattenedColumns) {
+        let flattenedWidths = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+        let ignoreScrollBarKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+        if (Array.isArray(flattenedColumns) && flattenedColumns.length) {
+          flattenedWidths = flattenedWidths == null && _this.state.headWidths.length ? _flattenDeep(_this.state.headWidths) : [];
+          if (Array.isArray(flattenedWidths) && flattenedWidths.length) {
+            return flattenedColumns.reduce((result, column) => {
+              const found = column.key === strings.DEFAULT_KEY_COLUMN_SCROLLBAR && ignoreScrollBarKey ? null : _find(flattenedWidths, item => item && item.key != null && item.key === column.key);
+              if (found) {
+                result.push(found.width);
+              }
+              return result;
+            }, []);
+          }
+        }
+        return [];
+      },
+      mergedRowExpandable: record => {
+        const {
+          expandedRowRender,
+          childrenRecordName,
+          rowExpandable
+        } = this.props;
+        const children = _get(record, childrenRecordName);
+        const hasExpandedRowRender = typeof expandedRowRender === 'function';
+        const hasRowExpandable = typeof rowExpandable === 'function';
+        const hasChildren = Array.isArray(children) && children.length;
+        const strictExpandableResult = hasRowExpandable && rowExpandable(record);
+        const looseExpandableResult = !hasRowExpandable || strictExpandableResult;
+        return (hasExpandedRowRender || hasChildren) && looseExpandableResult || !(hasExpandedRowRender || hasChildren) && strictExpandableResult;
+      },
+      isAnyColumnUseFullRender: columns => _some(columns, column => Boolean(column.useFullRender)),
+      getNormalizeColumns: () => this.normalizeColumns,
+      getHandleColumns: () => this.handleColumns,
+      getMergePagination: () => this.mergePagination,
+      setBodyHasScrollbar: bodyHasScrollBar => {
+        if (bodyHasScrollBar !== this.state.bodyHasScrollBar) {
+          this.setState({
+            bodyHasScrollBar
+          });
+        }
+      },
+      stopPropagation(e) {
+        // The event definition here is not very accurate for now, it belongs to a broad structure definition
+        if (e && typeof e === 'object') {
+          if (typeof e.stopPropagation === 'function') {
+            e.stopPropagation();
+          }
+          if (e.nativeEvent && typeof e.nativeEvent.stopPropagation === 'function') {
+            e.nativeEvent.stopPropagation();
+          } else if (typeof e.stopImmediatePropagation === 'function') {
+            e.stopImmediatePropagation();
+          }
+        }
+      }
+    });
+  }
   constructor(props, context) {
-    var _this;
-
-    super(props);
-    _this = this;
-
+    var _this2;
     // TODO: notify when data don't have key
+    super(props);
+    _this2 = this;
     this._warnIfNoKey = () => {
       if ((this.props.rowSelection || this.props.expandedRowRender) && _some(this.props.dataSource, record => this.foundation.getRecordKey(record) == null)) {
         logger.error('You must specify a key for each element in the dataSource or use "rowKey" to specify an attribute name as the primary key!');
       }
     };
-
     this._invokeRowSelection = function (funcName) {
-      const func = _get(_this.state, ['rowSelection', funcName]);
-
+      const func = _get(_this2.state, ['rowSelection', funcName]);
       if (typeof func === 'function') {
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
+        for (var _len5 = arguments.length, args = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
+          args[_key5 - 1] = arguments[_key5];
         }
-
         func(...args);
       }
     };
-
     this._invokeColumnFn = function (key, funcName) {
       if (key && funcName) {
-        const column = _this.foundation.getQuery(key);
-
+        const column = _this2.foundation.getQuery(key);
         const func = _get(column, funcName, null);
-
         if (typeof func === 'function') {
-          for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-            args[_key2 - 2] = arguments[_key2];
+          for (var _len6 = arguments.length, args = new Array(_len6 > 2 ? _len6 - 2 : 0), _key6 = 2; _key6 < _len6; _key6++) {
+            args[_key6 - 2] = arguments[_key6];
           }
-
           func(...args);
         }
       }
     };
-
     this._cacheHeaderRef = node => {
       this.headerWrapRef.current = node;
     };
-
     this.getCurrentPageData = () => {
       const pageData = this.foundation.getCurrentPageData();
       const retObj = ['dataSource', 'groups'].reduce((result, key) => {
         if (pageData[key]) {
           result[key] = pageData[key];
         }
-
         return result;
       }, {});
       return cloneDeep(retObj);
     };
-
-    this.getColumns = (columns, children) => !Array.isArray(columns) || !columns || !columns.length ? getColumns(children) : columns; // @ts-ignore
-
-
+    this.getColumns = (columns, children) => !Array.isArray(columns) || !columns || !columns.length ? getColumns(children) : columns;
+    // @ts-ignore
     this.getCellWidths = function () {
-      return _this.foundation.getCellWidths(...arguments);
-    }; // @ts-ignore
-
-
+      return _this2.foundation.getCellWidths(...arguments);
+    };
+    // @ts-ignore
     this.setHeadWidths = function () {
-      return _this.foundation.setHeadWidths(...arguments);
-    }; // @ts-ignore
-
-
+      return _this2.foundation.setHeadWidths(...arguments);
+    };
+    // @ts-ignore
     this.getHeadWidths = function () {
-      return _this.foundation.getHeadWidths(...arguments);
-    }; // @ts-ignore
-
-
+      return _this2.foundation.getHeadWidths(...arguments);
+    };
+    // @ts-ignore
     this.mergedRowExpandable = function () {
-      return _this.foundation.mergedRowExpandable(...arguments);
-    }; // @ts-ignore
-
-
+      return _this2.foundation.mergedRowExpandable(...arguments);
+    };
+    // @ts-ignore
     this.setBodyHasScrollbar = function () {
-      return _this.foundation.setBodyHasScrollbar(...arguments);
+      return _this2.foundation.setBodyHasScrollbar(...arguments);
     };
-
     this.handleWheel = event => {
       const {
         scroll = {}
       } = this.props;
-
       if (window.navigator.userAgent.match(/Trident\/7\./) && scroll.y) {
         event.preventDefault();
         const wd = event.deltaY;
         const {
           target
-        } = event; // const { bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this;
-
+        } = event;
+        // const { bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this;
         const bodyTable = this.bodyWrapRef.current;
         let scrollTop = 0;
-
         if (this.lastScrollTop) {
           scrollTop = this.lastScrollTop + wd;
         } else {
           scrollTop = wd;
         }
-
         if (bodyTable && target !== bodyTable) {
           bodyTable.scrollTop = scrollTop;
         }
       }
     };
-
     this.handleBodyScrollLeft = e => {
       if (e.currentTarget !== e.target) {
         return;
       }
-
       const {
         target
-      } = e; // const { headTable, bodyTable } = this;
-
+      } = e;
+      // const { headTable, bodyTable } = this;
       const headTable = this.headerWrapRef.current;
       const bodyTable = this.bodyWrapRef.current;
-
       if (target.scrollLeft !== this.lastScrollLeft) {
         if (target === bodyTable && headTable) {
           headTable.scrollLeft = target.scrollLeft;
         } else if (target === headTable && bodyTable) {
           bodyTable.scrollLeft = target.scrollLeft;
         }
-
         this.setScrollPositionClassName();
-      } // Remember last scrollLeft for scroll direction detecting.
-
-
+      }
+      // Remember last scrollLeft for scroll direction detecting.
       this.lastScrollLeft = target.scrollLeft;
     };
-
     this.handleWindowResize = () => {
       this.syncTableWidth();
       this.setScrollPositionClassName();
     };
-
     this.handleBodyScrollTop = e => {
       const {
         target
       } = e;
-
       if (e.currentTarget !== target) {
         return;
       }
-
       const {
         scroll = {}
-      } = this.props; // const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this;
-
+      } = this.props;
+      // const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this;
       const headTable = this.headerWrapRef.current;
       const bodyTable = this.bodyWrapRef.current;
-
       if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== headTable) {
         const {
           scrollTop
         } = target;
-
         if (bodyTable && target !== bodyTable) {
           bodyTable.scrollTop = scrollTop;
         }
-      } // Remember last scrollTop for scroll direction detecting.
-
-
+      }
+      // Remember last scrollTop for scroll direction detecting.
       this.lastScrollTop = target.scrollTop;
     };
-
     this.handleBodyScroll = e => {
       this.handleBodyScrollLeft(e);
       this.handleBodyScrollTop(e);
     };
-
     this.setScrollPosition = position => {
       const {
         prefixCls
@@ -251,7 +434,6 @@ class Table extends BaseComponent {
       const positionAll = [`${prefixCls}-scroll-position-both`, `${prefixCls}-scroll-position-middle`, `${prefixCls}-scroll-position-left`, `${prefixCls}-scroll-position-right`];
       this.scrollPosition = position;
       const tableNode = this.wrapRef.current;
-
       if (tableNode && tableNode.nodeType) {
         if (position === 'both') {
           const acceptPosition = [`${prefixCls}-scroll-position-left`, `${prefixCls}-scroll-position-right`];
@@ -264,15 +446,12 @@ class Table extends BaseComponent {
         }
       }
     };
-
     this.setScrollPositionClassName = () => {
       const node = this.bodyWrapRef.current;
-
       if (node && node.children && node.children.length) {
-        const scrollToLeft = node.scrollLeft === 0; // why use Math.abs? @see https://bugzilla.mozilla.org/show_bug.cgi?id=1447743
-
+        const scrollToLeft = node.scrollLeft === 0;
+        // why use Math.abs? @see https://bugzilla.mozilla.org/show_bug.cgi?id=1447743
         const scrollToRight = Math.abs(node.scrollLeft) + 1 >= node.children[0].getBoundingClientRect().width - node.getBoundingClientRect().width;
-
         if (scrollToLeft && scrollToRight) {
           this.setScrollPosition('both');
         } else if (scrollToLeft) {
@@ -284,7 +463,6 @@ class Table extends BaseComponent {
         }
       }
     };
-
     this.syncTableWidth = () => {
       if (this.rootWrapRef && this.rootWrapRef.current) {
         this.setState({
@@ -292,15 +470,13 @@ class Table extends BaseComponent {
         });
       }
     };
-
     this.renderSelection = function () {
       let record = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let inHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       const {
         rowSelection,
         allDisabledRowKeysSet
-      } = _this.state;
-
+      } = _this2.state;
       if (rowSelection && typeof rowSelection === 'object') {
         const {
           selectedRowKeys = [],
@@ -308,17 +484,12 @@ class Table extends BaseComponent {
           getCheckboxProps,
           disabled
         } = rowSelection;
-
         if (inHeader) {
           const columnKey = _get(rowSelection, 'key', strings.DEFAULT_KEY_COLUMN_SELECTION);
-
-          const allRowKeys = _this.cachedFilteredSortedRowKeys;
-          const allRowKeysSet = _this.cachedFilteredSortedRowKeysSet;
-
-          const allIsSelected = _this.foundation.allIsSelected(selectedRowKeysSet, allDisabledRowKeysSet, allRowKeys);
-
-          const hasRowSelected = _this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
-
+          const allRowKeys = _this2.cachedFilteredSortedRowKeys;
+          const allRowKeysSet = _this2.cachedFilteredSortedRowKeysSet;
+          const allIsSelected = _this2.foundation.allIsSelected(selectedRowKeysSet, allDisabledRowKeysSet, allRowKeys);
+          const hasRowSelected = _this2.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
           return /*#__PURE__*/React.createElement(ColumnSelection, {
             "aria-label": `${allIsSelected ? 'Deselect' : 'Select'} all rows`,
             disabled: disabled,
@@ -326,35 +497,28 @@ class Table extends BaseComponent {
             selected: allIsSelected,
             indeterminate: hasRowSelected && !allIsSelected,
             onChange: (selected, e) => {
-              _this.toggleSelectAllRow(selected, e);
+              _this2.toggleSelectAllRow(selected, e);
             }
           });
         } else {
-          const key = _this.foundation.getRecordKey(record);
-
+          const key = _this2.foundation.getRecordKey(record);
           const selected = selectedRowKeysSet.has(key);
-
           const checkboxPropsFn = () => typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {};
-
           return /*#__PURE__*/React.createElement(ColumnSelection, {
             "aria-label": `${selected ? 'Deselect' : 'Select'} this row`,
             getCheckboxProps: checkboxPropsFn,
             selected: selected,
-            onChange: (status, e) => _this.toggleSelectRow(status, key, e)
+            onChange: (status, e) => _this2.toggleSelectRow(status, key, e)
           });
         }
       }
-
       return null;
     };
-
     this.renderRowSelectionCallback = function (text) {
       let record = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return _this.renderSelection(record);
+      return _this2.renderSelection(record);
     };
-
     this.renderTitleSelectionCallback = () => this.renderSelection(null, true);
-
     this.normalizeSelectionColumn = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
@@ -362,26 +526,21 @@ class Table extends BaseComponent {
         prefixCls
       } = props;
       let column = {};
-
       if (rowSelection) {
         const needOmitSelectionKey = ['selectedRowKeys', 'selectedRowKeysSet'];
         column = {
           key: strings.DEFAULT_KEY_COLUMN_SELECTION
         };
-
         if (_isObject(rowSelection)) {
           column = Object.assign(Object.assign({}, column), _omit(rowSelection, needOmitSelectionKey));
         }
-
         column.className = classnames(column.className, `${prefixCls}-column-selection`);
-        column.title = _this.renderTitleSelectionCallback;
-        column.render = _this.renderRowSelectionCallback;
+        column.title = _this2.renderTitleSelectionCallback;
+        column.render = _this2.renderRowSelectionCallback;
       }
-
       return column;
-    }; // If there is a scroll bar, manually construct a column and insert it into the header
-
-
+    };
+    // If there is a scroll bar, manually construct a column and insert it into the header
     this.normalizeScrollbarColumn = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
@@ -400,33 +559,29 @@ class Table extends BaseComponent {
      * @param {String} groupKey
      * @returns {ReactNode}
      */
-
-
     this.renderExpandIcon = function () {
       let record = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let isNested = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       let groupKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       const {
         expandedRowKeys
-      } = _this.state;
+      } = _this2.state;
       const {
         expandIcon
-      } = _this.props;
-      const key = typeof groupKey === 'string' || typeof groupKey === 'number' ? groupKey : _this.foundation.getRecordKey(record);
+      } = _this2.props;
+      const key = typeof groupKey === 'string' || typeof groupKey === 'number' ? groupKey : _this2.foundation.getRecordKey(record);
       return /*#__PURE__*/React.createElement(ExpandedIcon, {
         key: key,
         componentType: isNested ? 'tree' : 'expand',
         expanded: _includes(expandedRowKeys, key),
         expandIcon: expandIcon,
-        onClick: (expanded, e) => _this.handleRowExpanded(expanded, key, e)
+        onClick: (expanded, e) => _this2.handleRowExpanded(expanded, key, e)
       });
-    }; // @ts-ignore
-
-
+    };
+    // @ts-ignore
     this.handleRowExpanded = function () {
-      return _this.foundation.handleRowExpanded(...arguments);
+      return _this2.foundation.handleRowExpanded(...arguments);
     };
-
     this.normalizeExpandColumn = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let column = null;
@@ -444,7 +599,7 @@ class Table extends BaseComponent {
         let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
         let record = arguments.length > 1 ? arguments[1] : undefined;
         let index = arguments.length > 2 ? arguments[2] : undefined;
-        return _this.adapter.mergedRowExpandable(record) ? _this.renderExpandIcon(record) : null;
+        return _this2.adapter.mergedRowExpandable(record) ? _this2.renderExpandIcon(record) : null;
       } : () => null;
       return column;
     };
@@ -453,14 +608,11 @@ class Table extends BaseComponent {
       * Title support function, passing parameters as {filter: node, sorter: node, selection: node}
       * @param {*} column
       */
-
-
     this.addFnsInColumn = function () {
       let column = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
         prefixCls
-      } = _this.props;
-
+      } = _this2.props;
       if (column && (column.sorter || column.filters || column.useFullRender)) {
         let hasSorterOrFilter = false;
         const {
@@ -468,35 +620,29 @@ class Table extends BaseComponent {
           title: rawTitle,
           useFullRender
         } = column;
-
-        const curQuery = _this.foundation.getQuery(dataIndex);
-
+        const curQuery = _this2.foundation.getQuery(dataIndex);
         const titleMap = {};
-        const titleArr = []; // useFullRender adds select buttons to each column
-
+        const titleArr = [];
+        // useFullRender adds select buttons to each column
         if (useFullRender) {
-          titleMap.selection = _this.renderSelection(null, true);
+          titleMap.selection = _this2.renderSelection(null, true);
         }
-
         const stateSortOrder = _get(curQuery, 'sortOrder');
-
         const defaultSortOrder = _get(curQuery, 'defaultSortOrder', false);
-
-        const sortOrder = _this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
+        const sortOrder = _this2.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
         const showEllipsisTitle = shouldShowEllipsisTitle(column.ellipsis);
         const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/React.createElement("span", {
           className: `${prefixCls}-row-head-title`,
           key: strings.DEFAULT_KEY_COLUMN_TITLE,
           title: showEllipsisTitle && typeof rawTitle === 'string' ? rawTitle : undefined
         }, rawTitle);
-
         if (typeof column.sorter === 'function' || column.sorter === true) {
           // In order to increase the click hot area of ​​sorting, when sorting is required & useFullRender is false,
           // both the title and sorting areas are used as the click hot area for sorting。
           const sorter = /*#__PURE__*/React.createElement(ColumnSorter, {
             key: strings.DEFAULT_KEY_COLUMN_SORTER,
             sortOrder: sortOrder,
-            onClick: e => _this.foundation.handleSort(column, e),
+            onClick: e => _this2.foundation.handleSort(column, e),
             title: TitleNode
           });
           useFullRender && (titleMap.sorter = sorter);
@@ -505,26 +651,21 @@ class Table extends BaseComponent {
         } else {
           titleArr.push(TitleNode);
         }
-
         const stateFilteredValue = _get(curQuery, 'filteredValue');
-
         const defaultFilteredValue = _get(curQuery, 'defaultFilteredValue');
-
         const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
-
         if (Array.isArray(column.filters) && column.filters.length || /*#__PURE__*/isValidElement(column.filterDropdown)) {
           const filter = /*#__PURE__*/React.createElement(ColumnFilter, Object.assign({
             key: strings.DEFAULT_KEY_COLUMN_FILTER
           }, curQuery, {
             filteredValue: filteredValue,
-            onFilterDropdownVisibleChange: visible => _this.foundation.toggleShowFilter(dataIndex, visible),
-            onSelect: data => _this.foundation.handleFilterSelect(dataIndex, data)
+            onFilterDropdownVisibleChange: visible => _this2.foundation.toggleShowFilter(dataIndex, visible),
+            onSelect: data => _this2.foundation.handleFilterSelect(dataIndex, data)
           }));
           useFullRender && (titleMap.filter = filter);
           hasSorterOrFilter = true;
           titleArr.push(filter);
         }
-
         const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : hasSorterOrFilter ? /*#__PURE__*/React.createElement("div", {
           className: `${prefixCls}-operate-wrapper`
         }, titleArr) : titleArr;
@@ -532,14 +673,11 @@ class Table extends BaseComponent {
           title: newTitle
         });
       }
-
       return column;
     };
-
     this.toggleSelectRow = (selected, realKey, e) => {
       this.foundation.handleSelectRow(realKey, selected, e);
     };
-
     this.toggleSelectAllRow = (selected, e) => {
       this.foundation.handleSelectAllRow(selected, e);
     };
@@ -548,14 +686,11 @@ class Table extends BaseComponent {
      * @param {object} pagination
      * @param {object} propRenderPagination
      */
-
-
     this.renderPagination = (pagination, propRenderPagination) => {
       if (!pagination) {
         return null;
-      } // use memoized pagination
-
-
+      }
+      // use memoized pagination
       const mergedPagination = this.foundation.memoizedPagination(pagination);
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Table"
@@ -568,7 +703,6 @@ class Table extends BaseComponent {
         });
       });
     };
-
     this.renderTitle = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let {
@@ -578,17 +712,14 @@ class Table extends BaseComponent {
         prefixCls,
         dataSource
       } = props;
-
       if (typeof title === 'function') {
         title = title(dataSource);
       }
-
       return /*#__PURE__*/isValidElement(title) || typeof title === 'string' ? /*#__PURE__*/React.createElement("div", {
         className: `${prefixCls}-title`,
         "x-semi-prop": "title"
       }, title) : null;
     };
-
     this.renderEmpty = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
@@ -597,13 +728,10 @@ class Table extends BaseComponent {
         dataSource
       } = props;
       const wrapCls = `${prefixCls}-placeholder`;
-
-      const isEmpty = _this.foundation.isEmpty(dataSource);
-
+      const isEmpty = _this2.foundation.isEmpty(dataSource);
       if (!isEmpty) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Table",
         key: 'emptyText'
@@ -614,7 +742,6 @@ class Table extends BaseComponent {
         "x-semi-prop": "empty"
       }, empty || locale.emptyText)));
     };
-
     this.renderFooter = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let {
@@ -624,18 +751,15 @@ class Table extends BaseComponent {
         prefixCls,
         dataSource
       } = props;
-
       if (typeof footer === 'function') {
         footer = footer(dataSource);
       }
-
       return /*#__PURE__*/isValidElement(footer) || typeof footer === 'string' ? /*#__PURE__*/React.createElement("div", {
         className: `${prefixCls}-footer`,
         key: "footer",
         "x-semi-prop": "footer"
       }, footer) : null;
     };
-
     this.renderMainTable = props => {
       const useFixedHeader = this.adapter.useFixedHeader();
       const emptySlot = this.renderEmpty(props);
@@ -649,7 +773,6 @@ class Table extends BaseComponent {
       })), this.renderFooter(props)];
       return table;
     };
-
     this.renderTable = props => {
       const {
         columns,
@@ -671,9 +794,7 @@ class Table extends BaseComponent {
         disabledRowKeysSet,
         sticky
       } = props;
-
       const selectedRowKeysSet = _get(rowSelection, 'selectedRowKeysSet', new Set());
-
       const tableLayout = this.adapter.getTableLayout();
       const headTable = fixed || useFixedHeader ? /*#__PURE__*/React.createElement(HeadTable, {
         key: "head",
@@ -729,8 +850,6 @@ class Table extends BaseComponent {
      * @param {Array} cachedColumns
      * @returns columns after adding extended functions
      */
-
-
     this.handleColumns = (queries, cachedColumns) => {
       const {
         hideExpandedColumn,
@@ -740,410 +859,131 @@ class Table extends BaseComponent {
         expandIcon,
         rowSelection
       } = this.props;
-      const childrenColumnName = 'children';
-      let columns = cloneDeep(cachedColumns); // eslint-disable-next-line @typescript-eslint/no-shadow
-
-      const addFns = function () {
-        let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
-        if (Array.isArray(columns) && columns.length) {
-          _each(columns, (column, index, originColumns) => {
-            const newColumn = _this.addFnsInColumn(column);
-
-            const children = column[childrenColumnName];
-
-            if (Array.isArray(children) && children.length) {
-              const newChildren = [...children];
-              addFns(newChildren);
-              newColumn[childrenColumnName] = newChildren;
-            }
-
-            originColumns[index] = newColumn;
-          });
-        }
-      };
-
-      addFns(columns); // hideExpandedColumn=false render expand column separately
-
-      if (!hideExpandedColumn) {
-        const column = this.normalizeExpandColumn({
-          prefixCls,
-          expandCellFixed,
-          expandIcon
-        });
-
-        const destIndex = _findIndex(columns, item => item.key === strings.DEFAULT_KEY_COLUMN_EXPAND);
-
-        if (column) {
-          if (destIndex > -1) {
-            columns[destIndex] = Object.assign(Object.assign({}, column), columns[destIndex]);
-          } else if (column.fixed === 'right') {
-            columns = [...columns, column];
-          } else {
-            columns = [column, ...columns];
-          }
-        }
-      } // selection column
-
-
-      if (rowSelection && !_get(rowSelection, 'hidden')) {
-        const destIndex = _findIndex(columns, item => item.key === strings.DEFAULT_KEY_COLUMN_SELECTION);
-
-        const column = this.normalizeSelectionColumn({
-          rowSelection,
-          prefixCls
-        });
-
-        if (destIndex > -1) {
-          columns[destIndex] = Object.assign(Object.assign({}, column), columns[destIndex]);
-        } else if (column.fixed === 'right') {
-          columns = [...columns, column];
-        } else {
-          columns = [column, ...columns];
-        }
-      }
-
-      assignColumnKeys(columns);
-      return columns;
-    };
-    /**
-     * Convert children to columns object
-     * @param {Array} columns
-     * @param {ReactNode} children
-     * @returns {Array}
-     */
-
-
-    this.normalizeColumns = (columns, children) => {
-      const normalColumns = cloneDeep(this.getColumns(columns, children));
-      return normalColumns;
-    };
-    /**
-     * Combine pagination and table paging processing functions
-     */
-
-
-    this.mergePagination = pagination => {
-      const newPagination = Object.assign({
-        onChange: this.foundation.setPage
-      }, pagination);
-      return newPagination;
-    };
-
-    this.foundation = new TableFoundation(this.adapter); // columns cannot be deepClone, otherwise the comparison will be false
-
-    const columns = this.getColumns(props.columns, props.children);
-    const cachedflattenColumns = flattenColumns(columns);
-    const queries = TableFoundation.initColumnsFilteredValueAndSorterOrder(cloneDeep(cachedflattenColumns));
-    const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(this.props.dataSource, queries);
-    const newPagination = _isPlainObject(this.props.pagination) ? this.props.pagination : {};
-    const pageData = this.foundation.getCurrentPageData(filteredSortedDataSource, newPagination, queries);
-    this.state = {
-      /**
-       * Cached props
-       */
-      cachedColumns: columns,
-      cachedChildren: props.children,
-      flattenColumns: cachedflattenColumns,
-      components: mergeComponents(props.components, props.virtualized),
-
-      /**
-       * State calculated based on prop
-       */
-      queries,
-      dataSource: pageData.dataSource,
-      flattenData: [],
-      expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
-      rowSelection: props.rowSelection ? _isObject(props.rowSelection) ? Object.assign({}, props.rowSelection) : {} : null,
-      pagination: pageData.pagination,
-
-      /**
-       * Internal state
-       */
-      groups: null,
-      allRowKeys: [],
-      disabledRowKeys: [],
-      disabledRowKeysSet: new Set(),
-      allDisabledRowKeys: [],
-      allDisabledRowKeysSet: new Set(),
-      headWidths: [],
-      bodyHasScrollBar: false,
-      prePropRowSelection: undefined,
-      prePagination: undefined
-    };
-    this.rootWrapRef = /*#__PURE__*/createRef();
-    this.wrapRef = /*#__PURE__*/createRef(); // table's outside wrap
-
-    this.bodyWrapRef = /*#__PURE__*/createRef();
-    this.headerWrapRef = /*#__PURE__*/createRef();
-    this.store = new Store({
-      hoveredRowKey: null
-    });
-    this.debouncedWindowResize = _debounce(this.handleWindowResize, 150);
-    this.cachedFilteredSortedDataSource = [];
-    this.cachedFilteredSortedRowKeys = [];
-    this.cachedFilteredSortedRowKeysSet = new Set();
-  }
-
-  get adapter() {
-    var _this2 = this;
-
-    return Object.assign(Object.assign({}, super.adapter), {
-      resetScrollY: () => {
-        if (this.bodyWrapRef.current) {
-          this.bodyWrapRef.current.scrollTop = 0;
-        }
-      },
-      setSelectedRowKeys: selectedRowKeys => {
-        this.setState({
-          rowSelection: Object.assign(Object.assign({}, this.state.rowSelection), {
-            selectedRowKeys: [...selectedRowKeys],
-            selectedRowKeysSet: new Set(selectedRowKeys)
-          })
-        });
-      },
-      setDisabledRowKeys: disabledRowKeys => {
-        this.setState({
-          disabledRowKeys,
-          disabledRowKeysSet: new Set(disabledRowKeys)
-        });
-      },
-      setCurrentPage: currentPage => {
-        const {
-          pagination
-        } = this.state;
-
-        if (typeof pagination === 'object') {
-          this.setState({
-            pagination: Object.assign(Object.assign({}, pagination), {
-              currentPage
-            })
-          });
-        } else {
-          this.setState({
-            pagination: {
-              currentPage
-            }
-          });
-        }
-      },
-      setPagination: pagination => this.setState({
-        pagination
-      }),
-      setGroups: groups => this.setState({
-        groups
-      }),
-      setDataSource: dataSource => this.setState({
-        dataSource
-      }),
-      setExpandedRowKeys: expandedRowKeys => this.setState({
-        expandedRowKeys: [...expandedRowKeys]
-      }),
-      setQuery: function () {
-        let query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        let queries = [..._this2.state.queries];
-        queries = mergeQueries(query, queries);
-
-        _this2.setState({
-          queries
-        });
-      },
-      // Update queries when filtering or sorting
-      setQueries: queries => this.setState({
-        queries
-      }),
-      setFlattenData: flattenData => this.setState({
-        flattenData
-      }),
-      setAllRowKeys: allRowKeys => this.setState({
-        allRowKeys
-      }),
-      setHoveredRowKey: hoveredRowKey => {
-        this.store.setState({
-          hoveredRowKey
-        });
-      },
-      setCachedFilteredSortedDataSource: filteredSortedDataSource => {
-        this.cachedFilteredSortedDataSource = filteredSortedDataSource;
-      },
-      setCachedFilteredSortedRowKeys: filteredSortedRowKeys => {
-        this.cachedFilteredSortedRowKeys = filteredSortedRowKeys;
-        this.cachedFilteredSortedRowKeysSet = new Set(filteredSortedRowKeys);
-      },
-      setAllDisabledRowKeys: allDisabledRowKeys => {
-        const allDisabledRowKeysSet = new Set(allDisabledRowKeys);
-        this.setState({
-          allDisabledRowKeys,
-          allDisabledRowKeysSet
-        });
-      },
-      getCurrentPage: () => _get(this.state, 'pagination.currentPage', 1),
-      getCurrentPageSize: () => _get(this.state, 'pagination.pageSize', numbers.DEFAULT_PAGE_SIZE),
-      getCachedFilteredSortedDataSource: () => this.cachedFilteredSortedDataSource,
-      getCachedFilteredSortedRowKeys: () => this.cachedFilteredSortedRowKeys,
-      getCachedFilteredSortedRowKeysSet: () => this.cachedFilteredSortedRowKeysSet,
-      getAllDisabledRowKeys: () => this.state.allDisabledRowKeys,
-      getAllDisabledRowKeysSet: () => this.state.allDisabledRowKeysSet,
-      notifyFilterDropdownVisibleChange: (visible, dataIndex) => this._invokeColumnFn(dataIndex, 'onFilterDropdownVisibleChange', visible),
-      notifyChange: function () {
-        return _this2.props.onChange(...arguments);
-      },
-      notifyExpand: function () {
-        return _this2.props.onExpand(...arguments);
-      },
-      notifyExpandedRowsChange: function () {
-        return _this2.props.onExpandedRowsChange(...arguments);
-      },
-      notifySelect: function () {
-        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-          args[_key3] = arguments[_key3];
-        }
-
-        return _this2._invokeRowSelection('onSelect', ...args);
-      },
-      notifySelectAll: function () {
-        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-          args[_key4] = arguments[_key4];
-        }
-
-        return _this2._invokeRowSelection('onSelectAll', ...args);
-      },
-      notifySelectInvert: function () {
-        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-          args[_key5] = arguments[_key5];
-        }
-
-        return _this2._invokeRowSelection('onSelectInvert', ...args);
-      },
-      notifySelectionChange: function () {
-        for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-          args[_key6] = arguments[_key6];
-        }
-
-        return _this2._invokeRowSelection('onChange', ...args);
-      },
-      isAnyColumnFixed: columns => _some(this.getColumns(columns || this.props.columns, this.props.children), column => Boolean(column.fixed)),
-      useFixedHeader: () => {
-        const {
-          scroll,
-          sticky
-        } = this.props;
-
-        if (_get(scroll, 'y')) {
-          return true;
-        }
-
-        if (sticky) {
-          return true;
-        }
-
-        return false;
-      },
-      getTableLayout: () => {
-        let isFixed = false;
-        const {
-          flattenColumns
-        } = this.state;
-
-        if (Array.isArray(flattenColumns)) {
-          isFixed = flattenColumns.some(column => Boolean(column.ellipsis) || Boolean(column.fixed));
-        }
-
-        return isFixed ? 'fixed' : 'auto';
-      },
-      setHeadWidths: function (headWidths) {
-        let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
-        if (!equalWith(_this2.state.headWidths[index], headWidths)) {
-          // The map call depends on the last state
-          _this2.setState(state => {
-            const newHeadWidths = [...state.headWidths];
-            newHeadWidths[index] = [...headWidths];
-            return {
-              headWidths: newHeadWidths
-            };
+      const childrenColumnName = 'children';
+      let columns = cloneDeep(cachedColumns);
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      const addFns = function () {
+        let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        if (Array.isArray(columns) && columns.length) {
+          _each(columns, (column, index, originColumns) => {
+            const newColumn = _this2.addFnsInColumn(column);
+            const children = column[childrenColumnName];
+            if (Array.isArray(children) && children.length) {
+              const newChildren = [...children];
+              addFns(newChildren);
+              newColumn[childrenColumnName] = newChildren;
+            }
+            originColumns[index] = newColumn;
           });
         }
-      },
-      getHeadWidths: function () {
-        let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-        if (_this2.state.headWidths.length && typeof index === 'number') {
-          const configs = _this2.state.headWidths[index] || [];
-          return configs.map(item => item.width);
-        }
-
-        return [];
-      },
-      // This method is called by row rendering function
-      getCellWidths: function (flattenedColumns) {
-        let flattenedWidths = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-        let ignoreScrollBarKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
-        if (Array.isArray(flattenedColumns) && flattenedColumns.length) {
-          flattenedWidths = flattenedWidths == null && _this2.state.headWidths.length ? _flattenDeep(_this2.state.headWidths) : [];
-
-          if (Array.isArray(flattenedWidths) && flattenedWidths.length) {
-            return flattenedColumns.reduce((result, column) => {
-              const found = column.key === strings.DEFAULT_KEY_COLUMN_SCROLLBAR && ignoreScrollBarKey ? null : _find(flattenedWidths, item => item && item.key != null && item.key === column.key);
-
-              if (found) {
-                result.push(found.width);
-              }
-
-              return result;
-            }, []);
+      };
+      addFns(columns);
+      // hideExpandedColumn=false render expand column separately
+      if (!hideExpandedColumn) {
+        const column = this.normalizeExpandColumn({
+          prefixCls,
+          expandCellFixed,
+          expandIcon
+        });
+        const destIndex = _findIndex(columns, item => item.key === strings.DEFAULT_KEY_COLUMN_EXPAND);
+        if (column) {
+          if (destIndex > -1) {
+            columns[destIndex] = Object.assign(Object.assign({}, column), columns[destIndex]);
+          } else if (column.fixed === 'right') {
+            columns = [...columns, column];
+          } else {
+            columns = [column, ...columns];
           }
         }
-
-        return [];
-      },
-      mergedRowExpandable: record => {
-        const {
-          expandedRowRender,
-          childrenRecordName,
-          rowExpandable
-        } = this.props;
-
-        const children = _get(record, childrenRecordName);
-
-        const hasExpandedRowRender = typeof expandedRowRender === 'function';
-        const hasRowExpandable = typeof rowExpandable === 'function';
-        const hasChildren = Array.isArray(children) && children.length;
-        const strictExpandableResult = hasRowExpandable && rowExpandable(record);
-        const looseExpandableResult = !hasRowExpandable || strictExpandableResult;
-        return (hasExpandedRowRender || hasChildren) && looseExpandableResult || !(hasExpandedRowRender || hasChildren) && strictExpandableResult;
-      },
-      isAnyColumnUseFullRender: columns => _some(columns, column => Boolean(column.useFullRender)),
-      getNormalizeColumns: () => this.normalizeColumns,
-      getHandleColumns: () => this.handleColumns,
-      getMergePagination: () => this.mergePagination,
-      setBodyHasScrollbar: bodyHasScrollBar => {
-        if (bodyHasScrollBar !== this.state.bodyHasScrollBar) {
-          this.setState({
-            bodyHasScrollBar
-          });
-        }
-      },
-
-      stopPropagation(e) {
-        // The event definition here is not very accurate for now, it belongs to a broad structure definition
-        if (e && typeof e === 'object') {
-          if (typeof e.stopPropagation === 'function') {
-            e.stopPropagation();
-          }
-
-          if (e.nativeEvent && typeof e.nativeEvent.stopPropagation === 'function') {
-            e.nativeEvent.stopPropagation();
-          } else if (typeof e.stopImmediatePropagation === 'function') {
-            e.stopImmediatePropagation();
-          }
+      }
+      // selection column
+      if (rowSelection && !_get(rowSelection, 'hidden')) {
+        const destIndex = _findIndex(columns, item => item.key === strings.DEFAULT_KEY_COLUMN_SELECTION);
+        const column = this.normalizeSelectionColumn({
+          rowSelection,
+          prefixCls
+        });
+        if (destIndex > -1) {
+          columns[destIndex] = Object.assign(Object.assign({}, column), columns[destIndex]);
+        } else if (column.fixed === 'right') {
+          columns = [...columns, column];
+        } else {
+          columns = [column, ...columns];
         }
       }
-
+      assignColumnKeys(columns);
+      return columns;
+    };
+    /**
+     * Convert children to columns object
+     * @param {Array} columns
+     * @param {ReactNode} children
+     * @returns {Array}
+     */
+    this.normalizeColumns = (columns, children) => {
+      const normalColumns = cloneDeep(this.getColumns(columns, children));
+      return normalColumns;
+    };
+    /**
+     * Combine pagination and table paging processing functions
+     */
+    this.mergePagination = pagination => {
+      const newPagination = Object.assign({
+        onChange: this.foundation.setPage
+      }, pagination);
+      return newPagination;
+    };
+    this.foundation = new TableFoundation(this.adapter);
+    // columns cannot be deepClone, otherwise the comparison will be false
+    const columns = this.getColumns(props.columns, props.children);
+    const cachedflattenColumns = flattenColumns(columns);
+    const queries = TableFoundation.initColumnsFilteredValueAndSorterOrder(cloneDeep(cachedflattenColumns));
+    const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(this.props.dataSource, queries);
+    const newPagination = _isPlainObject(this.props.pagination) ? this.props.pagination : {};
+    const pageData = this.foundation.getCurrentPageData(filteredSortedDataSource, newPagination, queries);
+    this.state = {
+      /**
+       * Cached props
+       */
+      cachedColumns: columns,
+      cachedChildren: props.children,
+      flattenColumns: cachedflattenColumns,
+      components: mergeComponents(props.components, props.virtualized),
+      /**
+       * State calculated based on prop
+       */
+      queries,
+      dataSource: pageData.dataSource,
+      flattenData: [],
+      expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
+      rowSelection: props.rowSelection ? _isObject(props.rowSelection) ? Object.assign({}, props.rowSelection) : {} : null,
+      pagination: pageData.pagination,
+      /**
+       * Internal state
+       */
+      groups: null,
+      allRowKeys: [],
+      disabledRowKeys: [],
+      disabledRowKeysSet: new Set(),
+      allDisabledRowKeys: [],
+      allDisabledRowKeysSet: new Set(),
+      headWidths: [],
+      bodyHasScrollBar: false,
+      prePropRowSelection: undefined,
+      prePagination: undefined
+    };
+    this.rootWrapRef = /*#__PURE__*/createRef();
+    this.wrapRef = /*#__PURE__*/createRef(); // table's outside wrap
+    this.bodyWrapRef = /*#__PURE__*/createRef();
+    this.headerWrapRef = /*#__PURE__*/createRef();
+    this.store = new Store({
+      hoveredRowKey: null
     });
+    this.debouncedWindowResize = _debounce(this.handleWindowResize, 150);
+    this.cachedFilteredSortedDataSource = [];
+    this.cachedFilteredSortedRowKeys = [];
+    this.cachedFilteredSortedRowKeysSet = new Set();
   }
-
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
     const {
@@ -1154,7 +994,6 @@ class Table extends BaseComponent {
       pagination
     } = props;
     props.columns && props.children && logger.warn('columns should not given by object and children at the same time');
-
     if (props.columns && props.columns !== state.cachedColumns) {
       const newFlattenColumns = flattenColumns(props.columns);
       willUpdateStates.flattenColumns = newFlattenColumns;
@@ -1169,29 +1008,22 @@ class Table extends BaseComponent {
       willUpdateStates.queries = [...columns];
       willUpdateStates.cachedColumns = [...newNestedColumns];
       willUpdateStates.cachedChildren = props.children;
-    } // Update controlled selection column
-
-
+    }
+    // Update controlled selection column
     if (rowSelection !== state.prePropRowSelection) {
       let newSelectionStates = {};
-
       if (_isObject(state.rowSelection)) {
         newSelectionStates = Object.assign(Object.assign({}, newSelectionStates), state.rowSelection);
       }
-
       if (_isObject(rowSelection)) {
         newSelectionStates = Object.assign(Object.assign({}, newSelectionStates), rowSelection);
       }
-
       const selectedRowKeys = _get(rowSelection, 'selectedRowKeys');
-
       const getCheckboxProps = _get(rowSelection, 'getCheckboxProps');
-
       if (selectedRowKeys && Array.isArray(selectedRowKeys)) {
         newSelectionStates.selectedRowKeysSet = new Set(selectedRowKeys);
-      } // The return value of getCheckboxProps affects the disabled rows
-
-
+      }
+      // The return value of getCheckboxProps affects the disabled rows
       if (_isFunction(getCheckboxProps)) {
         const disabledRowKeys = getAllDisabledRowKeys({
           dataSource,
@@ -1205,40 +1037,31 @@ class Table extends BaseComponent {
         willUpdateStates.allDisabledRowKeys = disabledRowKeys;
         willUpdateStates.allDisabledRowKeysSet = disabledRowKeysSet;
       }
-
       willUpdateStates.rowSelection = newSelectionStates;
       willUpdateStates.prePropRowSelection = rowSelection;
     }
-
     if (pagination !== state.prePagination) {
       let newPagination = {};
-
       if (_isObject(state.pagination)) {
         newPagination = Object.assign(Object.assign({}, newPagination), state.pagination);
       }
-
       if (_isObject(pagination)) {
         newPagination = Object.assign(Object.assign({}, newPagination), pagination);
       }
-
       willUpdateStates.pagination = newPagination;
       willUpdateStates.prePagination = pagination;
     }
-
     return willUpdateStates;
   }
-
   componentDidMount() {
     super.componentDidMount();
     this.setScrollPosition('left');
-
     if (this.adapter.isAnyColumnFixed() || this.props.showHeader && this.adapter.useFixedHeader()) {
       this.handleWindowResize();
       window.addEventListener('resize', this.debouncedWindowResize);
     }
-  } // TODO: Extract the setState operation to the adapter or getDerivedStateFromProps function
-
-
+  }
+  // TODO: Extract the setState operation to the adapter or getDerivedStateFromProps function
   componentDidUpdate(prevProps, prevState) {
     const {
       dataSource,
@@ -1266,30 +1089,24 @@ class Table extends BaseComponent {
      * @param allRowKeys
      * @param queries
      */
-
     const states = {};
-
     this._warnIfNoKey();
     /**
      * The state that needs to be updated after props changes
      */
     // Update controlled expand column
-
-
     if (Array.isArray(expandedRowKeys) && expandedRowKeys !== prevProps.expandedRowKeys) {
       this.setState({
         expandedRowKeys
       });
-    } // Update components
-
-
+    }
+    // Update components
     if (components !== prevProps.components || virtualized !== prevProps.virtualized) {
       this.setState({
         components: mergeComponents(components, virtualized)
       });
-    } // Update the default expanded column
-
-
+    }
+    // Update the default expanded column
     if (expandAllRows !== prevProps.expandAllRows || expandAllGroupRows !== prevProps.expandAllGroupRows) {
       this.foundation.initExpandedRowKeys({
         groups: stateGroups
@@ -1300,8 +1117,6 @@ class Table extends BaseComponent {
      * 1. Cache filtered sorted data and a collection of data rows, stored in this
      * 2. Update pager and group, stored in state
      */
-
-
     if (dataSource !== prevProps.dataSource || stateCachedColumns !== prevState.cachedColumns || stateCachedChildren !== prevState.cachedChildren) {
       // TODO: foundation.getFilteredSortedDataSource has side effects and will be modified to the dataSource reference
       // Temporarily use _dataSource=[...dataSource] for processing
@@ -1311,19 +1126,16 @@ class Table extends BaseComponent {
       this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
       this.foundation.setAllDisabledRowKeys(allDataDisabledRowKeys);
       states.dataSource = filteredSortedDataSource;
-
       if (this.props.groupBy) {
         states.groups = null;
       }
-    } // when dataSource has change, should reset currentPage
-
-
+    }
+    // when dataSource has change, should reset currentPage
     if (dataSource !== prevProps.dataSource) {
       states.pagination = _isObject(statePagination) ? Object.assign(Object.assign({}, statePagination), {
         currentPage: _isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
       }) : statePagination;
     }
-
     if (Object.keys(states).length) {
       const {
         // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -1331,66 +1143,57 @@ class Table extends BaseComponent {
         queries: stateQueries = null,
         dataSource: stateDataSource = null
       } = states;
-      const handledProps = this.foundation.getCurrentPageData(stateDataSource, mergedStatePagination, stateQueries); // After the pager is updated, reset allRowKeys of the current page
-
+      const handledProps = this.foundation.getCurrentPageData(stateDataSource, mergedStatePagination, stateQueries);
+      // After the pager is updated, reset allRowKeys of the current page
       this.adapter.setAllRowKeys(handledProps.allRowKeys);
       this.adapter.setDisabledRowKeys(handledProps.disabledRowKeys);
-
       if ('dataSource' in states) {
         if (this.props.defaultExpandAllRows && handledProps.groups && handledProps.groups.size || this.props.expandAllRows || this.props.expandAllGroupRows) {
           this.foundation.initExpandedRowKeys(handledProps);
         }
-
         states.pagination = handledProps.pagination;
-      } // Centrally update paging related state
-
-
+      }
+      // Centrally update paging related state
       const statesKeys = Object.keys(states);
-
       for (const k of statesKeys) {
         this.setState({
           [k]: handledProps[k]
         });
       }
     }
-
     if (this.adapter.isAnyColumnFixed() || this.props.showHeader && this.adapter.useFixedHeader()) {
       if (!this.debouncedWindowResize) {
         window.addEventListener('resize', this.debouncedWindowResize);
       }
     }
   }
-
   componentWillUnmount() {
     super.componentWillUnmount();
-
     if (this.debouncedWindowResize) {
       window.removeEventListener('resize', this.debouncedWindowResize);
       this.debouncedWindowResize.cancel();
       this.debouncedWindowResize = null;
     }
   }
-
   render() {
     let _a = this.props,
-        {
-      scroll,
-      prefixCls,
-      className,
-      style: wrapStyle = {},
-      bordered,
-      id,
-      pagination: propPagination,
-      virtualized,
-      size,
-      renderPagination: propRenderPagination,
-      getVirtualizedListRef,
-      loading,
-      hideExpandedColumn,
-      rowSelection: propRowSelection
-    } = _a,
-        rest = __rest(_a, ["scroll", "prefixCls", "className", "style", "bordered", "id", "pagination", "virtualized", "size", "renderPagination", "getVirtualizedListRef", "loading", "hideExpandedColumn", "rowSelection"]);
-
+      {
+        scroll,
+        prefixCls,
+        className,
+        style: wrapStyle = {},
+        bordered,
+        id,
+        pagination: propPagination,
+        virtualized,
+        size,
+        renderPagination: propRenderPagination,
+        getVirtualizedListRef,
+        loading,
+        hideExpandedColumn,
+        rowSelection: propRowSelection
+      } = _a,
+      rest = __rest(_a, ["scroll", "prefixCls", "className", "style", "bordered", "id", "pagination", "virtualized", "size", "renderPagination", "getVirtualizedListRef", "loading", "hideExpandedColumn", "rowSelection"]);
     let {
       rowSelection,
       expandedRowKeys,
@@ -1420,15 +1223,14 @@ class Table extends BaseComponent {
       * useFullRender需要传给用户selection ReactNode，因此需要每次selectedRowKeys变化时重新计算columns
       * TODO: 未来可以将传给用户的selection改为函数类型，让用户执行函数获取selection title的实时状态
       */
-
     if (!this.adapter.isAnyColumnUseFullRender(queries)) {
       const rowSelectionUpdate = propRowSelection && !_get(propRowSelection, 'hidden');
-      columns = this.foundation.memoizedWithFnsColumns(queries, cachedColumns, rowSelectionUpdate, hideExpandedColumn, // Update the columns after the body scrollbar changes to ensure that the head and body are aligned
+      columns = this.foundation.memoizedWithFnsColumns(queries, cachedColumns, rowSelectionUpdate, hideExpandedColumn,
+      // Update the columns after the body scrollbar changes to ensure that the head and body are aligned
       bodyHasScrollBar);
     } else {
       columns = this.handleColumns(queries, cachedColumns);
     }
-
     const filteredColumns = this.foundation.memoizedFilterColumns(columns);
     const flattenFnsColumns = this.foundation.memoizedFlattenFnsColumns(columns);
     const anyColumnFixed = this.adapter.isAnyColumnFixed(columns);
@@ -1444,7 +1246,6 @@ class Table extends BaseComponent {
     //     dataSource = pageData.dataSource;
     //     pagination = pageData.pagination;
     // }
-
     const props = Object.assign(Object.assign(Object.assign({}, rest), this.state), {
       // props not in rest
       virtualized,
@@ -1464,17 +1265,13 @@ class Table extends BaseComponent {
       renderExpandIcon: this.renderExpandIcon,
       filteredColumns
     });
-
     const x = _get(scroll, 'x');
-
     const y = _get(scroll, 'y');
-
     if (virtualized) {
       if (typeof wrapStyle.width !== 'number') {
         wrapStyle.width = x;
       }
     }
-
     const wrapCls = classnames({
       [`${prefixCls}-${strings.SIZE_SMALL}`]: size === strings.SIZE_SMALL,
       [`${prefixCls}-${strings.SIZE_MIDDLE}`]: size === strings.SIZE_MIDDLE,
@@ -1483,12 +1280,10 @@ class Table extends BaseComponent {
       [`${prefixCls}-fixed-header`]: Boolean(y),
       [`${prefixCls}-scroll-position-left`]: ['both', 'left'].includes(this.position),
       [`${prefixCls}-scroll-position-right`]: ['both', 'right'].includes(this.position)
-    }); // pagination
-
+    });
+    // pagination
     const tablePagination = pagination && propPagination ? this.renderPagination(pagination, propRenderPagination) : null;
-
     const paginationPosition = _get(propPagination, 'position', 'bottom');
-
     const tableContextValue = Object.assign(Object.assign({}, this.context), {
       headWidths,
       tableWidth,
@@ -1529,9 +1324,7 @@ class Table extends BaseComponent {
       key: 'pagination-bottom'
     }, ['bottom', 'both'].includes(paginationPosition) ? tablePagination : null)))));
   }
-
 }
-
 Table.contextType = TableContext;
 Table.propTypes = {
   className: PropTypes.string,
@@ -1583,8 +1376,8 @@ Table.propTypes = {
   dropdownPrefixCls: PropTypes.string,
   expandRowByClick: PropTypes.bool,
   getVirtualizedListRef: PropTypes.func // TODO: future api
-
 };
+
 Table.defaultProps = {
   // rowExpandable: stubTrue,
   tableLayout: '',