@hi-ui/table 4.7.0 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @hi-ui/table
 
+## 4.8.0
+
+### Minor Changes
+
+- [#3033](https://github.com/XiaoMi/hiui/pull/3033) [`17158fa6e`](https://github.com/XiaoMi/hiui/commit/17158fa6e286a560aeb9fd65d68856c2e7a00736) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(table): 支持表头列合并 (#3032)
+
+- [#2978](https://github.com/XiaoMi/hiui/pull/2978) [`f807f7dda`](https://github.com/XiaoMi/hiui/commit/f807f7ddae07184a0584e16d017a3d9f5785d4b8) Thanks [@fcppddl](https://github.com/fcppddl)! - feat(table): 将表格中的交互统一加上回调事件 (#2977)
+
+- [#3034](https://github.com/XiaoMi/hiui/pull/3034) [`83be3c14b`](https://github.com/XiaoMi/hiui/commit/83be3c14b9e8cd3e73ec477895a47b925439a3a5) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(table): SettingDrawer 增加 onReset api (#3021)
+
+### Patch Changes
+
+- Updated dependencies [[`241447e14`](https://github.com/XiaoMi/hiui/commit/241447e148f4544c6a08623d60d977e286ec9d64), [`b2d784b23`](https://github.com/XiaoMi/hiui/commit/b2d784b23682e70cbc7b09e3396f51fda02e2223)]:
+  - @hi-ui/scrollbar@4.2.0
+  - @hi-ui/select@4.6.0
+
 ## 4.7.0
 
 ### Minor Changes

package/lib/cjs/SettingDrawer.js

@@ -55,6 +55,7 @@ var SettingDrawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     sortedColKeysPropBeforeVerify = _ref.sortedColKeys,
     onSortedColKeysChange = _ref.onSortedColKeysChange,
     onSetColKeysChange = _ref.onSetColKeysChange,
+    onReset = _ref.onReset,
     checkDisabledColKeys = _ref.checkDisabledColKeys,
     dragDisabledColKeys = _ref.dragDisabledColKeys,
     extraHeader = _ref.extraHeader,
@@ -124,6 +125,7 @@ var SettingDrawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var resetLatest = useLatest.useLatestCallback(function () {
     setCacheHiddenColKeys(hiddenColKeys);
     setCacheSortedCols(sortedCols);
+    onReset === null || onReset === void 0 ? void 0 : onReset();
   });
   // 当 visible 由 false 变为 true 时触发
   var prevShowPopperRef = React.useRef(!visible);

package/lib/cjs/TableColumnMenu.js

@@ -48,7 +48,9 @@ var TableColumnMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     leftFreezeColumn = _useTableContext.leftFreezeColumn,
     setLeftFreezeColumn = _useTableContext.setLeftFreezeColumn,
     isHighlightedCol = _useTableContext.isHighlightedCol,
-    onHighlightedColChange = _useTableContext.onHighlightedColChange;
+    onHighlightedColChange = _useTableContext.onHighlightedColChange,
+    highlightedColKeys = _useTableContext.highlightedColKeys,
+    onHighlightedCol = _useTableContext.onHighlightedCol;
   var dataKey = column.id,
     columnRaw = column.raw;
   var canSort = !!columnRaw.sorter;
@@ -112,6 +114,13 @@ var TableColumnMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     icon: /*#__PURE__*/React__default["default"].createElement(icons.ColumnHeightOutlined, null),
     onSwitch: function onSwitch(shouldActive) {
       onHighlightedColChange(column, shouldActive);
+      var latestHighlightedColKeys = shouldActive ? [].concat(highlightedColKeys, [column.raw.dataKey || '']).filter(Boolean) : [].concat(highlightedColKeys.filter(function (keys) {
+        return keys !== column.raw.dataKey;
+      }));
+      onHighlightedCol === null || onHighlightedCol === void 0 ? void 0 : onHighlightedCol({
+        active: shouldActive,
+        column: column.raw
+      }, latestHighlightedColKeys);
       menuVisibleAction.off();
     }
   }), /*#__PURE__*/React__default["default"].createElement(TableColumnMenuItem, {

package/lib/cjs/TheadContent.js

@@ -68,9 +68,14 @@ var TheadContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           groupLastColumn = true;
         }
       }
+      var stickyColProps = getStickyColProps(col);
       var cell = /*#__PURE__*/React__default["default"].createElement("th", Object.assign({
         key: dataKey
-      }, getStickyColProps(col), {
+      }, stickyColProps, {
+        style: Object.assign(Object.assign({}, stickyColProps.style), {
+          // 表头合并场景下，被合并的表头需要隐藏
+          display: (col === null || col === void 0 ? void 0 : col.colSpan) === 0 ? 'none' : undefined
+        }),
         className: classname.cx(prefixCls + "-cell", raw.className, isHighlightedCol(dataKey) && prefixCls + "-cell__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "-cell__col--hovered-highlight", activeColumnKeysAction.has(dataKey) && prefixCls + "-cell__col--active", groupLastColumn && prefixCls + "-cell--group-last-column"),
         // @ts-ignore
         colSpan: col.colSpan,
@@ -88,6 +93,8 @@ var TheadContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           return activeColumnKeysAction.remove(dataKey);
         }
       }));
+      // 当有表头列合并时，将当前列的索引设置为最后一个被合并的列的索引，这样在拖拽时，UI 和交互才更符合直觉
+      var index = col.colSpan && col.colSpan > 1 ? colIndex + col.colSpan - 1 : colIndex;
       return resizable && colIndex !== colWidths.length - 1 ? ( /*#__PURE__*/React__default["default"].createElement(reactResizable.Resizable, {
         key: colIndex,
         className: prefixCls + "__resizable",
@@ -98,12 +105,12 @@ var TheadContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           className: prefixCls + "__resizable-handle"
         }),
         height: 0,
-        width: colWidths[colIndex],
+        width: colWidths[index],
         onResize: function onResize(evt, options) {
-          onColumnResizable(evt, options, colIndex);
+          onColumnResizable(evt, options, index);
         },
         onResizeStop: function onResizeStop(evt, options) {
-          _onResizeStop === null || _onResizeStop === void 0 ? void 0 : _onResizeStop(evt, options === null || options === void 0 ? void 0 : options.size, colIndex, colWidths);
+          _onResizeStop === null || _onResizeStop === void 0 ? void 0 : _onResizeStop(evt, options === null || options === void 0 ? void 0 : options.size, index, colWidths);
         }
       }, cell)) : cell;
     }));

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

@@ -0,0 +1,53 @@
+/** @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 React = require('react');
+var useChange = function useChange(_ref) {
+  var activeSorterColumn = _ref.activeSorterColumn,
+    activeSorterType = _ref.activeSorterType,
+    columns = _ref.columns,
+    showData = _ref.showData,
+    onChange = _ref.onChange;
+  var changeRef = React.useRef({
+    sort: {
+      activeSorterColumn: activeSorterColumn,
+      activeSorterType: activeSorterType
+    }
+  });
+  React.useEffect(function () {
+    var sort = changeRef.current.sort;
+    var sortNotChange = sort.activeSorterColumn === activeSorterColumn && sort.activeSorterType === activeSorterType;
+    if (sortNotChange) return;
+    var changeObj = {
+      sorter: {
+        order: activeSorterType,
+        column: columns.filter(function (d) {
+          return d.dataKey === activeSorterColumn;
+        })[0]
+      },
+      extra: {
+        action: 'sorter',
+        currentDataSource: showData.map(function (d) {
+          return d.raw;
+        })
+      }
+    };
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      sorter: changeObj.sorter
+    }, changeObj.extra);
+    sort.activeSorterColumn = activeSorterColumn;
+    sort.activeSorterType = activeSorterType;
+  }, [activeSorterColumn, activeSorterType, columns, showData, onChange]);
+};
+exports.useChange = useChange;

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

@@ -43,7 +43,8 @@ var useColumns = function useColumns(_ref) {
           dataKey: raw.dataKey,
           title: raw.title,
           align: (_a = raw.align) !== null && _a !== void 0 ? _a : 'left',
-          render: raw.render
+          render: raw.render,
+          colSpan: raw.colSpan
         });
       });
       // 记录下标位置，方便冻结列操作计算时快速获取更新
@@ -74,9 +75,10 @@ var useColumns = function useColumns(_ref) {
       // 在最后一层，colSpan = 1, rowSpan = maxDepth - depth + 1
       // 不在最后一层，rowSpan = 1, colSpan = 叶子节点后代数量
       flattedColumns.forEach(function (column) {
+        var _a;
         if (treeUtils.isLeaf(column)) {
           column.rowSpan = maxColumnDepth - column.depth + 1;
-          column.colSpan = 1;
+          column.colSpan = (_a = column.colSpan) !== null && _a !== void 0 ? _a : 1;
         } else {
           column.rowSpan = 1;
           column.colSpan = treeUtils.getLeafChildren(column).length;

package/lib/cjs/use-table.js

@@ -26,6 +26,7 @@ var useLatest = require('@hi-ui/use-latest');
 var index = require('./utils/index.js');
 var useAsyncSwitch = require('./hooks/use-async-switch.js');
 var useExpand = require('./hooks/use-expand.js');
+var useChange = require('./hooks/use-change.js');
 var useColWidth = require('./hooks/use-col-width.js');
 var useColgroup = require('./hooks/use-colgroup.js');
 var useDrag = require('./hooks/use-drag.js');
@@ -91,7 +92,9 @@ var useTable = function useTable(_a) {
     scrollbar = _a.scrollbar,
     rowClassName = _a.rowClassName,
     cellClassName = _a.cellClassName,
-    rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName"]);
+    onChange = _a.onChange,
+    onHighlightedCol = _a.onHighlightedCol,
+    rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName", "onChange", "onHighlightedCol"]);
   /**
    * 获取 key 字段值
    */
@@ -513,6 +516,13 @@ var useTable = function useTable(_a) {
     }
     return _data;
   }, [activeSorterColumn, activeSorterType, transitionData, columns]);
+  useChange.useChange({
+    activeSorterColumn: activeSorterColumn,
+    activeSorterType: activeSorterType,
+    columns: columns,
+    showData: showData,
+    onChange: onChange
+  });
   return Object.assign(Object.assign({
     measureRowElementRef: measureRowElementRef,
     rootProps: rootProps,
@@ -594,7 +604,8 @@ var useTable = function useTable(_a) {
     setHeaderTableElement: setHeaderTableElement,
     scrollbar: scrollbar,
     rowClassName: rowClassName,
-    cellClassName: cellClassName
+    cellClassName: cellClassName,
+    onHighlightedCol: onHighlightedCol
   });
 };
 exports.useTable = useTable;

package/lib/esm/SettingDrawer.js

@@ -42,6 +42,7 @@ var SettingDrawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     sortedColKeysPropBeforeVerify = _ref.sortedColKeys,
     onSortedColKeysChange = _ref.onSortedColKeysChange,
     onSetColKeysChange = _ref.onSetColKeysChange,
+    onReset = _ref.onReset,
     checkDisabledColKeys = _ref.checkDisabledColKeys,
     dragDisabledColKeys = _ref.dragDisabledColKeys,
     extraHeader = _ref.extraHeader,
@@ -111,6 +112,7 @@ var SettingDrawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var resetLatest = useLatestCallback(function () {
     setCacheHiddenColKeys(hiddenColKeys);
     setCacheSortedCols(sortedCols);
+    onReset === null || onReset === void 0 ? void 0 : onReset();
   });
   // 当 visible 由 false 变为 true 时触发
   var prevShowPopperRef = useRef(!visible);

package/lib/esm/TableColumnMenu.js

@@ -35,7 +35,9 @@ var TableColumnMenu = /*#__PURE__*/forwardRef(function (_ref, ref) {
     leftFreezeColumn = _useTableContext.leftFreezeColumn,
     setLeftFreezeColumn = _useTableContext.setLeftFreezeColumn,
     isHighlightedCol = _useTableContext.isHighlightedCol,
-    onHighlightedColChange = _useTableContext.onHighlightedColChange;
+    onHighlightedColChange = _useTableContext.onHighlightedColChange,
+    highlightedColKeys = _useTableContext.highlightedColKeys,
+    onHighlightedCol = _useTableContext.onHighlightedCol;
   var dataKey = column.id,
     columnRaw = column.raw;
   var canSort = !!columnRaw.sorter;
@@ -99,6 +101,13 @@ var TableColumnMenu = /*#__PURE__*/forwardRef(function (_ref, ref) {
     icon: /*#__PURE__*/React__default.createElement(ColumnHeightOutlined, null),
     onSwitch: function onSwitch(shouldActive) {
       onHighlightedColChange(column, shouldActive);
+      var latestHighlightedColKeys = shouldActive ? [].concat(highlightedColKeys, [column.raw.dataKey || '']).filter(Boolean) : [].concat(highlightedColKeys.filter(function (keys) {
+        return keys !== column.raw.dataKey;
+      }));
+      onHighlightedCol === null || onHighlightedCol === void 0 ? void 0 : onHighlightedCol({
+        active: shouldActive,
+        column: column.raw
+      }, latestHighlightedColKeys);
       menuVisibleAction.off();
     }
   }), /*#__PURE__*/React__default.createElement(TableColumnMenuItem, {

package/lib/esm/TheadContent.js

@@ -56,9 +56,14 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
           groupLastColumn = true;
         }
       }
+      var stickyColProps = getStickyColProps(col);
       var cell = /*#__PURE__*/React__default.createElement("th", Object.assign({
         key: dataKey
-      }, getStickyColProps(col), {
+      }, stickyColProps, {
+        style: Object.assign(Object.assign({}, stickyColProps.style), {
+          // 表头合并场景下，被合并的表头需要隐藏
+          display: (col === null || col === void 0 ? void 0 : col.colSpan) === 0 ? 'none' : undefined
+        }),
         className: cx(prefixCls + "-cell", raw.className, isHighlightedCol(dataKey) && prefixCls + "-cell__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "-cell__col--hovered-highlight", activeColumnKeysAction.has(dataKey) && prefixCls + "-cell__col--active", groupLastColumn && prefixCls + "-cell--group-last-column"),
         // @ts-ignore
         colSpan: col.colSpan,
@@ -76,6 +81,8 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
           return activeColumnKeysAction.remove(dataKey);
         }
       }));
+      // 当有表头列合并时，将当前列的索引设置为最后一个被合并的列的索引，这样在拖拽时，UI 和交互才更符合直觉
+      var index = col.colSpan && col.colSpan > 1 ? colIndex + col.colSpan - 1 : colIndex;
       return resizable && colIndex !== colWidths.length - 1 ? ( /*#__PURE__*/React__default.createElement(Resizable, {
         key: colIndex,
         className: prefixCls + "__resizable",
@@ -86,12 +93,12 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
           className: prefixCls + "__resizable-handle"
         }),
         height: 0,
-        width: colWidths[colIndex],
+        width: colWidths[index],
         onResize: function onResize(evt, options) {
-          onColumnResizable(evt, options, colIndex);
+          onColumnResizable(evt, options, index);
         },
         onResizeStop: function onResizeStop(evt, options) {
-          _onResizeStop === null || _onResizeStop === void 0 ? void 0 : _onResizeStop(evt, options === null || options === void 0 ? void 0 : options.size, colIndex, colWidths);
+          _onResizeStop === null || _onResizeStop === void 0 ? void 0 : _onResizeStop(evt, options === null || options === void 0 ? void 0 : options.size, index, colWidths);
         }
       }, cell)) : cell;
     }));

package/lib/esm/hooks/use-change.js

@@ -0,0 +1,48 @@
+/** @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.
+ */
+import { useRef, useEffect } from 'react';
+var useChange = function useChange(_ref) {
+  var activeSorterColumn = _ref.activeSorterColumn,
+    activeSorterType = _ref.activeSorterType,
+    columns = _ref.columns,
+    showData = _ref.showData,
+    onChange = _ref.onChange;
+  var changeRef = useRef({
+    sort: {
+      activeSorterColumn: activeSorterColumn,
+      activeSorterType: activeSorterType
+    }
+  });
+  useEffect(function () {
+    var sort = changeRef.current.sort;
+    var sortNotChange = sort.activeSorterColumn === activeSorterColumn && sort.activeSorterType === activeSorterType;
+    if (sortNotChange) return;
+    var changeObj = {
+      sorter: {
+        order: activeSorterType,
+        column: columns.filter(function (d) {
+          return d.dataKey === activeSorterColumn;
+        })[0]
+      },
+      extra: {
+        action: 'sorter',
+        currentDataSource: showData.map(function (d) {
+          return d.raw;
+        })
+      }
+    };
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      sorter: changeObj.sorter
+    }, changeObj.extra);
+    sort.activeSorterColumn = activeSorterColumn;
+    sort.activeSorterType = activeSorterType;
+  }, [activeSorterColumn, activeSorterType, columns, showData, onChange]);
+};
+export { useChange };

package/lib/esm/hooks/use-colgroup.js

@@ -31,7 +31,8 @@ var useColumns = function useColumns(_ref) {
           dataKey: raw.dataKey,
           title: raw.title,
           align: (_a = raw.align) !== null && _a !== void 0 ? _a : 'left',
-          render: raw.render
+          render: raw.render,
+          colSpan: raw.colSpan
         });
       });
       // 记录下标位置，方便冻结列操作计算时快速获取更新
@@ -62,9 +63,10 @@ var useColumns = function useColumns(_ref) {
       // 在最后一层，colSpan = 1, rowSpan = maxDepth - depth + 1
       // 不在最后一层，rowSpan = 1, colSpan = 叶子节点后代数量
       flattedColumns.forEach(function (column) {
+        var _a;
         if (isLeaf(column)) {
           column.rowSpan = maxColumnDepth - column.depth + 1;
-          column.colSpan = 1;
+          column.colSpan = (_a = column.colSpan) !== null && _a !== void 0 ? _a : 1;
         } else {
           column.rowSpan = 1;
           column.colSpan = getLeafChildren(column).length;

package/lib/esm/use-table.js

@@ -20,6 +20,7 @@ import { useLatestCallback } from '@hi-ui/use-latest';
 import { setColumnsDefaultWidth, parseFixedColumns } from './utils/index.js';
 import { useAsyncSwitch } from './hooks/use-async-switch.js';
 import { useExpand } from './hooks/use-expand.js';
+import { useChange } from './hooks/use-change.js';
 import { useColWidth } from './hooks/use-col-width.js';
 import { useColumns } from './hooks/use-colgroup.js';
 import { useTableDrag } from './hooks/use-drag.js';
@@ -79,7 +80,9 @@ var useTable = function useTable(_a) {
     scrollbar = _a.scrollbar,
     rowClassName = _a.rowClassName,
     cellClassName = _a.cellClassName,
-    rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName"]);
+    onChange = _a.onChange,
+    onHighlightedCol = _a.onHighlightedCol,
+    rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName", "onChange", "onHighlightedCol"]);
   /**
    * 获取 key 字段值
    */
@@ -501,6 +504,13 @@ var useTable = function useTable(_a) {
     }
     return _data;
   }, [activeSorterColumn, activeSorterType, transitionData, columns]);
+  useChange({
+    activeSorterColumn: activeSorterColumn,
+    activeSorterType: activeSorterType,
+    columns: columns,
+    showData: showData,
+    onChange: onChange
+  });
   return Object.assign(Object.assign({
     measureRowElementRef: measureRowElementRef,
     rootProps: rootProps,
@@ -582,7 +592,8 @@ var useTable = function useTable(_a) {
     setHeaderTableElement: setHeaderTableElement,
     scrollbar: scrollbar,
     rowClassName: rowClassName,
-    cellClassName: cellClassName
+    cellClassName: cellClassName,
+    onHighlightedCol: onHighlightedCol
   });
 };
 export { useTable };

package/lib/types/SettingDrawer.d.ts

@@ -32,6 +32,10 @@ export interface SettingDrawerProps extends HiBaseHTMLProps<'div'> {
      * 确认设置回调
      */
     onSetColKeysChange?: (sortedColKeys: string[], hiddenColKeys: string[], visibleCols: TableColumnItem[]) => void;
+    /**
+     * 重置按钮点击时回调
+     */
+    onReset?: () => void;
     /**
      * 隐藏列
      */

package/lib/types/context.d.ts

@@ -48,6 +48,10 @@ export declare const TableProvider: import("react").Provider<(Omit<{
     scrollbar: boolean | import("packages/ui/scrollbar/lib/types").ScrollbarProps | undefined;
     rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
     cellClassName: ((record: Record<string, any>, column: Record<string, any>, index: number) => string) | undefined;
+    onHighlightedCol: ((changedColInfo: {
+        active: boolean;
+        column: import("./types").TableColumnItem;
+    }, highlightedColKeys: string[]) => void) | undefined;
     scrollLeft: number;
     scrollRight: number;
     measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
@@ -171,6 +175,10 @@ export declare const useTableContext: () => Omit<{
     scrollbar: boolean | import("packages/ui/scrollbar/lib/types").ScrollbarProps | undefined;
     rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
     cellClassName: ((record: Record<string, any>, column: Record<string, any>, index: number) => string) | undefined;
+    onHighlightedCol: ((changedColInfo: {
+        active: boolean;
+        column: import("./types").TableColumnItem;
+    }, highlightedColKeys: string[]) => void) | undefined;
     scrollLeft: number;
     scrollRight: number;
     measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;

package/lib/types/hooks/use-change.d.ts

@@ -0,0 +1,20 @@
+import { TableColumnItem, FlattedTableRowData } from '../types';
+export interface Sorter {
+    order: string | null;
+    column: TableColumnItem;
+}
+export interface Action {
+    sorter?: Sorter;
+}
+export interface Extra {
+    action: keyof Action;
+    currentDataSource: object[];
+}
+export interface UseChangeProps {
+    activeSorterColumn: string | null;
+    activeSorterType: string | null;
+    columns: TableColumnItem[];
+    showData: FlattedTableRowData[];
+    onChange?: (action: Action, extra: Extra) => void;
+}
+export declare const useChange: ({ activeSorterColumn, activeSorterType, columns, showData, onChange, }: UseChangeProps) => void;

package/lib/types/types.d.ts

@@ -117,6 +117,10 @@ export declare type TableColumnItem = {
      * 多级表头
      */
     children?: TableColumnItem[];
+    /**
+     * 表头列合并，设置为 0 时，不渲染
+     */
+    colSpan?: number;
     /**
      * 控制单元格自定义渲染
      */

package/lib/types/use-table.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { PaginationProps } from '@hi-ui/pagination';
 import { ScrollbarProps } from '@hi-ui/scrollbar';
+import { Action, Extra } from './hooks/use-change';
 import { TableColumnItem, TableFrozenColumnOptions, TableRowEventData, TableRowSelection, FlattedTableColumnItemData, FlattedTableRowData } from './types';
-export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColumn, fixedToColumn: fixedToColumnProp, onFixedToColumn, scrollWidth, resizable, errorRowKeys, highlightedColKeys: highlightedColKeysProp, highlightedRowKeys: highlightedRowKeysProp, showColHighlight, showRowHighlight, highlightRowOnDoubleClick, defaultExpandedRowKeys, expandedRowKeys: expandRowKeysProp, onExpand, defaultExpandAll, onLoadChildren, maxHeight, sticky, stickyTop, draggable, onDragStart, onDrop: onDropProp, onDropEnd, showColMenu, rowSelection, cellRender, footerRender, fieldKey, virtual, scrollbar, rowClassName, cellClassName, ...rootProps }: UseTableProps) => {
+export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColumn, fixedToColumn: fixedToColumnProp, onFixedToColumn, scrollWidth, resizable, errorRowKeys, highlightedColKeys: highlightedColKeysProp, highlightedRowKeys: highlightedRowKeysProp, showColHighlight, showRowHighlight, highlightRowOnDoubleClick, defaultExpandedRowKeys, expandedRowKeys: expandRowKeysProp, onExpand, defaultExpandAll, onLoadChildren, maxHeight, sticky, stickyTop, draggable, onDragStart, onDrop: onDropProp, onDropEnd, showColMenu, rowSelection, cellRender, footerRender, fieldKey, virtual, scrollbar, rowClassName, cellClassName, onChange, onHighlightedCol, ...rootProps }: UseTableProps) => {
     getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
@@ -49,6 +50,10 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
     scrollbar: boolean | ScrollbarProps | undefined;
     rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
     cellClassName: ((record: Record<string, any>, column: Record<string, any>, index: number) => string) | undefined;
+    onHighlightedCol: ((changedColInfo: {
+        active: boolean;
+        column: TableColumnItem;
+    }, highlightedColKeys: string[]) => void) | undefined;
     scrollLeft: number;
     scrollRight: number;
     measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
@@ -303,5 +308,16 @@ export interface UseTableProps {
      * 设置单元格类名
      */
     cellClassName?: (record: Record<string, any>, column: Record<string, any>, index: number) => string;
+    /**
+     * 设置排序变化回调
+     */
+    onChange?: (action: Action, extra: Extra) => void;
+    /**
+     * 设置列高亮回调
+     */
+    onHighlightedCol?: (changedColInfo: {
+        active: boolean;
+        column: TableColumnItem;
+    }, highlightedColKeys: string[]) => void;
 }
 export declare type UseTableReturn = ReturnType<typeof useTable>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/table",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -59,8 +59,8 @@
     "@hi-ui/pagination": "^4.0.16",
     "@hi-ui/popper": "^4.1.5",
     "@hi-ui/react-utils": "^4.0.4",
-    "@hi-ui/scrollbar": "^4.1.1",
-    "@hi-ui/select": "^4.4.2",
+    "@hi-ui/scrollbar": "^4.2.0",
+    "@hi-ui/select": "^4.6.0",
     "@hi-ui/spinner": "^4.0.9",
     "@hi-ui/times": "^4.0.4",
     "@hi-ui/tree-utils": "^4.1.6",