stk-table-vue 0.8.7 → 0.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "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

@@ -253,7 +253,7 @@ 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_HEIGHT, DEFAULT_SMOOTH_SCROLL, DEFAULT_SORT_CONFIG, IS_LEGACY_MODE } from './const';
 import {
     AutoRowHeightConfig,
     ColResizableConfig,
@@ -473,10 +473,7 @@ const props = withDefaults(
         autoResize: true,
         fixedColShadow: false,
         optimizeVue2Scroll: false,
-        sortConfig: () => ({
-            emptyToBottom: false,
-            stringLocaleCompare: false,
-        }),
+        sortConfig: () => DEFAULT_SORT_CONFIG,
         hideHeaderTitle: false,
         highlightConfig: () => ({}),
         seqConfig: () => ({}),
@@ -749,7 +746,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();
@@ -1131,8 +1129,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,15 +1156,17 @@ 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;
         }
     }
-    // 只有点击才触发事件
+    // 只有点击才触发事件 en: 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);
     }
 }
 
@@ -1391,15 +1391,32 @@ 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 }) {
+function setCurrentRow(rowKeyOrRow: string | undefined | DT, option = { silent: false, deep: false }) {
     if (!dataSourceCopy.value.length) return;
     const select = rowKeyOrRow !== void 0;
     if (!select) {
         currentRow.value = void 0;
         currentRowKey.value = void 0;
     } 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;
+        };
+
+        const row = findRowByKey(dataSourceCopy.value, rowKeyOrRow);
         if (!row) {
             console.warn('setCurrentRow failed.rowKey:', rowKeyOrRow);
             return;
@@ -1447,7 +1464,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 { SortConfig } from './types';
 import { getBrowsersVersion } from './utils';
 
 export const DEFAULT_COL_WIDTH = '100';
@@ -33,5 +34,11 @@ 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>;

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;
 };
 

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/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;