@hi-ui/table 4.0.13 → 4.1.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @hi-ui/table
 
+## 4.1.0-beta.1
+
+### Patch Changes
+
+- 优化 setting 设置
+
+## 4.1.0-beta.0
+
+### Minor Changes
+
+- 094ff4861: rowSelection onChange 回调增加已选数据集合参数
+- 增加虚拟滚动功能
+- f74da3dc8: 增加 dataSource 功能
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - @hi-ui/spinner@4.0.5-beta.0
+  - @hi-ui/loading@4.1.0-beta.0
+  - @hi-ui/select@4.0.10-beta.0
+  - @hi-ui/pagination@4.0.9-beta.0
+
 ## 4.0.13
 
 ### Patch Changes

package/lib/cjs/BaseTable.js

@@ -92,7 +92,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       _a$fixedColumnTrigger = _a.fixedColumnTrigger,
       fixedColumnTrigger = _a$fixedColumnTrigger === void 0 ? 'auto' : _a$fixedColumnTrigger,
       emptyContent = _a.emptyContent,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent"]);
+      virtual = _a.virtual,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual"]);
 
   var _useEmbedExpand = useEmbedExpand.useEmbedExpand({
     defaultExpandedEmbedRowKeys: defaultExpandedEmbedRowKeys,
@@ -192,7 +193,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   });
   var providedValue = useTable.useTable(Object.assign(Object.assign({}, rest), {
     columns: mergedColumns,
-    data: data
+    data: data,
+    virtual: virtual
   }));
   var rootProps = providedValue.rootProps,
       bordered = providedValue.bordered,
@@ -206,7 +208,7 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var extraHeader = extra && extra.header;
   var extraFooter = extra && extra.footer;
   var alwaysFixedColumn = fixedColumnTrigger === 'always';
-  var cls = classname.cx(prefixCls, className, hasBorder && prefixCls + "--bordered", striped && prefixCls + "--striped", size && prefixCls + "--size-" + size);
+  var cls = classname.cx(prefixCls, className, hasBorder && prefixCls + "--bordered", striped && prefixCls + "--striped", size && prefixCls + "--size-" + size, virtual && prefixCls + "--virtual");
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     role: role,
@@ -226,7 +228,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       avgRow: avgRow,
       hasAvgColumn: hasAvgColumn,
       sumRow: sumRow,
-      hasSumColumn: hasSumColumn
+      hasSumColumn: hasSumColumn,
+      virtual: virtual
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default["default"].createElement(TableHeader.TableHeader, {
     prefixCls: prefixCls + "-header"

package/lib/cjs/Table.js

@@ -89,7 +89,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       _a$standard = _a.standard,
       standard = _a$standard === void 0 ? false : _a$standard,
       _a$loading = _a.loading,
-      loading = _a$loading === void 0 ? false : _a$loading,
+      loadingProp = _a$loading === void 0 ? false : _a$loading,
       dataSource = _a.dataSource,
       paginationProp = _a.pagination,
       uniqueId = _a.uniqueId,
@@ -104,7 +104,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       extra = _a.extra,
       _a$data = _a.data,
       data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
-      rest = tslib.__rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "rowSelection", "fieldKey", "extra", "data"]);
+      virtual = _a.virtual,
+      rest = tslib.__rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "rowSelection", "fieldKey", "extra", "data", "virtual"]);
 
   var tableProps = reactUtils.withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);
 
@@ -156,15 +157,24 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
    */
 
   var _useTablePagination = usePagination.useTablePagination({
+    loadingProp: loadingProp,
     pagination: pagination,
     data: data,
     dataSource: dataSource
   }),
+      loading = _useTablePagination.loading,
       mergedData = _useTablePagination.mergedData,
       currentPage = _useTablePagination.currentPage,
-      trySetCurrentPage = _useTablePagination.trySetCurrentPage; // 优化数据在第一页且数据一页内时，不展示 pagination 配置项
+      trySetCurrentPage = _useTablePagination.trySetCurrentPage,
+      pageSize = _useTablePagination.pageSize,
+      trySetPageSize = _useTablePagination.trySetPageSize,
+      total = _useTablePagination.total; // 可能是从 dataSource 中拿到的 total 值，在此更新该值
 
 
+  pagination = Object.assign(Object.assign({}, pagination), {
+    total: total
+  }); // 优化数据在第一页且数据一页内时，不展示 pagination 配置项
+
   var hiddenPagination = !paginationProp || pagination.autoHide && currentPage === 1 && typeof pagination.pageSize === 'number' && typeof pagination.total === 'number' && pagination.total <= pagination.pageSize && data.length <= pagination.pageSize; // 获取 key 字段值
 
   var getRowKeyField = React.useCallback(function (item) {
@@ -300,6 +310,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     columns: mergedColumns,
     data: mergedData,
     fieldKey: fieldKey,
+    virtual: virtual,
     extra: Object.assign({
       header: setting ? /*#__PURE__*/React__default["default"].createElement(TableSettingMenu.TableSettingMenu, {
         prefixCls: prefixCls + "-setting",
@@ -314,12 +325,14 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         cacheHiddenColKeys: cacheHiddenColKeys,
         setCacheHiddenColKeys: setCacheHiddenColKeys
       }) : null,
-      footer: hiddenPagination ? null : /*#__PURE__*/React__default["default"].createElement(Pagination__default["default"], Object.assign({
+      footer: dataSource || !hiddenPagination ? /*#__PURE__*/React__default["default"].createElement(Pagination__default["default"], Object.assign({
         className: classname.cx(prefixCls + "-pagination", pagination.placement && prefixCls + "-pagination--placement-" + pagination.placement)
       }, pagination, {
         current: currentPage,
-        onChange: trySetCurrentPage
-      }))
+        onChange: trySetCurrentPage,
+        pageSize: pageSize,
+        onPageSizeChange: trySetPageSize
+      })) : null
     }, extra)
   })));
 });

package/lib/cjs/TableBody.js

@@ -17,6 +17,8 @@ Object.defineProperty(exports, '__esModule', {
 
 var React = require('react');
 
+var List = require('./node_modules/rc-virtual-list/es/List.js');
+
 var classname = require('@hi-ui/classname');
 
 var env = require('@hi-ui/env');
@@ -68,7 +70,9 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       hasAvgColumn = _useTableContext.hasAvgColumn,
       avgRow = _useTableContext.avgRow,
       hasSumColumn = _useTableContext.hasSumColumn,
-      sumRow = _useTableContext.sumRow;
+      sumRow = _useTableContext.sumRow,
+      colWidths = _useTableContext.colWidths,
+      virtual = _useTableContext.virtual;
 
   var cls = classname.cx(prefixCls + "-body");
   var getRequiredProps = useLatest.useLatestCallback(function (id) {
@@ -81,7 +85,84 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       // focused: focusedId === id,
 
     };
-  }); // 外层增加 div 作为滚动容器
+  });
+
+  var _useState = React.useState(0),
+      scrollLeft = _useState[0],
+      setScrollLeft = _useState[1]; // 是否使用虚拟滚动
+
+
+  var showVirtual = virtual && typeAssertion.isArrayNonEmpty(transitionData);
+  var rowWidth = React.useMemo(function () {
+    var tmpWidth = 0;
+    colWidths.forEach(function (width) {
+      return tmpWidth += width;
+    });
+    return tmpWidth;
+  }, [colWidths]);
+  var onVirtualContainerScroll = React.useCallback(function (evt) {
+    var _a;
+
+    setScrollLeft(((_a = scrollBodyElementRef === null || scrollBodyElementRef === void 0 ? void 0 : scrollBodyElementRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) || 0);
+    onTableBodyScroll(evt);
+  }, [scrollBodyElementRef, onTableBodyScroll]);
+
+  if (showVirtual) {
+    // TODO： avg和summay row的逻辑
+    var vMaxHeight = maxHeight || 300;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: scrollBodyElementRef,
+      className: cls,
+      onScroll: onVirtualContainerScroll,
+      style: {
+        maxHeight: maxHeight !== undefined ? maxHeight : undefined,
+        // maxHeight 小于 table 实际高度才出现纵向滚动条
+        overflowY: maxHeight !== undefined && bodyTableRef.current && bodyTableRef.current.clientHeight > maxHeight ? 'scroll' : undefined,
+        // 表格宽度大于div宽度才出现横向滚动条
+        overflowX: canScroll ? 'scroll' : undefined
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: measureRowElementRef,
+      style: {
+        height: 1,
+        background: 'transparent'
+      }
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: bodyTableRef,
+      style: {
+        height: 1,
+        background: 'transparent',
+        width: rowWidth
+      }
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        width: '100%',
+        position: 'sticky',
+        left: 0
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(List["default"], {
+      data: transitionData,
+      height: vMaxHeight,
+      itemHeight: 10,
+      itemKey: "id",
+      children: function children(row, index) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          style: {
+            position: 'relative',
+            left: -scrollLeft
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(TableRow.TableRow // key={depth + index}
+        , Object.assign({
+          // key={depth + index}
+          key: row.id,
+          // @ts-ignore
+          rowIndex: index,
+          rowData: row
+        }, getRequiredProps(row.id))));
+      }
+    })));
+  } // 外层增加 div 作为滚动容器
+
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: scrollBodyElementRef,

package/lib/cjs/TableCell.js

@@ -54,6 +54,7 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       column = _ref.column,
       rowData = _ref.rowData,
       rowIndex = _ref.rowIndex,
+      colIndex = _ref.colIndex,
       _ref$isSwitcherCol = _ref.isSwitcherCol,
       isSwitcherCol = _ref$isSwitcherCol === void 0 ? false : _ref$isSwitcherCol,
       _ref$expandedTree = _ref.expandedTree,
@@ -76,7 +77,9 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       canScroll = _useTableContext.canScroll,
       isTree = _useTableContext.isTree,
       cellRender = _useTableContext.cellRender,
-      isLoadingTreeNodeId = _useTableContext.isLoadingTreeNodeId;
+      isLoadingTreeNodeId = _useTableContext.isLoadingTreeNodeId,
+      colWidths = _useTableContext.colWidths,
+      virtual = _useTableContext.virtual;
 
   var dataKey = column.id,
       leftStickyWidth = column.leftStickyWidth,
@@ -122,6 +125,44 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var loading = isLoadingTreeNodeId(rowId);
   var sticky = typeof rightStickyWidth !== 'undefined' || typeof leftStickyWidth !== 'undefined';
   var cls = classname.cx(prefixCls, className, raw.className, canScroll && sticky && prefixCls + "__col--sticky", isHighlightedCol(dataKey) && prefixCls + "__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "__col--hovered-highlight");
+
+  if (virtual) {
+    var width = colWidths[colIndex];
+    var colProps = getStickyColProps(column);
+    return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+      ref: ref,
+      key: dataKey,
+      className: cls
+    }, colProps, {
+      // 按需绑定函数，避免频繁调用 setState 特别消耗性能
+      onMouseEnter: showColHighlight ? function () {
+        return onHoveredColChange(column, true);
+      } : undefined,
+      onMouseLeave: showColHighlight ? function () {
+        return onHoveredColChange(column, false);
+      } : undefined,
+      style: Object.assign(Object.assign({}, colProps.style), {
+        width: width
+      })
+    }), isSwitcherCol && depth > 0 ? renderIndent({
+      depth: depth,
+      prefixCls: prefixCls
+    }) : null, isSwitcherCol ? renderSwitcher({
+      prefixCls: prefixCls,
+      node: rowData,
+      loading: loading,
+      expanded: expandedTree,
+      expandedIcon: expandedIcon,
+      collapsedIcon: collapsedIcon,
+      leafIcon: leafIcon,
+      onLoadChildren: onLoadChildren,
+      isTree: isTree,
+      onNodeExpand: function onNodeExpand(shouldExpanded) {
+        return onTreeNodeSwitch(rowData, shouldExpanded);
+      }
+    }) : null, cellContent.children);
+  }
+
   return /*#__PURE__*/React__default["default"].createElement("td", Object.assign({
     ref: ref,
     key: dataKey,

package/lib/cjs/TableRow.js

@@ -78,7 +78,9 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onDragEndContext = _useTableContext.onDragEnd,
       onDropContext = _useTableContext.onDrop,
       dragRowRef = _useTableContext.dragRowRef,
-      onRow = _useTableContext.onRow;
+      onRow = _useTableContext.onRow,
+      colWidths = _useTableContext.colWidths,
+      virtual = _useTableContext.virtual;
 
   var rowData = rowDataProp.raw,
       rowId = rowDataProp.id; // ** ************** 拖拽管理 *************** *//
@@ -170,11 +172,48 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var highlighted = isHighlightedRow(rowId);
   var hasError = isErrorRow(rowId);
-  var cls = classname.cx(prefixCls + "-row", showRowHighlight && prefixCls + "-row--hover", striped && (rowIndex & 1) === 1 && prefixCls + "-row--striped", hasError && prefixCls + "-row--error", highlighted && prefixCls + "-row--highlight", draggable && prefixCls + "-row--draggable", draggable && dragging && prefixCls + "-row--dragging", draggable && dragDirection && prefixCls + "-row--drag-" + dragDirection, isSumRow && prefixCls + "-row--total", isAvgRow && prefixCls + "-row--avg");
+  var cls = classname.cx(prefixCls + "-row", showRowHighlight && prefixCls + "-row--hover", striped && (rowIndex & 1) === 1 && prefixCls + "-row--striped", hasError && prefixCls + "-row--error", highlighted && prefixCls + "-row--highlight", draggable && prefixCls + "-row--draggable", draggable && dragging && prefixCls + "-row--dragging", draggable && dragDirection && prefixCls + "-row--drag-" + dragDirection, isSumRow && prefixCls + "-row--total", isAvgRow && prefixCls + "-row--avg", virtual && prefixCls + "-row--virtual");
   var firstColumn = flattedColumnsWithoutChildren.find(function (item) {
     return item.dataKey !== Table.SELECTION_DATA_KEY && item.dataKey !== BaseTable.EMBED_DATA_KEY;
   });
   var rowExtraProps = typeAssertion.isFunction(onRow) ? onRow(isSumRow || isAvgRow ? null : rowData, rowIndex) : EMBED_ON_ROW_PROPS;
+  var rowWidth = React.useMemo(function () {
+    var tmpWidth = 0;
+    colWidths.forEach(function (width) {
+      return tmpWidth += width;
+    });
+    return tmpWidth;
+  }, [colWidths]);
+
+  if (virtual) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+      ref: ref,
+      className: cls,
+      key: "row"
+    }, rowExtraProps, {
+      onDoubleClick: function onDoubleClick(evt) {
+        if (rowExtraProps.onDoubleClick) {
+          rowExtraProps.onDoubleClick(evt);
+        }
+
+        onHighlightedRowChange(rowDataProp, !highlighted);
+      },
+      style: Object.assign(Object.assign({}, rowExtraProps.style), {
+        width: rowWidth
+      })
+    }), flattedColumnsWithoutChildren.map(function (column, idx) {
+      return /*#__PURE__*/React__default["default"].createElement(TableCell.TableCell, {
+        key: idx,
+        column: column,
+        isSwitcherCol: firstColumn ? firstColumn.id === column.id : false,
+        rowData: rowDataProp,
+        rowIndex: rowIndex,
+        colIndex: idx,
+        expandedTree: expandedTree
+      });
+    })));
+  }
+
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("tr", Object.assign({
     ref: ref,
     className: cls,
@@ -200,6 +239,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       isSwitcherCol: firstColumn ? firstColumn.id === column.id : false,
       rowData: rowDataProp,
       rowIndex: rowIndex,
+      colIndex: idx,
       expandedTree: expandedTree
     });
   })), embedExpandable ? /*#__PURE__*/React__default["default"].createElement(TableEmbedRow.TableEmbedRow, {

package/lib/cjs/_virtual/index.js

@@ -0,0 +1,18 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var classnames = {
+  exports: {}
+};
+exports.classnames = classnames;

package/lib/cjs/_virtual/index2.js

@@ -0,0 +1,18 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var reactIs = {
+  exports: {}
+};
+exports.reactIs = reactIs;

package/lib/cjs/_virtual/react-is.development.js

@@ -0,0 +1,16 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var reactIs_development = {};
+exports.__exports = reactIs_development;

package/lib/cjs/_virtual/react-is.production.min.js

@@ -0,0 +1,16 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var reactIs_production_min = {};
+exports.__exports = reactIs_production_min;

package/lib/cjs/hooks/use-check.js

@@ -42,17 +42,41 @@ var useTableCheck = function useTableCheck(_ref) {
 
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(DEFAULT_CHECKED_ROW_KEYS, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange),
       checkedRowKeys = _useUncontrolledState[0],
-      trySetCheckedRowKeys = _useUncontrolledState[1]; // TODO: 暂时不支持正反选
+      trySetCheckedRowKeys = _useUncontrolledState[1]; // 已选中的行数据集合
 
 
+  var checkedRowDataItemsRef = React__default["default"].useRef([]);
+  var checkedRowDataItems = checkedRowDataItemsRef.current; // TODO: 暂时不支持正反选
+
   var _useCheck = useCheck.useCheck({
     checkedIds: checkedRowKeys,
-    onCheck: trySetCheckedRowKeys,
+    onCheck: function onCheck(checkedRowKeys, rowItem, checked) {
+      trySetCheckedRowKeys(checkedRowKeys, rowItem, checked, checkedRowDataItemsRef.current);
+    },
     idFieldName: fieldKey
   }),
-      onCheckedRowKeysChange = _useCheck[0],
-      isCheckedRowKey = _useCheck[1]; // 判断是否全选
+      handleCheckedRowKeysChange = _useCheck[0],
+      isCheckedRowKey = _useCheck[1]; // 选中项变化会触发该函数
+
+
+  var onCheckedRowKeysChange = React__default["default"].useCallback(function (rowItem, checked) {
+    // 记录选中的行数据集合
+    var nextCheckedDataItems = checkedRowDataItems;
+
+    if (checked) {
+      if (!nextCheckedDataItems.find(function (item) {
+        return item[fieldKey] === rowItem[fieldKey];
+      })) {
+        checkedRowDataItemsRef.current = nextCheckedDataItems.concat(rowItem);
+      }
+    } else {
+      checkedRowDataItemsRef.current = nextCheckedDataItems.filter(function (item) {
+        return item[fieldKey] !== rowItem[fieldKey];
+      });
+    }
 
+    handleCheckedRowKeysChange(rowItem, checked);
+  }, [checkedRowDataItems, fieldKey, handleCheckedRowKeysChange]); // 判断是否全选
 
   var _React$useMemo = React__default["default"].useMemo(function () {
     if (rowSelection) {

package/lib/cjs/hooks/use-col-width.js

@@ -30,7 +30,8 @@ function _interopDefaultLegacy(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var useColWidth = function useColWidth(_ref) {
-  var columns = _ref.columns;
+  var columns = _ref.columns,
+      virtual = _ref.virtual;
   var measureRowElementRef = React.useRef(null);
 
   var _React$useState = React__default["default"].useState(function () {
@@ -39,6 +40,10 @@ var useColWidth = function useColWidth(_ref) {
       colWidths = _React$useState[0],
       setColWidths = _React$useState[1];
 
+  console.error({
+    useColWidth: 1,
+    colWidths: colWidths
+  });
   useUpdateEffect.useUpdateEffect(function () {
     setColWidths(index.getGroupItemWidth(columns));
   }, [columns]);
@@ -51,15 +56,39 @@ var useColWidth = function useColWidth(_ref) {
 
     if (measureRowElement) {
       var _resizeObserver = new ResizeObserver(function () {
-        if (measureRowElement.childNodes) {
-          var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node) {
-            return node.getBoundingClientRect().width || 0;
+        if (virtual) {
+          /** 虚拟滚动时，内容宽度不能用以前table自动渲染的方式获取，需要手动计算 */
+          var columnDefaultWidth = 200;
+          var containerWidth = measureRowElement.clientWidth;
+          var totalWidth = 0;
+          /** 虚拟滚动，需要根据collist的虚拟宽度来计算宽度 */
+
+          columns.forEach(function (columnItem) {
+            totalWidth += columnItem.width || columnDefaultWidth;
           });
 
-          if (_realColumnsWidth.some(function (width) {
-            return width && width > 0;
-          })) {
-            setColWidths(_realColumnsWidth);
+          if (totalWidth < containerWidth) {
+            // 容器宽度大于设置的宽度总和时，col宽度等比分分配占满容器。
+            setColWidths(columns.map(function (columnItem) {
+              return (columnItem.width || columnDefaultWidth) * containerWidth / totalWidth;
+            }));
+          } else {
+            // 容器宽度小于设置的宽度总和时，col宽度等于设置/默认宽度。
+            setColWidths(columns.map(function (columnItem) {
+              return columnItem.width || columnDefaultWidth;
+            }));
+          }
+        } else {
+          if (measureRowElement.childNodes) {
+            var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node) {
+              return node.getBoundingClientRect().width || 0;
+            });
+
+            if (_realColumnsWidth.some(function (width) {
+              return width && width > 0;
+            })) {
+              setColWidths(_realColumnsWidth);
+            }
           }
         }
       });

package/lib/cjs/hooks/use-pagination.js

@@ -19,6 +19,8 @@ var React = require('react');
 
 var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
 
+var useLatest = require('@hi-ui/use-latest');
+
 var axios = require('axios');
 
 function _interopDefaultLegacy(e) {
@@ -33,32 +35,72 @@ var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
 var useTablePagination = function useTablePagination(_ref) {
   var pagination = _ref.pagination,
+      loadingProp = _ref.loadingProp,
       dataProp = _ref.data,
       dataSource = _ref.dataSource;
 
+  var _a, _b;
+
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(1, pagination.current, pagination.onChange),
       currentPage = _useUncontrolledState[0],
       trySetCurrentPage = _useUncontrolledState[1];
 
-  var _React$useState = React__default["default"].useState([]),
-      remoteTableData = _React$useState[0],
-      setRemoteTableData = _React$useState[1];
+  var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState((_b = (_a = pagination === null || pagination === void 0 ? void 0 : pagination.pageSizeOptions) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 10, pagination.pageSize, pagination.onPageSizeChange),
+      pageSize = _useUncontrolledState2[0],
+      trySetPageSize = _useUncontrolledState2[1];
 
-  var mergedData = dataSource ? remoteTableData : dataProp; // 内置远程数据配置 table，包括 data，pagination
+  var _React$useState = React__default["default"].useState(false),
+      internalLoading = _React$useState[0],
+      setInternalLoading = _React$useState[1];
 
-  React__default["default"].useEffect(function () {
+  var loading = dataSource ? internalLoading : loadingProp;
+
+  var _React$useState2 = React__default["default"].useState(0),
+      internalTotal = _React$useState2[0],
+      setInternalTotal = _React$useState2[1];
+
+  var total = dataSource ? internalTotal : pagination.total;
+
+  var _React$useState3 = React__default["default"].useState([]),
+      remoteTableData = _React$useState3[0],
+      setRemoteTableData = _React$useState3[1];
+
+  var mergedData = dataSource ? remoteTableData : dataProp;
+  /**
+   * 当设置 dataSource 后，则自动获取数据
+   */
+
+  var getData = useLatest.useLatestCallback(function () {
     if (dataSource) {
-      var requestConfig = dataSource(currentPage);
+      var requestConfig = dataSource(currentPage, pageSize);
+      setInternalLoading(true);
       axios__default["default"](requestConfig).then(function (res) {
-        setRemoteTableData(res.data);
+        var data = res.data;
+        setRemoteTableData(data === null || data === void 0 ? void 0 : data.list);
+        setInternalTotal(data === null || data === void 0 ? void 0 : data.total);
+      })["finally"](function () {
+        setInternalLoading(false);
       });
     }
-  }, [dataSource, currentPage]);
+  });
+  React__default["default"].useEffect(function () {
+    getData();
+  }, [currentPage, getData, pageSize]);
+  React__default["default"].useEffect(function () {
+    if (dataSource) {
+      // 如果已经在第一页则直接刷新数据，否则重置到第一页
+      currentPage === 1 ? getData() : trySetCurrentPage(1);
+    }
+  }, [dataSource, getData, trySetCurrentPage]);
   return {
     mergedData: mergedData,
     pagination: pagination,
     currentPage: currentPage,
-    trySetCurrentPage: trySetCurrentPage
+    trySetCurrentPage: trySetCurrentPage,
+    pageSize: pageSize,
+    trySetPageSize: trySetPageSize,
+    loading: loading,
+    total: total
   };
 };