stk-table-vue 0.8.7 → 0.8.9

package/README.md

@@ -20,7 +20,8 @@
 
 
 ## Documentation
-### [Stk Table Vue Official CN](https://ja-plus.github.io/stk-table-vue/)
+### [Stk Table Vue Official en](https://ja-plus.github.io/stk-table-vue/en/)
+### [Stk Table Vue Official zh-CN](https://ja-plus.github.io/stk-table-vue/)
 
 
 ## Repo: 

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -1,4 +1,4 @@
-import { AutoRowHeightConfig, ColResizableConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, PrivateStkTableColumn, SeqConfig, SortConfig, SortOption, StkTableColumn, TreeConfig, UniqKey, UniqKeyProp } from './types/index';
+import { AutoRowHeightConfig, ColResizableConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, PrivateStkTableColumn, RowActiveOption, SeqConfig, SortConfig, SortOption, StkTableColumn, TreeConfig, UniqKey, UniqKeyProp } from './types/index';
 
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
@@ -6,9 +6,11 @@ type DT = any & PrivateRowDT;
  * 选中一行
  * @param {string} rowKeyOrRow selected rowKey, undefined to unselect
  * @param {boolean} option.silent if set true not emit `current-change`. default:false
+ * @param {boolean} option.deep if set true, deep search in children. default:false
  */
 declare function setCurrentRow(rowKeyOrRow: string | undefined | DT, option?: {
-    silent: boolean;
+    silent?: boolean;
+    deep?: boolean;
 }): void;
 /**
  * set highlight active cell (props.cellActive=true)
@@ -90,8 +92,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 是否高亮鼠标悬浮的行 */
     rowHover?: boolean;
     /** 是否高亮选中的行 */
-    rowActive?: boolean;
-    /** 当前行再次点击否可以取消 (rowActive=true)*/
+    rowActive?: boolean | RowActiveOption<DT>;
+    /**
+     * @deprecated
+     */
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | string | null;
@@ -238,8 +242,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fixedColShadow: boolean;
     optimizeVue2Scroll: boolean;
     sortConfig: () => {
-        emptyToBottom: boolean;
-        stringLocaleCompare: boolean;
+        emptyToBottom: false;
+        stringLocaleCompare: false;
+        sortChildren: false;
     };
     hideHeaderTitle: boolean;
     highlightConfig: () => {};
@@ -456,8 +461,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 是否高亮鼠标悬浮的行 */
     rowHover?: boolean;
     /** 是否高亮选中的行 */
-    rowActive?: boolean;
-    /** 当前行再次点击否可以取消 (rowActive=true)*/
+    rowActive?: boolean | RowActiveOption<DT>;
+    /**
+     * @deprecated
+     */
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | string | null;
@@ -604,8 +611,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fixedColShadow: boolean;
     optimizeVue2Scroll: boolean;
     sortConfig: () => {
-        emptyToBottom: boolean;
-        stringLocaleCompare: boolean;
+        emptyToBottom: false;
+        stringLocaleCompare: false;
+        sortChildren: false;
     };
     hideHeaderTitle: boolean;
     highlightConfig: () => {};
@@ -683,7 +691,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fixedMode: boolean;
     theme: "light" | "dark";
     rowHover: boolean;
-    rowActive: boolean;
+    rowActive: boolean | RowActiveOption<DT>;
     rowCurrentRevokable: boolean;
     virtual: boolean;
     virtualX: boolean;

package/lib/src/StkTable/const.d.ts

@@ -1,3 +1,5 @@
+import { RowActiveOption } from './types';
+
 export declare const DEFAULT_COL_WIDTH = "100";
 export declare const DEFAULT_TABLE_HEIGHT = 100;
 export declare const DEFAULT_TABLE_WIDTH = 200;
@@ -24,5 +26,11 @@ export declare const DEFAULT_SMOOTH_SCROLL: boolean;
 export declare const STK_ID_PREFIX = "stk";
 /** expanded row key prefix */
 export declare const EXPANDED_ROW_KEY_PREFIX = "expanded-";
-/** cell key 的分隔符 */
+/** cell key split str */
 export declare const CELL_KEY_SEPARATE = "--";
+export declare const DEFAULT_SORT_CONFIG: {
+    emptyToBottom: false;
+    stringLocaleCompare: false;
+    sortChildren: false;
+};
+export declare const DEFAULT_ROW_ACTIVE_CONFIG: Required<RowActiveOption<any>>;

package/lib/src/StkTable/types/index.d.ts

@@ -84,7 +84,7 @@ export type StkTableColumn<T extends Record<string, any>> = {
     /** 排序方式。按数字/字符串 */
     sortType?: 'number' | 'string';
     /** 配置当前列的排序规则 */
-    sortConfig?: Pick<SortConfig<T>, 'emptyToBottom' | 'stringLocaleCompare'>;
+    sortConfig?: Omit<SortConfig<T>, 'defaultSort'>;
     /** 固定列 */
     fixed?: 'left' | 'right' | null;
     /**
@@ -167,17 +167,17 @@ export type UniqKey = string | number;
 export type UniqKeyFun = (param: any) => UniqKey;
 export type UniqKeyProp = UniqKey | UniqKeyFun;
 export type SortConfig<T extends Record<string, any>> = {
-    /** 空值始终排在列表末尾 */
-    emptyToBottom?: boolean;
     /**
-     * 默认排序（1.初始化时触发 2.排序方向为null时触发)
-     * 类似onMounted时，调用setSorter点了下表头。
+     * 1. trigger when init
+     * 2. trigger when sort direction is null
      */
     defaultSort?: {
         /**
-         * 列唯一键，
+         * colKey
+         *
+         * if set `props.colKey`
          *
-         * 如果您配了 `props.colKey` 则这里表示的列唯一键的值
+         * default: StkTableColumn<T>['dataIndex']
          */
         key?: StkTableColumn<T>['key'];
         dataIndex: StkTableColumn<T>['dataIndex'];
@@ -185,14 +185,22 @@ export type SortConfig<T extends Record<string, any>> = {
         sortField?: StkTableColumn<T>['sortField'];
         sortType?: StkTableColumn<T>['sortType'];
         sorter?: StkTableColumn<T>['sorter'];
-        /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
+        /**
+         * whether to disable trigger`sort-change` event. default: false
+         */
         silent?: boolean;
     };
+    /** empty value always sort to bottom */
+    emptyToBottom?: boolean;
     /**
      * string sort if use `String.prototype.localCompare`
      * default: false
      */
     stringLocaleCompare?: boolean;
+    /**
+     * whether to sort children when sort current column. default: false
+     */
+    sortChildren?: boolean;
 };
 /** th td type */
 export declare const enum TagType {
@@ -225,7 +233,6 @@ export type ExpandedRow = PrivateRowDT & {
 export type DragRowConfig = {
     mode?: 'none' | 'insert' | 'swap';
 };
-/** 树形配置 */
 export type TreeConfig = {
     defaultExpandAll?: boolean;
     defaultExpandKeys?: UniqKey[];
@@ -234,13 +241,13 @@ export type TreeConfig = {
 /** header drag config */
 export type HeaderDragConfig<DT extends Record<string, any> = any> = {
     /**
-     * 列交换模式
-     * - none - 不做任何事
-     * - insert - 插入(默认值)
-     * - swap - 交换
+     * col switch mode
+     * - none
+     * - insert - (default)
+     * - swap
      */
     mode?: 'none' | 'insert' | 'swap';
-    /** 禁用拖动的列 */
+    /** disabled drag col */
     disabled?: (col: StkTableColumn<DT>) => boolean;
 };
 export type AutoRowHeightConfig<DT> = {
@@ -253,4 +260,11 @@ export type ColResizableConfig<DT extends Record<string, any>> = {
 export type RowKeyGen = (row: any) => UniqKey;
 export type ColKeyGen = ComputedRef<(col: StkTableColumn<any>) => UniqKey>;
 export type CellKeyGen = (row: any, col: StkTableColumn<any>) => string;
+export type RowActiveOption<DT> = {
+    enabled?: boolean;
+    /** disabled row active */
+    disabled?: (row: DT) => boolean;
+    /** current row again click can revoke active */
+    revokable?: boolean;
+};
 export {};

package/lib/src/StkTable/useMergeCells.d.ts

@@ -1,22 +1,22 @@
-import { ShallowRef } from 'vue';
-import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
+import { Ref, ShallowRef } from 'vue';
+import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowActiveOption, RowKeyGen, UniqKey } from './types';
 
 type Options = {
-    props: any;
+    rowActiveProp: Ref<RowActiveOption<any>>;
     tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
     rowKeyGen: RowKeyGen;
     colKeyGen: ColKeyGen;
     virtual_dataSourcePart: ShallowRef<any[]>;
 };
-export declare function useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart, }: Options): {
-    hiddenCellMap: import('vue').Ref<Record<UniqKey, Set<UniqKey>>, Record<UniqKey, Set<UniqKey>>>;
+export declare function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart }: Options): {
+    hiddenCellMap: Ref<Record<UniqKey, Set<UniqKey>>, Record<UniqKey, Set<UniqKey>>>;
     mergeCellsWrapper: (row: MergeCellsParam<any>["row"], col: MergeCellsParam<any>["col"], rowIndex: MergeCellsParam<any>["rowIndex"], colIndex: MergeCellsParam<any>["colIndex"]) => {
         colspan?: number;
         rowspan?: number;
     } | undefined;
-    hoverMergedCells: import('vue').Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    hoverMergedCells: Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
     updateHoverMergedCells: (rowKey: UniqKey | undefined) => void;
-    activeMergedCells: import('vue').Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
-    updateActiveMergedCells: (clear?: boolean) => void;
+    activeMergedCells: Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    updateActiveMergedCells: (clear?: boolean, rowKey?: UniqKey) => void;
 };
 export {};

package/lib/stk-table-vue.js

@@ -134,30 +134,41 @@ function separatedData(sortOption, targetDataSource, isNumber) {
 }
 function tableSort(sortOption, order, dataSource, sortConfig = {}) {
   if (!(dataSource == null ? void 0 : dataSource.length) || !sortOption) return dataSource || [];
-  sortConfig = { emptyToBottom: false, ...sortConfig };
+  sortConfig = { ...DEFAULT_SORT_CONFIG, ...sortConfig };
   let targetDataSource = dataSource.slice();
   let sortField = sortOption.sortField || sortOption.dataIndex;
-  if (!order && sortConfig.defaultSort) {
-    order = sortConfig.defaultSort.order;
-    sortField = sortConfig.defaultSort.dataIndex;
+  const { defaultSort, stringLocaleCompare, emptyToBottom, sortChildren } = sortConfig;
+  if (!order && defaultSort) {
+    order = defaultSort.order;
+    sortField = defaultSort.dataIndex;
   }
   if (typeof sortOption.sorter === "function") {
     const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
     if (customSorterData) targetDataSource = customSorterData;
+    if (sortChildren) {
+      targetDataSource.forEach((item) => {
+        var _a;
+        if (!((_a = item.children) == null ? void 0 : _a.length)) return;
+        item.children = tableSort(sortOption, order, item.children, sortConfig);
+      });
+    }
   } else if (order) {
     let { sortType } = sortOption;
     if (!sortType) sortType = typeof dataSource[0][sortField];
     const isNumber = sortType === "number";
     const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, isNumber);
     if (order === "asc") {
-      valueArr.sort((a, b) => strCompare(a[sortField], b[sortField], isNumber, sortConfig.stringLocaleCompare));
-    } else {
-      valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, sortConfig.stringLocaleCompare));
-    }
-    if (order === "desc" || sortConfig.emptyToBottom) {
-      targetDataSource = valueArr.concat(emptyArr);
+      valueArr.sort((a, b) => strCompare(a[sortField], b[sortField], isNumber, stringLocaleCompare));
     } else {
-      targetDataSource = emptyArr.concat(valueArr);
+      valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, stringLocaleCompare));
+    }
+    targetDataSource = order === "desc" || emptyToBottom ? valueArr.concat(emptyArr) : emptyArr.concat(valueArr);
+    if (sortChildren) {
+      targetDataSource.forEach((item) => {
+        var _a;
+        if (!((_a = item.children) == null ? void 0 : _a.length)) return;
+        item.children = tableSort(sortOption, order, item.children, sortConfig);
+      });
     }
   }
   return targetDataSource;
@@ -210,6 +221,16 @@ const DEFAULT_SMOOTH_SCROLL = _chromeVersion < 85;
 const STK_ID_PREFIX = "stk";
 const EXPANDED_ROW_KEY_PREFIX = "expanded-";
 const CELL_KEY_SEPARATE = "--";
+const DEFAULT_SORT_CONFIG = {
+  emptyToBottom: false,
+  stringLocaleCompare: false,
+  sortChildren: false
+};
+const DEFAULT_ROW_ACTIVE_CONFIG = {
+  enabled: false,
+  disabled: () => false,
+  revokable: false
+};
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
   TagType2[TagType2["TD"] = 1] = "TD";
@@ -817,7 +838,8 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
   }
   function handleKeydown(e) {
     if (!virtual_on.value) return;
-    if (!ScrollCodesValues.includes(e.code)) return;
+    const keyCode = e.code;
+    if (!ScrollCodesValues.includes(keyCode)) return;
     if (!isMouseOver) return;
     e.preventDefault();
     const { scrollTop, rowHeight, containerHeight, scrollHeight } = virtualScroll.value;
@@ -825,21 +847,21 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     const { headless, headerRowHeight } = props;
     const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
     const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
-    if (e.code === "ArrowUp") {
+    if (keyCode === "ArrowUp") {
       scrollTo(scrollTop - rowHeight, null);
-    } else if (e.code === "ArrowRight") {
+    } else if (keyCode === "ArrowRight") {
       scrollTo(null, scrollLeft + 50);
-    } else if (e.code === "ArrowDown") {
+    } else if (keyCode === "ArrowDown") {
       scrollTo(scrollTop + rowHeight, null);
-    } else if (e.code === "ArrowLeft") {
+    } else if (keyCode === "ArrowLeft") {
       scrollTo(null, scrollLeft - 50);
-    } else if (e.code === "PageUp") {
+    } else if (keyCode === "PageUp") {
       scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
-    } else if (e.code === "PageDown") {
+    } else if (keyCode === "PageDown") {
       scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
-    } else if (e.code === "Home") {
+    } else if (keyCode === "Home") {
       scrollTo(0, null);
-    } else if (e.code === "End") {
+    } else if (keyCode === "End") {
       scrollTo(scrollHeight, null);
     }
   }
@@ -886,13 +908,7 @@ function useMaxRowSpan({ props, tableHeaderLast, rowKeyGen, dataSourceCopy }) {
     updateMaxRowSpan
   };
 }
-function useMergeCells({
-  props,
-  tableHeaderLast,
-  rowKeyGen,
-  colKeyGen,
-  virtual_dataSourcePart
-}) {
+function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart }) {
   const hiddenCellMap = ref({});
   const hoverRowMap = ref({});
   const hoverMergedCells = ref(/* @__PURE__ */ new Set());
@@ -937,13 +953,13 @@ function useMergeCells({
     const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
     hoverMergedCells.value = set || /* @__PURE__ */ new Set();
   }
-  function updateActiveMergedCells(clear) {
-    if (!props.rowActive) return;
+  function updateActiveMergedCells(clear, rowKey) {
+    if (!rowActiveProp.value.enabled) return;
     if (clear) {
       activeMergedCells.value.clear();
-    } else {
-      activeMergedCells.value = new Set(hoverMergedCells.value);
+      return;
     }
+    activeMergedCells.value = rowKey !== void 0 && hoverRowMap.value[rowKey] || new Set(hoverMergedCells.value);
   }
   return {
     hiddenCellMap,
@@ -1751,10 +1767,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autoResize: { type: [Boolean, Function], default: true },
     fixedColShadow: { type: Boolean, default: false },
     optimizeVue2Scroll: { type: Boolean, default: false },
-    sortConfig: { default: () => ({
-      emptyToBottom: false,
-      stringLocaleCompare: false
-    }) },
+    sortConfig: { default: () => DEFAULT_SORT_CONFIG },
     hideHeaderTitle: { type: [Boolean, Array], default: false },
     highlightConfig: { default: () => ({}) },
     seqConfig: { default: () => ({}) },
@@ -1788,6 +1801,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isTreeData = computed(() => {
       return props.columns.some((col) => col.type === "tree-node");
     });
+    const rowActiveProp = computed(() => {
+      const { rowActive } = props;
+      if (typeof rowActive === "boolean") {
+        return {
+          ...DEFAULT_ROW_ACTIVE_CONFIG,
+          enabled: rowActive,
+          revokable: Boolean(props.rowCurrentRevokable)
+        };
+      } else {
+        return { ...DEFAULT_ROW_ACTIVE_CONFIG, ...rowActive };
+      }
+    });
     const dataSourceCopy = shallowRef([]);
     const rowKeyGenComputed = computed(() => {
       const { rowKey } = props;
@@ -1821,7 +1846,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const SRBRBottomHeight = computed(() => {
       if (!isSRBRActive.value || !props.virtual) return 0;
-      return (virtualScroll.value.containerHeight - tableHeaderHeight.value) % virtualScroll.value.rowHeight;
+      const { containerHeight, rowHeight } = virtualScroll.value;
+      return (containerHeight - tableHeaderHeight.value) % rowHeight;
     });
     const rowKeyGenCache = /* @__PURE__ */ new WeakMap();
     const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
@@ -1854,7 +1880,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateHoverMergedCells,
       activeMergedCells,
       updateActiveMergedCells
-    } = useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
+    } = useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
     const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeadersForCalc });
     const getFixedStyle = useFixedStyle({
       props,
@@ -2118,8 +2144,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (click) sortOrderIndex.value++;
       sortOrderIndex.value = sortOrderIndex.value % 3;
       let order = sortSwitchOrder[sortOrderIndex.value];
-      const sortConfig = { ...props.sortConfig, ...col.sortConfig };
-      const defaultSort = sortConfig.defaultSort;
+      const sortConfig = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig, ...col.sortConfig };
+      const { defaultSort } = sortConfig;
       const colKeyGenValue = colKeyGen.value;
       if (!order && defaultSort) {
         const defaultColKey = defaultSort.key || defaultSort.dataIndex;
@@ -2143,30 +2169,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       }
+      let dataSourceTemp = props.dataSource.slice();
       if (!props.sortRemote || options.force) {
         const sortOption = col || defaultSort;
         if (sortOption) {
-          dataSourceCopy.value = tableSort(sortOption, order, props.dataSource, sortConfig);
+          dataSourceTemp = tableSort(sortOption, order, dataSourceTemp, sortConfig);
+          dataSourceCopy.value = isTreeData.value ? flatTreeData(dataSourceTemp) : dataSourceTemp;
         }
       }
       if (click || options.emit) {
-        emits("sort-change", col, order, toRaw(dataSourceCopy.value), sortConfig);
+        emits("sort-change", col, order, toRaw(dataSourceTemp), sortConfig);
       }
     }
     function onRowClick(e, row, rowIndex) {
+      var _a, _b;
       emits("row-click", e, row, { rowIndex });
+      if ((_b = (_a = rowActiveProp.value).disabled) == null ? void 0 : _b.call(_a, row)) return;
       const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
       if (isCurrentRow) {
-        if (!props.rowCurrentRevokable) {
+        if (!rowActiveProp.value.revokable) {
           return;
         }
-        currentRow.value = void 0;
-        currentRowKey.value = void 0;
-        updateActiveMergedCells(true);
+        setCurrentRow(void 0, { silent: true });
       } else {
-        currentRow.value = row;
-        currentRowKey.value = rowKeyGen(row);
-        updateActiveMergedCells();
+        setCurrentRow(row, { silent: true });
       }
       emits("current-change", e, row, { select: !isCurrentRow });
     }
@@ -2290,30 +2316,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         updateHoverMergedCells(void 0);
       }
     }
-    function setCurrentRow(rowKeyOrRow, option = { silent: false }) {
-      if (!dataSourceCopy.value.length) return;
+    function setCurrentRow(rowKeyOrRow, option = { silent: false, deep: false }) {
       const select = rowKeyOrRow !== void 0;
+      const currentRowTemp = currentRow.value;
       if (!select) {
         currentRow.value = void 0;
         currentRowKey.value = void 0;
+        updateActiveMergedCells(true);
       } else if (typeof rowKeyOrRow === "string") {
-        const row = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKeyOrRow);
+        const findRowByKey = (data, key) => {
+          var _a;
+          for (let i = 0; i < data.length; i++) {
+            const item = data[i];
+            if (rowKeyGen(item) === key) {
+              return item;
+            }
+            if (option.deep && ((_a = item.children) == null ? void 0 : _a.length)) {
+              const found = findRowByKey(item.children, key);
+              if (found) {
+                return found;
+              }
+            }
+          }
+          return null;
+        };
+        currentRowKey.value = rowKeyOrRow;
+        updateActiveMergedCells(false, currentRowKey.value);
+        const row = findRowByKey(dataSourceCopy.value || [], rowKeyOrRow);
         if (!row) {
           console.warn("setCurrentRow failed.rowKey:", rowKeyOrRow);
           return;
         }
         currentRow.value = row;
-        currentRowKey.value = rowKeyOrRow;
       } else {
         currentRow.value = rowKeyOrRow;
         currentRowKey.value = rowKeyGen(rowKeyOrRow);
+        updateActiveMergedCells(false, currentRowKey.value);
       }
       if (!option.silent) {
         emits(
           "current-change",
           /** no Event */
           null,
-          currentRow.value,
+          select ? currentRow.value : currentRowTemp,
           { select }
         );
       }
@@ -2503,7 +2548,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "cell-hover": props.cellHover,
           "cell-active": props.cellActive,
           "row-hover": props.rowHover,
-          "row-active": props.rowActive,
+          "row-active": rowActiveProp.value.enabled,
           "text-overflow": props.showOverflow,
           "header-text-overflow": props.showHeaderOverflow,
           "fixed-relative-mode": isRelativeMode.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -59,15 +59,15 @@
     "postcss-discard-comments": "^6.0.2",
     "postcss-preset-env": "^9.5.11",
     "prettier": "^3.2.5",
-    "stk-table-vue": "^0.8.1",
+    "stk-table-vue": "^0.8.7",
     "typescript": "^5.8.3",
-    "vite": "^7.0.2",
+    "vite": "^7.1.7",
     "vite-plugin-dts": "3.9.1",
     "vitepress": "^1.6.4",
-    "vitepress-demo-plugin": "^1.4.5",
+    "vitepress-demo-plugin": "^1.4.7",
     "vitepress-plugin-llms": "^1.7.5",
     "vitest": "^3.2.4",
-    "vue": "^3.5.17",
+    "vue": "^3.5.22",
     "vue-eslint-parser": "^9.4.2"
   }
 }

package/src/StkTable/StkTable.vue

@@ -20,7 +20,7 @@
             'cell-hover': props.cellHover,
             'cell-active': props.cellActive,
             'row-hover': props.rowHover,
-            'row-active': props.rowActive,
+            'row-active': rowActiveProp.enabled,
             'text-overflow': props.showOverflow,
             'header-text-overflow': props.showHeaderOverflow,
             'fixed-relative-mode': isRelativeMode,
@@ -253,7 +253,14 @@ import { CSSProperties, computed, nextTick, onMounted, ref, shallowRef, toRaw, w
 import DragHandle from './components/DragHandle.vue';
 import SortIcon from './components/SortIcon.vue';
 import TriangleIcon from './components/TriangleIcon.vue';
-import { CELL_KEY_SEPARATE, DEFAULT_ROW_HEIGHT, DEFAULT_SMOOTH_SCROLL, IS_LEGACY_MODE } from './const';
+import {
+    CELL_KEY_SEPARATE,
+    DEFAULT_ROW_ACTIVE_CONFIG,
+    DEFAULT_ROW_HEIGHT,
+    DEFAULT_SMOOTH_SCROLL,
+    DEFAULT_SORT_CONFIG,
+    IS_LEGACY_MODE,
+} from './const';
 import {
     AutoRowHeightConfig,
     ColResizableConfig,
@@ -264,6 +271,7 @@ import {
     Order,
     PrivateRowDT,
     PrivateStkTableColumn,
+    RowActiveOption,
     SeqConfig,
     SortConfig,
     SortOption,
@@ -328,8 +336,10 @@ const props = withDefaults(
         /** 是否高亮鼠标悬浮的行 */
         rowHover?: boolean;
         /** 是否高亮选中的行 */
-        rowActive?: boolean;
-        /** 当前行再次点击否可以取消 (rowActive=true)*/
+        rowActive?: boolean | RowActiveOption<DT>;
+        /**
+         * @deprecated
+         */
         rowCurrentRevokable?: boolean;
         /** 表头行高。default = rowHeight */
         headerRowHeight?: number | string | null;
@@ -473,10 +483,7 @@ const props = withDefaults(
         autoResize: true,
         fixedColShadow: false,
         optimizeVue2Scroll: false,
-        sortConfig: () => ({
-            emptyToBottom: false,
-            stringLocaleCompare: false,
-        }),
+        sortConfig: () => DEFAULT_SORT_CONFIG,
         hideHeaderTitle: false,
         highlightConfig: () => ({}),
         seqConfig: () => ({}),
@@ -709,6 +716,19 @@ const isTreeData = computed(() => {
     return props.columns.some(col => col.type === 'tree-node');
 });
 
+const rowActiveProp = computed<Required<RowActiveOption<DT>>>(() => {
+    const { rowActive } = props;
+    if (typeof rowActive === 'boolean') {
+        return {
+            ...DEFAULT_ROW_ACTIVE_CONFIG,
+            enabled: rowActive,
+            revokable: Boolean(props.rowCurrentRevokable),
+        };
+    } else {
+        return { ...DEFAULT_ROW_ACTIVE_CONFIG, ...rowActive };
+    }
+});
+
 const dataSourceCopy = shallowRef<DT[]>([]);
 
 const rowKeyGenComputed = computed(() => {
@@ -749,7 +769,8 @@ const SRBRTotalHeight = computed(() => {
 });
 const SRBRBottomHeight = computed(() => {
     if (!isSRBRActive.value || !props.virtual) return 0;
-    return (virtualScroll.value.containerHeight - tableHeaderHeight.value) % virtualScroll.value.rowHeight;
+    const { containerHeight, rowHeight } = virtualScroll.value;
+    return (containerHeight - tableHeaderHeight.value) % rowHeight;
 });
 
 const rowKeyGenCache = new WeakMap();
@@ -788,7 +809,7 @@ const {
     updateHoverMergedCells,
     activeMergedCells,
     updateActiveMergedCells,
-} = useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
+} = useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
 
 const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeadersForCalc });
 
@@ -1131,8 +1152,8 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
     sortOrderIndex.value = sortOrderIndex.value % 3;
 
     let order = sortSwitchOrder[sortOrderIndex.value];
-    const sortConfig = { ...props.sortConfig, ...col.sortConfig };
-    const defaultSort = sortConfig.defaultSort;
+    const sortConfig: SortConfig<any> = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig, ...col.sortConfig };
+    const { defaultSort } = sortConfig;
     const colKeyGenValue = colKeyGen.value;
 
     if (!order && defaultSort) {
@@ -1158,34 +1179,31 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
             }
         }
     }
+    let dataSourceTemp: any[] = props.dataSource.slice();
     if (!props.sortRemote || options.force) {
         const sortOption = col || defaultSort;
         if (sortOption) {
-            dataSourceCopy.value = tableSort(sortOption, order, props.dataSource, sortConfig);
+            dataSourceTemp = tableSort(sortOption, order, dataSourceTemp, sortConfig);
+            dataSourceCopy.value = isTreeData.value ? flatTreeData(dataSourceTemp) : dataSourceTemp;
         }
     }
-    // 只有点击才触发事件
+    // only emit sort-change event when click
     if (click || options.emit) {
-        emits('sort-change', col, order, toRaw(dataSourceCopy.value), sortConfig);
+        emits('sort-change', col, order, toRaw(dataSourceTemp), sortConfig);
     }
 }
 
 function onRowClick(e: MouseEvent, row: DT, rowIndex: number) {
     emits('row-click', e, row, { rowIndex });
+    if (rowActiveProp.value.disabled?.(row)) return;
     const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
     if (isCurrentRow) {
-        if (!props.rowCurrentRevokable) {
-            // 不可取消
+        if (!rowActiveProp.value.revokable) {
             return;
         }
-        // 点击同一行，取消当前选中行。
-        currentRow.value = void 0;
-        currentRowKey.value = void 0;
-        updateActiveMergedCells(true);
+        setCurrentRow(void 0, { silent: true });
     } else {
-        currentRow.value = row;
-        currentRowKey.value = rowKeyGen(row);
-        updateActiveMergedCells();
+        setCurrentRow(row, { silent: true });
     }
     emits('current-change', e, row, { select: !isCurrentRow });
 }
@@ -1391,27 +1409,47 @@ function onTrMouseLeave(e: MouseEvent) {
  * 选中一行
  * @param {string} rowKeyOrRow selected rowKey, undefined to unselect
  * @param {boolean} option.silent if set true not emit `current-change`. default:false
+ * @param {boolean} option.deep if set true, deep search in children. default:false
  */
-function setCurrentRow(rowKeyOrRow: string | undefined | DT, option = { silent: false }) {
-    if (!dataSourceCopy.value.length) return;
+function setCurrentRow(rowKeyOrRow: string | undefined | DT, option: { silent?: boolean; deep?: boolean } = { silent: false, deep: false }) {
     const select = rowKeyOrRow !== void 0;
+    const currentRowTemp = currentRow.value;
     if (!select) {
         currentRow.value = void 0;
         currentRowKey.value = void 0;
+        updateActiveMergedCells(true);
     } else if (typeof rowKeyOrRow === 'string') {
-        const row = dataSourceCopy.value.find(it => rowKeyGen(it) === rowKeyOrRow);
+        const findRowByKey = (data: DT[], key: string): DT | null => {
+            for (let i = 0; i < data.length; i++) {
+                const item = data[i];
+                if (rowKeyGen(item) === key) {
+                    return item;
+                }
+                if (option.deep && item.children?.length) {
+                    const found = findRowByKey(item.children, key);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+            return null;
+        };
+
+        currentRowKey.value = rowKeyOrRow;
+        updateActiveMergedCells(false, currentRowKey.value);
+        const row = findRowByKey(dataSourceCopy.value || [], rowKeyOrRow);
         if (!row) {
             console.warn('setCurrentRow failed.rowKey:', rowKeyOrRow);
             return;
         }
         currentRow.value = row;
-        currentRowKey.value = rowKeyOrRow;
     } else {
         currentRow.value = rowKeyOrRow;
         currentRowKey.value = rowKeyGen(rowKeyOrRow);
+        updateActiveMergedCells(false, currentRowKey.value);
     }
     if (!option.silent) {
-        emits('current-change', /** no Event */ null, currentRow.value, { select });
+        emits('current-change', /** no Event */ null, select ? currentRow.value : currentRowTemp, { select });
     }
 }
 
@@ -1447,7 +1485,6 @@ function setSorter(colKey: string, order: Order, option: { sortOption?: SortOpti
     const colKeyGenValue = colKeyGen.value;
 
     if (newOption.sort && dataSourceCopy.value?.length) {
-        // 如果表格有数据，则进行排序
         const column = newOption.sortOption || tableHeaderLast.value.find(it => colKeyGenValue(it) === sortCol.value);
         if (column) onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
         else console.warn('Can not find column by key:', sortCol.value);

package/src/StkTable/const.ts

@@ -1,3 +1,4 @@
+import { RowActiveOption, SortConfig } from './types';
 import { getBrowsersVersion } from './utils';
 
 export const DEFAULT_COL_WIDTH = '100';
@@ -33,5 +34,17 @@ export const STK_ID_PREFIX = 'stk';
 /** expanded row key prefix */
 export const EXPANDED_ROW_KEY_PREFIX = 'expanded-';
 
-/** cell key 的分隔符 */
+/** cell key split str */
 export const CELL_KEY_SEPARATE = '--';
+
+export const DEFAULT_SORT_CONFIG = {
+    emptyToBottom: false,
+    stringLocaleCompare: false,
+    sortChildren: false,
+} satisfies SortConfig<any>;
+
+export const DEFAULT_ROW_ACTIVE_CONFIG: Required<RowActiveOption<any>> = {
+    enabled: false,
+    disabled: () => false,
+    revokable: false,
+};

package/src/StkTable/types/index.ts

@@ -88,7 +88,7 @@ export type StkTableColumn<T extends Record<string, any>> = {
     /** 排序方式。按数字/字符串 */
     sortType?: 'number' | 'string';
     /** 配置当前列的排序规则 */
-    sortConfig?: Pick<SortConfig<T>, 'emptyToBottom' | 'stringLocaleCompare'>;
+    sortConfig?: Omit<SortConfig<T>, 'defaultSort'>;
     /** 固定列 */
     fixed?: 'left' | 'right' | null;
     /**
@@ -176,17 +176,17 @@ export type UniqKeyFun = (param: any) => UniqKey;
 export type UniqKeyProp = UniqKey | UniqKeyFun;
 
 export type SortConfig<T extends Record<string, any>> = {
-    /** 空值始终排在列表末尾 */
-    emptyToBottom?: boolean;
     /**
-     * 默认排序（1.初始化时触发 2.排序方向为null时触发)
-     * 类似onMounted时，调用setSorter点了下表头。
+     * 1. trigger when init
+     * 2. trigger when sort direction is null
      */
     defaultSort?: {
         /**
-         * 列唯一键，
+         * colKey
+         *
+         * if set `props.colKey`
          *
-         * 如果您配了 `props.colKey` 则这里表示的列唯一键的值
+         * default: StkTableColumn<T>['dataIndex']
          */
         key?: StkTableColumn<T>['key'];
         dataIndex: StkTableColumn<T>['dataIndex'];
@@ -194,14 +194,22 @@ export type SortConfig<T extends Record<string, any>> = {
         sortField?: StkTableColumn<T>['sortField'];
         sortType?: StkTableColumn<T>['sortType'];
         sorter?: StkTableColumn<T>['sorter'];
-        /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
+        /**
+         * whether to disable trigger`sort-change` event. default: false
+         */
         silent?: boolean;
     };
+    /** empty value always sort to bottom */
+    emptyToBottom?: boolean;
     /**
      * string sort if use `String.prototype.localCompare`
      * default: false
      */
     stringLocaleCompare?: boolean;
+    /**
+     * whether to sort children when sort current column. default: false
+     */
+    sortChildren?: boolean;
 };
 
 /** th td type */
@@ -242,7 +250,6 @@ export type DragRowConfig = {
     // disabled?: (row: T, rowIndex: number) => boolean;
 };
 
-/** 树形配置 */
 export type TreeConfig = {
     // childrenField?: string;
     defaultExpandAll?: boolean;
@@ -253,13 +260,13 @@ export type TreeConfig = {
 /** header drag config */
 export type HeaderDragConfig<DT extends Record<string, any> = any> = {
     /**
-     * 列交换模式
-     * - none - 不做任何事
-     * - insert - 插入(默认值)
-     * - swap - 交换
+     * col switch mode
+     * - none
+     * - insert - (default)
+     * - swap
      */
     mode?: 'none' | 'insert' | 'swap';
-    /** 禁用拖动的列 */
+    /** disabled drag col */
     disabled?: (col: StkTableColumn<DT>) => boolean;
 };
 
@@ -277,3 +284,11 @@ export type RowKeyGen = (row: any) => UniqKey;
 export type ColKeyGen = ComputedRef<(col: StkTableColumn<any>) => UniqKey>;
 
 export type CellKeyGen = (row: any, col: StkTableColumn<any>) => string;
+
+export type RowActiveOption<DT> = {
+    enabled?: boolean;
+    /** disabled row active */
+    disabled?: (row: DT) => boolean;
+    /** current row again click can revoke active */
+    revokable?: boolean;
+};

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -64,7 +64,8 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
     /** 键盘按下事件 */
     function handleKeydown(e: KeyboardEvent) {
         if (!virtual_on.value) return; // 非虚拟滚动使用浏览器默认滚动
-        if (!ScrollCodesValues.includes(e.code as any)) return;
+        const keyCode = e.code;
+        if (!ScrollCodesValues.includes(keyCode as any)) return;
         if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
         e.preventDefault(); // 不触发键盘默认的箭头事件
 
@@ -76,22 +77,21 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
         /** 表体的page */
         const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
-
-        if (e.code === ScrollCodes.ArrowUp) {
+        if (keyCode=== ScrollCodes.ArrowUp) {
             scrollTo(scrollTop - rowHeight, null);
-        } else if (e.code === ScrollCodes.ArrowRight) {
+        } else if (keyCode=== ScrollCodes.ArrowRight) {
             scrollTo(null, scrollLeft + 50);
-        } else if (e.code === ScrollCodes.ArrowDown) {
+        } else if (keyCode=== ScrollCodes.ArrowDown) {
             scrollTo(scrollTop + rowHeight, null);
-        } else if (e.code === ScrollCodes.ArrowLeft) {
+        } else if (keyCode=== ScrollCodes.ArrowLeft) {
             scrollTo(null, scrollLeft - 50);
-        } else if (e.code === ScrollCodes.PageUp) {
+        } else if (keyCode=== ScrollCodes.PageUp) {
             scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
-        } else if (e.code === ScrollCodes.PageDown) {
+        } else if (keyCode=== ScrollCodes.PageDown) {
             scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
-        } else if (e.code === ScrollCodes.Home) {
+        } else if (keyCode=== ScrollCodes.Home) {
             scrollTo(0, null);
-        } else if (e.code === ScrollCodes.End) {
+        } else if (keyCode=== ScrollCodes.End) {
             scrollTo(scrollHeight, null);
         }
     }

package/src/StkTable/useMergeCells.ts

@@ -1,20 +1,14 @@
-import { ref, ShallowRef, watch } from 'vue';
-import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
+import { Ref, ref, ShallowRef, watch } from 'vue';
+import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowActiveOption, RowKeyGen, UniqKey } from './types';
 import { pureCellKeyGen } from './utils';
 type Options = {
-    props: any;
+    rowActiveProp: Ref<RowActiveOption<any>>;
     tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
     rowKeyGen: RowKeyGen;
     colKeyGen: ColKeyGen;
     virtual_dataSourcePart: ShallowRef<any[]>;
-}
-export function useMergeCells({
-    props,
-    tableHeaderLast,
-    rowKeyGen,
-    colKeyGen,
-    virtual_dataSourcePart,
-}:Options ) {
+};
+export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart }: Options) {
     /**
      * which cell need be hidden
      * - key: rowKey
@@ -33,13 +27,12 @@ export function useMergeCells({
     /** click current row , which rowspan cells should be highlight */
     const activeMergedCells = ref(new Set<string>());
 
-
     watch([virtual_dataSourcePart, tableHeaderLast], () => {
         hiddenCellMap.value = {};
         hoverRowMap.value = {};
     });
 
-    /** 
+    /**
      * abstract the logic of hiding cells
      */
     function hideCells(rowKey: UniqKey, startIndex: number, count: number, isSelfRow = false, mergeCellKey: string) {
@@ -84,14 +77,14 @@ export function useMergeCells({
         if (colspan === 1 && rowspan === 1) return;
 
         const rowKey = rowKeyGen(row);
-        
+
         const colKey = colKeyGen.value(col);
         const curColIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
         const curRowIndex = virtual_dataSourcePart.value.findIndex(item => rowKeyGen(item) === rowKey);
         const mergedCellKey = pureCellKeyGen(rowKey, colKey);
 
         if (curRowIndex === -1) return;
- 
+
         for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
             const row = virtual_dataSourcePart.value[i];
             if (!row) break;
@@ -106,13 +99,13 @@ export function useMergeCells({
         hoverMergedCells.value = set || new Set();
     }
 
-    function updateActiveMergedCells(clear?: boolean) {
-        if (!props.rowActive) return;
+    function updateActiveMergedCells(clear?: boolean, rowKey?: UniqKey) {
+        if (!rowActiveProp.value.enabled) return;
         if (clear) {
             activeMergedCells.value.clear();
-        } else {
-            activeMergedCells.value = new Set(hoverMergedCells.value);
+            return;
         }
+        activeMergedCells.value = (rowKey !== void 0 && hoverRowMap.value[rowKey]) || new Set(hoverMergedCells.value);
     }
 
     return {

package/src/StkTable/utils/index.ts

@@ -1,4 +1,4 @@
-import { CELL_KEY_SEPARATE } from '../const';
+import { CELL_KEY_SEPARATE, DEFAULT_SORT_CONFIG } from '../const';
 import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKey } from '../types';
 
 /** 是否空值 */
@@ -158,19 +158,28 @@ export function tableSort<T extends Record<string, any>>(
 ): T[] {
     if (!dataSource?.length || !sortOption) return dataSource || [];
 
-    sortConfig = { emptyToBottom: false, ...sortConfig };
+    sortConfig = { ...DEFAULT_SORT_CONFIG, ...sortConfig };
     let targetDataSource = dataSource.slice();
     let sortField = sortOption.sortField || sortOption.dataIndex;
+    const { defaultSort, stringLocaleCompare, emptyToBottom, sortChildren } = sortConfig;
 
-    if (!order && sortConfig.defaultSort) {
+    if (!order && defaultSort) {
         // 默认排序
-        order = sortConfig.defaultSort.order;
-        sortField = sortConfig.defaultSort.dataIndex;
+        order = defaultSort.order;
+        sortField = defaultSort.dataIndex;
     }
 
     if (typeof sortOption.sorter === 'function') {
         const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
         if (customSorterData) targetDataSource = customSorterData;
+
+        // 如果开启了子节点排序且使用了自定义排序器，递归排序children
+        if (sortChildren) {
+            targetDataSource.forEach(item => {
+                if (!item.children?.length) return;
+                (item as any).children = tableSort(sortOption, order, item.children, sortConfig);
+            });
+        }
     } else if (order) {
         let { sortType } = sortOption;
         if (!sortType) sortType = typeof dataSource[0][sortField] as 'number' | 'string';
@@ -179,15 +188,19 @@ export function tableSort<T extends Record<string, any>>(
         const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, isNumber);
 
         if (order === 'asc') {
-            valueArr.sort((a, b) => strCompare(a[sortField], b[sortField], isNumber, sortConfig.stringLocaleCompare));
+            valueArr.sort((a, b) => strCompare(a[sortField], b[sortField], isNumber, stringLocaleCompare));
         } else {
-            valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, sortConfig.stringLocaleCompare));
+            valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, stringLocaleCompare));
         }
 
-        if (order === 'desc' || sortConfig.emptyToBottom) {
-            targetDataSource = valueArr.concat(emptyArr);
-        } else {
-            targetDataSource = emptyArr.concat(valueArr);
+        targetDataSource = order === 'desc' || emptyToBottom ? valueArr.concat(emptyArr) : emptyArr.concat(valueArr);
+
+        // 递归排序子节点
+        if (sortChildren) {
+            targetDataSource.forEach(item => {
+                if (!item.children?.length) return;
+                (item as any).children = tableSort(sortOption, order, item.children, sortConfig);
+            });
         }
     }
     return targetDataSource;