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

package/lib/cjs/table/Table.js

@@ -4,294 +4,438 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
-
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _difference2 = _interopRequireDefault(require("lodash/difference"));
-
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
 var _each2 = _interopRequireDefault(require("lodash/each"));
-
 var _flattenDeep2 = _interopRequireDefault(require("lodash/flattenDeep"));
-
 var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
-
 var _some2 = _interopRequireDefault(require("lodash/some"));
-
 var _findIndex2 = _interopRequireDefault(require("lodash/findIndex"));
-
 var _find2 = _interopRequireDefault(require("lodash/find"));
-
 var _includes2 = _interopRequireDefault(require("lodash/includes"));
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
-
 var _Store = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/Store"));
-
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/table/foundation"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
-
 require("@douyinfe/semi-foundation/lib/cjs/table/table.css");
-
 var _spin = _interopRequireDefault(require("../spin"));
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
-
 var _ColumnShape = _interopRequireDefault(require("./ColumnShape"));
-
 var _getColumns = _interopRequireDefault(require("./getColumns"));
-
 var _tableContext = _interopRequireDefault(require("./table-context"));
-
 var _TableContextProvider = _interopRequireDefault(require("./TableContextProvider"));
-
 var _ColumnSelection = _interopRequireDefault(require("./ColumnSelection"));
-
 var _TablePagination = _interopRequireDefault(require("./TablePagination"));
-
 var _ColumnFilter = _interopRequireDefault(require("./ColumnFilter"));
-
 var _ColumnSorter = _interopRequireDefault(require("./ColumnSorter"));
-
 var _CustomExpandIcon = _interopRequireDefault(require("./CustomExpandIcon"));
-
 var _HeadTable = _interopRequireDefault(require("./HeadTable"));
-
 var _Body = _interopRequireDefault(require("./Body"));
-
 var _utils2 = require("./utils");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var __rest = void 0 && (void 0).__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 */
-
-
 class Table extends _baseComponent.default {
-  constructor(props, context) {
-    var _this;
-
-    super(props);
-    _this = this;
-
-    // TODO: notify when data don't have key
-    this._warnIfNoKey = () => {
-      if ((this.props.rowSelection || this.props.expandedRowRender) && (0, _some2.default)(this.props.dataSource, record => this.foundation.getRecordKey(record) == null)) {
-        _utils2.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 = (0, _get2.default)(_this.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];
-        }
-
-        func(...args);
-      }
-    };
-
-    this._invokeColumnFn = function (key, funcName) {
-      if (key && funcName) {
-        const column = _this.foundation.getQuery(key);
-
-        const func = (0, _get2.default)(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];
-          }
-
-          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];
+  get adapter() {
+    var _this = this;
+    return Object.assign(Object.assign({}, super.adapter), {
+      resetScrollY: () => {
+        if (this.bodyWrapRef.current) {
+          this.bodyWrapRef.current.scrollTop = 0;
         }
-
-        return result;
-      }, {});
-      return (0, _utils2.cloneDeep)(retObj);
-    };
-
-    this.getColumns = (columns, children) => !Array.isArray(columns) || !columns || !columns.length ? (0, _getColumns.default)(children) : columns; // @ts-ignore
-
-
-    this.getCellWidths = function () {
-      return _this.foundation.getCellWidths(...arguments);
-    }; // @ts-ignore
-
-
-    this.setHeadWidths = function () {
-      return _this.foundation.setHeadWidths(...arguments);
-    }; // @ts-ignore
-
-
-    this.getHeadWidths = function () {
-      return _this.foundation.getHeadWidths(...arguments);
-    }; // @ts-ignore
-
-
-    this.mergedRowExpandable = function () {
-      return _this.foundation.mergedRowExpandable(...arguments);
-    }; // @ts-ignore
-
-
-    this.setBodyHasScrollbar = function () {
-      return _this.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;
+      },
+      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 {
-          target
-        } = event; // const { bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this;
-
-        const bodyTable = this.bodyWrapRef.current;
-        let scrollTop = 0;
-
-        if (this.lastScrollTop) {
-          scrollTop = this.lastScrollTop + wd;
+          pagination
+        } = this.state;
+        if (typeof pagination === 'object') {
+          this.setState({
+            pagination: Object.assign(Object.assign({}, pagination), {
+              currentPage
+            })
+          });
         } else {
-          scrollTop = wd;
+          this.setState({
+            pagination: {
+              currentPage
+            }
+          });
         }
-
-        if (bodyTable && target !== bodyTable) {
-          bodyTable.scrollTop = scrollTop;
+      },
+      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 = (0, _utils.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: () => (0, _get2.default)(this.state, 'pagination.currentPage', 1),
+      getCurrentPageSize: () => (0, _get2.default)(this.state, 'pagination.pageSize', _constants.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];
         }
-      }
-    };
-
-    this.handleBodyScrollLeft = e => {
-      if (e.currentTarget !== e.target) {
-        return;
-      }
-
-      const {
-        target
-      } = 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;
+        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 => (0, _some2.default)(this.getColumns(columns || this.props.columns, this.props.children), column => Boolean(column.fixed)),
+      useFixedHeader: () => {
+        const {
+          scroll,
+          sticky
+        } = this.props;
+        if ((0, _get2.default)(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 (!(0, _utils.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 ? (0, _flattenDeep2.default)(_this.state.headWidths) : [];
+          if (Array.isArray(flattenedWidths) && flattenedWidths.length) {
+            return flattenedColumns.reduce((result, column) => {
+              const found = column.key === _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR && ignoreScrollBarKey ? null : (0, _find2.default)(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 = (0, _get2.default)(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 => (0, _some2.default)(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 _this2;
+    // TODO: notify when data don't have key
+    super(props);
+    _this2 = this;
+    this._warnIfNoKey = () => {
+      if ((this.props.rowSelection || this.props.expandedRowRender) && (0, _some2.default)(this.props.dataSource, record => this.foundation.getRecordKey(record) == null)) {
+        _utils2.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 = (0, _get2.default)(_this2.state, ['rowSelection', funcName]);
+      if (typeof func === 'function') {
+        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 = _this2.foundation.getQuery(key);
+        const func = (0, _get2.default)(column, funcName, null);
+        if (typeof func === 'function') {
+          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 (0, _utils2.cloneDeep)(retObj);
+    };
+    this.getColumns = (columns, children) => !Array.isArray(columns) || !columns || !columns.length ? (0, _getColumns.default)(children) : columns;
+    // @ts-ignore
+    this.getCellWidths = function () {
+      return _this2.foundation.getCellWidths(...arguments);
+    };
+    // @ts-ignore
+    this.setHeadWidths = function () {
+      return _this2.foundation.setHeadWidths(...arguments);
+    };
+    // @ts-ignore
+    this.getHeadWidths = function () {
+      return _this2.foundation.getHeadWidths(...arguments);
+    };
+    // @ts-ignore
+    this.mergedRowExpandable = function () {
+      return _this2.foundation.mergedRowExpandable(...arguments);
+    };
+    // @ts-ignore
+    this.setBodyHasScrollbar = function () {
+      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;
+        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;
+      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
@@ -299,7 +443,6 @@ class Table extends _baseComponent.default {
       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`];
@@ -312,15 +455,12 @@ class Table extends _baseComponent.default {
         }
       }
     };
-
     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) {
@@ -332,7 +472,6 @@ class Table extends _baseComponent.default {
         }
       }
     };
-
     this.syncTableWidth = () => {
       if (this.rootWrapRef && this.rootWrapRef.current) {
         this.setState({
@@ -340,15 +479,13 @@ class Table extends _baseComponent.default {
         });
       }
     };
-
     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 = [],
@@ -356,16 +493,12 @@ class Table extends _baseComponent.default {
           getCheckboxProps,
           disabled
         } = rowSelection;
-
         if (inHeader) {
           const columnKey = (0, _get2.default)(rowSelection, 'key', _constants.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.default.createElement(_ColumnSelection.default, {
             "aria-label": `${allIsSelected ? 'Deselect' : 'Select'} all rows`,
             disabled: disabled,
@@ -373,35 +506,28 @@ class Table extends _baseComponent.default {
             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.default.createElement(_ColumnSelection.default, {
             "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 {
@@ -409,26 +535,21 @@ class Table extends _baseComponent.default {
         prefixCls
       } = props;
       let column = {};
-
       if (rowSelection) {
         const needOmitSelectionKey = ['selectedRowKeys', 'selectedRowKeysSet'];
         column = {
           key: _constants.strings.DEFAULT_KEY_COLUMN_SELECTION
         };
-
         if ((0, _isObject2.default)(rowSelection)) {
           column = Object.assign(Object.assign({}, column), (0, _omit2.default)(rowSelection, needOmitSelectionKey));
         }
-
         column.className = (0, _classnames.default)(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 {
@@ -447,33 +568,29 @@ class Table extends _baseComponent.default {
      * @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.default.createElement(_CustomExpandIcon.default, {
         key: key,
         componentType: isNested ? 'tree' : 'expand',
         expanded: (0, _includes2.default)(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;
@@ -491,7 +608,7 @@ class Table extends _baseComponent.default {
         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;
     };
@@ -500,14 +617,11 @@ class Table extends _baseComponent.default {
       * 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 {
@@ -515,62 +629,52 @@ class Table extends _baseComponent.default {
           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 = (0, _get2.default)(curQuery, 'sortOrder');
         const defaultSortOrder = (0, _get2.default)(curQuery, 'defaultSortOrder', false);
-        const sortOrder = _this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
+        const sortOrder = _this2.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
         const showEllipsisTitle = (0, _utils.shouldShowEllipsisTitle)(column.ellipsis);
-
         const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/_react.default.createElement("span", {
           className: `${prefixCls}-row-head-title`,
           key: _constants.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.default.createElement(_ColumnSorter.default, {
             key: _constants.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);
           hasSorterOrFilter = true;
           titleArr.push(sorter);
         } else {
           titleArr.push(TitleNode);
         }
-
         const stateFilteredValue = (0, _get2.default)(curQuery, 'filteredValue');
         const defaultFilteredValue = (0, _get2.default)(curQuery, 'defaultFilteredValue');
         const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
-
         if (Array.isArray(column.filters) && column.filters.length || /*#__PURE__*/(0, _react.isValidElement)(column.filterDropdown)) {
           const filter = /*#__PURE__*/_react.default.createElement(_ColumnFilter.default, Object.assign({
             key: _constants.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.default.createElement("div", {
           className: `${prefixCls}-operate-wrapper`
         }, titleArr) : titleArr;
@@ -578,14 +682,11 @@ class Table extends _baseComponent.default {
           title: newTitle
         });
       }
-
       return column;
     };
-
     this.toggleSelectRow = (selected, realKey, e) => {
       this.foundation.handleSelectRow(realKey, selected, e);
     };
-
     this.toggleSelectAllRow = (selected, e) => {
       this.foundation.handleSelectAllRow(selected, e);
     };
@@ -594,14 +695,11 @@ class Table extends _baseComponent.default {
      * @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.default.createElement(_localeConsumer.default, {
         componentName: "Table"
@@ -614,7 +712,6 @@ class Table extends _baseComponent.default {
         });
       });
     };
-
     this.renderTitle = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let {
@@ -624,17 +721,14 @@ class Table extends _baseComponent.default {
         prefixCls,
         dataSource
       } = props;
-
       if (typeof title === 'function') {
         title = title(dataSource);
       }
-
       return /*#__PURE__*/(0, _react.isValidElement)(title) || typeof title === 'string' ? /*#__PURE__*/_react.default.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 {
@@ -643,13 +737,10 @@ class Table extends _baseComponent.default {
         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.default.createElement(_localeConsumer.default, {
         componentName: "Table",
         key: 'emptyText'
@@ -660,7 +751,6 @@ class Table extends _baseComponent.default {
         "x-semi-prop": "empty"
       }, empty || locale.emptyText)));
     };
-
     this.renderFooter = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let {
@@ -670,18 +760,15 @@ class Table extends _baseComponent.default {
         prefixCls,
         dataSource
       } = props;
-
       if (typeof footer === 'function') {
         footer = footer(dataSource);
       }
-
       return /*#__PURE__*/(0, _react.isValidElement)(footer) || typeof footer === 'string' ? /*#__PURE__*/_react.default.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);
@@ -695,7 +782,6 @@ class Table extends _baseComponent.default {
       })), this.renderFooter(props)];
       return table;
     };
-
     this.renderTable = props => {
       const {
         columns,
@@ -736,7 +822,6 @@ class Table extends _baseComponent.default {
         bodyHasScrollBar: bodyHasScrollBar,
         sticky: sticky
       }) : null;
-
       const bodyTable = /*#__PURE__*/_react.default.createElement(_Body.default, Object.assign({}, (0, _omit2.default)(props, ['rowSelection', 'headWidths']), {
         key: "body",
         ref: bodyRef,
@@ -755,7 +840,6 @@ class Table extends _baseComponent.default {
         selectedRowKeysSet: selectedRowKeysSet,
         disabledRowKeysSet: disabledRowKeysSet
       }));
-
       return [headTable, bodyTable];
     };
     /**
@@ -775,419 +859,140 @@ class Table extends _baseComponent.default {
      * @param {Array} cachedColumns
      * @returns columns after adding extended functions
      */
-
-
     this.handleColumns = (queries, cachedColumns) => {
       const {
-        hideExpandedColumn,
-        scroll,
-        prefixCls,
-        expandCellFixed,
-        expandIcon,
-        rowSelection
-      } = this.props;
-      const childrenColumnName = 'children';
-      let columns = (0, _utils2.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) {
-          (0, _each2.default)(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 = (0, _findIndex2.default)(columns, item => item.key === _constants.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 && !(0, _get2.default)(rowSelection, 'hidden')) {
-        const destIndex = (0, _findIndex2.default)(columns, item => item.key === _constants.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];
-        }
-      }
-
-      (0, _utils.assignColumnKeys)(columns);
-      return columns;
-    };
-    /**
-     * Convert children to columns object
-     * @param {Array} columns
-     * @param {ReactNode} children
-     * @returns {Array}
-     */
-
-
-    this.normalizeColumns = (columns, children) => {
-      const normalColumns = (0, _utils2.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 _foundation.default(this.adapter); // columns cannot be deepClone, otherwise the comparison will be false
-
-    const columns = this.getColumns(props.columns, props.children);
-    const cachedflattenColumns = (0, _utils.flattenColumns)(columns);
-
-    const queries = _foundation.default.initColumnsFilteredValueAndSorterOrder((0, _utils2.cloneDeep)(cachedflattenColumns));
-
-    const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(this.props.dataSource, queries);
-    const newPagination = (0, _isPlainObject2.default)(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: (0, _utils2.mergeComponents)(props.components, props.virtualized),
-
-      /**
-       * State calculated based on prop
-       */
-      queries,
-      dataSource: pageData.dataSource,
-      flattenData: [],
-      expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
-      rowSelection: props.rowSelection ? (0, _isObject2.default)(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__*/(0, _react.createRef)();
-    this.wrapRef = /*#__PURE__*/(0, _react.createRef)(); // table's outside wrap
-
-    this.bodyWrapRef = /*#__PURE__*/(0, _react.createRef)();
-    this.headerWrapRef = /*#__PURE__*/(0, _react.createRef)();
-    this.store = new _Store.default({
-      hoveredRowKey: null
-    });
-    this.debouncedWindowResize = (0, _debounce2.default)(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 = (0, _utils.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: () => (0, _get2.default)(this.state, 'pagination.currentPage', 1),
-      getCurrentPageSize: () => (0, _get2.default)(this.state, 'pagination.pageSize', _constants.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 => (0, _some2.default)(this.getColumns(columns || this.props.columns, this.props.children), column => Boolean(column.fixed)),
-      useFixedHeader: () => {
-        const {
-          scroll,
-          sticky
-        } = this.props;
-
-        if ((0, _get2.default)(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 (!(0, _utils.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
-            };
+        hideExpandedColumn,
+        scroll,
+        prefixCls,
+        expandCellFixed,
+        expandIcon,
+        rowSelection
+      } = this.props;
+      const childrenColumnName = 'children';
+      let columns = (0, _utils2.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) {
+          (0, _each2.default)(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 ? (0, _flattenDeep2.default)(_this2.state.headWidths) : [];
-
-          if (Array.isArray(flattenedWidths) && flattenedWidths.length) {
-            return flattenedColumns.reduce((result, column) => {
-              const found = column.key === _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR && ignoreScrollBarKey ? null : (0, _find2.default)(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 = (0, _findIndex2.default)(columns, item => item.key === _constants.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 = (0, _get2.default)(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 => (0, _some2.default)(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 && !(0, _get2.default)(rowSelection, 'hidden')) {
+        const destIndex = (0, _findIndex2.default)(columns, item => item.key === _constants.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];
         }
       }
-
+      (0, _utils.assignColumnKeys)(columns);
+      return columns;
+    };
+    /**
+     * Convert children to columns object
+     * @param {Array} columns
+     * @param {ReactNode} children
+     * @returns {Array}
+     */
+    this.normalizeColumns = (columns, children) => {
+      const normalColumns = (0, _utils2.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 _foundation.default(this.adapter);
+    // columns cannot be deepClone, otherwise the comparison will be false
+    const columns = this.getColumns(props.columns, props.children);
+    const cachedflattenColumns = (0, _utils.flattenColumns)(columns);
+    const queries = _foundation.default.initColumnsFilteredValueAndSorterOrder((0, _utils2.cloneDeep)(cachedflattenColumns));
+    const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(this.props.dataSource, queries);
+    const newPagination = (0, _isPlainObject2.default)(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: (0, _utils2.mergeComponents)(props.components, props.virtualized),
+      /**
+       * State calculated based on prop
+       */
+      queries,
+      dataSource: pageData.dataSource,
+      flattenData: [],
+      expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
+      rowSelection: props.rowSelection ? (0, _isObject2.default)(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__*/(0, _react.createRef)();
+    this.wrapRef = /*#__PURE__*/(0, _react.createRef)(); // table's outside wrap
+    this.bodyWrapRef = /*#__PURE__*/(0, _react.createRef)();
+    this.headerWrapRef = /*#__PURE__*/(0, _react.createRef)();
+    this.store = new _Store.default({
+      hoveredRowKey: null
     });
+    this.debouncedWindowResize = (0, _debounce2.default)(this.handleWindowResize, 150);
+    this.cachedFilteredSortedDataSource = [];
+    this.cachedFilteredSortedRowKeys = [];
+    this.cachedFilteredSortedRowKeysSet = new Set();
   }
-
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
     const {
@@ -1198,7 +1003,6 @@ class Table extends _baseComponent.default {
       pagination
     } = props;
     props.columns && props.children && _utils2.logger.warn('columns should not given by object and children at the same time');
-
     if (props.columns && props.columns !== state.cachedColumns) {
       const newFlattenColumns = (0, _utils.flattenColumns)(props.columns);
       willUpdateStates.flattenColumns = newFlattenColumns;
@@ -1213,28 +1017,22 @@ class Table extends _baseComponent.default {
       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 ((0, _isObject2.default)(state.rowSelection)) {
         newSelectionStates = Object.assign(Object.assign({}, newSelectionStates), state.rowSelection);
       }
-
       if ((0, _isObject2.default)(rowSelection)) {
         newSelectionStates = Object.assign(Object.assign({}, newSelectionStates), rowSelection);
       }
-
       const selectedRowKeys = (0, _get2.default)(rowSelection, 'selectedRowKeys');
       const getCheckboxProps = (0, _get2.default)(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 ((0, _isFunction2.default)(getCheckboxProps)) {
         const disabledRowKeys = (0, _utils.getAllDisabledRowKeys)({
           dataSource,
@@ -1248,40 +1046,31 @@ class Table extends _baseComponent.default {
         willUpdateStates.allDisabledRowKeys = disabledRowKeys;
         willUpdateStates.allDisabledRowKeysSet = disabledRowKeysSet;
       }
-
       willUpdateStates.rowSelection = newSelectionStates;
       willUpdateStates.prePropRowSelection = rowSelection;
     }
-
     if (pagination !== state.prePagination) {
       let newPagination = {};
-
       if ((0, _isObject2.default)(state.pagination)) {
         newPagination = Object.assign(Object.assign({}, newPagination), state.pagination);
       }
-
       if ((0, _isObject2.default)(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,
@@ -1309,30 +1098,24 @@ class Table extends _baseComponent.default {
      * @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: (0, _utils2.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
@@ -1343,8 +1126,6 @@ class Table extends _baseComponent.default {
      * 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
@@ -1354,19 +1135,16 @@ class Table extends _baseComponent.default {
       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 = (0, _isObject2.default)(statePagination) ? Object.assign(Object.assign({}, statePagination), {
         currentPage: (0, _isObject2.default)(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
       }) : statePagination;
     }
-
     if (Object.keys(states).length) {
       const {
         // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -1374,66 +1152,57 @@ class Table extends _baseComponent.default {
         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,
@@ -1463,15 +1232,14 @@ class Table extends _baseComponent.default {
       * useFullRender需要传给用户selection ReactNode，因此需要每次selectedRowKeys变化时重新计算columns
       * TODO: 未来可以将传给用户的selection改为函数类型，让用户执行函数获取selection title的实时状态
       */
-
     if (!this.adapter.isAnyColumnUseFullRender(queries)) {
       const rowSelectionUpdate = propRowSelection && !(0, _get2.default)(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);
@@ -1487,7 +1255,6 @@ class Table extends _baseComponent.default {
     //     dataSource = pageData.dataSource;
     //     pagination = pageData.pagination;
     // }
-
     const props = Object.assign(Object.assign(Object.assign({}, rest), this.state), {
       // props not in rest
       virtualized,
@@ -1509,13 +1276,11 @@ class Table extends _baseComponent.default {
     });
     const x = (0, _get2.default)(scroll, 'x');
     const y = (0, _get2.default)(scroll, 'y');
-
     if (virtualized) {
       if (typeof wrapStyle.width !== 'number') {
         wrapStyle.width = x;
       }
     }
-
     const wrapCls = (0, _classnames.default)({
       [`${prefixCls}-${_constants.strings.SIZE_SMALL}`]: size === _constants.strings.SIZE_SMALL,
       [`${prefixCls}-${_constants.strings.SIZE_MIDDLE}`]: size === _constants.strings.SIZE_MIDDLE,
@@ -1524,8 +1289,8 @@ class Table extends _baseComponent.default {
       [`${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 = (0, _get2.default)(propPagination, 'position', 'bottom');
     const tableContextValue = Object.assign(Object.assign({}, this.context), {
@@ -1568,9 +1333,7 @@ class Table extends _baseComponent.default {
       key: 'pagination-bottom'
     }, ['bottom', 'both'].includes(paginationPosition) ? tablePagination : null)))));
   }
-
 }
-
 Table.contextType = _tableContext.default;
 Table.propTypes = {
   className: _propTypes.default.string,
@@ -1622,8 +1385,8 @@ Table.propTypes = {
   dropdownPrefixCls: _propTypes.default.string,
   expandRowByClick: _propTypes.default.bool,
   getVirtualizedListRef: _propTypes.default.func // TODO: future api
-
 };
+
 Table.defaultProps = {
   // rowExpandable: stubTrue,
   tableLayout: '',