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

package/lib/esm/features/pagination/use-opts.js

@@ -0,0 +1,91 @@
+/** @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.
+ */
+import { useMemo } from 'react';
+import { isEqual } from 'lodash-es';
+import { getPaginationRowModel } from '@tanstack/react-table';
+import { resetRowSelectionAfterPaginationChange } from '../row-selection/hooks/use-opts.js';
+function usePaginationOpts(ctx) {
+  var innerRef = ctx.innerRef,
+    staticOptsRef = ctx.staticOptsRef;
+  return useMemo(function () {
+    return getPaginationOptions({
+      innerRef: innerRef,
+      staticOptsRef: staticOptsRef
+    });
+  }, [innerRef, staticOptsRef]);
+}
+var dftPageSize = 10;
+/**
+ * 获取表格分页配置选项
+ */
+function getPaginationOptions(ctx) {
+  var _ctx$staticOptsRef$cu = ctx.staticOptsRef.current,
+    enablePagination = _ctx$staticOptsRef$cu.enablePagination,
+    enableAsyncData = _ctx$staticOptsRef$cu.enableAsyncData,
+    enableRowGrouping = _ctx$staticOptsRef$cu.enableRowGrouping;
+  // 如果没有启用分页功能
+  if (!enablePagination) {
+    // 但启用了分组功能，则需要提供分页行模型以确保分组数据正确显示
+    // 这是因为TanStack Table的行模型执行顺序中，分页模型在分组模型之后
+    // 没有分页模型可能导致分组数据无法正确渲染
+    if (enableRowGrouping) {
+      return {
+        manualPagination: false,
+        // 提供分页行模型，但不显示分页控件（由外部控制）
+        getPaginationRowModel: getPaginationRowModel(),
+        autoResetPageIndex: false,
+        initialState: {
+          pagination: {
+            pageSize: Number.MAX_SAFE_INTEGER
+          }
+        }
+      };
+    }
+    // 既没有分页也没有分组，返回空配置
+    return {};
+  }
+  var onPaginationChange = function onPaginationChange(updater) {
+    var innerRef = ctx.innerRef;
+    var table = innerRef.current.table;
+    var state = table.getState().pagination;
+    var newState = typeof updater === 'function' ? updater(state) : updater;
+    // 如果分页状态没有变化，则不更新
+    if (isEqual(state, newState)) return;
+    // NOTE 此处修改为先更新订阅，再更新内部状态
+    // 原因是识别到，部分显式设置当前页的操作时，若先更新内部状态，可能会导致无法正确识别到页码的变化
+    // 先更新订阅
+    innerRef.current.paginationState.setValue(newState);
+    // 再更新内部状态
+    table.setState(function (state) {
+      return Object.assign(Object.assign({}, state), {
+        pagination: newState
+      });
+    });
+    // 如果开启了后端分页，并且没有配置 preserveSelectedRows，则需要清空选中状态
+    resetRowSelectionAfterPaginationChange({
+      innerRef: innerRef,
+      state: state,
+      newState: newState
+    });
+  };
+  if (enableAsyncData) {
+    return {
+      manualPagination: true,
+      onPaginationChange: onPaginationChange
+    };
+  }
+  return {
+    manualPagination: false,
+    // 前端分页，才使用getPaginationRowModel
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: onPaginationChange
+  };
+}
+export { dftPageSize, getPaginationOptions, usePaginationOpts };

package/lib/esm/features/pagination/use-state.js

@@ -0,0 +1,39 @@
+/** @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.
+ */
+import { useSubscription } from '@hi-ui/use-subscription';
+import { dftPageSize } from './use-opts.js';
+function getInitialState(ctx) {
+  var _a, _b, _c;
+  var propsRef = ctx.propsRef,
+    subscription = ctx.subscription;
+  // dftPageSize 仅用于类型收窄
+  // 实际上已经在 normalizeProps 中处理了
+  var pageSize = (_b = (_a = propsRef.current.pagination) === null || _a === void 0 ? void 0 : _a.pageSize) !== null && _b !== void 0 ? _b : dftPageSize;
+  // 根据主数据订阅的长度设置 rowCount 的值
+  // 前端分页时，直接就是主数据的长度
+  // 后端分页时，rowCount 初始为0，后续会在 useAsyncData 中更新
+  var rowCount = subscription.getValue().length;
+  // 初始化分页状态，最小值为0
+  var pageIndex = ((_c = propsRef.current.pagination) === null || _c === void 0 ? void 0 : _c.defaultCurrent) ? Math.max(propsRef.current.pagination.defaultCurrent - 1, 0) : 0;
+  return {
+    pageIndex: pageIndex,
+    pageSize: pageSize,
+    rowCount: rowCount
+  };
+}
+function usePaginationState(ctx) {
+  var paginationState = useSubscription(function () {
+    return getInitialState(ctx);
+  });
+  return {
+    paginationState: paginationState
+  };
+}
+export { usePaginationState };

package/lib/esm/features/row-controller.js

@@ -0,0 +1,253 @@
+/** @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.
+ */
+import _createClass from '@babel/runtime/helpers/esm/createClass';
+import { produce } from 'immer';
+import { uuid } from '@hi-ui/use-id';
+import { cloneDeep, set } from 'lodash-es';
+import { Subscription } from '@hi-ui/use-subscription';
+var TableRowController = /*#__PURE__*/function () {
+  var _proto = TableRowController.prototype;
+  _proto.afterRowsOperation = function afterRowsOperation() {
+    var _a;
+    (_a = this.onValuesChange) === null || _a === void 0 ? void 0 : _a.call(this, {}, this.subscription.getValue());
+  };
+  function TableRowController(subscription, opts) {
+    var _a;
+    /** 当前正在编辑的行索引订阅 */
+    this.editingSubscription = null;
+    /** 当前正在编辑的行索引 */
+    this.editingIndex = null;
+    this.subscription = subscription;
+    // 行编辑模式下，需要知道 propsRef 以便在保存时调用 propsRef.current.onValuesChange
+    this.propsRef = opts === null || opts === void 0 ? void 0 : opts.propsRef;
+    this.onValuesChange = (_a = opts === null || opts === void 0 ? void 0 : opts.propsRef) === null || _a === void 0 ? void 0 : _a.current.onValuesChange;
+    // 如果开启了行编辑，则创建一个当前正在编辑的行索引订阅
+    if (opts === null || opts === void 0 ? void 0 : opts.rowEdit) this.editingSubscription = new Subscription({});
+  }
+  /** 检查是否处于编辑状态 */
+  _proto.checkEditing = function checkEditing() {
+    if (this.isEditing) {
+      // TODO: add logging if needed
+      // console.log('Operation blocked: table is in editing mode')
+      return true;
+    }
+    return false;
+  }
+  /**
+   * 在指定位置添加新行
+   * @param data 行数据
+   * @param index 插入位置索引，可选，默认添加到末尾。如果为负数则插入到开头，如果超出长度则插入到末尾
+   */;
+  _proto.addRow = function addRow(data, index) {
+    if (this.checkEditing()) return;
+    this.subscription.setValue(produce(function (draft) {
+      if (typeof index === 'number') {
+        var normalizedIndex = Math.floor(Math.max(0, Math.min(draft.length, index)));
+        draft.splice(normalizedIndex, 0, data);
+      } else {
+        draft.push(data);
+      }
+    }));
+    this.afterRowsOperation();
+  }
+  /**
+   * 删除指定行
+   * @param index 要删除的行索引
+   */;
+  _proto.deleteRow = function deleteRow(index) {
+    if (this.checkEditing()) return;
+    this.subscription.setValue(produce(function (draft) {
+      if (index >= 0 && index < draft.length) {
+        draft.splice(index, 1);
+      }
+    }));
+    this.afterRowsOperation();
+  }
+  /**
+   * 批量添加多行
+   * @param rows 要添加的行数据数组
+   * @param index 插入位置索引，可选，默认添加到末尾。如果为负数则插入到开头，如果超出长度则插入到末尾
+   */;
+  _proto.addRows = function addRows(rows, index) {
+    if (this.checkEditing()) return;
+    this.subscription.setValue(produce(function (draft) {
+      if (typeof index === 'number') {
+        var normalizedIndex = Math.floor(Math.max(0, Math.min(draft.length, index)));
+        draft.splice.apply(draft, [normalizedIndex, 0].concat(rows));
+      } else {
+        draft.push.apply(draft, rows);
+      }
+    }));
+    this.afterRowsOperation();
+  }
+  /**
+   * 批量删除多行
+   * @param indexes 要删除的行索引数组，会自动按从大到小排序处理
+   */;
+  _proto.deleteRows = function deleteRows(indexes) {
+    if (this.checkEditing()) return;
+    this.subscription.setValue(produce(function (draft) {
+      // 从大到小排序,避免删除时索引变化
+      indexes.sort(function (a, b) {
+        return b - a;
+      }).forEach(function (idx) {
+        if (idx >= 0 && idx < draft.length) {
+          draft.splice(idx, 1);
+        }
+      });
+    }));
+    this.afterRowsOperation();
+  }
+  /**
+   * 复制指定行
+   * @param sourceIndex 要复制的行索引
+   * @param options 复制选项
+   * @param options.targetIndex 目标位置索引，可选，默认复制到原位置的下一行
+   * @param options.rowKey 行数据中用于标识唯一性的字段名，默认为 'id'
+   */;
+  _proto.copyRow = function copyRow(sourceIndex, options) {
+    var _a, _b;
+    if (this.checkEditing()) return;
+    var sourceRow = this.getRow(sourceIndex);
+    if (!sourceRow) return;
+    // 使用 lodash 的 cloneDeep 进行深拷贝，避免引用问题
+    var copiedRow = cloneDeep(sourceRow);
+    // 生成新的唯一 ID
+    var rowKey = (_a = options === null || options === void 0 ? void 0 : options.rowKey) !== null && _a !== void 0 ? _a : 'id';
+    var newId = 'copiedRow_' + uuid();
+    set(copiedRow, rowKey, newId);
+    // 如果没有指定目标位置，默认复制到原位置的下一行
+    var insertIndex = (_b = options === null || options === void 0 ? void 0 : options.targetIndex) !== null && _b !== void 0 ? _b : sourceIndex + 1;
+    // 复用 addRow 方法，保持 targetIndex 逻辑一致
+    this.addRow(copiedRow, insertIndex);
+  }
+  /**
+   * 交换两行位置
+   * @param sourceIndex 源行索引
+   * @param targetIndex 目标行索引
+   */;
+  _proto.swapRow = function swapRow(sourceIndex, targetIndex) {
+    if (this.checkEditing()) return;
+    var hasOperated = false;
+    this.subscription.setValue(produce(function (draft) {
+      if (sourceIndex >= 0 && sourceIndex < draft.length && targetIndex >= 0 && targetIndex < draft.length && sourceIndex !== targetIndex) {
+        var temp = draft[sourceIndex];
+        draft[sourceIndex] = draft[targetIndex];
+        draft[targetIndex] = temp;
+        hasOperated = true;
+      }
+    }));
+    if (hasOperated) this.afterRowsOperation();
+  }
+  /**
+   * 移动行到指定位置
+   * @param sourceIndex 要移动的行索引
+   * @param targetIndex 目标位置索引
+   */;
+  _proto.moveRow = function moveRow(sourceIndex, targetIndex) {
+    if (this.checkEditing()) return;
+    var hasOperated = false;
+    this.subscription.setValue(produce(function (draft) {
+      if (sourceIndex >= 0 && sourceIndex < draft.length && targetIndex >= 0 && targetIndex < draft.length && sourceIndex !== targetIndex) {
+        var _draft$splice = draft.splice(sourceIndex, 1),
+          movedItem = _draft$splice[0];
+        draft.splice(targetIndex, 0, movedItem);
+        hasOperated = true;
+      }
+    }));
+    if (hasOperated) this.afterRowsOperation();
+  }
+  /**
+   * 获取当前所有数据
+   * @returns 当前表格的所有行数据
+   */;
+  _proto.getData = function getData() {
+    return this.subscription.getValue();
+  }
+  /**
+   * 获取指定行数据
+   * @param index 行索引
+   * @returns 指定行的数据，如果索引无效则返回 undefined
+   */;
+  _proto.getRow = function getRow(index) {
+    var data = this.subscription.getValue();
+    return index >= 0 && index < data.length ? data[index] : undefined;
+  }
+  /**
+   * 开始编辑指定行
+   * @param index 要编辑的行索引
+   */;
+  _proto.startEdit = function startEdit(index) {
+    if (index < 0 || index >= this.subscription.getValue().length) return;
+    // 如果已经在编辑其他行,先取消之前的编辑
+    if (this.editingIndex !== null && this.editingIndex !== index) {
+      this.cancelEdit();
+    }
+    this.editingIndex = index;
+    if (this.editingSubscription) {
+      var _this$editingSubscrip;
+      this.editingSubscription.setValue((_this$editingSubscrip = {}, _this$editingSubscrip[index] = true, _this$editingSubscrip));
+    }
+  }
+  /**
+   * 保存当前编辑行的修改
+   */;
+  _proto.saveEdit = function saveEdit() {
+    var _a, _b, _c;
+    if (this.editingIndex === null) return;
+    var editingIndex = this.editingIndex;
+    this.editingIndex = null;
+    var result = this.subscription.saveDraft();
+    if (result) {
+      (_c = (_a = this.propsRef) === null || _a === void 0 ? void 0 : (_b = _a.current).onValuesChange) === null || _c === void 0 ? void 0 : _c.call(_b, result.changedValues, result.allValues);
+    }
+    // 清除编辑状态
+    if (this.editingSubscription) {
+      var _this$editingSubscrip2;
+      this.editingSubscription.setValue((_this$editingSubscrip2 = {}, _this$editingSubscrip2[editingIndex] = false, _this$editingSubscrip2));
+    }
+  }
+  /**
+   * 取消当前行的编辑,还原数据
+   */;
+  _proto.cancelEdit = function cancelEdit() {
+    if (this.editingIndex === null) return;
+    var editingIndex = this.editingIndex;
+    // 清除暂存的草稿
+    this.subscription.clearDraft();
+    this.editingIndex = null;
+    // 清除编辑状态
+    if (this.editingSubscription) {
+      var _this$editingSubscrip3;
+      this.editingSubscription.setValue((_this$editingSubscrip3 = {}, _this$editingSubscrip3[editingIndex] = false, _this$editingSubscrip3));
+    }
+  }
+  /**
+   * 判断指定行是否处于编辑状态
+   * @param index 行索引
+   */;
+  _proto.isRowEditing = function isRowEditing(index) {
+    return this.editingIndex === index;
+  }
+  /**
+   * 获取当前正在编辑的行索引
+   */;
+  _proto.getEditingIndex = function getEditingIndex() {
+    return this.editingIndex;
+  };
+  _createClass(TableRowController, [{
+    key: "isEditing",
+    get: function get() {
+      return this.editingIndex !== null;
+    }
+  }]);
+  return TableRowController;
+}();
+export { TableRowController };

package/lib/esm/features/row-edit/actions.js

@@ -0,0 +1,53 @@
+/** @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.
+ */
+import React from 'react';
+import { Button } from '@hi-ui/button';
+
+/**
+ * 创建行编辑按钮
+ * @param rowActions 行操作对象
+ * @param index 行索引
+ * @returns 编辑按钮对象
+ */
+function createEditButtons(rowActions, index) {
+  // 编辑按钮
+  var edit = /*#__PURE__*/React.createElement(Button, {
+    key: "edit",
+    appearance: "link",
+    type: "primary",
+    onClick: function onClick() {
+      return rowActions.startEdit(index);
+    }
+  }, "\u7F16\u8F91");
+  // 保存按钮
+  var save = /*#__PURE__*/React.createElement(Button, {
+    key: "save",
+    appearance: "link",
+    type: "primary",
+    onClick: function onClick() {
+      return rowActions.saveEdit();
+    }
+  }, "\u4FDD\u5B58");
+  // 取消按钮
+  var cancel = /*#__PURE__*/React.createElement(Button, {
+    key: "cancel",
+    appearance: "link",
+    type: "primary",
+    onClick: function onClick() {
+      return rowActions.cancelEdit();
+    }
+  }, "\u53D6\u6D88");
+  return {
+    edit: edit,
+    save: save,
+    cancel: cancel
+  };
+}
+export { createEditButtons };

package/lib/esm/features/row-edit/hooks.js

@@ -0,0 +1,24 @@
+/** @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.
+ */
+import { useSubscribe, NOOP_SUBSCRIPTION } from '@hi-ui/use-subscription';
+import { useEditableSchemaTableCtx } from '../../ctx.js';
+function useRuntimeRowEditable(rowIndex) {
+  var _useEditableSchemaTab = useEditableSchemaTableCtx(),
+    rowActions = _useEditableSchemaTab.rowActions;
+  var editingSubscription = rowActions.editingSubscription;
+  // 行编辑状态变化时触发重渲染
+  // 未启用行编辑时使用空订阅，内部不会创建额外的无效订阅
+  useSubscribe(editingSubscription || NOOP_SUBSCRIPTION, [rowIndex.toString()]);
+  // 未开启行编辑则返回 undefined
+  if (!editingSubscription) return undefined;
+  // 最后由 rowActions 控制是否可编辑
+  return rowActions.isRowEditing(rowIndex);
+}
+export { useRuntimeRowEditable };

package/lib/esm/features/row-expanding/use-opts.js

@@ -0,0 +1,33 @@
+/** @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.
+ */
+import { getExpandedRowModel } from '@tanstack/react-table';
+function useRowExpandedOpts(ctx) {
+  return getRowExpandedOptions(ctx);
+}
+/**
+ * 获取行展开配置选项
+ */
+function getRowExpandedOptions(ctx) {
+  var enableRowExpanding = ctx.staticOptsRef.current.enableRowExpanding;
+  if (!enableRowExpanding) {
+    return {
+      enableExpanding: false,
+      enableSubRowSelection: false,
+      getSubRows: undefined
+    };
+  }
+  return {
+    enableExpanding: true,
+    getExpandedRowModel: getExpandedRowModel(),
+    // 子行不参与分页，也就是所有的子行都在本页展示
+    paginateExpandedRows: false
+  };
+}
+export { getRowExpandedOptions, useRowExpandedOpts };

package/lib/esm/features/row-expanding/wrapper.js

@@ -0,0 +1,62 @@
+/** @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.
+ */
+import React from 'react';
+import { useUpdate } from 'ahooks';
+import { CaretRightFilled } from '@hi-ui/icons';
+import { flexRender } from '@tanstack/react-table';
+import { cls as cls$1 } from '../../utils/cls.js';
+var cls = function cls(el) {
+  return cls$1('body-cell_expanding' + (el ? "-" + el : ''));
+};
+var INDENT_VAR_NAME = '--editable-schema-table-body-cell-expanding-indent';
+function RowExpandingWrapper(props) {
+  var _a;
+  var cell = props.cell;
+  var row = cell.row;
+  var isExpanded = row.getIsExpanded();
+  var forceUpdate = useUpdate();
+  function handleExpandClick() {
+    var innerHandler = row.getToggleExpandedHandler();
+    innerHandler();
+    forceUpdate();
+  }
+  if (cell.column.getIndex() !== 0) return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+  // 末端行的的缩进级别需要加1
+  // 因为没有前面的折叠按钮了，视觉上缩进会少一点点
+  var indentLevel = row.depth + (((_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length) ? 0 : 1);
+  var isAggregated = cell.getIsAggregated();
+  var useAggregatedEl = isAggregated && props.renderCase === 'grouping';
+  var realEl = useAggregatedEl ? getAggregatedEl(cell) : props.children;
+  return /*#__PURE__*/React.createElement("span", {
+    // expanding
+    className: cls(),
+    "data-case": "expanding",
+    "data-text-align": props.textAlign,
+    "data-is-aggregated": isAggregated
+  }, /*#__PURE__*/React.createElement("span", {
+    className: cls('wrapper')
+  }, row.depth > 0 && ( /*#__PURE__*/React.createElement("span", {
+    className: cls('indent'),
+    "data-depth": row.depth,
+    style: {
+      width: "calc(" + indentLevel + " * var(" + INDENT_VAR_NAME + "))"
+    }
+  })), isAggregated ? ( /*#__PURE__*/React.createElement("span", {
+    // icon
+    className: cls('icon'),
+    "data-is-expanded": isExpanded,
+    onClick: handleExpandClick
+  }, row.getCanExpand() ? /*#__PURE__*/React.createElement(CaretRightFilled, null) : null)) : null), realEl);
+}
+function getAggregatedEl(cell) {
+  var _a;
+  return flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext());
+}
+export { RowExpandingWrapper };

package/lib/esm/features/row-operation/buttons.js

@@ -0,0 +1,79 @@
+/** @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.
+ */
+import { __rest } from 'tslib';
+import React from 'react';
+import { useSubscribe, NOOP_SUBSCRIPTION } from '@hi-ui/use-subscription';
+import { Actions } from '@hi-ui/schema-action-trigger';
+import { useEditableSchemaTableCtx } from '../../ctx.js';
+import { createEditButtons } from '../row-edit/actions.js';
+
+/** 【操作按钮组】组件 */
+function OpButtons(props) {
+  var _a;
+  var _b = useEditableSchemaTableCtx(),
+    subscription = _b.subscription,
+    rowActions = _b.rowActions,
+    restCxt = __rest(_b, ["subscription", "rowActions"]);
+  var row = props.row,
+    rowEdit = props.rowEdit;
+  // 订阅行编辑状态
+  useSubscribe(rowActions.editingSubscription || NOOP_SUBSCRIPTION, [row.index.toString()]);
+  var rowData = subscription.getValue()[row.index];
+  var isEditing = rowActions.isRowEditing(row.index);
+  // 获取编辑按钮 - 现在在组件内部调用，符合Hook规则
+  var editButtons = rowEdit ? createEditButtons(rowActions, row.index) : null;
+  // 扩展ctx，添加行编辑相关功能
+  var ctx = Object.assign(Object.assign({}, restCxt.exposeCtxValueRef.current()), {
+    row: row,
+    rowIndex: row.index,
+    rowEdit: {
+      isEditing: false,
+      buttons: {
+        edit: /*#__PURE__*/React.createElement(React.Fragment, null),
+        save: /*#__PURE__*/React.createElement(React.Fragment, null),
+        cancel: /*#__PURE__*/React.createElement(React.Fragment, null)
+      }
+    }
+  });
+  // 如果启用了行编辑，添加行编辑相关上下文
+  if (rowEdit && editButtons) {
+    ctx.rowEdit = {
+      isEditing: isEditing,
+      buttons: editButtons
+    };
+  }
+  // 优先使用自定义渲染
+  if (props.render) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, props.render(rowData, ctx));
+  }
+  // 默认渲染逻辑
+  if (rowEdit && editButtons) {
+    // 如果行处于编辑状态，显示保存和取消按钮
+    if (isEditing) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, editButtons.save, editButtons.cancel);
+    }
+    // 否则显示编辑按钮
+    else {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, editButtons === null || editButtons === void 0 ? void 0 : editButtons.edit);
+    }
+  }
+  // 否则显示普通操作按钮
+  if (!((_a = props.buttons) === null || _a === void 0 ? void 0 : _a.length)) {
+    // 如果没有按钮，则不显示任何内容
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Actions, {
+    actions: props.buttons,
+    data: rowData,
+    ctx: ctx,
+    maxCount: props.maxCount
+  });
+}
+export { OpButtons };

package/lib/esm/features/row-operation/cell.js

@@ -0,0 +1,31 @@
+/** @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.
+ */
+import { __rest } from 'tslib';
+import React from 'react';
+import { useEditableSchemaTableCtx } from '../../ctx.js';
+import { cls } from '../../utils/cls.js';
+import { OpButtons } from './buttons.js';
+function OperationBodyCell(props) {
+  var row = props.row;
+  var _useEditableSchemaTab = useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab.propsRef;
+  var rowOperation = propsRef.current.rowOperation;
+  if (!rowOperation) return null;
+  // 下面的 data-key={width} 仅仅是为了避开定义未使用的变量检查
+  var width = rowOperation.width,
+    restOpts = __rest(rowOperation, ["width"]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls('operation-buttons')
+  }, /*#__PURE__*/React.createElement(OpButtons, Object.assign({
+    "data-key": width,
+    row: row
+  }, restOpts)));
+}
+export { OperationBodyCell };

package/lib/esm/features/row-operation/index.js

@@ -0,0 +1,16 @@
+/** @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.
+ */
+import { OperationHeader, OperationBody, OperationFooter } from './wrapper.js';
+var RowOperation = {
+  Header: OperationHeader,
+  Body: OperationBody,
+  Footer: OperationFooter
+};
+export { RowOperation };