@hi-ui/schema-editable-table 4.0.0-experimental.1

package/lib/cjs/features/row-selection/hooks/use-sync-hover-style.js

@@ -0,0 +1,86 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-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 ctx = require('../../../ctx.js');
+var cls = require('../../../utils/cls.js');
+require('lodash-es');
+require('@tanstack/react-table');
+require('ahooks');
+
+/**
+ * 同步表格行的 hover 状态
+ * @desc 当表格分为选择列和主内容两部分时，确保 hover 效果能同步显示在两边
+ */
+function useSyncHoverStyle() {
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    tableContainerRef = _useEditableSchemaTab.tableContainerRef,
+    propsRef = _useEditableSchemaTab.propsRef;
+  var findClassName = "." + cls.cls('body-row');
+  // 用ref存储上一次 hover 的行元素，避免不必要的DOM查询
+  var lastHoveredRowsRef = React.useRef(null);
+  React.useEffect(function () {
+    var _a;
+    if (!tableContainerRef.current) return;
+    // 只在开启行选择时启用 hover 同步
+    if (!((_a = propsRef.current) === null || _a === void 0 ? void 0 : _a.rowSelection)) return;
+    // // 如果开启了列分组，则不启用 hover 同步
+    // TODO 此处需进一步细化处理场景
+    // if (propsRef.current.grouping) return
+    var container = tableContainerRef.current;
+    var clearHover = function clearHover() {
+      if (lastHoveredRowsRef.current) {
+        lastHoveredRowsRef.current.forEach(function (el) {
+          return el.removeAttribute('data-hovering');
+        });
+        lastHoveredRowsRef.current = null;
+      }
+    };
+    var handleMouseMove = function handleMouseMove(e) {
+      var _a, _b;
+      // 查找当前 hover 的行元素
+      var row = e.target.closest(findClassName);
+      // 如果没有找到行元素，清除上一次的 hover 状态
+      if (!row) return clearHover();
+      var rowId = row.getAttribute('data-id');
+      if (!rowId) return;
+      // 如果 hover 的是同一行，不做任何操作
+      if (((_b = (_a = lastHoveredRowsRef.current) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getAttribute('data-id')) === rowId) {
+        return;
+      }
+      // 清除上一次 hover 的行
+      clearHover();
+      // 找到所有相同 id 的行并添加 hover 状态
+      var currentRows = Array.from(container.querySelectorAll("tr[data-id=\"" + rowId + "\"]"));
+      currentRows.forEach(function (el) {
+        return el.setAttribute('data-hovering', '');
+      });
+      lastHoveredRowsRef.current = currentRows;
+    };
+    // 鼠标离开表格时清除所有 hover 状态
+    var handleMouseLeave = function handleMouseLeave() {
+      return clearHover();
+    };
+    container.addEventListener('mousemove', handleMouseMove);
+    container.addEventListener('mouseleave', handleMouseLeave);
+    return function () {
+      // 清理事件监听
+      container.removeEventListener('mousemove', handleMouseMove);
+      container.removeEventListener('mouseleave', handleMouseLeave);
+      // 组件卸载时清除所有hover状态
+      clearHover();
+    };
+  }, [tableContainerRef, propsRef, findClassName]);
+}
+exports.useSyncHoverStyle = useSyncHoverStyle;

package/lib/cjs/features/row-selection/indicator.js

@@ -0,0 +1,173 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var Space = require('@hi-ui/space');
+var Switch = require('@hi-ui/switch');
+var reactTable = require('@tanstack/react-table');
+var ctx = require('../../ctx.js');
+var cls = require('../../utils/cls.js');
+require('lodash-es');
+require('ahooks');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Space__default = /*#__PURE__*/_interopDefaultCompat(Space);
+var Switch__default = /*#__PURE__*/_interopDefaultCompat(Switch);
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+var dftFormatter = function dftFormatter(selectedCount) {
+  return "\u5DF2\u9009 " + selectedCount + " \u9879";
+};
+function RowSelectionIndicator() {
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab.table,
+    propsRef = _useEditableSchemaTab.propsRef;
+  // 经过性能优化，已移除额外订阅
+  // 此时保留，反而会导致本组件重复重渲染
+  // 保留此处注释，用以后续调整
+  // const { rowSelectionState } = useEditableSchemaTableCtx()
+  // useSubscribe(rowSelectionState)
+  var selectedCount = table.$getRowSelection().selectedRowKeys.length;
+  var _ref = propsRef.current.rowSelection || {},
+    _ref$enableIndicator = _ref.enableIndicator,
+    enableIndicator = _ref$enableIndicator === void 0 ? {} : _ref$enableIndicator;
+  var _enableIndicator$form = enableIndicator.formatter,
+    formatter = _enableIndicator$form === void 0 ? dftFormatter : _enableIndicator$form,
+    enableOnlyShowSelected = enableIndicator.enableOnlyShowSelected;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cls.cls('row-selection-indicator')
+  }, /*#__PURE__*/React__default["default"].createElement(Space__default["default"], {
+    wrap: false,
+    style: {
+      whiteSpace: 'nowrap'
+    },
+    separator: enableOnlyShowSelected ? /*#__PURE__*/React__default["default"].createElement("span", {
+      style: {
+        color: 'rgba(0, 0, 0, 0.06)'
+      }
+    }, "|") : null
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, formatter(selectedCount)), enableOnlyShowSelected ? /*#__PURE__*/React__default["default"].createElement(OnlyShowSelected, {
+    selectedCount: selectedCount
+  }) : null));
+}
+function OnlyShowSelected(_ref2) {
+  var selectedCount = _ref2.selectedCount;
+  var _useEditableSchemaTab2 = ctx.useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab2.table,
+    subscription = _useEditableSchemaTab2.subscription,
+    setDynamicOpts = _useEditableSchemaTab2.setDynamicOpts;
+  var checkedRef = React.useRef(false);
+  // 如果未选中行，且未开启开关，则禁用
+  var disabled = selectedCount === 0 && !checkedRef.current;
+  var prePaginationState = React.useRef();
+  return /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(Switch__default["default"], {
+    disabled: disabled,
+    content: ['开', '关'],
+    onChange: function onChange(checked) {
+      checkedRef.current = checked;
+      if (checked) {
+        var keys = table.$getRowSelection().selectedRowKeys;
+        var rowDataList = [];
+        for (var _iterator = _createForOfIteratorHelperLoose(keys), _step; !(_step = _iterator()).done;) {
+          var rowId = _step.value;
+          var data = table.$getRealtimeRowData(rowId) || table.$selectedRowsCache.get(rowId);
+          if (data) rowDataList.push(data);
+        }
+        // 先静默更新内部订阅
+        subscription.setValue(rowDataList, {
+          silent: true
+        });
+        // 再更新分页状态
+        table.setPagination(function (state) {
+          // 暂存分页状态
+          prePaginationState.current = state;
+          var rowCount = rowDataList.length;
+          return Object.assign(Object.assign({}, state), {
+            pageIndex: 0,
+            rowCount: rowCount,
+            $fromCustom: true
+          });
+        });
+        // 最后换成前端分页
+        setDynamicOpts({
+          manualPagination: false,
+          getPaginationRowModel: reactTable.getPaginationRowModel()
+        });
+      } else {
+        // 先恢复内部订阅
+        subscription.setValue(subscription.getPrevValue(), {
+          silent: true
+        });
+        // 再恢复分页状态
+        table.setPagination(function (state) {
+          var preState = prePaginationState.current;
+          // 清空暂存的分页状态
+          prePaginationState.current = undefined;
+          return Object.assign(Object.assign({}, preState), {
+            $fromCustom: false
+          });
+        });
+        // 最后恢复成后端分页
+        setDynamicOpts({
+          manualPagination: true,
+          getPaginationRowModel: undefined
+        });
+      }
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      position: 'relative',
+      top: 1,
+      marginLeft: 8,
+      userSelect: 'none'
+    }
+  }, "\u4EC5\u663E\u793A\u5DF2\u9009"));
+}
+exports.RowSelectionIndicator = RowSelectionIndicator;

package/lib/cjs/features/row-selection/wrapper.js

@@ -0,0 +1,119 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var cls = require('../../utils/cls.js');
+var ctx = require('../../ctx.js');
+require('../../container/index.js');
+var useSyncHoverStyle = require('./hooks/use-sync-hover-style.js');
+var useClickSelect = require('./hooks/use-click-select.js');
+var cell = require('./cell.js');
+require('@hi-ui/use-subscription');
+require('ahooks');
+require('lodash-es');
+require('@hi-ui/space');
+require('@hi-ui/switch');
+require('@tanstack/react-table');
+var ctx$1 = require('../../container/ctx.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function SelectionTable(props) {
+  var width = 50;
+  return /*#__PURE__*/React__default["default"].createElement("table", {
+    className: cls.cls('mock-selection'),
+    "data-is-selection": true
+  }, /*#__PURE__*/React__default["default"].createElement("colgroup", null, /*#__PURE__*/React__default["default"].createElement("col", {
+    style: {
+      width: width,
+      minWidth: width
+    }
+  })), props.children);
+}
+function SelectionHeader() {
+  return /*#__PURE__*/React__default["default"].createElement(SelectionTable, null, /*#__PURE__*/React__default["default"].createElement("thead", {
+    className: cls.cls('header'),
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("tr", {
+    className: cls.cls('header-row')
+  }, /*#__PURE__*/React__default["default"].createElement("th", {
+    className: cls.cls('header-cell'),
+    "data-text-align": "center"
+  }, /*#__PURE__*/React__default["default"].createElement(cell.SelectionHeaderCell, null)))));
+}
+function SelectionBody() {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _useEditableSchemaTab = ctx.useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab.table;
+  var _useTableContainer = ctx$1.useTableContainer(),
+    virtualize = _useTableContainer.virtualize;
+  var _table$getRowModel = table.getRowModel(),
+    realRows = _table$getRowModel.rows;
+  // 同步表格行的 hover 状态
+  useSyncHoverStyle.useSyncHoverStyle();
+  // 点击行选择 // 内部有开关决定是否启用
+  useClickSelect.useClickSelect();
+  return /*#__PURE__*/React__default["default"].createElement(SelectionTable, null, /*#__PURE__*/React__default["default"].createElement("tbody", {
+    className: cls.cls('body')
+  }, ((_b = (_a = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 0) > 0 && ( /*#__PURE__*/React__default["default"].createElement("tr", {
+    className: cls.cls('body-row', 'virtual-spacer', 'virtual-spacer-top')
+  }, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      height: (_d = (_c = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _c === void 0 ? void 0 : _c.top) !== null && _d !== void 0 ? _d : 0
+    }
+  }))), ((virtualize === null || virtualize === void 0 ? void 0 : virtualize.rows) || realRows).map(function (rowOrVirtual) {
+    var row = 'id' in rowOrVirtual ? rowOrVirtual : realRows[rowOrVirtual.index];
+    if (!row) return null;
+    return /*#__PURE__*/React__default["default"].createElement("tr", {
+      key: row.id,
+      className: cls.cls('body-row'),
+      "data-index": row.index,
+      "data-id": row.id
+    }, /*#__PURE__*/React__default["default"].createElement("td", {
+      className: cls.cls('body-cell'),
+      "data-text-align": "center"
+    }, /*#__PURE__*/React__default["default"].createElement(cell.SelectionBodyCell, {
+      row: row
+    })));
+  }), ((_f = (_e = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _e === void 0 ? void 0 : _e.bottom) !== null && _f !== void 0 ? _f : 0) > 0 && ( /*#__PURE__*/React__default["default"].createElement("tr", {
+    className: cls.cls('body-row', 'virtual-spacer', 'virtual-spacer-bottom')
+  }, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      height: (_h = (_g = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _g === void 0 ? void 0 : _g.bottom) !== null && _h !== void 0 ? _h : 0
+    }
+  })))));
+}
+// 暂时用不上，预留位置待扩展
+function SelectionFooter() {
+  return /*#__PURE__*/React__default["default"].createElement(SelectionTable, null, /*#__PURE__*/React__default["default"].createElement("tfoot", {
+    className: cls.cls('footer')
+  }, /*#__PURE__*/React__default["default"].createElement("tr", {
+    className: cls.cls('footer-row')
+  }, /*#__PURE__*/React__default["default"].createElement("td", {
+    className: cls.cls('footer-cell'),
+    "data-text-align": "center"
+  }))));
+}
+var RowSelection = {
+  Header: SelectionHeader,
+  Body: SelectionBody,
+  Footer: SelectionFooter
+};
+exports.RowSelection = RowSelection;

package/lib/cjs/features/setting-bridge.js

@@ -0,0 +1,56 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-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');
+
+/**
+ * 将字段配置转换为列设置需要的格式
+ */
+function mapFieldsToColumns(fields) {
+  return fields.map(function (field) {
+    var _a, _b;
+    return {
+      id: field.dataIndex,
+      title: (typeof field.title === 'string' ? field.title : field._titleText) || field.dataIndex,
+      fixed: ((_a = field.control) === null || _a === void 0 ? void 0 : _a.fixed) || false,
+      hidden: (_b = field.control) === null || _b === void 0 ? void 0 : _b.hidden
+    };
+  });
+}
+function useTableSetting(props) {
+  var columns = React.useMemo(function () {
+    return mapFieldsToColumns(props.fields);
+  }, [props.fields]);
+  // 处理列设置变更
+  var handleSettingChange = function handleSettingChange(result) {
+    var _a, _b;
+    var table = (_a = props.tableRef.current) === null || _a === void 0 ? void 0 : _a.table;
+    if (!table) return;
+    (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, result);
+    table.setState(function (state) {
+      return Object.assign(Object.assign({}, state), {
+        columnOrder: result.keys,
+        columnPinning: result.grouped.fixed,
+        columnVisibility: result.grouped.visibility
+      });
+    });
+  };
+  return {
+    columns: columns,
+    storageKey: props.storageKey,
+    onChange: handleSettingChange
+  };
+}
+exports.mapFieldsToColumns = mapFieldsToColumns;
+exports.useTableSetting = useTableSetting;

package/lib/cjs/features/sorter/bridge.js

@@ -0,0 +1,65 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var schemaTableExtensions = require('@hi-ui/schema-table-extensions');
+var useSubscription = require('@hi-ui/use-subscription');
+var schemaUtils = require('@hi-ui/schema-utils');
+var ctx = require('../../ctx.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function TableSorterBridge(props) {
+  var _a;
+  var column = props.column,
+    sorterConfig = props.sorter;
+  var _useEditTableCtx = ctx.useEditableSchemaTableCtx(),
+    sorterState = _useEditTableCtx.sorterState,
+    propsRef = _useEditTableCtx.propsRef;
+  var _React$useState = React__default["default"].useState(null),
+    direction = _React$useState[0],
+    setDirection = _React$useState[1];
+  // 列的排序状态会受到全局排序状态的影响
+  // 全局变更时，主动触发一次自身的重渲染
+  useSubscription.useSubscribe(sorterState);
+  // 外部主动设置时自动更新至内部
+  var sorterValue = column.getIsSorted();
+  React.useEffect(function () {
+    setDirection(sorterValue || null);
+  }, [sorterValue]);
+  var handleChange = function handleChange(direction) {
+    setDirection(direction);
+    // 取消排序时，需要主动清除排序状态
+    if (direction === null) {
+      column.clearSorting();
+      return;
+    }
+    var isDesc = direction === 'desc';
+    // toggleSorting 需要手动传入是否降序，是否可多排序
+    column.toggleSorting(isDesc, column.getCanMultiSort());
+  };
+  var fieldTooltipConfig = schemaUtils.getBoolConfig(sorterConfig === null || sorterConfig === void 0 ? void 0 : sorterConfig.tooltip, {});
+  var propsTooltipConfig = (_a = propsRef.current.sorter) === null || _a === void 0 ? void 0 : _a.tooltip;
+  var tooltip = fieldTooltipConfig || propsTooltipConfig ? schemaUtils.mergeProps(propsTooltipConfig, fieldTooltipConfig) : undefined;
+  return /*#__PURE__*/React__default["default"].createElement(schemaTableExtensions.TableSorter, {
+    direction: direction,
+    onChange: handleChange,
+    tooltip: tooltip
+  });
+}
+exports.TableSorterBridge = TableSorterBridge;

package/lib/cjs/features/sorter/get-sorter-config.js

@@ -0,0 +1,46 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-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 schemaUtils = require('@hi-ui/schema-utils');
+function getSorterConfig(field, ctx) {
+  var _a;
+  var sorterConfig = (_a = field.control) === null || _a === void 0 ? void 0 : _a.sorter;
+  if (!sorterConfig) return undefined;
+  var propsRef = ctx.propsRef;
+  var tableSorterConfig = propsRef.current.sorter;
+  var config = schemaUtils.getBoolConfig(sorterConfig, {
+    sortingFn: 'textLocalCompare'
+  }, {
+    mergeDft: true
+  });
+  if (config) {
+    // 如果配置为 textLocalCompare，则使用内置的 textLocalCompare 函数
+    if (config.sortingFn === 'textLocalCompare') config.sortingFn = textLocalCompare;
+    // 如果字段配置了 sortUndefined，则优先使用字段配置的 sortUndefined
+    // 否则使用表格配置的 sortUndefined
+    config.sortUndefined = config.sortUndefined || (tableSorterConfig === null || tableSorterConfig === void 0 ? void 0 : tableSorterConfig.sortUndefined);
+  }
+  return config;
+}
+function textLocalCompare(rowA, rowB, columnId) {
+  try {
+    var a = rowA.getValue(columnId);
+    var b = rowB.getValue(columnId);
+    return schemaUtils.localCompare(a, b);
+  } catch (error) {
+    console.log('textLocalCompare', error);
+    return 0;
+  }
+}
+exports.getSorterConfig = getSorterConfig;

package/lib/cjs/features/sorter/index.js

@@ -0,0 +1,29 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-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 useSubscription = require('@hi-ui/use-subscription');
+require('@tanstack/react-table');
+require('../../utils/cls.js');
+require('react');
+require('lodash-es');
+require('ahooks');
+require('@hi-ui/schema-utils');
+require('@hi-ui/schema-table-extensions');
+function useSorterState() {
+  var sorterState = useSubscription.useSubscription([]);
+  return {
+    sorterState: sorterState
+  };
+}
+exports.useSorterState = useSorterState;

package/lib/cjs/features/sorter/use-opts.js

@@ -0,0 +1,81 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-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 reactTable = require('@tanstack/react-table');
+require('../../utils/cls.js');
+require('react');
+require('lodash-es');
+require('ahooks');
+var stateMerge = require('../../utils/state-merge.js');
+function useSorterOpts(ctx) {
+  var innerRef = ctx.innerRef,
+    propsRef = ctx.propsRef,
+    staticOptsRef = ctx.staticOptsRef;
+  return getSorterOptions({
+    innerRef: innerRef,
+    propsRef: propsRef,
+    staticOptsRef: staticOptsRef
+  });
+}
+/**
+ * 获取表格排序配置选项
+ */
+function getSorterOptions(ctx) {
+  var _ctx$staticOptsRef$cu = ctx.staticOptsRef.current,
+    enableSorter = _ctx$staticOptsRef$cu.enableSorter,
+    enableRemoteSorter = _ctx$staticOptsRef$cu.enableRemoteSorter;
+  if (!enableSorter) return {};
+  var sorterOpts = ctx.propsRef.current.sorter;
+  if (!sorterOpts) return {};
+  var onSortingChange = function onSortingChange(updater) {
+    var _a, _b;
+    var innerRef = ctx.innerRef;
+    var _innerRef$current = innerRef.current,
+      table = _innerRef$current.table,
+      propsRef = _innerRef$current.propsRef;
+    var state = table.getState().sorting;
+    var newState = typeof updater === 'function' ? updater(state) : updater;
+    // 先更新内部状态
+    table.setState(function (state) {
+      return Object.assign(Object.assign({}, state), {
+        sorting: newState
+      });
+    });
+    // 再更新订阅
+    innerRef.current.sorterState.setValue(newState);
+    // 通知外部更新
+    var notifyState = stateMerge.ensureStateFields(state, newState, 'desc', undefined);
+    (_b = (_a = propsRef.current.sorter) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, notifyState, {
+      rawState: newState
+    });
+  };
+  if (enableRemoteSorter) {
+    return {
+      manualSorting: true,
+      enableMultiSort: sorterOpts.enableMultiSort,
+      maxMultiSortColCount: sorterOpts.maxMultiSortColCount,
+      onSortingChange: onSortingChange
+    };
+  }
+  return {
+    manualSorting: false,
+    enableMultiSort: sorterOpts.enableMultiSort,
+    maxMultiSortColCount: sorterOpts.maxMultiSortColCount,
+    // 前端排序,使用 getSortedRowModel
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    onSortingChange: onSortingChange
+  };
+}
+exports.getSorterOptions = getSorterOptions;
+exports.useSorterOpts = useSorterOpts;