@douyinfe/semi-ui 2.1.0-beta.2 → 2.1.0-next.2

package/lib/cjs/table/Table.js

@@ -0,0 +1,1576 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _includes2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _difference2 = _interopRequireDefault(require("lodash/difference"));
+
+var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
+
+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 _includes3 = _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; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, 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 = () => {
+      var _context;
+
+      const pageData = this.foundation.getCurrentPageData();
+      const retObj = (0, _reduce.default)(_context = ['dataSource', 'groups']).call(_context, (result, key) => {
+        if (pageData[key]) {
+          result[key] = pageData[key];
+        }
+
+        return result;
+      }, {});
+      return (0, _utils2.cloneDeep)(retObj);
+    };
+
+    this.getColumns = (columns, children) => !(0, _isArray.default)(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;
+        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.
+
+
+      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;
+
+      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.
+
+
+      this.lastScrollTop = target.scrollTop;
+    };
+
+    this.handleBodyScroll = e => {
+      this.handleBodyScrollLeft(e);
+      this.handleBodyScrollTop(e);
+    };
+
+    this.setScrollPosition = position => {
+      const {
+        prefixCls
+      } = this.props;
+      const positionAll = ["".concat(prefixCls, "-scroll-position-both"), "".concat(prefixCls, "-scroll-position-middle"), "".concat(prefixCls, "-scroll-position-left"), "".concat(prefixCls, "-scroll-position-right")];
+      this.scrollPosition = position;
+      const tableNode = this.wrapRef.current;
+
+      if (tableNode && tableNode.nodeType) {
+        if (position === 'both') {
+          const acceptPosition = ["".concat(prefixCls, "-scroll-position-left"), "".concat(prefixCls, "-scroll-position-right")];
+          tableNode.classList.remove(...(0, _difference2.default)(positionAll, acceptPosition));
+          tableNode.classList.add(...acceptPosition);
+        } else {
+          var _context2;
+
+          const acceptPosition = [(0, _concat.default)(_context2 = "".concat(prefixCls, "-scroll-position-")).call(_context2, position)];
+          tableNode.classList.remove(...(0, _difference2.default)(positionAll, acceptPosition));
+          tableNode.classList.add(...acceptPosition);
+        }
+      }
+    };
+
+    this.setScrollPositionClassName = () => {
+      const node = this.bodyWrapRef.current;
+
+      if (node && node.children && node.children.length) {
+        const scrollToLeft = node.scrollLeft === 0;
+        const scrollToRight = node.scrollLeft + 1 >= node.children[0].getBoundingClientRect().width - node.getBoundingClientRect().width;
+
+        if (scrollToLeft && scrollToRight) {
+          this.setScrollPosition('both');
+        } else if (scrollToLeft) {
+          this.setScrollPosition('left');
+        } else if (scrollToRight) {
+          this.setScrollPosition('right');
+        } else if (this.scrollPosition !== 'middle') {
+          this.setScrollPosition('middle');
+        }
+      }
+    };
+
+    this.syncTableWidth = () => {
+      if (this.rootWrapRef && this.rootWrapRef.current) {
+        this.setState({
+          tableWidth: this.rootWrapRef.current.getBoundingClientRect().width
+        });
+      }
+    };
+
+    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,
+        disabledRowKeysSet
+      } = _this.state;
+
+      if (rowSelection && typeof rowSelection === 'object') {
+        const {
+          selectedRowKeys = [],
+          selectedRowKeysSet = new _set.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, disabledRowKeysSet, allRowKeys);
+
+          const hasRowSelected = _this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
+
+          return /*#__PURE__*/_react.default.createElement(_ColumnSelection.default, {
+            disabled: disabled,
+            key: columnKey,
+            selected: allIsSelected,
+            indeterminate: hasRowSelected && !allIsSelected,
+            onChange: (status, e) => {
+              _this.toggleSelectAllRow(status, e);
+            }
+          });
+        } else {
+          const key = _this.foundation.getRecordKey(record);
+
+          const selected = selectedRowKeysSet.has(key);
+
+          const checkboxPropsFn = () => typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {};
+
+          return /*#__PURE__*/_react.default.createElement(_ColumnSelection.default, {
+            getCheckboxProps: checkboxPropsFn,
+            selected: selected,
+            onChange: (status, e) => _this.toggleSelectRow(status, key, e)
+          });
+        }
+      }
+
+      return null;
+    };
+
+    this.renderRowSelectionCallback = function (text) {
+      let record = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return _this.renderSelection(record);
+    };
+
+    this.renderTitleSelectionCallback = () => this.renderSelection(null, true);
+
+    this.normalizeSelectionColumn = function () {
+      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        rowSelection,
+        prefixCls
+      } = props;
+      let column = {};
+
+      if (rowSelection) {
+        const needOmitSelectionKey = ['selectedRowKeys', 'selectedRowKeysSet'];
+        column = {
+          key: _constants.strings.DEFAULT_KEY_COLUMN_SELECTION
+        };
+
+        if ((0, _isObject2.default)(rowSelection)) {
+          column = (0, _assign.default)((0, _assign.default)({}, column), (0, _omit2.default)(rowSelection, needOmitSelectionKey));
+        }
+
+        column.className = (0, _classnames.default)(column.className, "".concat(prefixCls, "-column-selection"));
+        column.title = _this.renderTitleSelectionCallback;
+        column.render = _this.renderRowSelectionCallback;
+      }
+
+      return column;
+    }; // 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 {
+        scrollbarWidth = 0
+      } = props;
+      return {
+        key: _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR,
+        width: scrollbarWidth,
+        fixed: 'right'
+      };
+    };
+    /**
+     * render expand icon
+     * @param {Object} record
+     * @param {Boolean} isNested
+     * @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;
+      const {
+        expandIcon
+      } = _this.props;
+      const key = typeof groupKey === 'string' || typeof groupKey === 'number' ? groupKey : _this.foundation.getRecordKey(record);
+      return /*#__PURE__*/_react.default.createElement(_CustomExpandIcon.default, {
+        key: key,
+        componentType: isNested ? 'tree' : 'expand',
+        expanded: (0, _includes3.default)(expandedRowKeys, key),
+        expandIcon: expandIcon,
+        onClick: (expanded, e) => _this.handleRowExpanded(expanded, key, e)
+      });
+    }; // @ts-ignore
+
+
+    this.handleRowExpanded = function () {
+      return _this.foundation.handleRowExpanded(...arguments);
+    };
+
+    this.normalizeExpandColumn = function () {
+      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      let column = null;
+      const {
+        prefixCls,
+        expandCellFixed,
+        expandIcon
+      } = props;
+      column = {
+        fixed: expandCellFixed,
+        key: _constants.strings.DEFAULT_KEY_COLUMN_EXPAND
+      };
+      column.className = (0, _classnames.default)(column.className, "".concat(prefixCls, "-column-expand"));
+      column.render = expandIcon !== false ? function () {
+        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;
+      } : () => null;
+      return column;
+    };
+    /**
+      * Add sorting, filtering, and rendering functions to columns, and add column event handling
+      * 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] : {};
+
+      if (column && (column.sorter || column.filters || column.useFullRender)) {
+        const {
+          dataIndex,
+          title: rawTitle,
+          useFullRender
+        } = column;
+
+        const curQuery = _this.foundation.getQuery(dataIndex);
+
+        const titleMap = {};
+        const titleArr = []; // useFullRender adds select buttons to each column
+
+        if (useFullRender) {
+          titleMap.selection = _this.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;
+
+        if (typeof column.sorter === 'function' || column.sorter === true) {
+          const sorter = /*#__PURE__*/_react.default.createElement(_ColumnSorter.default, {
+            key: _constants.strings.DEFAULT_KEY_COLUMN_SORTER,
+            sortOrder: sortOrder,
+            onClick: e => _this.foundation.handleSort(column, e)
+          });
+
+          useFullRender && (titleMap.sorter = sorter);
+          titleArr.push(sorter);
+        }
+
+        if ((0, _isArray.default)(column.filters) && column.filters.length || /*#__PURE__*/(0, _react.isValidElement)(column.filterDropdown)) {
+          const filter = /*#__PURE__*/_react.default.createElement(_ColumnFilter.default, (0, _assign.default)({
+            key: _constants.strings.DEFAULT_KEY_COLUMN_FILTER
+          }, curQuery, {
+            onFilterDropdownVisibleChange: visible => _this.foundation.toggleShowFilter(dataIndex, visible),
+            onSelect: data => _this.foundation.handleFilterSelect(dataIndex, data)
+          }));
+
+          useFullRender && (titleMap.filter = filter);
+          titleArr.push(filter);
+        }
+
+        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr.unshift( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: _constants.strings.DEFAULT_KEY_COLUMN_TITLE
+        }, rawTitle)) && titleArr;
+        column = (0, _assign.default)((0, _assign.default)({}, column), {
+          title: newTitle
+        });
+      }
+
+      return column;
+    };
+
+    this.toggleSelectRow = (selected, realKey, e) => {
+      this.foundation.handleSelectRow(realKey, selected, e);
+    };
+
+    this.toggleSelectAllRow = (status, e) => {
+      this.foundation.handleSelectAllRow(status, e);
+    };
+    /**
+     * render pagination
+     * @param {object} pagination
+     */
+
+
+    this.renderPagination = (pagination, propRenderPagination) => {
+      if (!pagination) {
+        return null;
+      } // use memoized pagination
+
+
+      const mergedPagination = this.foundation.memoizedPagination(pagination);
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Table"
+      }, locale => {
+        const info = this.foundation.formatPaginationInfo(mergedPagination, locale.pageText);
+        return /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
+          info: info,
+          pagination: mergedPagination,
+          renderPagination: propRenderPagination
+        });
+      });
+    };
+
+    this.renderTitle = function () {
+      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      let {
+        title
+      } = props;
+      const {
+        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: "".concat(prefixCls, "-title")
+      }, title) : null;
+    };
+
+    this.renderEmpty = function () {
+      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        prefixCls,
+        empty,
+        dataSource
+      } = props;
+      const wrapCls = "".concat(prefixCls, "-placeholder");
+
+      const isEmpty = _this.foundation.isEmpty(dataSource);
+
+      if (!isEmpty) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Table",
+        key: 'emptyText'
+      }, (locale, localeCode) => /*#__PURE__*/_react.default.createElement("div", {
+        className: wrapCls
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-empty")
+      }, empty || locale.emptyText)));
+    };
+
+    this.renderFooter = function () {
+      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      let {
+        footer
+      } = props;
+      const {
+        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: "".concat(prefixCls, "-footer"),
+        key: "footer"
+      }, footer) : null;
+    };
+
+    this.renderMainTable = props => {
+      const useFixedHeader = this.adapter.useFixedHeader();
+      const emptySlot = this.renderEmpty(props);
+      const table = [this.renderTable((0, _assign.default)((0, _assign.default)({}, props), {
+        fixed: false,
+        useFixedHeader,
+        headerRef: this._cacheHeaderRef,
+        bodyRef: this.bodyWrapRef,
+        includeHeader: !useFixedHeader
+      })), emptySlot, this.renderFooter(props)];
+      return table;
+    };
+
+    this.renderTable = props => {
+      const {
+        columns,
+        filteredColumns,
+        fixed,
+        useFixedHeader,
+        scroll,
+        prefixCls,
+        anyColumnFixed,
+        includeHeader,
+        showHeader,
+        components,
+        headerRef,
+        bodyRef,
+        rowSelection,
+        dataSource,
+        bodyHasScrollBar,
+        disabledRowKeysSet
+      } = props;
+      const selectedRowKeysSet = (0, _get2.default)(rowSelection, 'selectedRowKeysSet', new _set.default());
+      const headTable = fixed || useFixedHeader ? /*#__PURE__*/_react.default.createElement(_HeadTable.default, {
+        key: "head",
+        anyColumnFixed: anyColumnFixed,
+        ref: headerRef,
+        columns: filteredColumns,
+        prefixCls: prefixCls,
+        fixed: fixed,
+        handleBodyScroll: this.handleBodyScrollLeft,
+        components: components,
+        scroll: scroll,
+        showHeader: showHeader,
+        selectedRowKeysSet: selectedRowKeysSet,
+        dataSource: dataSource,
+        bodyHasScrollBar: bodyHasScrollBar
+      }) : null;
+
+      const bodyTable = /*#__PURE__*/_react.default.createElement(_Body.default, (0, _assign.default)({}, (0, _omit2.default)(props, ['rowSelection', 'headWidths']), {
+        key: "body",
+        ref: bodyRef,
+        columns: filteredColumns,
+        fixed: fixed,
+        prefixCls: prefixCls,
+        handleWheel: this.handleWheel,
+        handleBodyScroll: this.handleBodyScroll,
+        anyColumnFixed: anyColumnFixed,
+        includeHeader: includeHeader,
+        showHeader: showHeader,
+        scroll: scroll,
+        components: components,
+        store: this.store,
+        selectedRowKeysSet: selectedRowKeysSet,
+        disabledRowKeysSet: disabledRowKeysSet
+      }));
+
+      return [headTable, bodyTable];
+    };
+    /**
+     * When columns change, call this function to get the latest withFnsColumns
+     * In addition to changes in columns, these props changes must be recalculated
+     *  - hideExpandedColumn
+     *  -rowSelection changes from trusy to falsy or rowSelection.hidden changes
+     *  -isAnyFixedRight(columns) || get(scroll,'y') changes
+     *
+     * columns变化时，调用此函数获取最新的withFnsColumns
+     * 除了 columns 变化，这些 props 变化也要重新计算
+     *  - hideExpandedColumn
+     *  - rowSelection 从 trusy 变为 falsy 或 rowSelection.hidden 发生变化
+     *  - isAnyFixedRight(columns) || get(scroll, 'y') 发生变化
+     *
+     * @param {Array} queries
+     * @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 ((0, _isArray.default)(columns) && columns.length) {
+          (0, _each2.default)(columns, (column, index, originColumns) => {
+            const newColumn = _this.addFnsInColumn(column);
+
+            const children = column[childrenColumnName];
+
+            if ((0, _isArray.default)(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] = (0, _assign.default)((0, _assign.default)({}, 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] = (0, _assign.default)((0, _assign.default)({}, 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 = (0, _assign.default)({
+        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);
+    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: (0, _utils2.cloneDeep)(cachedflattenColumns),
+      dataSource: [],
+      flattenData: [],
+      expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
+      rowSelection: props.rowSelection ? (0, _isObject2.default)(props.rowSelection) ? (0, _assign.default)({}, props.rowSelection) : {} : null,
+      pagination: props.pagination && typeof props.pagination === 'object' ? (0, _assign.default)({}, props.pagination) : props.pagination || false,
+
+      /**
+       * Internal state
+       */
+      groups: null,
+      allRowKeys: [],
+      disabledRowKeys: [],
+      disabledRowKeysSet: new _set.default(),
+      headWidths: [],
+      bodyHasScrollBar: false,
+      prePropRowSelection: 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.setScrollPosition('left');
+    this.debouncedWindowResize = (0, _debounce2.default)(this.handleWindowResize, 150);
+    this.cachedFilteredSortedDataSource = [];
+    this.cachedFilteredSortedRowKeys = [];
+    this.cachedFilteredSortedRowKeysSet = new _set.default();
+  }
+
+  get adapter() {
+    var _this2 = this;
+
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      resetScrollY: () => {
+        if (this.bodyWrapRef.current) {
+          this.bodyWrapRef.current.scrollTop = 0;
+        }
+      },
+      setSelectedRowKeys: selectedRowKeys => {
+        this.setState({
+          rowSelection: (0, _assign.default)((0, _assign.default)({}, this.state.rowSelection), {
+            selectedRowKeys: [...selectedRowKeys],
+            selectedRowKeysSet: new _set.default(selectedRowKeys)
+          })
+        });
+      },
+      setDisabledRowKeys: disabledRowKeys => {
+        this.setState({
+          disabledRowKeys,
+          disabledRowKeysSet: new _set.default(disabledRowKeys)
+        });
+      },
+      setCurrentPage: currentPage => {
+        const {
+          pagination
+        } = this.state;
+
+        if (typeof pagination === 'object') {
+          this.setState({
+            pagination: (0, _assign.default)((0, _assign.default)({}, 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.default(filteredSortedRowKeys);
+      },
+      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,
+      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
+        } = this.props;
+
+        if ((0, _get2.default)(scroll, 'y')) {
+          return true;
+        }
+
+        return false;
+      },
+      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
+            };
+          });
+        }
+      },
+      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 (0, _map.default)(configs).call(configs, 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 ((0, _isArray.default)(flattenedColumns) && flattenedColumns.length) {
+          flattenedWidths = flattenedWidths == null && _this2.state.headWidths.length ? (0, _flattenDeep2.default)(_this2.state.headWidths) : [];
+
+          if ((0, _isArray.default)(flattenedWidths) && flattenedWidths.length) {
+            return (0, _reduce.default)(flattenedColumns).call(flattenedColumns, (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 = (0, _isArray.default)(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
+          });
+        }
+      }
+    });
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const willUpdateStates = {};
+    const {
+      rowSelection,
+      dataSource,
+      childrenRecordName,
+      rowKey
+    } = 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;
+      willUpdateStates.queries = (0, _utils.mergeColumns)(state.queries, newFlattenColumns, null, false);
+      willUpdateStates.cachedColumns = props.columns;
+      willUpdateStates.cachedChildren = null;
+    } else if (props.children && props.children !== state.cachedChildren) {
+      const newFlattenColumns = (0, _utils.flattenColumns)((0, _getColumns.default)(props.children));
+      const columns = (0, _utils.mergeColumns)(state.queries, newFlattenColumns, null, false);
+      willUpdateStates.flattenColumns = newFlattenColumns;
+      willUpdateStates.queries = [...columns];
+      willUpdateStates.cachedColumns = [...columns];
+      willUpdateStates.cachedChildren = props.children;
+    } // Update controlled selection column
+
+
+    if (rowSelection !== state.prePropRowSelection) {
+      let newSelectionStates = {};
+
+      if ((0, _isObject2.default)(state.rowSelection)) {
+        newSelectionStates = (0, _assign.default)((0, _assign.default)({}, newSelectionStates), state.rowSelection);
+      }
+
+      if ((0, _isObject2.default)(rowSelection)) {
+        newSelectionStates = (0, _assign.default)((0, _assign.default)({}, newSelectionStates), rowSelection);
+      }
+
+      const selectedRowKeys = (0, _get2.default)(rowSelection, 'selectedRowKeys');
+      const getCheckboxProps = (0, _get2.default)(rowSelection, 'getCheckboxProps');
+
+      if (selectedRowKeys && (0, _isArray.default)(selectedRowKeys)) {
+        newSelectionStates.selectedRowKeysSet = new _set.default(selectedRowKeys);
+      } // The return value of getCheckboxProps affects the disabled rows
+
+
+      if ((0, _isFunction2.default)(getCheckboxProps)) {
+        const disabledRowKeys = (0, _utils.getAllDisabledRowKeys)({
+          dataSource,
+          getCheckboxProps,
+          childrenRecordName,
+          rowKey
+        });
+        willUpdateStates.disabledRowKeys = disabledRowKeys;
+        willUpdateStates.disabledRowKeysSet = new _set.default(disabledRowKeys);
+      }
+
+      willUpdateStates.rowSelection = newSelectionStates;
+      willUpdateStates.prePropRowSelection = rowSelection;
+    }
+
+    return willUpdateStates;
+  }
+
+  componentDidMount() {
+    super.componentDidMount();
+
+    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
+
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      pagination,
+      dataSource,
+      expandedRowKeys,
+      expandAllRows,
+      expandAllGroupRows,
+      virtualized,
+      components
+    } = this.props;
+    const {
+      queries: stateQueries,
+      cachedColumns: stateCachedColumns,
+      cachedChildren: stateCachedChildren,
+      groups: stateGroups
+    } = this.state;
+    /**
+     * State related to paging
+     *
+     * @param dataSource
+     * @param groups
+     * @param pagination
+     * @param disabledRowKeys
+     * @param allRowKeys
+     * @param queries
+     */
+
+    const states = {};
+
+    this._warnIfNoKey();
+    /**
+     * The state that needs to be updated after props changes
+     */
+    // Update controlled expand column
+
+
+    if ((0, _isArray.default)(expandedRowKeys) && expandedRowKeys !== prevProps.expandedRowKeys) {
+      this.setState({
+        expandedRowKeys
+      });
+    } // Update components
+
+
+    if (components !== prevProps.components || virtualized !== prevProps.virtualized) {
+      this.setState({
+        components: (0, _utils2.mergeComponents)(components, virtualized)
+      });
+    } // Update the default expanded column
+
+
+    if (expandAllRows !== prevProps.expandAllRows || expandAllGroupRows !== prevProps.expandAllGroupRows) {
+      this.foundation.initExpandedRowKeys({
+        groups: stateGroups
+      });
+    } // Update pagination
+
+
+    if (pagination !== prevProps.pagination) {
+      states.pagination = (0, _isObject2.default)(pagination) ? (0, _assign.default)({}, pagination) : pagination;
+    }
+    /**
+     * After dataSource is updated || (cachedColumns || cachedChildren updated)
+     * 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
+      const _dataSource = [...dataSource];
+      const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
+      this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
+      states.dataSource = filteredSortedDataSource;
+
+      if (pagination === prevProps.pagination) {
+        states.pagination = (0, _isObject2.default)(pagination) ? (0, _assign.default)({}, pagination) : pagination;
+      }
+
+      if (this.props.groupBy) {
+        states.groups = null;
+      }
+    }
+
+    if ((0, _keys.default)(states).length) {
+      const {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        queries: stateQueries = null,
+        pagination: statePagination = null,
+        dataSource: stateDataSource = null
+      } = states;
+      const handledProps = this.foundation.getCurrentPageData(stateDataSource, statePagination, 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);
+        }
+      } // Centrally update paging related state
+
+
+      const statesKeys = (0, _keys.default)(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() {
+    var _context3, _context4, _context5, _context6, _context7, _context8;
+
+    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"]);
+
+    let {
+      rowSelection,
+      expandedRowKeys,
+      headWidths,
+      tableWidth,
+      pagination,
+      dataSource,
+      queries,
+      cachedColumns,
+      bodyHasScrollBar
+    } = this.state;
+    wrapStyle = (0, _assign.default)({}, wrapStyle);
+    let columns;
+    /**
+      * As state.queries will change, the columns should be refreshed as a whole at this time
+      * The scene of changes in queries
+      * 1. Filter
+      * 2. Pagination
+      *
+      * useFullRender needs to be passed to the user selection ReactNode, so columns need to be recalculated every time the selectedRowKeys changes
+      * TODO: In the future, the selection passed to the user can be changed to the function type, allowing the user to execute the function to obtain the real-time status of the selection title
+      *
+      * 由于state.queries会发生变化，此时columns应该整体刷新
+      * queries变化的场景
+      *  1. 筛选
+      *  2. 分页
+      * 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
+      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);
+    /**
+     * - If it is the first page break, you need to calculate the current page
+     * - If it is manual paging, call foundation to modify the state
+     *
+     * TODO: After merging issue 1007, you can place it in the constructor to complete
+     * The reason is that #1007 exposes the parameters required by getCurrentPageData in the constructor
+     */
+
+    if ((0, _isNull2.default)(dataSource)) {
+      const pageData = this.foundation.getCurrentPageData(this.props.dataSource);
+      dataSource = pageData.dataSource;
+      pagination = pageData.pagination;
+    }
+
+    const props = (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, rest), this.state), {
+      // props not in rest
+      virtualized,
+      scroll,
+      prefixCls,
+      size,
+      hideExpandedColumn,
+      // renamed state
+      columns,
+      // calculated value
+      anyColumnFixed,
+      rowExpandable: this.mergedRowExpandable,
+      pagination,
+      dataSource,
+      rowSelection,
+      expandedRowKeys,
+      renderExpandIcon: this.renderExpandIcon,
+      filteredColumns
+    });
+    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)({
+      [(0, _concat.default)(_context3 = "".concat(prefixCls, "-")).call(_context3, _constants.strings.SIZE_SMALL)]: size === _constants.strings.SIZE_SMALL,
+      [(0, _concat.default)(_context4 = "".concat(prefixCls, "-")).call(_context4, _constants.strings.SIZE_MIDDLE)]: size === _constants.strings.SIZE_MIDDLE,
+      ["".concat(prefixCls, "-virtualized")]: Boolean(virtualized),
+      ["".concat(prefixCls, "-bordered")]: bordered,
+      ["".concat(prefixCls, "-fixed-header")]: Boolean(y),
+      ["".concat(prefixCls, "-scroll-position-left")]: (0, _includes2.default)(_context5 = ['both', 'left']).call(_context5, this.position),
+      ["".concat(prefixCls, "-scroll-position-right")]: (0, _includes2.default)(_context6 = ['both', 'right']).call(_context6, this.position)
+    }); // pagination
+
+    const tablePagination = pagination && propPagination ? this.renderPagination(pagination, propRenderPagination) : null;
+    const paginationPosition = (0, _get2.default)(propPagination, 'position', 'bottom');
+    const tableContextValue = (0, _assign.default)((0, _assign.default)({}, this.context), {
+      headWidths,
+      tableWidth,
+      anyColumnFixed,
+      flattenedColumns: flattenFnsColumns,
+      renderExpandIcon: this.renderExpandIcon,
+      renderSelection: this.renderSelection,
+      setHeadWidths: this.setHeadWidths,
+      getHeadWidths: this.getHeadWidths,
+      getCellWidths: this.getCellWidths,
+      handleRowExpanded: this.handleRowExpanded,
+      getVirtualizedListRef,
+      setBodyHasScrollbar: this.setBodyHasScrollbar
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.rootWrapRef,
+      className: (0, _classnames.default)(className, "".concat(prefixCls, "-wrapper")),
+      style: wrapStyle,
+      id: id
+    }, /*#__PURE__*/_react.default.createElement(_TableContextProvider.default, (0, _assign.default)({}, tableContextValue), /*#__PURE__*/_react.default.createElement(_spin.default, {
+      spinning: loading,
+      size: "large"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.wrapRef,
+      className: wrapCls
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: 'pagination-top'
+    }, (0, _includes2.default)(_context7 = ['top', 'both']).call(_context7, paginationPosition) ? tablePagination : null), this.renderTitle({
+      title: props.title,
+      dataSource: props.dataSource,
+      prefixCls: props.prefixCls
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-container")
+    }, this.renderMainTable((0, _assign.default)({}, props))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: 'pagination-bottom'
+    }, (0, _includes2.default)(_context8 = ['bottom', 'both']).call(_context8, paginationPosition) ? tablePagination : null)))));
+  }
+
+}
+
+Table.contextType = _tableContext.default;
+Table.propTypes = {
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  prefixCls: _propTypes.default.string,
+  components: _propTypes.default.any,
+  bordered: _propTypes.default.bool,
+  loading: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(_constants.strings.SIZES),
+  tableLayout: _propTypes.default.oneOf(_constants.strings.LAYOUTS),
+  columns: _propTypes.default.arrayOf(_propTypes.default.shape(_ColumnShape.default)),
+  hideExpandedColumn: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  expandIcon: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
+  expandCellFixed: _propTypes.default.oneOf(_constants.strings.FIXED_SET),
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
+  onHeaderRow: _propTypes.default.func,
+  showHeader: _propTypes.default.bool,
+  indentSize: _propTypes.default.number,
+  rowKey: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string, _propTypes.default.number]),
+  onRow: _propTypes.default.func,
+  onExpandedRowsChange: _propTypes.default.func,
+  onExpand: _propTypes.default.func,
+  rowExpandable: _propTypes.default.func,
+  expandedRowRender: _propTypes.default.func,
+  expandedRowKeys: _propTypes.default.array,
+  defaultExpandAllRows: _propTypes.default.bool,
+  expandAllRows: _propTypes.default.bool,
+  defaultExpandAllGroupRows: _propTypes.default.bool,
+  expandAllGroupRows: _propTypes.default.bool,
+  defaultExpandedRowKeys: _propTypes.default.array,
+  pagination: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
+  renderPagination: _propTypes.default.func,
+  footer: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string, _propTypes.default.node]),
+  empty: _propTypes.default.node,
+  dataSource: _propTypes.default.array,
+  childrenRecordName: _propTypes.default.string,
+  rowSelection: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
+  onChange: _propTypes.default.func,
+  scroll: _propTypes.default.shape({
+    x: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.bool]),
+    y: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  }),
+  groupBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.func]),
+  renderGroupSection: _propTypes.default.oneOfType([_propTypes.default.func]),
+  onGroupedRow: _propTypes.default.func,
+  clickGroupedRowToExpand: _propTypes.default.bool,
+  virtualized: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
+  dropdownPrefixCls: _propTypes.default.string,
+  expandRowByClick: _propTypes.default.bool,
+  getVirtualizedListRef: _propTypes.default.func // TODO: future api
+
+};
+Table.defaultProps = {
+  // rowExpandable: stubTrue,
+  tableLayout: '',
+  dataSource: [],
+  prefixCls: _constants.cssClasses.PREFIX,
+  rowSelection: null,
+  className: '',
+  childrenRecordName: 'children',
+  size: 'default',
+  loading: false,
+  bordered: false,
+  expandCellFixed: false,
+  hideExpandedColumn: true,
+  showHeader: true,
+  indentSize: _constants.numbers.DEFAULT_INDENT_WIDTH,
+  onChange: _noop2.default,
+  pagination: true,
+  rowKey: 'key',
+  defaultExpandedRowKeys: [],
+  defaultExpandAllRows: false,
+  defaultExpandAllGroupRows: false,
+  expandAllRows: false,
+  expandAllGroupRows: false,
+  onFilterDropdownVisibleChange: _noop2.default,
+  onExpand: _noop2.default,
+  onExpandedRowsChange: _noop2.default,
+  expandRowByClick: false
+};
+var _default = Table;
+exports.default = _default;