amis-ui 3.5.2 → 3.6.0

package/esm/components/table/index.js

@@ -1,158 +1,50 @@
 /**
- * amis-ui v3.5.2
+ * amis-ui v3.6.0
  * Copyright 2018-2023 fex
  */
 
-import { __extends, __spreadArray, __read, __awaiter, __generator, __assign, __decorate, __metadata, __rest } from 'tslib';
+import { __extends, __spreadArray, __read, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
 import { findDOMNode } from 'react-dom';
-import findLastIndex from 'lodash/findLastIndex';
 import find from 'lodash/find';
 import isEqual from 'lodash/isEqual';
-import filter from 'lodash/filter';
 import debounce from 'lodash/debounce';
 import intersection from 'lodash/intersection';
 import Sortable from 'sortablejs';
-import { resizeSensor, isObject, isBreakpoint, autobind, themeable, localeable, guid } from 'amis-core';
-import { Icon } from '../icons.js';
-import Checkbox from '../Checkbox.js';
+import { resizeSensor, offset, getScrollParent, position, getStyleNumber, isObject, autobind, themeable, localeable } from 'amis-core';
 import Spinner from '../Spinner.js';
-import HeadCellSort from './HeadCellSort.js';
-import HeadCellFilter from './HeadCellFilter.js';
-import HeadCellSelect from './HeadCellSelect.js';
 import ItemActionsWrapper from './ItemActionsWrapper.js';
-import Cell from './Cell.js';
+import BodyCell from './Cell.js';
 import ColGroup from './ColGroup.js';
+import BodyRow from './Row.js';
+import Head from './Head.js';
+import SummaryRows from './SummaryRow.js';
+import { getSelectedRows, levelsSplit, getDataChildrenKeys, checkChildrenRow, getBuildColumns } from './util.js';
 
 /**
  * @file Table
  * @author fex
  */
-function getMaxLevelThRowSpan(columns) {
-    var maxLevel = 0;
-    Array.isArray(columns) &&
-        columns.forEach(function (c) {
-            var level = getThRowSpan(c);
-            if (maxLevel < level) {
-                maxLevel = level;
-            }
-        });
-    return maxLevel;
-}
-function getThRowSpan(column) {
-    if (!column.children || (column.children && !column.children.length)) {
-        return 1;
-    }
-    return 1 + getMaxLevelThRowSpan(column.children);
-}
-function getThColSpan(column) {
-    if (!column.children || (column.children && !column.children.length)) {
-        return 1;
-    }
-    var childrenLength = 0;
-    column.children.forEach(function (item) { return (childrenLength += getThColSpan(item)); });
-    return childrenLength;
-}
-function buildColumns(columns, thColumns, tdColumns, maxLevel, depth, id, fixed) {
-    if (columns === void 0) { columns = []; }
-    if (tdColumns === void 0) { tdColumns = []; }
-    if (depth === void 0) { depth = 0; }
-    // 在处理表头时，如果父级column设置了fixed属性，那么所有children保持一致
-    Array.isArray(columns) &&
-        columns.forEach(function (column) {
-            var groupId = id || guid();
-            var childMaxLevel = 0;
-            if (column.children) {
-                childMaxLevel = getMaxLevelThRowSpan(column.children);
-            }
-            var newColumn = __assign(__assign({}, column), { rowSpan: childMaxLevel ? 1 : maxLevel - depth, colSpan: getThColSpan(column), groupId: groupId, depth: depth });
-            var tdColumn = __assign(__assign({}, column), { groupId: groupId });
-            if (fixed) {
-                newColumn.fixed = fixed;
-                tdColumn.fixed = fixed;
-            }
-            if (!thColumns[depth]) {
-                thColumns[depth] = [];
-            }
-            thColumns[depth].push(newColumn);
-            if (column.children && column.children.length > 0) {
-                buildColumns(column.children, thColumns, tdColumns, maxLevel, depth + 1, groupId, column.fixed);
-            }
-            else {
-                tdColumn.children; var rest = __rest(tdColumn, ["children"]);
-                tdColumns.push(rest);
-            }
-        });
-}
-function isFixedLeftColumn(fixed) {
-    return fixed === true || fixed === 'left';
-}
-function isFixedRightColumn(fixed) {
-    return fixed === 'right';
-}
-function getPreviousLeftWidth(doms, index, columns) {
-    var width = 0;
-    for (var i = 0; i < index; i++) {
-        if (columns && columns[i] && isFixedLeftColumn(columns[i].fixed)) {
-            var dom = doms[i];
-            width += dom.offsetWidth;
-        }
-    }
-    return width;
-}
-function getAfterRightWidth(doms, index, columns) {
-    var width = 0;
-    for (var i = doms.length - 0; i > index; i--) {
-        if (columns && columns[i] && isFixedRightColumn(columns[i].fixed)) {
-            var dom = doms[i];
-            width += dom.offsetWidth;
-        }
-    }
-    return width;
-}
-function hasFixedColumn(columns) {
-    return find(columns, function (column) { return column.fixed; });
-}
-function getSummaryColumns(summary) {
-    if (!summary) {
-        return [];
-    }
-    var last = [];
-    var first = [];
-    summary.forEach(function (item) {
-        if (isObject(item)) {
-            first.push(item);
-        }
-        else if (Array.isArray(item)) {
-            last.push(item);
-        }
-    });
-    return __spreadArray([first], __read(last), false);
-}
 var DefaultCellWidth = 40;
 var Table = /** @class */ (function (_super) {
     __extends(Table, _super);
     function Table(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
+        var _this = _super.call(this, props) || this;
         _this.tableDom = React__default.createRef();
-        _this.theadDom = React__default.createRef();
         _this.tbodyDom = React__default.createRef();
         _this.contentDom = React__default.createRef();
         _this.headerDom = React__default.createRef();
-        _this.tfootDom = React__default.createRef();
         _this.footDom = React__default.createRef();
+        _this.containerDom = React__default.createRef();
         _this.toDispose = [];
         _this.updateTableInfoLazy = debounce(_this.updateTableInfo.bind(_this), 250, {
             trailing: true,
             leading: false
         });
-        if (props.rowSelection) {
-            var selectedResult = _this.getSelectedRows(props.dataSource, (_a = props.rowSelection) === null || _a === void 0 ? void 0 : _a.selectedRowKeys);
-            _this.selectedRows = selectedResult.selectedRows;
-            _this.unSelectedRows = selectedResult.unSelectedRows;
-        }
+        _this.updateAutoFillHeightLazy = debounce(_this.updateAutoFillHeight.bind(_this), 250, {
+            trailing: true,
+            leading: false
+        });
         _this.state = {
             selectedRowKeys: props.rowSelection
                 ? props.rowSelection.selectedRowKeys.map(function (key) { return key; }) || []
@@ -169,46 +61,6 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.getPopOverContainer = function () {
         return findDOMNode(this);
     };
-    Table.prototype.getSelectedRows = function (dataSource, selectedRowKeys) {
-        var _this = this;
-        var selectedRows = [];
-        var unSelectedRows = [];
-        dataSource.forEach(function (data) {
-            if (find(selectedRowKeys, function (key) { return key === data[_this.getRowSelectionKeyField()]; })) {
-                selectedRows.push(data);
-            }
-            else {
-                unSelectedRows.push(data);
-            }
-        });
-        return { selectedRows: selectedRows, unSelectedRows: unSelectedRows };
-    };
-    Table.prototype.updateTableBodyFixed = function () {
-        var tbodyDom = this.tbodyDom && this.tbodyDom.current;
-        var tdColumns = __spreadArray([], __read(this.tdColumns), false);
-        if (!tbodyDom) {
-            return;
-        }
-        this.updateTbodyFixedRow(tbodyDom, tdColumns);
-        this.updateHeadSummaryFixedRow(tbodyDom);
-    };
-    Table.prototype.updateTableFixedRows = function () {
-        if (hasFixedColumn(this.props.columns)) {
-            var headerDom = this.headerDom && this.headerDom.current;
-            if (headerDom) {
-                var headerBody = headerDom.getElementsByTagName('tbody');
-                headerBody &&
-                    headerBody[0] &&
-                    this.updateHeadSummaryFixedRow(headerBody[0]);
-            }
-            var tfootDom = this.tfootDom && this.tfootDom.current;
-            tfootDom && this.updateFootSummaryFixedRow(tfootDom);
-            var theadDom = this.theadDom && this.theadDom.current;
-            var thColumns = this.thColumns;
-            this.updateTheadFixedRow(theadDom, thColumns);
-            this.updateTableBodyFixed();
-        }
-    };
     Table.prototype.componentDidMount = function () {
         var _this = this;
         var _a, _b, _c, _d, _e;
@@ -216,9 +68,7 @@ var Table = /** @class */ (function (_super) {
         if (this.props.loading) {
             return;
         }
-        this.updateTableFixedRows();
-        var current = (_c = this.contentDom) === null || _c === void 0 ? void 0 : _c.current;
-        if ((_d = this.headerDom) === null || _d === void 0 ? void 0 : _d.current) {
+        if ((_c = this.headerDom) === null || _c === void 0 ? void 0 : _c.current) {
             // overflow设置为hidden的情况
             var hiddenDomRefs = [this.headerDom, this.footDom];
             hiddenDomRefs.forEach(function (ref) {
@@ -227,40 +77,43 @@ var Table = /** @class */ (function (_super) {
                     ref.current.addEventListener('wheel', _this.onWheel.bind(_this));
             });
         }
+        var current = (_d = this.contentDom) === null || _d === void 0 ? void 0 : _d.current;
         current && this.updateTableDom(current);
         if (this.props.draggable && ((_e = this.tbodyDom) === null || _e === void 0 ? void 0 : _e.current)) {
             this.initDragging();
         }
         this.updateStickyHeader();
         var currentNode = findDOMNode(this);
+        if (this.props.autoFillHeight) {
+            this.toDispose.push(resizeSensor(currentNode.parentElement, this.updateAutoFillHeightLazy, false, 'height'));
+            this.updateAutoFillHeight();
+        }
         this.toDispose.push(resizeSensor(currentNode, this.updateTableInfoLazy, false, 'width'));
     };
     Table.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _this = this;
         var _a, _b, _c, _d;
-        // 数据源发生了变化
-        // 异步加载数据需求再更新一次
-        // 翻页
         if (!isEqual(prevProps.dataSource, this.props.dataSource)) {
             this.setState({
                 dataSource: __spreadArray([], __read(this.props.dataSource), false)
-            }, function () {
-                _this.updateTableFixedRows();
             });
         }
+        if (prevProps.autoFillHeight !== this.props.autoFillHeight ||
+            ((!isEqual(prevState.dataSource, this.state.dataSource) ||
+                prevProps.loading !== this.props.loading) &&
+                this.props.autoFillHeight)) {
+            this.updateAutoFillHeight();
+        }
         // 选择项发生了变化触发
         if (!isEqual(prevState.selectedRowKeys, this.state.selectedRowKeys)) {
+            var rowSelectionKeyField = this.getRowSelectionKeyField();
+            var childrenColumnName = this.getChildrenColumnName();
             // 更新保存的已选择行数据
-            var selectedResult = this.getSelectedRows(this.state.dataSource, this.state.selectedRowKeys);
-            this.selectedRows = selectedResult.selectedRows;
-            this.unSelectedRows = selectedResult.unSelectedRows;
+            var selectedResult = getSelectedRows(this.state.dataSource, this.state.selectedRowKeys, rowSelectionKeyField, childrenColumnName);
             var rowSelection = this.props.rowSelection;
             rowSelection &&
                 rowSelection.onChange &&
-                rowSelection.onChange(this.state.selectedRowKeys, this.selectedRows);
-            this.setState({
-                selectedRowKeys: this.state.selectedRowKeys.filter(function (key, i, a) { return a.indexOf(key) === i; })
-            });
+                rowSelection.onChange(this.state.selectedRowKeys, selectedResult.selectedRows);
         }
         // 外部传入的选择项发生了变化
         if (!isEqual((_a = prevProps.rowSelection) === null || _a === void 0 ? void 0 : _a.selectedRowKeys, (_b = this.props.rowSelection) === null || _b === void 0 ? void 0 : _b.selectedRowKeys)) {
@@ -268,9 +121,6 @@ var Table = /** @class */ (function (_super) {
                 this.setState({
                     selectedRowKeys: this.props.rowSelection.selectedRowKeys
                 });
-                var selectedResult = this.getSelectedRows(this.state.dataSource, this.state.selectedRowKeys);
-                this.selectedRows = selectedResult.selectedRows;
-                this.unSelectedRows = selectedResult.unSelectedRows;
             }
         }
         // 外部传入的展开项发生了变化
@@ -299,7 +149,7 @@ var Table = /** @class */ (function (_super) {
             this.updateStickyHeader();
         }
         if (prevProps.columns !== this.props.columns) {
-            this.updateTableFixedRows();
+            this.syncTableWidth();
         }
     };
     Table.prototype.componentWillUnmount = function () {
@@ -314,6 +164,69 @@ var Table = /** @class */ (function (_super) {
         this.toDispose.forEach(function (fn) { return fn(); });
         this.toDispose = [];
         this.updateTableInfoLazy.cancel();
+        this.updateAutoFillHeightLazy.cancel();
+    };
+    /**
+     * 自动设置表格高度占满界面剩余区域
+     * 用 css 实现有点麻烦，要改很多结构，所以先用 dom hack 了，避免对之前的功能有影响
+     */
+    Table.prototype.updateAutoFillHeight = function () {
+        var tableContent = this.containerDom.current;
+        if (!tableContent) {
+            return;
+        }
+        tableContent.removeAttribute('style');
+        var autoFillHeight = this.props.autoFillHeight;
+        if (!autoFillHeight) {
+            return;
+        }
+        // 计算 table-content 在 dom 中的位置
+        var viewportHeight = window.innerHeight;
+        var tableContentTop = offset(tableContent).top;
+        var parent = getScrollParent(tableContent.parentElement);
+        if (parent && parent !== document.body) {
+            viewportHeight = parent.clientHeight - 1;
+            tableContentTop = position(tableContent, parent).top;
+        }
+        var tableContentBottom = 0;
+        var selfNode = tableContent;
+        var parentNode = selfNode.parentElement;
+        while (parentNode) {
+            var paddingBottom = getStyleNumber(parentNode, 'padding-bottom');
+            var borderBottom = getStyleNumber(parentNode, 'border-bottom-width');
+            var nextSiblingHeight = 0;
+            var nextSibling = selfNode.nextElementSibling;
+            while (nextSibling) {
+                var positon = getComputedStyle(nextSibling).position;
+                if (positon !== 'absolute' && positon !== 'fixed') {
+                    nextSiblingHeight +=
+                        nextSibling.offsetHeight +
+                            getStyleNumber(nextSibling, 'margin-bottom');
+                }
+                nextSibling = nextSibling.nextElementSibling;
+            }
+            var marginBottom = getStyleNumber(selfNode, 'margin-bottom');
+            tableContentBottom +=
+                paddingBottom + borderBottom + marginBottom + nextSiblingHeight;
+            selfNode = parentNode;
+            parentNode = selfNode.parentElement;
+            if (parent && parent !== document.body && parent === selfNode) {
+                break;
+            }
+        }
+        var heightField = autoFillHeight && autoFillHeight.maxHeight
+            ? 'maxHeight'
+            : 'height';
+        var heightValue = isObject(autoFillHeight)
+            ? autoFillHeight[heightField]
+            : 0;
+        var tableContentHeight = heightValue
+            ? heightValue
+            : Math.round(viewportHeight - tableContentTop - tableContentBottom);
+        if (tableContentHeight > 0) {
+            tableContent.style[heightField] = "".concat(tableContentHeight, "px");
+            tableContent.style['overflow'] = 'auto';
+        }
     };
     Table.prototype.initDragging = function () {
         var _this = this;
@@ -341,15 +254,24 @@ var Table = /** @class */ (function (_super) {
                 return true;
             },
             onEnd: function (e) { return __awaiter(_this, void 0, void 0, function () {
-                var rowLevels;
+                var oldIndex, newIndex, rowLevels, i;
                 return __generator(this, function (_a) {
                     // 没有移动
                     if (e.newIndex === e.oldIndex) {
                         return [2 /*return*/];
                     }
-                    rowLevels = e.item.getAttribute('row-levels');
-                    onDrag &&
-                        onDrag(e.oldIndex, e.newIndex, rowLevels ? rowLevels.split(',') : []);
+                    oldIndex = e.oldIndex;
+                    newIndex = e.newIndex;
+                    rowLevels = levelsSplit(e.item.getAttribute('row-levels'));
+                    if (rowLevels.length) {
+                        i = 0;
+                        while (i < rowLevels.length) {
+                            oldIndex = oldIndex - rowLevels[i] - 1;
+                            newIndex = newIndex - rowLevels[i] - 1;
+                            i++;
+                        }
+                    }
+                    onDrag && onDrag(oldIndex, newIndex, rowLevels);
                     return [2 /*return*/];
                 });
             }); }
@@ -384,109 +306,10 @@ var Table = /** @class */ (function (_super) {
             });
         }
     };
-    // 更新一个tr下的td的left和class
-    Table.prototype.updateFixedRow = function (row, columns) {
-        var _a, _b, _c;
-        var cx = this.props.classnames;
-        var children = row.children;
-        for (var i = 0; i < children.length; i++) {
-            var dom = children[i];
-            dom.style.removeProperty('left');
-            var fixed = columns[i] ? columns[i].fixed || '' : '';
-            if (isFixedLeftColumn(fixed)) {
-                dom.style.left =
-                    i > 0 ? getPreviousLeftWidth(children, i, columns) + 'px' : '0';
-            }
-            else if (isFixedRightColumn(fixed)) {
-                dom.style.right =
-                    i < children.length - 1
-                        ? getAfterRightWidth(children, i, columns) + 'px'
-                        : '0';
-            }
-            dom.classList.remove(cx('Table-cell-fix-left-last'));
-            dom.classList.remove(cx('Table-cell-fix-right-first'));
-            dom.classList.remove(cx('Table-cell-fix-right-first-prev'));
-        }
-        // 最后一个左fixed的添加样式
-        var leftIndex = findLastIndex(columns, function (column) {
-            return isFixedLeftColumn(column.fixed);
-        });
-        if (leftIndex > -1) {
-            (_a = children[leftIndex]) === null || _a === void 0 ? void 0 : _a.classList.add(cx('Table-cell-fix-left-last'));
-        }
-        // 第一个右fixed的添加样式
-        var rightIndex = columns.findIndex(function (column) {
-            return isFixedRightColumn(column.fixed);
-        });
-        if (rightIndex > -1) {
-            (_b = children[rightIndex]) === null || _b === void 0 ? void 0 : _b.classList.add(cx('Table-cell-fix-right-first'));
-            if (rightIndex > 0) {
-                (_c = children[rightIndex - 1]) === null || _c === void 0 ? void 0 : _c.classList.add(cx('Table-cell-fix-right-first-prev'));
-            }
-        }
-    };
-    // 在可选、可展开、可拖拽的情况下，补充column，方便fix处理
-    Table.prototype.prependColumns = function (columns) {
-        var _a = this.props, rowSelection = _a.rowSelection, expandable = _a.expandable, draggable = _a.draggable;
-        if (draggable) {
-            columns.unshift({});
-        }
-        else {
-            if (expandable) {
-                columns.unshift(expandable);
-            }
-            if (rowSelection) {
-                columns.unshift(rowSelection);
-            }
-        }
-    };
-    Table.prototype.updateTheadFixedRow = function (thead, columns) {
-        var children = thead.children;
-        for (var i = 0; i < children.length; i++) {
-            var cols = __spreadArray([], __read(columns[i]), false);
-            if (i === 0) {
-                this.prependColumns(cols);
-            }
-            this.updateFixedRow(children[i], cols);
-        }
-    };
-    Table.prototype.updateTbodyFixedRow = function (tbody, columns) {
-        var cx = this.props.classnames;
-        var children = filter(tbody.children, function (child) {
-            return !child.classList.contains(cx('Table-summary-row')) &&
-                !child.classList.contains(cx('Table-empty-row'));
-        });
-        this.prependColumns(columns);
-        for (var i = 0; i < children.length; i++) {
-            this.updateFixedRow(children[i], columns);
-        }
-    };
-    Table.prototype.updateSummaryFixedRow = function (children, columns) {
-        for (var i = 0; i < children.length; i++) {
-            this.updateFixedRow(children[i], columns[i]);
-        }
-    };
-    Table.prototype.updateFootSummaryFixedRow = function (tfoot) {
-        var footSummary = this.props.footSummary;
-        if (Array.isArray(footSummary)) {
-            var columns = getSummaryColumns(footSummary);
-            this.updateSummaryFixedRow(tfoot.children, columns);
-        }
-    };
-    Table.prototype.updateHeadSummaryFixedRow = function (tbody) {
-        var _a = this.props, headSummary = _a.headSummary, cx = _a.classnames;
-        if (Array.isArray(headSummary)) {
-            var columns = getSummaryColumns(headSummary);
-            var children = filter(tbody.children, function (child) {
-                return child.classList.contains(cx('Table-summary-row'));
-            });
-            this.updateSummaryFixedRow(children, columns);
-        }
-    };
     Table.prototype.renderColGroup = function (showReal) {
-        var _a = this.props, scroll = _a.scroll, tableLayout = _a.tableLayout;
+        var _a = this.props, scroll = _a.scroll, tableLayout = _a.tableLayout, columns = _a.columns, rowSelection = _a.rowSelection, expandable = _a.expandable, draggable = _a.draggable;
         var isFixed = !!((scroll && scroll.x) || tableLayout === 'fixed');
-        return (React__default.createElement(ColGroup, { columns: this.tdColumns, colWidths: this.state.colWidths, isFixed: isFixed, syncTableWidth: this.syncTableWidth, initTableWidth: this.initTableWidth, showReal: showReal }));
+        return (React__default.createElement(ColGroup, { columns: columns, colWidths: this.state.colWidths, isFixed: isFixed, syncTableWidth: this.syncTableWidth, initTableWidth: this.initTableWidth, selectable: !!rowSelection, expandable: !!expandable, draggable: !!draggable, rowSelectionColumnWidth: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.columnWidth) || DefaultCellWidth, expandableColumnWidth: (expandable === null || expandable === void 0 ? void 0 : expandable.columnWidth) || DefaultCellWidth, isRightExpandable: this.isRightExpandable(), isLeftExpandable: this.isLeftExpandable(), showReal: showReal }));
     };
     Table.prototype.onResizeMouseDown = function (event, index) {
         // 点击记录起始坐标
@@ -494,7 +317,8 @@ var Table = /** @class */ (function (_super) {
         this.resizeTarget = event.currentTarget;
         var column = this.tdColumns[index];
         this.resizeIndex = index;
-        this.resizeWidth = this.state.colWidths[column.name].width;
+        var colWidth = this.state.colWidths[column.name];
+        this.resizeWidth = colWidth.width || colWidth.realWidth;
         this.resizeTarget.classList.add('is-resizing');
         document.addEventListener('mousemove', this.onResizeMouseMove);
         document.addEventListener('mouseup', this.onResizeMouseUp);
@@ -528,147 +352,60 @@ var Table = /** @class */ (function (_super) {
         this.resizeWidth = 0;
         delete this.resizeTarget;
     };
-    Table.prototype.renderTHead = function () {
+    Table.prototype.renderHead = function () {
         var _this = this;
-        var _a = this.props, rowSelection = _a.rowSelection, dataSource = _a.dataSource, cx = _a.classnames, onSort = _a.onSort, expandable = _a.expandable, draggable = _a.draggable, resizable = _a.resizable, onSelectAll = _a.onSelectAll, onFilter = _a.onFilter;
-        var thColumns = this.thColumns;
-        var tdColumns = this.tdColumns;
-        // 获取一行最多th个数
-        var maxCount = 0;
-        thColumns.forEach(function (columns) {
-            if (columns.length > maxCount) {
-                maxCount = columns.length;
-            }
-        });
-        var keyField = this.getRowSelectionKeyField();
+        var _a;
+        var _b = this.props, columns = _b.columns, cx = _b.classnames, classPrefix = _b.classPrefix, expandable = _b.expandable, rowSelection = _b.rowSelection, draggable = _b.draggable, resizable = _b.resizable, dataSource = _b.dataSource, onSort = _b.onSort, onSelectAll = _b.onSelectAll, onFilter = _b.onFilter;
+        var rowSelectionKeyField = this.getRowSelectionKeyField();
         var dataList = rowSelection && rowSelection.getCheckboxProps
             ? this.state.dataSource.filter(function (data, index) {
                 var props = rowSelection.getCheckboxProps(data, index);
                 return !props.disabled;
             })
             : this.state.dataSource;
-        var isExpandable = this.isExpandableTable();
-        var isLeftExpandable = this.isLeftExpandable();
-        var isRightExpandable = this.isRightExpandable();
-        var expandableCell = !draggable && isExpandable ? (React__default.createElement(Cell, { wrapperComponent: "th", rowSpan: thColumns.length, fixed: expandable && expandable.fixed ? 'left' : '', className: cx('Table-row-expand-icon-cell'), style: { width: ((expandable === null || expandable === void 0 ? void 0 : expandable.columnWidth) || DefaultCellWidth) + 'px' } })) : null;
-        var allRowKeys = [];
-        var allRows = [];
-        dataList.forEach(function (data) {
-            allRowKeys.push(data[keyField]);
-            allRows.push(data);
-            if (!expandable && _this.hasChildrenRow(data)) {
-                allRowKeys = __spreadArray(__spreadArray([], __read(allRowKeys), false), __read(_this.getDataChildrenKeys(data)), false);
-                data[_this.getChildrenColumnName()].forEach(function (item) {
-                    return allRows.push(item);
+        return (React__default.createElement(Head, { key: "thead", columns: columns, draggable: !!draggable, selectable: !!rowSelection, rowSelectionFixed: !!(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.fixed), rowSelectionType: rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type, selections: rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selections, rowSelectionKeyField: rowSelectionKeyField, maxSelectedLength: rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.maxSelectedLength, isExpandable: this.isExpandableTable(), isRightExpandable: this.isRightExpandable(), isLeftExpandable: this.isLeftExpandable(), selectedRowKeys: this.state.selectedRowKeys, dataSource: dataList, resizable: resizable, expandable: !!expandable, expandableFixed: expandable === null || expandable === void 0 ? void 0 : expandable.fixed, childrenColumnName: this.getChildrenColumnName(), orderBy: (_a = this.state.sort) === null || _a === void 0 ? void 0 : _a.orderBy, popOverContainer: this.getPopOverContainer, classnames: cx, classPrefix: classPrefix, onSort: function (payload, column) {
+                _this.setState({
+                    sort: payload
                 });
-            }
-        });
-        // 从renderers的table传来的数据 可能不在当前页 因此需要过滤一下
-        var selectedRowKeys = this.state.selectedRowKeys.filter(function (key) {
-            return allRowKeys.includes(key);
-        });
-        var restSelectedRowKeys = this.state.selectedRowKeys.filter(function (key) { return !allRowKeys.includes(key); });
-        var maxSelectedLength = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.maxSelectedLength;
-        if (maxSelectedLength && Number.isInteger(maxSelectedLength)) {
-            if (restSelectedRowKeys.length + allRowKeys.length > maxSelectedLength) {
-                var count = maxSelectedLength - restSelectedRowKeys.length;
-                allRowKeys = allRowKeys.slice(0, count);
-                allRows = allRows.slice(0, count);
-            }
-        }
-        return (React__default.createElement("thead", { ref: this.theadDom, className: cx('Table-thead') }, thColumns.map(function (data, index) {
-            return (React__default.createElement("tr", { key: 'th-cell-' + index },
-                draggable && index === 0 ? (React__default.createElement(Cell, { wrapperComponent: "th", rowSpan: thColumns.length, className: cx('Table-dragCell'), style: { width: DefaultCellWidth + 'px' }, col: "drag" })) : null,
-                !draggable && rowSelection && index === 0 ? (React__default.createElement(Cell, { wrapperComponent: "th", rowSpan: thColumns.length, fixed: rowSelection.fixed ? 'left' : '', className: cx('Table-checkCell'), style: {
-                        width: (rowSelection.columnWidth || DefaultCellWidth) + 'px'
-                    }, col: "select" }, rowSelection.type !== 'radio'
-                    ? [
-                        React__default.createElement(Checkbox, { key: "checkAll", partial: selectedRowKeys.length > 0 &&
-                                selectedRowKeys.length < allRowKeys.length, checked: selectedRowKeys.length > 0, onChange: function (value) { return __awaiter(_this, void 0, void 0, function () {
-                                var selectedRows, selectedRowKeys, prevented;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            selectedRows = value ? allRows : [];
-                                            selectedRowKeys = value ? allRowKeys : [];
-                                            if (!onSelectAll) return [3 /*break*/, 2];
-                                            return [4 /*yield*/, onSelectAll(selectedRows, value ? selectedRowKeys : [], value ? [] : selectedRows)];
-                                        case 1:
-                                            prevented = _a.sent();
-                                            if (prevented) {
-                                                return [2 /*return*/];
-                                            }
-                                            _a.label = 2;
-                                        case 2:
-                                            this.setState({
-                                                selectedRowKeys: __spreadArray(__spreadArray([], __read(selectedRowKeys), false), __read(restSelectedRowKeys // 更新数据要把非当前页的数据也加上
-                                                ), false)
-                                            });
-                                            return [2 /*return*/];
-                                    }
-                                });
-                            }); } }),
-                        rowSelection.selections &&
-                            rowSelection.selections.length > 0 ? (React__default.createElement(HeadCellSelect, { key: "checkSelection", keys: allRowKeys, selections: rowSelection.selections, popOverContainer: _this.getPopOverContainer })) : null
-                    ]
-                    : null)) : null,
-                isLeftExpandable && index === 0 ? expandableCell : null,
-                data.map(function (item, i) {
-                    var _a, _b, _c;
-                    var sort = null;
-                    if (item.sorter) {
-                        sort = (React__default.createElement(HeadCellSort, { column: item, active: !!((_a = _this.state.sort) === null || _a === void 0 ? void 0 : _a.orderBy) &&
-                                _this.state.sort.orderBy === (item === null || item === void 0 ? void 0 : item.name), onSort: function (payload) {
-                                _this.setState({
-                                    sort: payload
-                                });
-                                if (onSort) {
-                                    onSort(payload);
-                                }
-                                else {
-                                    if (typeof item.sorter === 'function') {
-                                        if (payload.orderBy) {
-                                            var sortList = __spreadArray([], __read(_this.state.dataSource), false);
-                                            _this.setState({
-                                                dataSource: sortList.sort(item.sorter)
-                                            });
-                                        }
-                                        else {
-                                            _this.setState({ dataSource: __spreadArray([], __read(dataSource), false) });
-                                        }
-                                    }
-                                }
-                            } }));
-                    }
-                    var filter = null;
-                    if (item.filterDropdown) {
-                        filter = item.filterDropdown;
-                    }
-                    else if (item.filters && item.filters.length > 0) {
-                        filter = (React__default.createElement(HeadCellFilter, { column: item, popOverContainer: _this.getPopOverContainer, onFilter: onFilter }));
+                if (onSort) {
+                    onSort(payload);
+                }
+                else {
+                    if (typeof column.sorter === 'function') {
+                        if (payload.orderBy) {
+                            var sortList = __spreadArray([], __read(_this.state.dataSource), false);
+                            _this.setState({
+                                dataSource: sortList.sort(column.sorter)
+                            });
+                        }
+                        else {
+                            _this.setState({ dataSource: __spreadArray([], __read(dataSource), false) });
+                        }
                     }
-                    // th的最后一行才可调整列宽
-                    // 分组情况下 最后一行才和列配置个数对应
-                    // 就可以根据index找到col 不依赖name
-                    var noChildren = !((_b = item.children) === null || _b === void 0 ? void 0 : _b.length);
-                    var cIndex = -1;
-                    if (noChildren) {
-                        // 根据name去tdColumns匹配出index
-                        // 没设置name的 那一定不是要绑定数据的列 一般都是分组的上层 也不会出现调整列宽
-                        cIndex = tdColumns.findIndex(function (c) { return c.name === item.name; });
+                }
+            }, onSelectAll: function (value, selectedRowKeys, selectedRows, restSelectedKeys) { return __awaiter(_this, void 0, void 0, function () {
+                var prevented, keys;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!onSelectAll) return [3 /*break*/, 2];
+                            return [4 /*yield*/, onSelectAll(selectedRows, value ? selectedRowKeys : [], value ? [] : selectedRows)];
+                        case 1:
+                            prevented = _a.sent();
+                            if (prevented) {
+                                return [2 /*return*/];
+                            }
+                            _a.label = 2;
+                        case 2:
+                            keys = __spreadArray(__spreadArray([], __read(selectedRowKeys), false), __read(restSelectedKeys // 更新数据要把非当前页的数据也加上
+                            ), false);
+                            if (!isEqual(keys, this.state.selectedRowKeys)) {
+                                this.setState({ selectedRowKeys: keys });
+                            }
+                            return [2 /*return*/];
                     }
-                    var children = !((_c = item.children) === null || _c === void 0 ? void 0 : _c.length) ? (React__default.createElement(React__default.Fragment, null,
-                        sort,
-                        filter,
-                        resizable ? (React__default.createElement("i", { className: cx('Table-thead-resizable'), onMouseDown: function (e) { return _this.onResizeMouseDown(e, cIndex); } })) : null)) : null;
-                    return (React__default.createElement(Cell, { wrapperComponent: "th", rowSpan: item.rowSpan, colSpan: item.colSpan, key: "cell-".concat(i), fixed: item.fixed === true ? 'left' : item.fixed, className: cx({
-                            'Table-cell-last': i === maxCount - 1 && i === data.length - 1
-                        }), groupId: item.groupId, depth: item.depth, col: cIndex > -1 ? cIndex.toString() : undefined }, typeof item.title === 'function'
-                        ? item.title(children)
-                        : item.title));
-                }),
-                isRightExpandable && index === 0 ? expandableCell : null));
-        })));
+                });
+            }); }, onFilter: onFilter, onResizeMouseDown: this.onResizeMouseDown.bind(this) }));
     };
     Table.prototype.onRowClick = function (event, record, rowIndex) {
         return __awaiter(this, void 0, void 0, function () {
@@ -696,6 +433,26 @@ var Table = /** @class */ (function (_super) {
             });
         });
     };
+    Table.prototype.onRowDbClick = function (event, record, rowIndex) {
+        return __awaiter(this, void 0, void 0, function () {
+            var onRow, prevented;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onRow = this.props.onRow;
+                        if (!(onRow && onRow.onRowDbClick)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, onRow.onRowDbClick(event, record, rowIndex)];
+                    case 1:
+                        prevented = _a.sent();
+                        if (prevented === false) {
+                            return [2 /*return*/];
+                        }
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
     Table.prototype.onRowMouseEnter = function (event, record, rowIndex) {
         return __awaiter(this, void 0, void 0, function () {
             var _a, onRow, itemActions, prevented, target;
@@ -771,204 +528,118 @@ var Table = /** @class */ (function (_super) {
         var _a = this.props, expandable = _a.expandable, keyField = _a.keyField;
         return (expandable === null || expandable === void 0 ? void 0 : expandable.keyField) || keyField || 'key';
     };
-    Table.prototype.hasChildrenRow = function (data) {
-        var key = this.getChildrenColumnName();
-        return data[key] && Array.isArray(data[key]) && data[key].length > 0;
-    };
-    // 展开和嵌套不能共存
-    Table.prototype.isExpandableRow = function (data, rowIndex) {
-        var expandable = this.props.expandable;
-        return (expandable &&
-            (!expandable.rowExpandable ||
-                (expandable.rowExpandable && expandable.rowExpandable(data, rowIndex))));
-    };
-    // 获取当前行数据所有子行的key值
-    Table.prototype.getDataChildrenKeys = function (data) {
-        var _this = this;
-        var keys = [];
-        if (this.hasChildrenRow(data)) {
-            var key = this.getChildrenColumnName();
-            data[key].forEach(function (item) {
-                return (keys = __spreadArray(__spreadArray(__spreadArray([], __read(keys), false), __read(_this.getDataChildrenKeys(item)), false), [
-                    item[_this.getRowSelectionKeyField()]
-                ], false));
-            });
-        }
-        return keys;
-    };
-    Table.prototype.hasCheckedRows = function (data) {
-        var selectedRowKeys = this.state.selectedRowKeys;
-        var childrenKeys = this.getDataChildrenKeys(data);
-        return (intersection(selectedRowKeys, __spreadArray(__spreadArray([], __read(childrenKeys), false), [
-            data[this.getRowSelectionKeyField()]
-        ], false)).length > 0);
-    };
     Table.prototype.hasCheckedChildrenRows = function (data) {
         var selectedRowKeys = this.state.selectedRowKeys;
-        var childrenKeys = this.getDataChildrenKeys(data);
+        var childrenColumnName = this.getChildrenColumnName();
+        var rowSelectionKeyField = this.getRowSelectionKeyField();
+        var childrenKeys = getDataChildrenKeys(data, childrenColumnName, rowSelectionKeyField);
         var length = intersection(selectedRowKeys, childrenKeys).length;
         return length > 0;
     };
-    Table.prototype.isExpanded = function (record) {
-        var _this = this;
-        return !!find(this.state.expandedRowKeys, function (key) { return key == record[_this.getExpandableKeyField()]; }); // == 匹配 否则'3'、3匹配不上
-    };
-    Table.prototype.getExpandedIcons = function (record) {
-        var cx = this.props.classnames;
-        return this.isExpanded(record) ? (React__default.createElement("i", { className: cx('Table-expandBtn', 'is-active'), onClick: this.onCollapseRows.bind(this, [record]) },
-            React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" }))) : (React__default.createElement("i", { className: cx('Table-expandBtn'), onClick: this.onExpandRows.bind(this, [record]) },
-            React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" })));
+    Table.prototype.getSelectedRowKeys = function (isSelected, data) {
+        var rowSelection = this.props.rowSelection;
+        var rowSelectionKeyField = this.getRowSelectionKeyField();
+        var childrenColumnName = this.getChildrenColumnName();
+        var isRadio = rowSelection && rowSelection.type === 'radio';
+        var selected = [];
+        if (isSelected) {
+            if (isRadio) {
+                selected = [data[rowSelectionKeyField]];
+            }
+            else {
+                selected = __spreadArray(__spreadArray(__spreadArray([], __read(this.state.selectedRowKeys), false), [
+                    data[rowSelectionKeyField]
+                ], false), __read(getDataChildrenKeys(data, childrenColumnName, rowSelectionKeyField)), false).filter(function (key, i, a) { return a.indexOf(key) === i; });
+            }
+        }
+        else {
+            if (!isRadio) {
+                selected = this.state.selectedRowKeys.filter(function (key) {
+                    return !__spreadArray([
+                        data[rowSelectionKeyField]
+                    ], __read(getDataChildrenKeys(data, childrenColumnName, rowSelectionKeyField)), false).includes(key);
+                });
+            }
+        }
+        return selected;
     };
     Table.prototype.selectedSingleRow = function (value, data) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, rowSelection, onSelect, defaultKey, isRadio, selectedRowKeys, selectedResult, prevented;
-            var _this = this;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var onSelect, selectedRowKeys, rowSelectionKeyField, childrenColumnName, selectedResult, prevented;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        _a = this.props, rowSelection = _a.rowSelection, onSelect = _a.onSelect;
-                        defaultKey = this.getRowSelectionKeyField();
-                        isRadio = rowSelection && rowSelection.type === 'radio';
-                        selectedRowKeys = [];
-                        if (value) {
-                            if (isRadio) {
-                                selectedRowKeys = [data[defaultKey]];
-                            }
-                            else {
-                                selectedRowKeys = __spreadArray(__spreadArray(__spreadArray([], __read(this.state.selectedRowKeys), false), [
-                                    data[defaultKey]
-                                ], false), __read(this.getDataChildrenKeys(data)), false).filter(function (key, i, a) { return a.indexOf(key) === i; });
-                            }
-                        }
-                        else {
-                            if (!isRadio) {
-                                selectedRowKeys = this.state.selectedRowKeys.filter(function (key) {
-                                    return !__spreadArray([data[defaultKey]], __read(_this.getDataChildrenKeys(data)), false).includes(key);
-                                });
-                            }
-                        }
+                        onSelect = this.props.onSelect;
+                        selectedRowKeys = this.getSelectedRowKeys(value, data);
                         if (!onSelect) return [3 /*break*/, 2];
-                        selectedResult = this.getSelectedRows(this.state.dataSource, selectedRowKeys);
+                        rowSelectionKeyField = this.getRowSelectionKeyField();
+                        childrenColumnName = this.getChildrenColumnName();
+                        selectedResult = getSelectedRows(this.state.dataSource, selectedRowKeys, rowSelectionKeyField, childrenColumnName);
                         return [4 /*yield*/, onSelect(selectedResult.selectedRows, selectedRowKeys, selectedResult.unSelectedRows)];
                     case 1:
-                        prevented = _b.sent();
+                        prevented = _a.sent();
                         if (prevented) {
                             return [2 /*return*/];
                         }
-                        _b.label = 2;
+                        _a.label = 2;
                     case 2:
-                        this.setState({ selectedRowKeys: selectedRowKeys });
+                        if (!isEqual(this.state.selectedRowKeys, selectedRowKeys)) {
+                            this.setState({ selectedRowKeys: selectedRowKeys });
+                        }
                         return [2 /*return*/];
                 }
             });
         });
     };
+    // 展开和嵌套不能共存
+    Table.prototype.isExpandableRow = function (data, rowIndex) {
+        var expandable = this.props.expandable;
+        return (expandable &&
+            (!expandable.rowExpandable ||
+                (expandable.rowExpandable && expandable.rowExpandable(data, rowIndex))));
+    };
+    Table.prototype.isExpanded = function (record) {
+        var expandableKeyField = this.getExpandableKeyField();
+        return !!find(this.state.expandedRowKeys, function (key) { return key == record[expandableKeyField]; }); // == 匹配 否则'3'、3匹配不上
+    };
     Table.prototype.renderRow = function (data, rowIndex, levels) {
         var _this = this;
-        var _a = this.props, cx = _a.classnames, rowSelection = _a.rowSelection, expandable = _a.expandable, draggable = _a.draggable, indentSize = _a.indentSize, rowClassName = _a.rowClassName, keyField = _a.keyField, lineHeight = _a.lineHeight // 是否设置了固定行高
-        ;
-        var tdColumns = this.tdColumns;
-        var isExpandable = this.isExpandableTable();
-        var defaultKey = this.getRowSelectionKeyField();
-        var colCount = this.getExtraColumnCount();
-        var isLeftExpandable = this.isLeftExpandable();
-        var isRightExpandable = this.isRightExpandable();
+        var _a = this.props, rowSelection = _a.rowSelection, expandable = _a.expandable, indentSize = _a.indentSize, lineHeight = _a.lineHeight, draggable = _a.draggable, rowClassName = _a.rowClassName, keyField = _a.keyField, columns = _a.columns, classPrefix = _a.classPrefix, cx = _a.classnames;
+        var rowSelectionKeyField = this.getRowSelectionKeyField();
+        var isChecked = !!find(this.state.selectedRowKeys, function (key) { return key === data[rowSelectionKeyField]; });
+        var childrenColumnName = this.getChildrenColumnName();
         // 当前行是否可展开
         var isExpandableRow = this.isExpandableRow(data, rowIndex);
-        // 当前行是否有children
-        var hasChildrenRow = this.hasChildrenRow(data);
-        var isExpanded = this.isExpanded(data);
-        // 设置缩进效果
-        var indentDom = levels.length > 0 ? (React__default.createElement("span", { className: cx('Table-row-indent', "indent-level-".concat(levels.length)), style: levels.length > 0 ? { width: indentSize * levels.length + 'px' } : {} })) : null;
-        var cells = tdColumns.map(function (item, i) {
-            var _a, _b;
-            // 为了支持灵活合并单元格，renderers层的Table2传递的render方法，返回{children: <ReactElement>, props: {rowSpan, colSpan}}
-            // 但直接使用amis-ui的table，render方法一般直接返回ReactElement
-            var render = item.render && typeof item.render === 'function'
-                ? item.render(data[item.name], data, rowIndex, i, levels)
-                : null;
-            var props = { rowSpan: 1, colSpan: 1 };
-            var children = render;
-            if (render && !React__default.isValidElement(render) && isObject(render)) {
-                if (render.props) {
-                    props = render.props;
-                }
-                children = render.children;
-                // 如果合并行 且有展开行，那么合并行不生效
-                if (props.rowSpan > 1 && isExpandableRow && hasChildrenRow) {
-                    props.rowSpan === 1;
-                }
-            }
-            var className = typeof item.className === 'function'
-                ? item.className(data, rowIndex)
-                : '';
-            return props.rowSpan === 0 || props.colSpan === 0 ? null : (React__default.createElement(Cell, __assign({ key: i }, props, { fixed: item.fixed === true ? 'left' : item.fixed, column: item, groupId: item.groupId, className: cx((_a = {},
-                    _a["".concat(className)] = !!className,
-                    _a)), col: i > -1 ? i.toString() : undefined }),
-                React__default.createElement("div", { className: cx('Table-cell-wrapper', (_b = {},
-                        _b[cx('Table-cell-wrapper-prefix')] = i === 0 &&
-                            (!!indentDom || (levels.length === 0 && hasChildrenRow)),
-                        _b[cx("Table-cell-height-".concat(lineHeight))] = !!lineHeight,
-                        _b)) },
-                    i === 0 && levels.length > 0 ? indentDom : null,
-                    i === 0 && hasChildrenRow ? _this.getExpandedIcons(data) : null,
-                    render ? children : data[item.name])));
-        });
-        var rowClassNameClass = rowClassName && typeof rowClassName === 'function'
-            ? rowClassName(data, rowIndex)
-            : '';
-        // 可展开和嵌套不能同时支持
-        // 设置了expandable 数据源里有children也就不生效了
-        // 拖拽排序 可选、可展开都先不支持了，可以支持嵌套展示
-        var checkboxProps = rowSelection && rowSelection.getCheckboxProps
-            ? rowSelection.getCheckboxProps(data, rowIndex)
-            : {};
+        var hasChildrenRow = checkChildrenRow(data, childrenColumnName);
+        var hasChildrenChecked = !!rowSelection && hasChildrenRow && this.hasCheckedChildrenRows(data);
         var expandedRowClassName = expandable &&
             expandable.expandedRowClassName &&
             typeof expandable.expandedRowClassName === 'function'
             ? expandable.expandedRowClassName(data, rowIndex)
             : '';
-        var dataKey = this.getChildrenColumnName();
-        var children = !draggable && isExpandableRow && isExpanded ? (React__default.createElement("tr", { key: "expanded", className: cx('Table-expanded-row', expandedRowClassName) },
-            React__default.createElement(Cell, { colSpan: tdColumns.length + colCount }, expandable &&
-                expandable.expandedRowRender &&
-                typeof expandable.expandedRowRender === 'function'
-                ? expandable.expandedRowRender(data, rowIndex)
-                : null))) : this.hasChildrenRow(data) && isExpanded ? (data[dataKey].map(function (item, index) {
-            return _this.renderRow(item, index, __spreadArray(__spreadArray([], __read(levels), false), [rowIndex], false));
-        })) : null;
-        var isChecked = !!find(this.state.selectedRowKeys, function (key) { return key === data[defaultKey]; });
-        var hasChildrenChecked = this.hasCheckedChildrenRows(data);
-        var isRadio = rowSelection && rowSelection.type === 'radio';
-        var expandableCell = !draggable && isExpandable ? (React__default.createElement(Cell, { fixed: expandable && expandable.fixed
-                ? isRightExpandable
-                    ? 'right'
-                    : 'left'
-                : '', className: cx('Table-cell-expand-icon-cell') }, isExpandableRow || hasChildrenRow
-            ? this.getExpandedIcons(data)
-            : null)) : null;
+        var isExpanded = this.isExpanded(data);
+        var checkboxProps = rowSelection && rowSelection.getCheckboxProps
+            ? rowSelection.getCheckboxProps(data, rowIndex)
+            : {};
+        var children = !expandable && childrenColumnName && hasChildrenRow && isExpanded
+            ? data[childrenColumnName].map(function (item, index) {
+                return _this.renderRow(item, index, __spreadArray(__spreadArray([], __read(levels), false), [rowIndex], false));
+            })
+            : null;
         return [
-            React__default.createElement("tr", { key: "".concat(data[keyField || 'key'] || rowIndex), "row-index": rowIndex, "row-levels": levels.join(','), className: cx('Table-row', "Table-row-level-".concat(levels.length), rowClassNameClass, {
-                    'Table-row-disabled': !!checkboxProps.disabled
-                }), onMouseEnter: function (e) { return _this.onRowMouseEnter(e, data, rowIndex); }, onMouseLeave: function (e) { return _this.onRowMouseLeave(e, data, rowIndex); }, onClick: function (e) { return _this.onRowClick(e, data, rowIndex); } },
-                draggable ? (React__default.createElement(Cell, { className: cx('Table-dragCell') },
-                    React__default.createElement(Icon, { icon: "drag-bar", className: "icon" }))) : null,
-                !draggable && rowSelection ? (React__default.createElement(Cell, { fixed: rowSelection.fixed ? 'left' : '', className: cx('Table-checkCell') },
-                    React__default.createElement(Checkbox, __assign({ name: 'Table-checkbox', type: rowSelection.type || 'checkbox', partial: !isRadio && hasChildrenChecked && !isChecked, checked: isRadio ? isChecked : hasChildrenChecked || isChecked, onChange: function (value) {
-                            if (!(rowSelection && rowSelection.rowClick)) {
-                                _this.selectedSingleRow(value, data);
-                            }
-                            event && event.stopPropagation();
-                        } }, checkboxProps)))) : null,
-                isLeftExpandable ? expandableCell : null,
-                cells,
-                isRightExpandable ? expandableCell : null),
+            React__default.createElement(BodyRow, __assign({ key: "row-".concat(rowIndex), data: data, rowIndex: rowIndex, levels: levels.join(','), columns: columns, selectable: !!rowSelection, rowSelectionFixed: !!(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.fixed), rowSelectionType: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) || 'checkbox', expandable: !!expandable, expandableFixed: expandable === null || expandable === void 0 ? void 0 : expandable.fixed, expandedRowClassName: expandedRowClassName, expandedRowRender: expandable === null || expandable === void 0 ? void 0 : expandable.expandedRowRender, isExpanded: isExpanded, hasChildrenRow: hasChildrenRow, hasChildrenChecked: hasChildrenChecked, indentSize: indentSize, lineHeight: lineHeight, draggable: !!draggable, isExpandable: this.isExpandableTable(), isExpandableRow: isExpandableRow, colCount: this.getExtraColumnCount(), isRightExpandable: this.isRightExpandable(), isLeftExpandable: this.isLeftExpandable(), isChecked: isChecked, rowClassName: rowClassName, onExpand: this.onExpandRows, onCollapse: this.onCollapseRows, onMouseEnter: this.onRowMouseEnter, onMouseLeave: this.onRowMouseLeave, onClick: this.onRowClick, onDoubleClick: this.onRowDbClick, onChange: this.onRowChange, childrenColumnName: this.getChildrenColumnName(), keyField: keyField, classnames: cx, classPrefix: classPrefix }, checkboxProps)),
             children
         ];
     };
-    Table.prototype.renderTBody = function () {
+    Table.prototype.onRowChange = function (value, record) {
+        var rowSelection = this.props.rowSelection;
+        if (!(rowSelection && rowSelection.rowClick)) {
+            this.selectedSingleRow(value, record);
+        }
+    };
+    Table.prototype.renderBody = function () {
         var _this = this;
-        var _a = this.props, cx = _a.classnames, headSummary = _a.headSummary, scroll = _a.scroll, placeholder = _a.placeholder, sticky = _a.sticky, loading = _a.loading, loadingConfig = _a.loadingConfig;
+        var _a = this.props, cx = _a.classnames, headSummary = _a.headSummary, scroll = _a.scroll, placeholder = _a.placeholder, sticky = _a.sticky, loading = _a.loading, loadingConfig = _a.loadingConfig, classPrefix = _a.classPrefix;
         var tdColumns = this.tdColumns;
         var hasScrollY = scroll && scroll.y;
         var colCount = this.getExtraColumnCount();
@@ -977,9 +648,9 @@ var Table = /** @class */ (function (_super) {
                 ? this.renderSummaryRow(headSummary)
                 : null,
             !!loading ? (React__default.createElement("tr", { className: cx('Table-row', 'Table-loading-row') },
-                React__default.createElement(Cell, { colSpan: tdColumns.length + colCount },
+                React__default.createElement(BodyCell, { classnames: cx, classPrefix: classPrefix, colSpan: tdColumns.length + colCount },
                     React__default.createElement("div", { className: cx('Table-loading') }, typeof loading === 'boolean' ? (React__default.createElement(Spinner, { overlay: true, show: loading, loadingConfig: loadingConfig })) : React__default.isValidElement(loading) ? (loading) : null)))) : !this.state.dataSource.length ? (React__default.createElement("tr", { className: cx('Table-row', 'Table-empty-row') },
-                React__default.createElement(Cell, { colSpan: tdColumns.length + colCount },
+                React__default.createElement(BodyCell, { classnames: cx, classPrefix: classPrefix, colSpan: tdColumns.length + colCount },
                     React__default.createElement("div", { className: cx('Table-empty') }, typeof placeholder === 'function'
                         ? placeholder()
                         : placeholder)))) : (this.state.dataSource.map(function (data, index) {
@@ -997,16 +668,11 @@ var Table = /** @class */ (function (_super) {
         var expandable = this.props.expandable;
         return expandable && expandable.position === 'right';
     };
-    // 展开列放到左侧
+    // 展开列放到左侧 还有一种情况是position为none 无展开按钮
     Table.prototype.isLeftExpandable = function () {
         var expandable = this.props.expandable;
         return (expandable && (!expandable.position || expandable.position === 'left'));
     };
-    Table.prototype.isNestedTable = function () {
-        var _this = this;
-        var dataSource = this.props.dataSource;
-        return !!find(dataSource, function (item) { return _this.hasChildrenRow(item); });
-    };
     // 计算自动增加的列数
     // 选择、拖拽、展开
     Table.prototype.getExtraColumnCount = function () {
@@ -1026,46 +692,18 @@ var Table = /** @class */ (function (_super) {
         return count;
     };
     Table.prototype.renderSummaryRow = function (summary) {
-        var _this = this;
-        var _a = this.props, cx = _a.classnames, dataSource = _a.dataSource;
-        var cells = [];
-        var trs = [];
-        var colCount = this.getExtraColumnCount();
-        var isRightExpandable = this.isRightExpandable() ? 1 : 0;
-        Array.isArray(summary)
-            ? summary.forEach(function (s, index) {
-                Array.isArray(s)
-                    ? trs.push(React__default.createElement("tr", { onMouseEnter: function (e) { return _this.onRowMouseEnter(e); }, onMouseLeave: function (e) { return _this.onRowMouseLeave(e); }, key: 'summary-tr-' + index, className: cx('Table-summary-row') }, s.map(function (d, i) {
-                        // 将操作列自动添加到第一列，用户的colSpan只需要关心实际的列数
-                        var colSpan = i === 0
-                            ? (d.colSpan || 1) + colCount - isRightExpandable
-                            : i === s.length - 1
-                                ? (d.colSpan || 1) + isRightExpandable
-                                : d.colSpan;
-                        return (React__default.createElement(Cell, { key: 'summary-tr-cell-' + i, fixed: d.fixed, colSpan: colSpan }, typeof d.render === 'function'
-                            ? d.render(dataSource)
-                            : d.render));
-                    })))
-                    : cells.push(React__default.createElement(Cell, { key: 'summary-cell-' + index, fixed: s.fixed, colSpan: cells.length === 0
-                            ? (s.colSpan || 1) + colCount - isRightExpandable
-                            : index === summary.length - 1
-                                ? (s.colSpan || 1) + isRightExpandable
-                                : s.colSpan }, typeof s.render === 'function'
-                        ? s.render(dataSource)
-                        : s.render));
-            })
-            : null;
-        return summary
-            ? typeof summary === 'function'
-                ? summary(dataSource)
-                : __spreadArray([
-                    cells.length > 0 ? (React__default.createElement("tr", { onMouseEnter: function (e) { return _this.onRowMouseEnter(e); }, onMouseLeave: function (e) { return _this.onRowMouseLeave(e); }, key: "summary-row", className: cx('Table-summary-row') }, cells)) : null
-                ], __read(trs), false)
-            : null;
+        var _a = this.props, cx = _a.classnames, classPrefix = _a.classPrefix;
+        if (typeof summary === 'function') {
+            return summary(this.state.dataSource);
+        }
+        if (React__default.isValidElement(summary)) {
+            return summary;
+        }
+        return (React__default.createElement(SummaryRows, { summary: summary, colCount: this.getExtraColumnCount(), isRightExpandable: this.isRightExpandable(), classnames: cx, classPrefix: classPrefix, dataSource: this.state.dataSource, onMouseEnter: this.onRowMouseEnter, onMouseLeave: this.onRowMouseLeave }));
     };
-    Table.prototype.renderTFoot = function () {
+    Table.prototype.renderFoot = function () {
         var _a = this.props, cx = _a.classnames, footSummary = _a.footSummary;
-        return (React__default.createElement("tfoot", { ref: this.tfootDom, className: cx('Table-summary') }, this.renderSummaryRow(footSummary)));
+        return (React__default.createElement("tfoot", { className: cx('Table-summary') }, this.renderSummaryRow(footSummary)));
     };
     Table.prototype.updateTableDom = function (dom) {
         var cx = this.props.classnames;
@@ -1117,15 +755,15 @@ var Table = /** @class */ (function (_super) {
         var tableStyle = hasScrollX
             ? { width: scroll.x + 'px', tableLayout: 'fixed' }
             : {};
-        return (React__default.createElement("div", { ref: this.contentDom, className: cx('Table-content'), style: hasScrollX ? { overflow: 'auto hidden' } : {}, onMouseLeave: this.onMouseLeave.bind(this), onScroll: this.onTableContentScroll.bind(this) },
+        return (React__default.createElement("div", { ref: this.contentDom, className: cx('Table-content'), style: hasScrollX ? { overflow: 'auto hidden' } : {}, onMouseLeave: this.onMouseLeave, onScroll: this.onTableContentScroll.bind(this) },
             itemActions && hoverRow ? (React__default.createElement(ItemActionsWrapper, { dom: hoverRow.target, classnames: cx }, typeof itemActions === 'function'
                 ? itemActions(hoverRow.record, hoverRow.rowIndex)
                 : null)) : null,
             React__default.createElement("table", { style: __assign(__assign({}, tableStyle), { tableLayout: tableLayout === 'fixed' ? 'fixed' : 'auto' }), className: cx('Table-table') },
                 this.renderColGroup(),
-                showHeader ? this.renderTHead() : null,
-                this.renderTBody(),
-                footSummary ? this.renderTFoot() : null)));
+                showHeader ? this.renderHead() : null,
+                this.renderBody(),
+                footSummary ? this.renderFoot() : null)));
     };
     Table.prototype.renderScrollTableHeader = function () {
         var _a;
@@ -1145,7 +783,7 @@ var Table = /** @class */ (function (_super) {
                 _a)), style: style },
             React__default.createElement("table", { className: cx('Table-table'), style: __assign(__assign({}, tableStyle), { tableLayout: 'fixed' }) },
                 this.renderColGroup(true),
-                showHeader ? this.renderTHead() : null,
+                showHeader ? this.renderHead() : null,
                 headSummary ? (React__default.createElement("tbody", null, this.renderSummaryRow(headSummary))) : null)));
     };
     Table.prototype.renderScrollTableBody = function () {
@@ -1162,22 +800,22 @@ var Table = /** @class */ (function (_super) {
             });
         }
         var hoverRow = this.state.hoverRow;
-        return (React__default.createElement("div", { ref: this.contentDom, className: cx('Table-body'), style: style, onMouseLeave: this.onMouseLeave.bind(this), onScroll: this.onTableScroll.bind(this) },
+        return (React__default.createElement("div", { ref: this.contentDom, className: cx('Table-body'), style: style, onMouseLeave: this.onMouseLeave, onScroll: this.onTableScroll },
             itemActions && hoverRow ? (React__default.createElement(ItemActionsWrapper, { dom: hoverRow.target, classnames: cx }, typeof itemActions === 'function'
                 ? itemActions(hoverRow.record, hoverRow.rowIndex)
                 : null)) : null,
             React__default.createElement("table", { className: cx('Table-table'), style: __assign(__assign({}, tableStyle), { tableLayout: 'fixed' }) },
                 this.renderColGroup(),
-                this.renderTBody())));
+                this.renderBody())));
     };
     Table.prototype.renderScrollTableFoot = function () {
         var _a = this.props, scroll = _a.scroll, cx = _a.classnames;
         return (React__default.createElement("div", { ref: this.footDom, className: cx('Table-summary'), style: { overflow: 'hidden' } },
-            React__default.createElement("table", { className: cx('Table-table'), style: { width: (scroll === null || scroll === void 0 ? void 0 : scroll.x) + 'px' || '100%', tableLayout: 'fixed' } }, this.renderTFoot())));
+            React__default.createElement("table", { className: cx('Table-table'), style: { width: (scroll === null || scroll === void 0 ? void 0 : scroll.x) + 'px' || '100%', tableLayout: 'fixed' } }, this.renderFoot())));
     };
     Table.prototype.renderScrollTable = function () {
         var _a = this.props, footSummary = _a.footSummary, cx = _a.classnames;
-        return (React__default.createElement("div", { className: cx('Table-container') },
+        return (React__default.createElement("div", { className: cx('Table-container'), ref: this.containerDom },
             this.renderScrollTableHeader(),
             this.renderScrollTableBody(),
             footSummary ? this.renderScrollTableFoot() : null));
@@ -1209,15 +847,19 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.initTableWidth = function () {
         var _this = this;
-        var _a;
         var tableWrapperDom = this.contentDom.current;
         if (!tableWrapperDom) {
             return;
         }
-        var _b = this.props, scroll = _b.scroll, tableLayout = _b.tableLayout;
+        var _a = this.props, scroll = _a.scroll, tableLayout = _a.tableLayout;
         var table = tableWrapperDom.querySelector('table');
+        var thead = tableWrapperDom.querySelector('thead');
+        if (!thead) {
+            if (this.headerDom.current) {
+                thead = this.headerDom.current.querySelector('thead');
+            }
+        }
         var tableWidth = scroll && scroll.x ? scroll.x : tableWrapperDom.offsetWidth;
-        var thead = (_a = this.theadDom) === null || _a === void 0 ? void 0 : _a.current;
         var tbody = null;
         var htmls = [];
         var isFixed = tableLayout === 'fixed' || (scroll && scroll.x);
@@ -1295,16 +937,15 @@ var Table = /** @class */ (function (_super) {
         if (this.resizeTarget) {
             return;
         }
+        this.syncTableWidth();
         this.initTableWidth();
     };
     Table.prototype.render = function () {
         var _a;
         var _b = this.props, title = _b.title, footer = _b.footer, className = _b.className, scroll = _b.scroll, size = _b.size, bordered = _b.bordered, resizable = _b.resizable, columns = _b.columns, sticky = _b.sticky, cx = _b.classnames;
-        // 过滤掉设置了breakpoint属性的列
-        var filterColumns = columns.filter(function (item) { return !item.breakpoint || !isBreakpoint(item.breakpoint); });
-        this.thColumns = [];
-        this.tdColumns = [];
-        buildColumns(filterColumns, this.thColumns, this.tdColumns, getMaxLevelThRowSpan(filterColumns));
+        var _c = getBuildColumns(columns), thColumns = _c.thColumns, tdColumns = _c.tdColumns;
+        this.thColumns = thColumns;
+        this.tdColumns = tdColumns;
         // 是否设置了纵向滚动
         var hasScrollY = scroll && scroll.y;
         // 是否设置了横向滚动
@@ -1316,7 +957,7 @@ var Table = /** @class */ (function (_super) {
                 _a[cx('Table-resizable')] = resizable,
                 _a)) },
             title ? (React__default.createElement("div", { className: cx('Table-title') }, typeof title === 'function' ? title() : title)) : null,
-            hasScrollY || sticky ? (this.renderScrollTable()) : (React__default.createElement("div", { className: cx('Table-container') }, this.renderTable())),
+            hasScrollY || sticky ? (this.renderScrollTable()) : (React__default.createElement("div", { className: cx('Table-container'), ref: this.containerDom }, this.renderTable())),
             footer ? (React__default.createElement("div", { className: cx('Table-footer') }, typeof footer === 'function' ? footer() : footer)) : null));
     };
     Table.defaultProps = {
@@ -1335,6 +976,12 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", []),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "getPopOverContainer", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "updateAutoFillHeight", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),
@@ -1347,6 +994,60 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [MouseEvent]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "onResizeMouseUp", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Number]),
+        __metadata("design:returntype", Promise)
+    ], Table.prototype, "onRowClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Number]),
+        __metadata("design:returntype", Promise)
+    ], Table.prototype, "onRowDbClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Number]),
+        __metadata("design:returntype", Promise)
+    ], Table.prototype, "onRowMouseEnter", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Number]),
+        __metadata("design:returntype", Promise)
+    ], Table.prototype, "onRowMouseLeave", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "onMouseLeave", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "onExpandRows", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "onCollapseRows", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Boolean, Object]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "onRowChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "onTableScroll", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),
@@ -1369,4 +1070,4 @@ var Table = /** @class */ (function (_super) {
 }(React__default.PureComponent));
 var index = themeable(localeable(Table));
 
-export { Table, index as default };
+export { DefaultCellWidth, Table, index as default };