stk-table-vue 0.8.6 → 0.8.8

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,11 @@ 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
+};
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
   TagType2[TagType2["TD"] = 1] = "TD";
@@ -817,7 +833,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 +842,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);
     }
   }
@@ -1364,7 +1381,7 @@ function useVirtualScroll({
   rowKeyGen,
   maxRowSpan
 }) {
-  const tableHeaderHeight = ref(props.headerRowHeight);
+  const tableHeaderHeight = computed(() => props.headerRowHeight * tableHeaders.value.length);
   const virtualScroll = ref({
     containerHeight: 0,
     rowHeight: props.rowHeight,
@@ -1457,9 +1474,6 @@ function useVirtualScroll({
     }
     return rowHeightFn;
   });
-  function getTableHeaderHeight() {
-    return props.headerRowHeight * tableHeaders.value.length;
-  }
   function initVirtualScroll(height) {
     initVirtualScrollY(height);
     initVirtualScrollX();
@@ -1470,16 +1484,14 @@ function useVirtualScroll({
       console.warn("initVirtualScrollY: height must be a number");
       height = 0;
     }
-    const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
+    const { clientHeight, scrollHeight } = tableContainerRef.value || {};
     let scrollTop = ((_a = tableContainerRef.value) == null ? void 0 : _a.scrollTop) || 0;
     const rowHeight = getRowHeightFn.value();
-    const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
+    const containerHeight = height || clientHeight || DEFAULT_TABLE_HEIGHT;
     const { headless } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
-    const headerHeight = getTableHeaderHeight();
-    tableHeaderHeight.value = headerHeight;
     if (!headless) {
-      const headerToBodyRowHeightCount = Math.floor(headerHeight / rowHeight);
+      const headerToBodyRowHeightCount = Math.floor(tableHeaderHeight.value / rowHeight);
       pageSize -= headerToBodyRowHeightCount;
     }
     const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
@@ -1687,6 +1699,7 @@ function useVirtualScroll({
     virtualX_on,
     virtualX_columnPart,
     virtualX_offsetRight,
+    tableHeaderHeight,
     initVirtualScroll,
     initVirtualScrollY,
     initVirtualScrollX,
@@ -1755,10 +1768,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: () => ({}) },
@@ -1819,6 +1829,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return (col, row) => emptyCellText({ row, col });
       }
     });
+    const SRBRTotalHeight = computed(() => {
+      if (!isSRBRActive.value || !props.virtual) return 0;
+      return dataSourceCopy.value.length * virtualScroll.value.rowHeight + tableHeaderHeight.value;
+    });
+    const SRBRBottomHeight = computed(() => {
+      if (!isSRBRActive.value || !props.virtual) return 0;
+      const { containerHeight, rowHeight } = virtualScroll.value;
+      return (containerHeight - tableHeaderHeight.value) % rowHeight;
+    });
     const rowKeyGenCache = /* @__PURE__ */ new WeakMap();
     const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
     const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
@@ -1833,6 +1852,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       virtualX_on,
       virtualX_columnPart,
       virtualX_offsetRight,
+      tableHeaderHeight,
       initVirtualScroll,
       initVirtualScrollY,
       initVirtualScrollX,
@@ -2113,8 +2133,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;
@@ -2138,14 +2158,16 @@ 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) {
@@ -2285,14 +2307,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         updateHoverMergedCells(void 0);
       }
     }
-    function setCurrentRow(rowKeyOrRow, option = { silent: false }) {
+    function setCurrentRow(rowKeyOrRow, 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, 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;
+        };
+        const row = findRowByKey(dataSourceCopy.value, rowKeyOrRow);
         if (!row) {
           console.warn("setCurrentRow failed.rowKey:", rowKeyOrRow);
           return;
@@ -2514,10 +2552,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onScroll: onTableScroll,
         onWheel: onTableWheel
       }, [
-        unref(isSRBRActive) && _ctx.virtual ? (openBlock(), createElementBlock("div", {
+        SRBRTotalHeight.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "row-by-row-table-height",
-          style: normalizeStyle({ height: dataSourceCopy.value.length * unref(virtualScroll).rowHeight + "px" })
+          style: normalizeStyle(`height: ${SRBRTotalHeight.value}px`)
         }, null, 4)) : createCommentVNode("", true),
         _ctx.colResizable ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -2772,6 +2810,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
               key: 1,
               style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
+            }, null, 4)) : createCommentVNode("", true),
+            SRBRBottomHeight.value ? (openBlock(), createElementBlock("tr", {
+              key: 2,
+              style: normalizeStyle(`height: ${SRBRBottomHeight.value}px`)
             }, null, 4)) : createCommentVNode("", true)
           ], 32)
         ], 6),

package/lib/style.css

@@ -184,8 +184,10 @@
 }
 .stk-table .row-by-row-table-height{
   width:1px;
+  flex-shrink:0;
   position:absolute;
   left:0;
+  top:0;
 }
 .stk-table th,
 .stk-table td{

package/package.json

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

@@ -36,12 +36,7 @@
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
-        
-        <div
-            v-if="isSRBRActive && virtual"
-            class="row-by-row-table-height"
-            :style="{ height: dataSourceCopy.length * virtualScroll.rowHeight + 'px' }"
-        ></div>
+        <div v-if="SRBRTotalHeight" class="row-by-row-table-height" :style="`height: ${SRBRTotalHeight}px`"></div>
 
         <div v-if="colResizable" ref="colResizeIndicatorRef" class="column-resize-indicator"></div>
         <table
@@ -240,6 +235,7 @@
                     </template>
                 </tr>
                 <tr v-if="virtual_on && !isSRBRActive" :style="`height: ${virtual_offsetBottom}px`"></tr>
+                <tr v-if="SRBRBottomHeight" :style="`height: ${SRBRBottomHeight}px`"></tr>
             </tbody>
         </table>
         <div v-if="(!dataSourceCopy || !dataSourceCopy.length) && showNoData" class="stk-table-no-data" :class="{ 'no-data-full': noDataFull }">
@@ -257,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,
@@ -477,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: () => ({}),
@@ -744,6 +737,19 @@ const getEmptyCellText = computed(() => {
     }
 });
 
+/** scroll-row-by-row total-height */
+const SRBRTotalHeight = computed(() => {
+    if (!isSRBRActive.value || !props.virtual) return 0;
+    return (
+        dataSourceCopy.value.length * virtualScroll.value.rowHeight + tableHeaderHeight.value //+
+    );
+});
+const SRBRBottomHeight = computed(() => {
+    if (!isSRBRActive.value || !props.virtual) return 0;
+    const { containerHeight, rowHeight } = virtualScroll.value;
+    return (containerHeight - tableHeaderHeight.value) % rowHeight;
+});
+
 const rowKeyGenCache = new WeakMap();
 
 const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
@@ -763,6 +769,7 @@ const {
     virtualX_on,
     virtualX_columnPart,
     virtualX_offsetRight,
+    tableHeaderHeight,
     initVirtualScroll,
     initVirtualScrollY,
     initVirtualScrollX,
@@ -880,7 +887,7 @@ watch(
             console.warn('invalid dataSource');
             return;
         }
-      
+
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
             needInitVirtualScrollY = true;
@@ -1122,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) {
@@ -1149,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);
     }
 }
 
@@ -1346,7 +1355,7 @@ function onTableScroll(e: Event) {
     }
 
     if (isYScroll) {
-        const {  startIndex, endIndex } = virtualScroll.value;
+        const { startIndex, endIndex } = virtualScroll.value;
         emits('scroll', e, { startIndex, endIndex });
     }
     if (isXScroll) {
@@ -1382,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;
@@ -1438,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/style.less

@@ -275,8 +275,10 @@
 
     .row-by-row-table-height {
         width: 1px;
+        flex-shrink: 0;
         position: absolute;
         left: 0;
+        top: 0;
     }
 
     th,

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