stk-table-vue 0.6.10 → 0.6.13

package/README.md

@@ -1,19 +1,31 @@
-# StkTable (Sticky Table)
-![NPM License](https://img.shields.io/npm/l/stk-table-vue)
-![NPM Version](https://img.shields.io/npm/v/stk-table-vue)
-![NPM Type Definitions](https://img.shields.io/npm/types/stk-table-vue)
-![NPM Downloads](https://img.shields.io/npm/dw/stk-table-vue)
-
-Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
-
-Vue2.7支持引入源码(**ts**)使用。
-
-[Stk Table Vue Doc](https://ja-plus.github.io/stk-table-vue/)
-
-repo(求 star🌟): 
+<p align="center">
+    <a href="https://ja-plus.github.io/stk-table-vue/">
+        <img src="./docs-src/public/assets/logo.svg" width="152">
+    </a>
+    <h3 align='center'>Stk Table Vue</h3>
+    <p align="center">
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
+        <a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
+    </p>
+</p>
+
+> StK Table (Sticky Table) 是一个基于Vue 的高性能虚拟列表组件。
+> 用于实时数据展示，数据高亮动效。
+
+> Vue2.7支持引入源码(**ts**)使用。
+
+## Doc
+文档： [Stk Table Vue 高性能虚拟表格](https://ja-plus.github.io/stk-table-vue/)
+
+## Repo: 
 - [Github](https://github.com/ja-plus/stk-table-vue)
 - [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
 
+## Demo
+
 [<span style="font-size: 16px;font-weight: bold;">Online Demo</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
 
 ## Feature TODO:

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

@@ -369,7 +369,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     clearAllAutoHeight: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "sort-change": (col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
-    "row-click": (ev: MouseEvent, row: any) => void;
+    "row-click": (ev: MouseEvent, row: any, data: {
+        rowIndex: number;
+    }) => void;
     "current-change": (ev: MouseEvent | null, row: any, data: {
         select: boolean;
     }) => void;
@@ -378,14 +380,22 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         row: DT | undefined;
         col: StkTableColumn<DT> | undefined;
     }) => void;
-    "row-dblclick": (ev: MouseEvent, row: any) => void;
+    "row-dblclick": (ev: MouseEvent, row: any, data: {
+        rowIndex: number;
+    }) => void;
     "header-row-menu": (ev: MouseEvent) => void;
-    "row-menu": (ev: MouseEvent, row: any) => void;
-    "cell-click": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
+    "row-menu": (ev: MouseEvent, row: any, data: {
+        rowIndex: number;
+    }) => void;
+    "cell-click": (ev: MouseEvent, row: any, col: StkTableColumn<any>, data: {
+        rowIndex: number;
+    }) => void;
     "cell-mouseenter": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
     "cell-mouseleave": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
     "cell-mouseover": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
-    "cell-mousedown": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
+    "cell-mousedown": (ev: MouseEvent, row: any, col: StkTableColumn<any>, data: {
+        rowIndex: number;
+    }) => void;
     "header-cell-click": (ev: MouseEvent, col: StkTableColumn<any>) => void;
     scroll: (ev: Event, data: {
         startIndex: number;
@@ -596,7 +606,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     "onCol-order-change"?: ((dragStartKey: string, targetColKey: string) => any) | undefined;
     "onRow-order-change"?: ((dragStartKey: string, targetRowKey: string) => any) | undefined;
     "onSort-change"?: ((col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => any) | undefined;
-    "onRow-click"?: ((ev: MouseEvent, row: any) => any) | undefined;
+    "onRow-click"?: ((ev: MouseEvent, row: any, data: {
+        rowIndex: number;
+    }) => any) | undefined;
     "onCurrent-change"?: ((ev: MouseEvent | null, row: any, data: {
         select: boolean;
     }) => any) | undefined;
@@ -605,14 +617,22 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         row: DT | undefined;
         col: StkTableColumn<DT> | undefined;
     }) => any) | undefined;
-    "onRow-dblclick"?: ((ev: MouseEvent, row: any) => any) | undefined;
+    "onRow-dblclick"?: ((ev: MouseEvent, row: any, data: {
+        rowIndex: number;
+    }) => any) | undefined;
     "onHeader-row-menu"?: ((ev: MouseEvent) => any) | undefined;
-    "onRow-menu"?: ((ev: MouseEvent, row: any) => any) | undefined;
-    "onCell-click"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
+    "onRow-menu"?: ((ev: MouseEvent, row: any, data: {
+        rowIndex: number;
+    }) => any) | undefined;
+    "onCell-click"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>, data: {
+        rowIndex: number;
+    }) => any) | undefined;
     "onCell-mouseenter"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
     "onCell-mouseleave"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
     "onCell-mouseover"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
-    "onCell-mousedown"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
+    "onCell-mousedown"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>, data: {
+        rowIndex: number;
+    }) => any) | undefined;
     "onHeader-cell-click"?: ((ev: MouseEvent, col: StkTableColumn<any>) => any) | undefined;
     "onScroll-x"?: ((ev: Event) => any) | undefined;
     "onToggle-row-expand"?: ((data: {

package/lib/stk-table-vue.js

@@ -420,7 +420,7 @@ function useColResize({
   function findLastChildCol(column) {
     var _a;
     if ((_a = column == null ? void 0 : column.children) == null ? void 0 : _a.length) {
-      const lastChild = column.children.at(-1);
+      const lastChild = column.children.slice(-1)[0];
       return findLastChildCol(lastChild);
     }
     return column;
@@ -815,6 +815,8 @@ var ScrollCodes = /* @__PURE__ */ ((ScrollCodes2) => {
   ScrollCodes2["ArrowLeft"] = "ArrowLeft";
   ScrollCodes2["PageUp"] = "PageUp";
   ScrollCodes2["PageDown"] = "PageDown";
+  ScrollCodes2["Home"] = "Home";
+  ScrollCodes2["End"] = "End";
   return ScrollCodes2;
 })(ScrollCodes || {});
 const ScrollCodesValues = Object.values(ScrollCodes);
@@ -848,7 +850,7 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     if (!ScrollCodesValues.includes(e.code)) return;
     if (!isMouseOver) return;
     e.preventDefault();
-    const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
+    const { scrollTop, rowHeight, containerHeight, scrollHeight } = virtualScroll.value;
     const { scrollLeft } = virtualScrollX.value;
     const { headless, headerRowHeight } = props;
     const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
@@ -856,15 +858,19 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     if (e.code === "ArrowUp") {
       scrollTo(scrollTop - rowHeight, null);
     } else if (e.code === "ArrowRight") {
-      scrollTo(null, scrollLeft + rowHeight);
+      scrollTo(null, scrollLeft + 50);
     } else if (e.code === "ArrowDown") {
       scrollTo(scrollTop + rowHeight, null);
     } else if (e.code === "ArrowLeft") {
-      scrollTo(null, scrollLeft - rowHeight);
+      scrollTo(null, scrollLeft - 50);
     } else if (e.code === "PageUp") {
       scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
     } else if (e.code === "PageDown") {
       scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
+    } else if (e.code === "Home") {
+      scrollTo(0, null);
+    } else if (e.code === "End") {
+      scrollTo(scrollHeight, null);
     }
   }
   function handleMouseEnter() {
@@ -1430,7 +1436,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const sortSwitchOrder = [null, "desc", "asc"];
     const tableHeaders = shallowRef([]);
     const tableHeadersForCalc = shallowRef([]);
-    const tableHeaderLast = computed(() => tableHeadersForCalc.value.at(-1) || []);
+    const tableHeaderLast = computed(() => tableHeadersForCalc.value.slice(-1)[0] || []);
     const dataSourceCopy = shallowRef(props.dataSource.slice());
     const rowKeyGenComputed = computed(() => {
       const { rowKey } = props;
@@ -1671,7 +1677,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const { virtualX, colResizable } = props;
       tableHeaders.value.forEach((cols, depth) => {
         cols.forEach((col) => {
-          const colKey = colKeyGen.value(col);
           const width = virtualX ? getCalculatedColWidth(col) + "px" : transformWidthToStr(col.width);
           const style = {
             width
@@ -1683,8 +1688,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             style.minWidth = transformWidthToStr(col.minWidth) ?? width;
             style.maxWidth = transformWidthToStr(col.maxWidth) ?? width;
           }
+          const colKey = colKeyGen.value(col);
           thMap.set(colKey, Object.assign({ textAlign: col.headerAlign }, style, getFixedStyle(TagType.TH, col, depth)));
-          tdMap.set(colKey, Object.assign({ textAlign: col.align }, style, getFixedStyle(TagType.TD, col, depth), { textAlign: col.align }));
+          tdMap.set(colKey, Object.assign({ textAlign: col.align }, style, getFixedStyle(TagType.TD, col, depth)));
         });
       });
       return {
@@ -1692,6 +1698,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         [TagType.TD]: tdMap
       };
     });
+    function getRowIndex(rowIndex) {
+      return rowIndex + (virtual_on ? virtualScroll.value.startIndex : 0);
+    }
     function getHeaderTitle(col) {
       const colKey = colKeyGen.value(col);
       if (props.hideHeaderTitle === true || Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(colKey)) {
@@ -1713,6 +1722,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         sortCol.value = colKey;
         sortOrderIndex.value = 0;
       }
+      const prevOrder = sortSwitchOrder[sortOrderIndex.value];
       if (click) sortOrderIndex.value++;
       sortOrderIndex.value = sortOrderIndex.value % 3;
       let order = sortSwitchOrder[sortOrderIndex.value];
@@ -1720,17 +1730,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const defaultSort = sortConfig.defaultSort;
       const colKeyGenValue = colKeyGen.value;
       if (!order && defaultSort) {
-        const colKey2 = defaultSort.key || defaultSort.dataIndex;
-        if (!colKey2) {
+        const defaultColKey = defaultSort.key || defaultSort.dataIndex;
+        if (!defaultColKey) {
           console.error("sortConfig.defaultSort key or dataIndex is required");
           return;
         }
-        order = defaultSort.order || "desc";
+        if (colKey === defaultColKey && prevOrder === defaultSort.order) {
+          order = sortSwitchOrder.find((o) => o !== defaultSort.order && o);
+        } else {
+          order = defaultSort.order;
+        }
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
-        sortCol.value = colKey2;
+        sortCol.value = defaultColKey;
         col = null;
         for (const row of tableHeaders.value) {
-          const c = row.find((item) => colKeyGenValue(item) === colKey2);
+          const c = row.find((item) => colKeyGenValue(item) === defaultColKey);
           if (c) {
             col = c;
             break;
@@ -1747,8 +1761,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emits("sort-change", col, order, toRaw(dataSourceCopy.value), sortConfig);
       }
     }
-    function onRowClick(e, row) {
-      emits("row-click", e, row);
+    function onRowClick(e, row, rowIndex) {
+      emits("row-click", e, row, { rowIndex });
       const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
       if (isCurrentRow) {
         if (!props.rowCurrentRevokable) {
@@ -1762,22 +1776,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       emits("current-change", e, row, { select: !isCurrentRow });
     }
-    function onRowDblclick(e, row) {
-      emits("row-dblclick", e, row);
+    function onRowDblclick(e, row, rowIndex) {
+      emits("row-dblclick", e, row, { rowIndex });
     }
     function onHeaderMenu(e) {
       emits("header-row-menu", e);
     }
-    function onRowMenu(e, row) {
-      emits("row-menu", e, row);
+    function onRowMenu(e, row, rowIndex) {
+      emits("row-menu", e, row, { rowIndex });
     }
-    function onCellClick(e, row, col) {
+    function onCellClick(e, row, col, rowIndex) {
       if (col.type === "expand") {
         toggleExpandRow(row, col);
       }
       if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
-        const result = { row, col, select: false };
+        const result = { row, col, select: false, rowIndex };
         if (props.selectedCellRevokable && currentSelectedCellKey.value === cellKey) {
           currentSelectedCellKey.value = void 0;
         } else {
@@ -1786,7 +1800,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         emits("cell-selected", e, result);
       }
-      emits("cell-click", e, row, col);
+      emits("cell-click", e, row, col, { rowIndex });
     }
     function onHeaderCellClick(e, col) {
       emits("header-cell-click", e, col);
@@ -1800,8 +1814,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onCellMouseOver(e, row, col) {
       emits("cell-mouseover", e, row, col);
     }
-    function onCellMouseDown(e, row, col) {
-      emits("cell-mousedown", e, row, col);
+    function onCellMouseDown(e, row, col, rowIndex) {
+      emits("cell-mousedown", e, row, col, { rowIndex });
     }
     function onTableWheel(e) {
       if (props.smoothScroll) {
@@ -2099,6 +2113,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           virtual: _ctx.virtual,
           "virtual-x": _ctx.virtualX,
           "vt-on": unref(virtual_on),
+          light: _ctx.theme === "light",
           dark: _ctx.theme === "dark",
           headless: _ctx.headless,
           "is-col-resizing": unref(isColResizing),
@@ -2250,27 +2265,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
               var _a, _b;
               return openBlock(), createElementBlock("tr", {
-                id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex),
+                id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)),
                 ref_for: true,
                 ref_key: "trRef",
                 ref: trRef,
-                key: _ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
-                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
+                key: _ctx.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
+                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
                 class: normalizeClass({
                   active: _ctx.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
                   hover: props.showTrHoverClass && (_ctx.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
-                  [_ctx.rowClassName(row, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)]: true,
+                  [_ctx.rowClassName(row, getRowIndex(rowIndex))]: true,
                   expanded: row == null ? void 0 : row.__EXPANDED__,
                   "expanded-row": row && row.__EXPANDED_ROW__
                 }),
                 style: normalizeStyle({
                   "--row-height": row && row.__EXPANDED_ROW__ && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
                 }),
-                onClick: (e) => onRowClick(e, row),
-                onDblclick: (e) => onRowDblclick(e, row),
-                onContextmenu: (e) => onRowMenu(e, row),
+                onClick: (e) => onRowClick(e, row, getRowIndex(rowIndex)),
+                onDblclick: (e) => onRowDblclick(e, row, getRowIndex(rowIndex)),
+                onContextmenu: (e) => onRowMenu(e, row, getRowIndex(rowIndex)),
                 onMouseover: (e) => onTrMouseOver(e, row),
-                onDrop: (e) => unref(onTrDrop)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
+                onDrop: (e) => unref(onTrDrop)(e, getRowIndex(rowIndex))
               }, [
                 unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_7)) : createCommentVNode("", true),
                 row && row.__EXPANDED_ROW__ ? (openBlock(), createElementBlock("td", {
@@ -2300,12 +2315,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         "seq-column": col.type === "seq",
                         active: currentSelectedCellKey.value === cellKeyGen(row, col),
                         "expand-cell": col.type === "expand",
-                        expanded: col.type === "expand" && colKeyGen.value(row == null ? void 0 : row.__EXPANDED__) === colKeyGen.value(col),
+                        expanded: col.type === "expand" && (row.__EXPANDED__ ? colKeyGen.value(row.__EXPANDED__) === colKeyGen.value(col) : false),
                         "drag-row-cell": col.type === "dragRow"
                       }
                     ]),
-                    onClick: (e) => onCellClick(e, row, col),
-                    onMousedown: (e) => onCellMouseDown(e, row, col),
+                    onClick: (e) => onCellClick(e, row, col, getRowIndex(rowIndex)),
+                    onMousedown: (e) => onCellMouseDown(e, row, col, getRowIndex(rowIndex)),
                     onMouseenter: (e) => onCellMouseEnter(e, row, col),
                     onMouseleave: (e) => onCellMouseLeave(e, row, col),
                     onMouseover: (e) => onCellMouseOver(e, row, col)
@@ -2315,20 +2330,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: "table-cell-wrapper",
                       col,
                       row,
-                      rowIndex: (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
+                      rowIndex: getRowIndex(rowIndex),
                       colIndex,
-                      cellValue: row == null ? void 0 : row[col.dataIndex],
-                      expanded: (row == null ? void 0 : row.__EXPANDED__) || null
+                      cellValue: row && row[col.dataIndex],
+                      expanded: row && row.__EXPANDED__ || null
                     }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded"])) : (openBlock(), createElementBlock("div", {
                       key: 1,
                       class: normalizeClass(["table-cell-wrapper", { "expanded-cell-wrapper": col.type === "expand" }]),
                       title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""
                     }, [
                       col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                        createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex + 1), 1)
+                        createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
                       ], 64)) : col.type === "expand" ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                         createVNode(DragHandle, {
-                          onDragstart: (e) => unref(onTrDragStart)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
+                          onDragstart: (e) => unref(onTrDragStart)(e, getRowIndex(rowIndex))
                         }, null, 8, ["onDragstart"]),
                         createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
                       ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.6.10",
+  "version": "0.6.13",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -7,6 +7,7 @@
             virtual,
             'virtual-x': virtualX,
             'vt-on': virtual_on,
+            light: theme === 'light',
             dark: theme === 'dark',
             headless,
             'is-col-resizing': isColResizing,
@@ -60,7 +61,7 @@
                         class="vt-x-left"
                         :style="`min-width:${virtualScrollX.offsetLeft}px;width:${virtualScrollX.offsetLeft}px`"
                     ></th>
-                    <!-- v for中最后一行才用 切割。TODO:不支持多级表头虚拟横向滚动 -->
+                    <!-- v for中最后一行才用 切割。-->
                     <th
                         v-for="(col, colIndex) in virtualX_on && rowIndex === tableHeaders.length - 1 ? virtualX_columnPart : row"
                         :key="colKeyGen(col)"
@@ -122,14 +123,14 @@
                 </tr>
                 <tr
                     v-for="(row, rowIndex) in virtual_dataSourcePart"
-                    :id="stkTableId + '-' + (rowKey ? rowKeyGen(row) : (virtual_on ? virtualScroll.startIndex : 0) + rowIndex)"
+                    :id="stkTableId + '-' + (rowKey ? rowKeyGen(row) : getRowIndex(rowIndex))"
                     ref="trRef"
-                    :key="rowKey ? rowKeyGen(row) : (virtual_on ? virtualScroll.startIndex : 0) + rowIndex"
-                    :data-row-key="rowKey ? rowKeyGen(row) : (virtual_on ? virtualScroll.startIndex : 0) + rowIndex"
+                    :key="rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)"
+                    :data-row-key="rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)"
                     :class="{
                         active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
                         hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
-                        [rowClassName(row, (virtual_on ? virtualScroll.startIndex : 0) + rowIndex)]: true,
+                        [rowClassName(row, getRowIndex(rowIndex))]: true,
                         expanded: row?.__EXPANDED__,
                         'expanded-row': row && row.__EXPANDED_ROW__,
                     }"
@@ -137,11 +138,11 @@
                         '--row-height':
                             row && row.__EXPANDED_ROW__ && props.virtual && props.expandConfig?.height && props.expandConfig?.height + 'px',
                     }"
-                    @click="e => onRowClick(e, row)"
-                    @dblclick="e => onRowDblclick(e, row)"
-                    @contextmenu="e => onRowMenu(e, row)"
+                    @click="e => onRowClick(e, row, getRowIndex(rowIndex))"
+                    @dblclick="e => onRowDblclick(e, row, getRowIndex(rowIndex))"
+                    @contextmenu="e => onRowMenu(e, row, getRowIndex(rowIndex))"
                     @mouseover="e => onTrMouseOver(e, row)"
-                    @drop="e => onTrDrop(e, (virtual_on ? virtualScroll.startIndex : 0) + rowIndex)"
+                    @drop="e => onTrDrop(e, getRowIndex(rowIndex))"
                 >
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on" class="vt-x-left"></td>
@@ -166,12 +167,12 @@
                                     'seq-column': col.type === 'seq',
                                     active: currentSelectedCellKey === cellKeyGen(row, col),
                                     'expand-cell': col.type === 'expand',
-                                    expanded: col.type === 'expand' && colKeyGen(row?.__EXPANDED__) === colKeyGen(col),
+                                    expanded: col.type === 'expand' && (row.__EXPANDED__ ? colKeyGen(row.__EXPANDED__) === colKeyGen(col) : false),
                                     'drag-row-cell': col.type === 'dragRow',
                                 },
                             ]"
-                            @click="e => onCellClick(e, row, col)"
-                            @mousedown="e => onCellMouseDown(e, row, col)"
+                            @click="e => onCellClick(e, row, col, getRowIndex(rowIndex))"
+                            @mousedown="e => onCellMouseDown(e, row, col, getRowIndex(rowIndex))"
                             @mouseenter="e => onCellMouseEnter(e, row, col)"
                             @mouseleave="e => onCellMouseLeave(e, row, col)"
                             @mouseover="e => onCellMouseOver(e, row, col)"
@@ -182,10 +183,10 @@
                                 class="table-cell-wrapper"
                                 :col="col"
                                 :row="row"
-                                :rowIndex="(virtual_on ? virtualScroll.startIndex : 0) + rowIndex"
+                                :rowIndex="getRowIndex(rowIndex)"
                                 :colIndex="colIndex"
-                                :cellValue="row?.[col.dataIndex]"
-                                :expanded="row?.__EXPANDED__ || null"
+                                :cellValue="row && row[col.dataIndex]"
+                                :expanded="(row && row.__EXPANDED__) || null"
                             />
                             <div
                                 v-else
@@ -194,13 +195,13 @@
                                 :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''"
                             >
                                 <template v-if="col.type === 'seq'">
-                                    {{ (props.seqConfig.startIndex || 0) + (virtual_on ? virtualScroll.startIndex : 0) + rowIndex + 1 }}
+                                    {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
                                 </template>
                                 <span v-else-if="col.type === 'expand'">
                                     {{ row?.[col.dataIndex] ?? '' }}
                                 </span>
                                 <template v-else-if="col.type === 'dragRow'">
-                                    <DragHandle @dragstart="e => onTrDragStart(e, (virtual_on ? virtualScroll.startIndex : 0) + rowIndex)" />
+                                    <DragHandle @dragstart="e => onTrDragStart(e, getRowIndex(rowIndex))" />
                                     <span>
                                         {{ row?.[col.dataIndex] ?? '' }}
                                     </span>
@@ -463,13 +464,13 @@ const emits = defineEmits<{
     /**
      * 一行点击事件
      *
-     * ```(ev: MouseEvent, row: DT)```
+     * ```(ev: MouseEvent, row: DT, data: { rowIndex: number })```
      */
-    (e: 'row-click', ev: MouseEvent, row: DT): void;
+    (e: 'row-click', ev: MouseEvent, row: DT, data: { rowIndex: number }): void;
     /**
      * 选中一行触发。ev返回null表示不是点击事件触发的
      *
-     * ```(ev: MouseEvent | null, row: DT | undefined, data: { select: boolean })```
+     * ```(ev: MouseEvent | null, row: DT | undefined, data: { select: boolean} })```
      */
     (e: 'current-change', ev: MouseEvent | null, row: DT | undefined, data: { select: boolean }): void;
     /**
@@ -481,9 +482,9 @@ const emits = defineEmits<{
     /**
      * 行双击事件
      *
-     * ```(ev: MouseEvent, row: DT)```
+     * ```(ev: MouseEvent, row: DT, data: { rowIndex: number })```
      */
-    (e: 'row-dblclick', ev: MouseEvent, row: DT): void;
+    (e: 'row-dblclick', ev: MouseEvent, row: DT, data: { rowIndex: number }): void;
     /**
      * 表头右键事件
      *
@@ -493,15 +494,15 @@ const emits = defineEmits<{
     /**
      * 表体行右键点击事件
      *
-     * ```(ev: MouseEvent, row: DT)```
+     * ```(ev: MouseEvent, row: DT, data: { rowIndex: number })```
      */
-    (e: 'row-menu', ev: MouseEvent, row: DT): void;
+    (e: 'row-menu', ev: MouseEvent, row: DT, data: { rowIndex: number }): void;
     /**
      * 单元格点击事件
      *
-     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>, data: { rowIndex: number })```
      */
-    (e: 'cell-click', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    (e: 'cell-click', ev: MouseEvent, row: DT, col: StkTableColumn<DT>, data: { rowIndex: number }): void;
     /**
      * 单元格鼠标进入事件
      *
@@ -523,9 +524,9 @@ const emits = defineEmits<{
     /**
      * 单元格鼠标按下事件
      *
-     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>, data: { rowIndex: number })```
      */
-    (e: 'cell-mousedown', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    (e: 'cell-mousedown', ev: MouseEvent, row: DT, col: StkTableColumn<DT>, data: { rowIndex: number }): void;
     /**
      * 表头单元格点击事件
      *
@@ -662,7 +663,7 @@ const tableHeaders = shallowRef<StkTableColumn<DT>[][]>([]);
 const tableHeadersForCalc = shallowRef<PrivateStkTableColumn<DT>[][]>([]);
 
 /** 最后一行的tableHeaders.内容是 props.columns 的引用集合  */
-const tableHeaderLast = computed(() => tableHeadersForCalc.value.at(-1) || []);
+const tableHeaderLast = computed(() => tableHeadersForCalc.value.slice(-1)[0] || []);
 
 const dataSourceCopy = shallowRef<DT[]>(props.dataSource.slice());
 
@@ -976,7 +977,6 @@ const cellStyleMap = computed(() => {
     const { virtualX, colResizable } = props;
     tableHeaders.value.forEach((cols, depth) => {
         cols.forEach(col => {
-            const colKey = colKeyGen.value(col);
             const width = virtualX ? getCalculatedColWidth(col) + 'px' : transformWidthToStr(col.width);
             const style: CSSProperties = {
                 width,
@@ -989,9 +989,9 @@ const cellStyleMap = computed(() => {
                 style.minWidth = transformWidthToStr(col.minWidth) ?? width;
                 style.maxWidth = transformWidthToStr(col.maxWidth) ?? width;
             }
-
+            const colKey = colKeyGen.value(col);
             thMap.set(colKey, Object.assign({ textAlign: col.headerAlign }, style, getFixedStyle(TagType.TH, col, depth)));
-            tdMap.set(colKey, Object.assign({ textAlign: col.align }, style, getFixedStyle(TagType.TD, col, depth), { textAlign: col.align }));
+            tdMap.set(colKey, Object.assign({ textAlign: col.align }, style, getFixedStyle(TagType.TD, col, depth)));
         });
     });
     return {
@@ -1000,10 +1000,14 @@ const cellStyleMap = computed(() => {
     };
 });
 
+function getRowIndex(rowIndex: number) {
+    return rowIndex + (virtual_on ? virtualScroll.value.startIndex : 0);
+}
+
 /** th title */
 function getHeaderTitle(col: StkTableColumn<DT>): string {
     const colKey = colKeyGen.value(col);
-    // 不展示title
+    // hide title
     if (props.hideHeaderTitle === true || (Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(colKey))) {
         return '';
     }
@@ -1032,6 +1036,7 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
         sortCol.value = colKey;
         sortOrderIndex.value = 0;
     }
+    const prevOrder = sortSwitchOrder[sortOrderIndex.value];
     if (click) sortOrderIndex.value++;
     sortOrderIndex.value = sortOrderIndex.value % 3;
 
@@ -1042,17 +1047,21 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
 
     if (!order && defaultSort) {
         // if no order ,use default order
-        const colKey = defaultSort.key || defaultSort.dataIndex;
-        if (!colKey) {
+        const defaultColKey = defaultSort.key || defaultSort.dataIndex;
+        if (!defaultColKey) {
             console.error('sortConfig.defaultSort key or dataIndex is required');
             return;
         }
-        order = defaultSort.order || 'desc';
+        if (colKey === defaultColKey && prevOrder === defaultSort.order) {
+            order = sortSwitchOrder.find(o => o !== defaultSort.order && o) as Order;
+        } else {
+            order = defaultSort.order;
+        }
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
-        sortCol.value = colKey as string;
+        sortCol.value = defaultColKey as string;
         col = null;
         for (const row of tableHeaders.value) {
-            const c = row.find(item => colKeyGenValue(item) === colKey);
+            const c = row.find(item => colKeyGenValue(item) === defaultColKey);
             if (c) {
                 col = c;
                 break;
@@ -1071,8 +1080,8 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
     }
 }
 
-function onRowClick(e: MouseEvent, row: DT) {
-    emits('row-click', e, row);
+function onRowClick(e: MouseEvent, row: DT, rowIndex: number) {
+    emits('row-click', e, row, { rowIndex });
     const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
     if (isCurrentRow) {
         if (!props.rowCurrentRevokable) {
@@ -1089,8 +1098,8 @@ function onRowClick(e: MouseEvent, row: DT) {
     emits('current-change', e, row, { select: !isCurrentRow });
 }
 
-function onRowDblclick(e: MouseEvent, row: DT) {
-    emits('row-dblclick', e, row);
+function onRowDblclick(e: MouseEvent, row: DT, rowIndex: number) {
+    emits('row-dblclick', e, row, { rowIndex });
 }
 
 /** 表头行右键 */
@@ -1099,8 +1108,8 @@ function onHeaderMenu(e: MouseEvent) {
 }
 
 /** 表体行右键 */
-function onRowMenu(e: MouseEvent, row: DT) {
-    emits('row-menu', e, row);
+function onRowMenu(e: MouseEvent, row: DT, rowIndex: number) {
+    emits('row-menu', e, row, { rowIndex });
 }
 
 /**
@@ -1134,13 +1143,13 @@ function onRowMenu(e: MouseEvent, row: DT) {
 // }
 
 /** 单元格单击 */
-function onCellClick(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+function onCellClick(e: MouseEvent, row: DT, col: StkTableColumn<DT>, rowIndex: number) {
     if (col.type === 'expand') {
         toggleExpandRow(row, col);
     }
     if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
-        const result = { row, col, select: false };
+        const result = { row, col, select: false, rowIndex };
         if (props.selectedCellRevokable && currentSelectedCellKey.value === cellKey) {
             currentSelectedCellKey.value = void 0;
         } else {
@@ -1149,7 +1158,7 @@ function onCellClick(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
         }
         emits('cell-selected', e, result);
     }
-    emits('cell-click', e, row, col);
+    emits('cell-click', e, row, col, { rowIndex });
 }
 
 /** 表头单元格单击 */
@@ -1172,8 +1181,8 @@ function onCellMouseOver(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
     emits('cell-mouseover', e, row, col);
 }
 
-function onCellMouseDown(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
-    emits('cell-mousedown', e, row, col);
+function onCellMouseDown(e: MouseEvent, row: DT, col: StkTableColumn<DT>, rowIndex: number) {
+    emits('cell-mousedown', e, row, col, { rowIndex });
 }
 
 /**

package/src/StkTable/useColResize.ts

@@ -202,7 +202,7 @@ export function useColResize<DT extends Record<string, any>>({
     /**获取最后一个叶子 */
     function findLastChildCol(column: StkTableColumn<DT> | null) {
         if (column?.children?.length) {
-            const lastChild = column.children.at(-1) as StkTableColumn<DT>;
+            const lastChild = column.children.slice(-1)[0] as StkTableColumn<DT>;
             return findLastChildCol(lastChild);
         }
         return column;

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -10,6 +10,8 @@ enum ScrollCodes {
     ArrowLeft = 'ArrowLeft',
     PageUp = 'PageUp',
     PageDown = 'PageDown',
+    Home = 'Home',
+    End = 'End',
 }
 /** 所有翻页按键数组 */
 const ScrollCodesValues = Object.values(ScrollCodes);
@@ -66,7 +68,7 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
         e.preventDefault(); // 不触发键盘默认的箭头事件
 
-        const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
+        const { scrollTop, rowHeight, containerHeight, scrollHeight } = virtualScroll.value;
         const { scrollLeft } = virtualScrollX.value;
         const { headless, headerRowHeight } = props;
 
@@ -78,15 +80,19 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         if (e.code === ScrollCodes.ArrowUp) {
             scrollTo(scrollTop - rowHeight, null);
         } else if (e.code === ScrollCodes.ArrowRight) {
-            scrollTo(null, scrollLeft + rowHeight);
+            scrollTo(null, scrollLeft + 50);
         } else if (e.code === ScrollCodes.ArrowDown) {
             scrollTo(scrollTop + rowHeight, null);
         } else if (e.code === ScrollCodes.ArrowLeft) {
-            scrollTo(null, scrollLeft - rowHeight);
+            scrollTo(null, scrollLeft - 50);
         } else if (e.code === ScrollCodes.PageUp) {
             scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
         } else if (e.code === ScrollCodes.PageDown) {
             scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
+        } else if (e.code === ScrollCodes.Home) {
+            scrollTo(0, null);
+        } else if (e.code === ScrollCodes.End) {
+            scrollTo(scrollHeight, null);
         }
     }