@hi-ui/table 4.0.0-beta.6 → 4.0.0-beta.62

package/README.md

@@ -15,40 +15,40 @@
 
 ## Props
 
-| 属性名                | 描述                                                                                                               | 类型                                                      | 可选值                                    | 默认值     |
-| --------------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------------------------------------- | ---------- |
-| data                  | 表格数据                                                                                                           | object[]                                                  | -                                         | -          |
-| fieldKey              | 指定 data 表格数据中某一属性为 key                                                                                 | string                                                    | -                                         | 'key'      |
-| columns               | 表格列配置信息                                                                                                     | ColumnItem[]                                              | -                                         | -          |
-| bordered              | 是否显示边框（表头分组模式下，表格自带边框）                                                                       | boolean                                                   | true \| false                             | false      |
-| sticky                | 是否支持表头吸顶                                                                                                   | boolean                                                   | true \| false                             | false      |
-| stickyTop             | 表头吸顶距离视口顶部距离                                                                                           | number                                                    | -                                         | 0          |
-| highlightedColKeys    | 高亮列（受控）                                                                                                     | string[]                                                  | -                                         | []         |
-| expandedRender        | 表格展开项                                                                                                         | (record: dataItem, index: number) => ReactNode \| Promise | -                                         | -          |
-| rowExpandable         | 设置是否允许行展开                                                                                                 | (record: dataItem ) => ReactNode \| Boolean               | -                                         | true       |
-| onExpand              | 表格展开时的回调函数                                                                                               | (expanded, row: object) => void                           | -                                         | -          |
-| expandedRowKeys       | 内嵌式表格以及树形表格展开的行                                                                                     | number[]                                                  | -                                         | -          |
-| maxHeight             | 表格最大高度，当穿过该高度时，展示滚动条且表头固定                                                                 | number                                                    | -                                         | -          |
-| fixedToColumn         | 表格列冻结设置，为 string 时仅支持从左侧冻结至某一列                                                               | string \| FixedOption                                     | columns 中对应的 dataKey                  | null       |
-| size                  | 配置表格尺寸                                                                                                       | string                                                    | 'large' \| 'default' \| 'small' \| 'mini' | 'default'  |
-| pagination            | 表格分页配置项                                                                                                     | Pagination                                                | -                                         | null       |
-| errorRowKeys          | 错误列（受控）                                                                                                     | string[]                                                  | -                                         | []         |
-| highlightedRowKeys    | 高亮行（受控）                                                                                                     | string[]                                                  | -                                         | []         |
-| rowSelection          | 行可选（受控）                                                                                                     | RowSelection                                              | -                                         | null       |
-| dataSource            | 异步数据源                                                                                                         | (current: number) => DataSource                           | -                                         | null       |
-| showColMenu           | 是否支持列操作                                                                                                     | boolean                                                   | -                                         | false      |
-| striped               | 是否展示为斑马纹效果                                                                                               | boolean                                                   | -                                         | false      |
-| setting               | 是否集成控制面板功能                                                                                               | boolean                                                   | -                                         | false      |
-| emptyContent          | 数据为空时的展示内容                                                                                               | string \| () => ReactNode                                 | -                                         | '暂无数据' |
-| resizable             | 是否能够动态控制列宽                                                                                               | boolean                                                   | true \| false                             | false      |
-| standard              | 标准模式，默认集成 `showColMenu = true, sticky = true, bordered = true, setting = true, striped = true`            | boolean                                                   | true \| false                             | false      |
-| loading               | 加载中状态                                                                                                         | boolean                                                   | true \| false                             | false      |
-| scrollWidth           | 表格滚动的宽度（当表格总设置宽度（含自适应列）大于表格父级容器宽度时需要设置）**3.7.0 版本以后，该属性不建议使用** | number                                                    | -                                         | -          |
-| showColHighlight      | 表格某一列`hover`时，该列高亮                                                                                      | boolean                                                   | true \| false                             | false      |
-| draggable             | 表格行可拖拽                                                                                                       | boolean                                                   | true \| false                             | false      |
-| hiddenColKeys         | 隐藏列（受控） (v3.9.0 新增)                                                                                       | string[]                                                  | -                                         | -          |
-| onHiddenColKeysChange | 列隐藏设置时回调 (v3.9.0 新增)                                                                                     | (hiddenColKeys: string[]) => void                         | -                                         | -          |
-| cellRender            | 全局控制单元格自定义渲染，优先级低于 column 的 render 方法                                                         | (text: DataItem[ColumnItem[dataKey]]) => ReactNode        | -                                         | -          |
+| 属性名                | 描述                                                                                                               | 类型                                                      | 可选值                   | 默认值     |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ------------------------ | ---------- |
+| data                  | 表格数据                                                                                                           | object[]                                                  | -                        | -          |
+| fieldKey              | 指定 data 表格数据中某一属性为 key                                                                                 | string                                                    | -                        | 'key'      |
+| columns               | 表格列配置信息                                                                                                     | ColumnItem[]                                              | -                        | -          |
+| bordered              | 是否显示边框（表头分组模式下，表格自带边框）                                                                       | boolean                                                   | true \| false            | false      |
+| sticky                | 是否支持表头吸顶                                                                                                   | boolean                                                   | true \| false            | false      |
+| stickyTop             | 表头吸顶距离视口顶部距离                                                                                           | number                                                    | -                        | 0          |
+| highlightedColKeys    | 高亮列（受控）                                                                                                     | string[]                                                  | -                        | []         |
+| expandedRender        | 表格展开项                                                                                                         | (record: dataItem, index: number) => ReactNode \| Promise | -                        | -          |
+| rowExpandable         | 设置是否允许行展开                                                                                                 | (record: dataItem ) => ReactNode \| Boolean               | -                        | true       |
+| onExpand              | 表格展开时的回调函数                                                                                               | (expanded, row: object) => void                           | -                        | -          |
+| expandedRowKeys       | 内嵌式表格以及树形表格展开的行                                                                                     | number[]                                                  | -                        | -          |
+| maxHeight             | 表格最大高度，当穿过该高度时，展示滚动条且表头固定                                                                 | number                                                    | -                        | -          |
+| fixedToColumn         | 表格列冻结设置，为 string 时仅支持从左侧冻结至某一列                                                               | string \| FixedOption                                     | columns 中对应的 dataKey | null       |
+| size                  | 配置表格尺寸                                                                                                       | string                                                    | 'lg' \| 'md' \| 'sm'     | 'md'       |
+| pagination            | 表格分页配置项                                                                                                     | Pagination                                                | -                        | null       |
+| errorRowKeys          | 错误列（受控）                                                                                                     | string[]                                                  | -                        | []         |
+| highlightedRowKeys    | 高亮行（受控）                                                                                                     | string[]                                                  | -                        | []         |
+| rowSelection          | 行可选（受控）                                                                                                     | RowSelection                                              | -                        | null       |
+| dataSource            | 异步数据源                                                                                                         | (current: number) => DataSource                           | -                        | null       |
+| showColMenu           | 是否支持列操作                                                                                                     | boolean                                                   | -                        | false      |
+| striped               | 是否展示为斑马纹效果                                                                                               | boolean                                                   | -                        | false      |
+| setting               | 是否集成控制面板功能                                                                                               | boolean                                                   | -                        | false      |
+| emptyContent          | 数据为空时的展示内容                                                                                               | string \| () => ReactNode                                 | -                        | '暂无数据' |
+| resizable             | 是否能够动态控制列宽                                                                                               | boolean                                                   | true \| false            | false      |
+| standard              | 标准模式，默认集成 `showColMenu = true, sticky = true, bordered = true, setting = true, striped = true`            | boolean                                                   | true \| false            | false      |
+| loading               | 加载中状态                                                                                                         | boolean                                                   | true \| false            | false      |
+| scrollWidth           | 表格滚动的宽度（当表格总设置宽度（含自适应列）大于表格父级容器宽度时需要设置）**3.7.0 版本以后，该属性不建议使用** | number                                                    | -                        | -          |
+| showColHighlight      | 表格某一列`hover`时，该列高亮                                                                                      | boolean                                                   | true \| false            | false      |
+| draggable             | 表格行可拖拽                                                                                                       | boolean                                                   | true \| false            | false      |
+| hiddenColKeys         | 隐藏列（受控） (v3.9.0 新增)                                                                                       | string[]                                                  | -                        | -          |
+| onHiddenColKeysChange | 列隐藏设置时回调 (v3.9.0 新增)                                                                                     | (hiddenColKeys: string[]) => void                         | -                        | -          |
+| cellRender            | 全局控制单元格自定义渲染，优先级低于 column 的 render 方法                                                         | (text: DataItem[ColumnItem[dataKey]]) => ReactNode        | -                        | -          |
 
 ## Event
 
@@ -151,14 +151,17 @@
 
 ## CHANGELOG
 
-| 参数                 | 变更类型   | 变更内容                                    | 解决的问题                                  |
-| -------------------- | ---------- | ------------------------------------------- | ------------------------------------------- |
-| selectFilters        | deprecated | 取消内嵌 Select                             | -                                           | 使用 filterDropdown 能替代满足场景 |
-| onLoadChildren       | feature    | 必须返回数据 -> 返回 undefined 不做任何处理 | -                                           | 强化功能：支持自定义控制更新 |
-| expandedEmbedRowKeys | feature    | -                                           | 字段：expandRowKeys -> expandedEmbedRowKeys | 强化功能：支持内嵌面板独立控制 |
-| onEmbedExpand        | feature    | 字段：onExpand -> onEmbedExpand             | 强化功能：支持内嵌面板独立控制              |
-| stickyFooter         | feature    | boolean                                     | 强化功能：支持底部吸底                      |
-| defaultFixedToColumn | feature    | 1. 定义：非受控；2. 类型：对象              | 强化功能持久化                              |
-| fixedToColumn        | feature    | 1. 定义：受控；2. 类型：对象                | 强化功能持久化                              |
-| onFixedToColumn      | feature    | 1. 定义：冻结列回调；2. 类型：对象          | 强化功能持久化                              |
-| showRowHighlight     | feature    | -                                           | 强化功能持久化                              |
+| 参数                  | 变更类型   | 变更内容                                    | 解决的问题                                  |
+| --------------------- | ---------- | ------------------------------------------- | ------------------------------------------- |
+| selectFilters         | deprecated | 取消内嵌 Select                             | -                                           | 使用 filterDropdown 能替代满足场景 |
+| onLoadChildren        | feature    | 必须返回数据 -> 返回 undefined 不做任何处理 | -                                           | 强化功能：支持自定义控制更新 |
+| expandedEmbedRowKeys  | feature    | -                                           | 字段：expandRowKeys -> expandedEmbedRowKeys | 强化功能：支持内嵌面板独立控制 |
+| onEmbedExpand         | feature    | 字段：onExpand -> onEmbedExpand             | 强化功能：支持内嵌面板独立控制              |
+| stickyFooter          | feature    | boolean                                     | 强化功能：支持底部吸底                      |
+| stickyFooterBottom    | feature    | 底部吸底距离视口底部距离                    | 强化功能                                    |
+| defaultFixedToColumn  | feature    | 1. 定义：非受控；2. 类型：对象              | 强化功能持久化                              |
+| fixedToColumn         | feature    | 1. 定义：受控；2. 类型：对象                | 强化功能持久化                              |
+| onFixedToColumn       | feature    | 1. 定义：冻结列回调；2. 类型：对象          | 强化功能持久化                              |
+| showRowHighlight      | feature    | -                                           | 强化功能受控化                              |
+| sortedColKeys         | feature    | 列排序受控                                  | 强化功能持久化                              |
+| onSortedColKeysChange | feature    | 列排序设置回调                              | 强化功能持久化                              |

package/lib/cjs/BaseTable.js

@@ -87,9 +87,12 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       extra = _a.extra,
       onRow = _a.onRow,
       stickyFooter = _a.stickyFooter,
+      _a$stickyFooterBottom = _a.stickyFooterBottom,
+      stickyFooterBottom = _a$stickyFooterBottom === void 0 ? 0 : _a$stickyFooterBottom,
       _a$fixedColumnTrigger = _a.fixedColumnTrigger,
       fixedColumnTrigger = _a$fixedColumnTrigger === void 0 ? 'auto' : _a$fixedColumnTrigger,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "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"]);
 
   var _useEmbedExpand = useEmbedExpand.useEmbedExpand({
     defaultExpandedEmbedRowKeys: defaultExpandedEmbedRowKeys,
@@ -109,11 +112,12 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
    */
 
 
-  var getEmbedPanelColumn = React__default['default'].useCallback(function (embedExpandable) {
+  var getEmbedPanelColumn = React__default["default"].useCallback(function (embedExpandable) {
     var embedPanelColumn = {
       dataKey: EMBED_DATA_KEY,
       title: '',
-      width: 50,
+      width: 38,
+      className: prefixCls + "__embed-col",
       align: 'center',
       render: function render(_, rowItem) {
         var rowKey = rowItem.id;
@@ -129,14 +133,14 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           onSwitch: function onSwitch(shouldExpanded) {
             onExpandEmbedRowsChange(rowItem, shouldExpanded);
           },
-          expandedIcon: /*#__PURE__*/React__default['default'].createElement(icons.MinusSquareOutlined, null),
-          collapsedIcon: /*#__PURE__*/React__default['default'].createElement(icons.PlusSquareOutlined, null)
+          expandedIcon: /*#__PURE__*/React__default["default"].createElement(icons.MinusSquareOutlined, null),
+          collapsedIcon: /*#__PURE__*/React__default["default"].createElement(icons.PlusSquareOutlined, null)
         });
       }
     };
     return embedPanelColumn;
   }, [prefixCls, isExpandEmbedRows, onExpandEmbedRowsChange, isEmbedLoadingId]);
-  var mergedColumns = React__default['default'].useMemo(function () {
+  var mergedColumns = React__default["default"].useMemo(function () {
     if (embedExpandable) {
       var embedColumn = getEmbedPanelColumn(embedExpandable);
       return [embedColumn].concat(columns);
@@ -203,14 +207,15 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   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);
-  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls
-  }, rootProps), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, rootProps), /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "__wrapper"
-  }, /*#__PURE__*/React__default['default'].createElement(context.TableProvider, {
+  }, /*#__PURE__*/React__default["default"].createElement(context.TableProvider, {
     value: Object.assign(Object.assign({}, providedValue), {
+      striped: striped,
       onRow: onRow,
       embedExpandable: embedExpandable,
       onEmbedSwitch: onEmbedSwitch,
@@ -223,9 +228,9 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       sumRow: sumRow,
       hasSumColumn: hasSumColumn
     })
-  }, /*#__PURE__*/React__default['default'].createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default['default'].createElement(TableHeader.TableHeader, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default["default"].createElement(TableHeader.TableHeader, {
     prefixCls: prefixCls + "-header"
-  }), extraHeader ? /*#__PURE__*/React__default['default'].createElement("div", {
+  }), extraHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       right: 0,
@@ -233,23 +238,24 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       bottom: 0,
       top: 0
     }
-  }, extraHeader) : null), /*#__PURE__*/React__default['default'].createElement(TableBody.TableBody, {
-    prefixCls: prefixCls
-  })), (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? /*#__PURE__*/React__default['default'].createElement("div", {
+  }, extraHeader) : null), /*#__PURE__*/React__default["default"].createElement(TableBody.TableBody, {
+    prefixCls: prefixCls,
+    emptyContent: emptyContent
+  })), (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "-freeze-shadow  " + prefixCls + "-freeze-shadow--left",
     style: {
       width: leftFixedColumnsWidth + 'px'
     }
-  }) : null, (alwaysFixedColumn || scrollSize.scrollRight > 0) && rightFrozenColKeys.length > 0 ? /*#__PURE__*/React__default['default'].createElement("div", {
+  }) : null, (alwaysFixedColumn || scrollSize.scrollRight > 0) && rightFrozenColKeys.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "-freeze-shadow " + prefixCls + "-freeze-shadow--right",
     style: {
       width: rightFixedColumnsWidth + 'px'
     }
-  }) : null), /*#__PURE__*/React__default['default'].createElement("div", {
+  }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "-footer",
     style: stickyFooter ? {
       position: 'sticky',
-      bottom: 0 // boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.1)'
+      bottom: stickyFooterBottom // boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.1)'
 
     } : undefined
   }, extraFooter));
@@ -268,24 +274,26 @@ var renderSwitcher = function renderSwitcher(_ref) {
       expandedIcon = _ref.expandedIcon,
       collapsedIcon = _ref.collapsedIcon;
 
-  if ( /*#__PURE__*/React__default['default'].isValidElement(rowExpand)) {
+  if ( /*#__PURE__*/React__default["default"].isValidElement(rowExpand)) {
     return rowExpand;
   }
 
   if (rowExpand === true) {
     if (loading) {
-      return /*#__PURE__*/React__default['default'].createElement(iconButton.IconButton, {
+      return /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
         className: classname.cx(prefixCls + "__switcher", prefixCls + "__switcher--loading"),
         icon: index$1.defaultLoadingIcon
       });
     }
 
-    return /*#__PURE__*/React__default['default'].createElement(iconButton.IconButton, {
+    return /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
       tabIndex: -1,
       className: classname.cx(prefixCls + "__switcher", prefixCls + "__switcher--" + (expanded ? 'expanded' : 'collapse')),
       icon: expanded ? expandedIcon : collapsedIcon,
-      onClick: function onClick() {
-        return onSwitch(!expanded);
+      onClick: function onClick(evt) {
+        // 阻止传递给 onRow 的 onClick 事件
+        evt.stopPropagation();
+        onSwitch(!expanded);
       }
     });
   }
@@ -295,4 +303,3 @@ var renderSwitcher = function renderSwitcher(_ref) {
 
 exports.BaseTable = BaseTable;
 exports.EMBED_DATA_KEY = EMBED_DATA_KEY;
-//# sourceMappingURL=BaseTable.js.map

package/lib/cjs/Table.js

@@ -84,8 +84,6 @@ var DEFAULT_PAGINATION = {
 
 var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   // ************************ 预置标准模式 ************************ //
-  var _b;
-
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
       _a$standard = _a.standard,
@@ -98,28 +96,40 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       columnsProp = _a.columns,
       hiddenColKeysProp = _a.hiddenColKeys,
       onHiddenColKeysChange = _a.onHiddenColKeysChange,
+      sortedColKeysProp = _a.sortedColKeys,
+      onSortedColKeysChange = _a.onSortedColKeysChange,
       rowSelection = _a.rowSelection,
       _a$fieldKey = _a.fieldKey,
       fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
-      _a$stickyFooter = _a.stickyFooter,
-      stickyFooter = _a$stickyFooter === void 0 ? false : _a$stickyFooter,
+      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", "rowSelection", "fieldKey", "stickyFooter", "data"]);
+      rest = tslib.__rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "rowSelection", "fieldKey", "extra", "data"]);
+
+  var tableProps = reactUtils.withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);
 
-  var baseTableProps = reactUtils.withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);
-  var setting = (_b = baseTableProps.setting) !== null && _b !== void 0 ? _b : false; // ************************ 高级功能 ************************ //
+  var _tableProps$setting = tableProps.setting,
+      setting = _tableProps$setting === void 0 ? false : _tableProps$setting,
+      baseTableProps = tslib.__rest(tableProps // ************************ 高级功能 ************************ //
 
   /**
    * 列排序
    */
+  , ["setting"]); // ************************ 高级功能 ************************ //
+
+  /**
+   * 列排序
+   */
+
 
   var _useColSorter = useColSorter.useColSorter({
     uniqueId: uniqueId,
-    columns: columnsProp
+    columns: columnsProp,
+    sortedColKeys: sortedColKeysProp,
+    onSortedColKeysChange: onSortedColKeysChange
   }),
       sortedCols = _useColSorter.sortedCols,
-      setSortCols = _useColSorter.setSortCols,
+      setSortColKeys = _useColSorter.setSortColKeys,
       cacheSortedCols = _useColSorter.cacheSortedCols,
       setCacheSortedCols = _useColSorter.setCacheSortedCols;
   /**
@@ -155,7 +165,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       trySetCurrentPage = _useTablePagination.trySetCurrentPage; // 优化数据在第一页且数据一页内时，不展示 pagination 配置项
 
 
-  var hiddenPagination = !paginationProp || pagination.autoHide && currentPage === 1 && typeof pagination.pageSize === 'number' && data.length <= pagination.pageSize; // 获取 key 字段值
+  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) {
     var val = item[fieldKey];
@@ -178,8 +188,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, [mergedData, getRowKeyField]); // ************************ 行多选 ************************ //
   // 自定义设置 checkbox 列宽度
 
-  var checkboxColWidth = React__default['default'].useMemo(function () {
-    return rowSelection && typeof rowSelection.checkboxColWidth === 'number' ? rowSelection.checkboxColWidth : 50;
+  var checkboxColWidth = React__default["default"].useMemo(function () {
+    return rowSelection && typeof rowSelection.checkboxColWidth === 'number' ? rowSelection.checkboxColWidth : 38;
   }, [rowSelection]); // 预处理 column 支持 多选渲染
 
   var _useTableCheck = useCheck.useTableCheck({
@@ -195,17 +205,20 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       checkRowIsDisabledCheckbox = _useTableCheck.checkRowIsDisabledCheckbox; // 表格列多选操作区
 
 
-  var getSelectionColumn = React__default['default'].useCallback(function (rowSelection) {
+  var getSelectionColumn = React__default["default"].useCallback(function (rowSelection) {
     var renderCell = function renderCell(_, rowItem, rowIndex) {
       var rowKey = getRowKeyField(rowItem);
       var checked = isCheckedRowKey(rowKey);
       var disabledCheckbox = checkRowIsDisabledCheckbox(rowItem);
       return {
-        node: /*#__PURE__*/React__default['default'].createElement(Checkbox__default['default'], {
+        node: /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
           checked: isCheckedRowKey(rowKey),
           disabled: disabledCheckbox,
           onChange: function onChange(evt) {
             onCheckedRowKeysChange(rowItem, evt.target.checked);
+          },
+          onClick: function onClick(evt) {
+            evt.stopPropagation();
           }
         }),
         checked: checked
@@ -233,7 +246,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
     var renderTitleCell = function renderTitleCell() {
       return {
-        node: /*#__PURE__*/React__default['default'].createElement(Checkbox__default['default'], {
+        node: /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
           checked: checkedAll,
           indeterminate: semiChecked,
           onChange: tryCheckAllRow
@@ -247,8 +260,14 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var _renderTitleCell = renderTitleCell(),
           node = _renderTitleCell.node;
 
-      if (rowSelection.checkAllOptions && rowSelection.checkAllOptions.render) {
-        return rowSelection.checkAllOptions.render(node);
+      if (rowSelection.checkAllOptions) {
+        if (rowSelection.checkAllOptions.render) {
+          return rowSelection.checkAllOptions.render(node);
+        }
+
+        if (rowSelection.checkAllOptions.filterIcon) {
+          return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, node, rowSelection.checkAllOptions.filterIcon);
+        }
       }
 
       return node;
@@ -257,14 +276,14 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     var selectionColumn = {
       dataKey: SELECTION_DATA_KEY,
       width: checkboxColWidth,
-      className: prefixCls + "-selection-column",
+      className: prefixCls + "__selection-col",
       title: renderSelectionTitleCell,
       // @ts-ignore
       render: renderSelectionCell
     };
     return selectionColumn;
   }, [getRowKeyField, checkedAll, semiChecked, tryCheckAllRow, checkboxColWidth, isCheckedRowKey, onCheckedRowKeysChange, checkRowIsDisabledCheckbox, prefixCls]);
-  var mergedColumns = React__default['default'].useMemo(function () {
+  var mergedColumns = React__default["default"].useMemo(function () {
     if (rowSelection) {
       var selectionColumn = getSelectionColumn(rowSelection);
       return [selectionColumn].concat(visibleCols);
@@ -273,21 +292,20 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     return visibleCols;
   }, [rowSelection, getSelectionColumn, visibleCols]); // ************************ loading ************************ //
 
-  var TableWrapper = loading ? Loading__default['default'] : React.Fragment;
-  return /*#__PURE__*/React__default['default'].createElement(TableWrapper, null, /*#__PURE__*/React__default['default'].createElement(BaseTable.BaseTable, Object.assign({
+  var TableWrapper = loading ? Loading__default["default"] : React.Fragment;
+  return /*#__PURE__*/React__default["default"].createElement(TableWrapper, null, /*#__PURE__*/React__default["default"].createElement(BaseTable.BaseTable, Object.assign({
     ref: ref
   }, baseTableProps, {
-    stickyFooter: stickyFooter,
     prefixCls: prefixCls,
     columns: mergedColumns,
     data: mergedData,
     fieldKey: fieldKey,
-    extra: {
-      header: setting ? /*#__PURE__*/React__default['default'].createElement(TableSettingMenu.TableSettingMenu, {
+    extra: Object.assign({
+      header: setting ? /*#__PURE__*/React__default["default"].createElement(TableSettingMenu.TableSettingMenu, {
         prefixCls: prefixCls + "-setting",
         // sort
         sortedCols: sortedCols,
-        setSortCols: setSortCols,
+        setSortColKeys: setSortColKeys,
         cacheSortedCols: cacheSortedCols,
         setCacheSortedCols: setCacheSortedCols,
         // hidden
@@ -296,13 +314,13 @@ 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: hiddenPagination ? null : /*#__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
       }))
-    }
+    }, extra)
   })));
 });
 
@@ -312,4 +330,3 @@ if (env.__DEV__) {
 
 exports.SELECTION_DATA_KEY = SELECTION_DATA_KEY;
 exports.Table = Table;
-//# sourceMappingURL=Table.js.map

package/lib/cjs/TableAdvancedFilter.js

@@ -48,26 +48,32 @@ var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
 var renderFilter = function renderFilter(_ref) {
   var prefixCls = _ref.prefixCls,
       column = _ref.column,
-      showColMenu = _ref.showColMenu;
+      showColMenu = _ref.showColMenu,
+      onOpen = _ref.onOpen,
+      onClose = _ref.onClose;
   var _column$raw = column.raw,
       sorter = _column$raw.sorter,
       filterIcon = _column$raw.filterIcon,
       selectFilters = _column$raw.selectFilters;
-  return [showColMenu && /*#__PURE__*/React__default['default'].createElement(TableColumnMenu.TableColumnMenu, {
+  return [showColMenu && /*#__PURE__*/React__default["default"].createElement(TableColumnMenu.TableColumnMenu, {
     prefixCls: prefixCls + "-dropdown",
     key: "0",
-    column: column
-  }), sorter && !showColMenu && /*#__PURE__*/React__default['default'].createElement(SorterMenu, {
+    column: column,
+    onOpen: onOpen,
+    onClose: onClose
+  }), sorter && !showColMenu && /*#__PURE__*/React__default["default"].createElement(SorterMenu, {
     prefixCls: prefixCls + "-sorter",
     key: "1",
     column: column
-  }), selectFilters && /*#__PURE__*/React__default['default'].createElement(Select__default['default'], Object.assign({
+  }), selectFilters && /*#__PURE__*/React__default["default"].createElement(Select__default["default"], Object.assign({
     prefixCls: prefixCls + "-select",
     key: "2"
-  }, selectFilters)), filterIcon && /*#__PURE__*/React__default['default'].createElement(FilterDropdown, {
+  }, selectFilters)), filterIcon && /*#__PURE__*/React__default["default"].createElement(FilterDropdown, {
     prefixCls: prefixCls + "-custom",
     key: "3",
-    column: column
+    column: column,
+    onOpen: onOpen,
+    onClose: onClose
   })].filter(Boolean);
 };
 
@@ -84,9 +90,9 @@ var SorterMenu = function SorterMenu(_ref2) {
       setActiveSorterColumn = _useTableContext.setActiveSorterColumn,
       setActiveSorterType = _useTableContext.setActiveSorterType;
 
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: classname.cx(prefixCls + "__icon", (_cx = {}, _cx[prefixCls + "__icon--active"] = activeSorterType === 'ascend' && activeSorterColumn === columnKey, _cx)),
     onClick: function onClick(e) {
       if (activeSorterType === 'ascend' && activeSorterColumn === columnKey) {
@@ -97,7 +103,7 @@ var SorterMenu = function SorterMenu(_ref2) {
         setActiveSorterColumn(columnKey);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(icons.CaretUpFilled, null)), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement(icons.CaretUpFilled, null)), /*#__PURE__*/React__default["default"].createElement("span", {
     className: classname.cx(prefixCls + "__icon", (_cx2 = {}, _cx2[prefixCls + "__icon--active"] = activeSorterType === 'descend' && activeSorterColumn === columnKey, _cx2)),
     onClick: function onClick(e) {
       if (activeSorterType === 'descend' && activeSorterColumn === columnKey) {
@@ -108,52 +114,61 @@ var SorterMenu = function SorterMenu(_ref2) {
         setActiveSorterColumn(columnKey);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(icons.CaretDownFilled, null)));
+  }, /*#__PURE__*/React__default["default"].createElement(icons.CaretDownFilled, null)));
 };
 
 var FilterDropdown = function FilterDropdown(_ref3) {
   var prefixCls = _ref3.prefixCls,
-      column = _ref3.column;
+      column = _ref3.column,
+      _onOpen = _ref3.onOpen,
+      _onClose = _ref3.onClose;
   var _column$raw2 = column.raw,
       filterIcon = _column$raw2.filterIcon,
       filterDropdown = _column$raw2.filterDropdown,
       filterDropdownWidth = _column$raw2.filterDropdownWidth,
+      filterDropdownVisible = _column$raw2.filterDropdownVisible,
+      filterDropdownOverlay = _column$raw2.filterDropdownOverlay,
       onFilterDropdownVisibleChange = _column$raw2.onFilterDropdownVisibleChange,
       filterDropdownClassName = _column$raw2.filterDropdownClassName;
 
   var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
+    defaultVisible: false,
+    visible: filterDropdownVisible,
     onOpen: function onOpen() {
-      return onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(true, column);
+      _onOpen === null || _onOpen === void 0 ? void 0 : _onOpen();
+      onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(true, column.raw);
     },
     onClose: function onClose() {
-      return onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(false, column);
+      _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+      onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(false, column.raw);
     }
   }),
       menuVisible = _useUncontrolledToggl[0],
       menuVisibleAction = _useUncontrolledToggl[1];
 
-  var _React$useState = React__default['default'].useState(null),
+  var _React$useState = React__default["default"].useState(null),
       menuTrigger = _React$useState[0],
       setMenuTrigger = _React$useState[1];
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: prefixCls + "__trigger",
     ref: setMenuTrigger,
     onClick: menuVisibleAction.not
-  }, filterIcon), /*#__PURE__*/React__default['default'].createElement(Popper__default['default'], {
+  }, filterIcon), /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], Object.assign({
     className: prefixCls + "__popper",
-    visible: menuVisible,
-    attachEl: menuTrigger,
-    onClose: menuVisibleAction.off,
     // @DesignToken zIndex: `overlay`
     zIndex: 1050
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, filterDropdownOverlay, {
+    visible: menuVisible,
+    attachEl: menuTrigger,
+    onClose: menuVisibleAction.off
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classname.cx(prefixCls + "__content", filterDropdownClassName),
     style: {
       width: filterDropdownWidth
     }
   }, typeAssertion.isFunction(filterDropdown) ? filterDropdown({
-    columnData: column,
+    columnData: column.raw,
     setFilterDropdownVisible: menuVisibleAction.set
   }) : null)));
 };
@@ -161,4 +176,3 @@ var FilterDropdown = function FilterDropdown(_ref3) {
 exports.FilterDropdown = FilterDropdown;
 exports.SorterMenu = SorterMenu;
 exports.renderFilter = renderFilter;
-//# sourceMappingURL=TableAdvancedFilter.js.map