stk-table-vue 0.8.9 → 0.8.11

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

@@ -214,7 +214,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowHeight: number;
     autoRowHeight: boolean;
     rowHover: boolean;
-    rowActive: boolean;
+    rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
     headerRowHeight: number;
     virtual: boolean;
@@ -583,7 +583,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowHeight: number;
     autoRowHeight: boolean;
     rowHover: boolean;
-    rowActive: boolean;
+    rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
     headerRowHeight: number;
     virtual: boolean;

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

@@ -18,7 +18,9 @@ export type CustomCellProps<T extends Record<string, any>> = {
      * - 不展开: null
      * - 展开: 返回column配置
      */
-    expanded?: PrivateRowDT['__EXPANDED__'];
+    expanded: PrivateRowDT['__EXP__'];
+    /** if tree expanded */
+    treeExpanded: PrivateRowDT['__T_EXP__'];
 };
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
     col: StkTableColumn<T>;
@@ -134,25 +136,25 @@ export type PrivateRowDT = {
     /**
      * Only expanded row will add this key
      *
-     * If user define the `__ROW_KEY__` in table data, this value will be used as the row key
+     * If user define the `__ROW_K__` in table data, this value will be used as the row key
      * @private
      */
-    __ROW_KEY__?: string;
+    __ROW_K__?: string;
     /**
      * if row expanded
      * @private
      */
-    __EXPANDED__?: StkTableColumn<any> | null;
+    __EXP__?: StkTableColumn<any> | null;
     /**
      * if tree node row expanded
      * @private
      */
-    __T_EXPANDED__?: boolean;
+    __T_EXP__?: boolean;
     /**
      * tree parent key
      * @private
      */
-    __T_PARENT_K__?: UniqKey;
+    __T_P_K__?: UniqKey;
     /**
      * tree level
      * @private

package/lib/stk-table-vue.js

@@ -971,7 +971,7 @@ function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, v
   };
 }
 function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
-  const expandedKey = "__EXPANDED__";
+  const expandedKey = "__EXP__";
   function isExpanded(row, col) {
     return (row == null ? void 0 : row[expandedKey]) === col ? !(row == null ? void 0 : row[expandedKey]) : true;
   }
@@ -994,7 +994,7 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
     }
     for (let i = index + 1; i < tempData.length; i++) {
       const item = tempData[i];
-      const rowKey2 = item.__ROW_KEY__;
+      const rowKey2 = item.__ROW_K__;
       if (rowKey2 == null ? void 0 : rowKey2.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
         tempData.splice(i, 1);
         i--;
@@ -1009,14 +1009,14 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
     }
     if (expand) {
       const newExpandRow = {
-        __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
+        __ROW_K__: EXPANDED_ROW_KEY_PREFIX + rowKey,
         __EXPANDED_ROW__: row,
         __EXPANDED_COL__: col
       };
       tempData.splice(index + 1, 0, newExpandRow);
     }
     if (row) {
-      row.__EXPANDED__ = expand ? col : null;
+      row.__EXP__ = expand ? col : null;
     }
     dataSourceCopy.value = tempData;
     if (!(data == null ? void 0 : data.silent)) {
@@ -1253,7 +1253,7 @@ function useTrDrag({ props, emits, dataSourceCopy }) {
 function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
   const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel } = props.treeConfig;
   function toggleTreeNode(row, col) {
-    const expand = row ? !row.__T_EXPANDED__ : false;
+    const expand = row ? !row.__T_EXP__ : false;
     privateSetTreeExpand(row, { expand, col, isClick: true });
   }
   function privateSetTreeExpand(row, option) {
@@ -1276,7 +1276,7 @@ function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
       const level = row2.__T_LV__ || 0;
       let expanded = option == null ? void 0 : option.expand;
       if (expanded === void 0) {
-        expanded = !row2.__T_EXPANDED__;
+        expanded = !row2.__T_EXP__;
       }
       if (expanded) {
         const children = expandNode(row2, level);
@@ -1296,13 +1296,10 @@ function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
     privateSetTreeExpand(row, { ...option, isClick: false });
   }
   function setNodeExpanded(row, expanded, level, parent) {
-    row.__T_EXPANDED__ = expanded;
+    row.__T_EXP__ = expanded;
     if (level !== void 0) {
       row.__T_LV__ = level;
     }
-    if (parent) {
-      row.__T_PARENT_K__ = rowKeyGen(parent);
-    }
   }
   function flatTreeData(data) {
     const result = [];
@@ -1311,28 +1308,24 @@ function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
       for (let i = 0; i < data2.length; i++) {
         const item = data2[i];
         result.push(item);
-        const isExpanded = Boolean(item.__T_EXPANDED__);
-        setNodeExpanded(item, isExpanded, level, parent);
+        const isExpanded = Boolean(item.__T_EXP__);
+        setNodeExpanded(item, isExpanded, level);
         if (!isExpanded) {
           if (defaultExpandAll) {
             setNodeExpanded(item, true);
           } else {
-            if (defaultExpandLevel) {
-              if (level < defaultExpandLevel) {
-                setNodeExpanded(item, true);
-              }
+            if (defaultExpandLevel && level < defaultExpandLevel) {
+              setNodeExpanded(item, true);
             }
-            if (defaultExpandKeys) {
-              if (defaultExpandKeys.includes(rowKeyGen(item))) {
-                setNodeExpanded(item, true);
-              }
+            if (defaultExpandKeys == null ? void 0 : defaultExpandKeys.includes(rowKeyGen(item))) {
+              setNodeExpanded(item, true);
             }
-            if (!item.__T_EXPANDED__) {
+            if (!item.__T_EXP__) {
               continue;
             }
           }
         }
-        recursion(item.children, level + 1, item);
+        recursion(item.children, level + 1);
       }
     })(data, 0);
     return result;
@@ -1342,11 +1335,11 @@ function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
     row.children && row.children.forEach((child) => {
       result.push(child);
       const childLv = level + 1;
-      if (child.__T_EXPANDED__ && child.children) {
+      if (child.__T_EXP__ && child.children) {
         const res = expandNode(child, childLv);
         result = result.concat(res);
       } else {
-        setNodeExpanded(child, false, childLv, row);
+        setNodeExpanded(child, false, childLv);
       }
     });
     return result;
@@ -1726,7 +1719,6 @@ const _hoisted_9 = ["colspan"];
 const _hoisted_10 = { class: "table-cell-wrapper" };
 const _hoisted_11 = ["data-cell-key", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
 const _hoisted_12 = ["title"];
-const _hoisted_13 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -1740,7 +1732,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     rowHeight: { default: DEFAULT_ROW_HEIGHT },
     autoRowHeight: { type: Boolean, default: false },
     rowHover: { type: Boolean, default: true },
-    rowActive: { type: Boolean, default: true },
+    rowActive: { type: Boolean, default: () => DEFAULT_ROW_ACTIVE_CONFIG },
     rowCurrentRevokable: { type: Boolean, default: true },
     headerRowHeight: { default: DEFAULT_ROW_HEIGHT },
     virtual: { type: Boolean, default: false },
@@ -1806,7 +1798,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (typeof rowActive === "boolean") {
         return {
           ...DEFAULT_ROW_ACTIVE_CONFIG,
-          enabled: rowActive,
+          enabled: rowActive ?? true,
           revokable: Boolean(props.rowCurrentRevokable)
         };
       } else {
@@ -1959,27 +1951,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     watch(
       () => props.dataSource,
-      (val) => {
-        if (!Array.isArray(val)) {
-          console.warn("invalid dataSource");
-          return;
-        }
-        let needInitVirtualScrollY = false;
-        if (dataSourceCopy.value.length !== val.length) {
-          needInitVirtualScrollY = true;
-        }
-        initDataSource(val);
-        updateMaxRowSpan();
-        if (needInitVirtualScrollY) {
-          nextTick(() => initVirtualScrollY());
-        }
-        const sortColValue = sortCol.value;
-        if (!isEmptyValue(sortColValue) && !props.sortRemote) {
-          const colKey = colKeyGen.value;
-          const column = tableHeaderLast.value.find((it) => colKey(it) === sortColValue);
-          onColumnSort(column, false);
-        }
-      }
+      (val) => updateDataSource(val)
     );
     watch(
       () => props.fixedColShadow,
@@ -2074,13 +2046,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableHeaders.value = tableHeadersTemp;
       tableHeadersForCalc.value = tableHeadersForCalcTemp;
     }
+    function updateDataSource(val) {
+      if (!Array.isArray(val)) {
+        console.warn("invalid dataSource");
+        return;
+      }
+      let needInitVirtualScrollY = false;
+      if (dataSourceCopy.value.length !== val.length) {
+        needInitVirtualScrollY = true;
+      }
+      initDataSource(val);
+      updateMaxRowSpan();
+      if (needInitVirtualScrollY) {
+        nextTick(() => initVirtualScrollY());
+      }
+      const sortColValue = sortCol.value;
+      if (!isEmptyValue(sortColValue) && !props.sortRemote) {
+        const colKey = colKeyGen.value;
+        const column = tableHeaderLast.value.find((it) => colKey(it) === sortColValue);
+        onColumnSort(column, false);
+      }
+    }
     function rowKeyGen(row) {
       if (!row) return row;
-      let key = rowKeyGenCache.get(row) || row.__ROW_KEY__;
+      let key = rowKeyGenCache.get(row) || row.__ROW_K__;
       if (!key) {
         key = rowKeyGenComputed.value(row);
         if (key === void 0) {
-          key = Math.random().toString();
+          key = Math.random().toString(36).slice(2);
         }
         rowKeyGenCache.set(row, key);
       }
@@ -2251,22 +2244,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       const dom = tableContainerRef.value;
       if (!dom) return;
+      if (!virtual_on.value && !virtualX_on.value) return;
       const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
       const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
       const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
       const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
-      const { deltaY, deltaX } = e;
-      if (virtual_on.value && deltaY) {
+      const { deltaY, deltaX, shiftKey } = e;
+      if (virtual_on.value && deltaY && !shiftKey) {
         if (deltaY > 0 && !isScrollBottom || deltaY < 0 && scrollTop > 0) {
           e.preventDefault();
         }
         dom.scrollTop += deltaY;
       }
-      if (virtualX_on.value && deltaX) {
-        if (deltaX > 0 && !isScrollRight || deltaX < 0 && scrollLeft > 0) {
+      if (virtualX_on.value) {
+        let distance = deltaX;
+        if (shiftKey && deltaY) {
+          distance = deltaY;
+        }
+        if (distance > 0 && !isScrollRight || distance < 0 && scrollLeft > 0) {
           e.preventDefault();
         }
-        dom.scrollLeft += deltaX;
+        dom.scrollLeft += distance;
       }
     }
     function onTableScroll(e) {
@@ -2693,7 +2691,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   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, getRowIndex(rowIndex)) || ""]: true,
-                  expanded: row == null ? void 0 : row.__EXPANDED__,
+                  expanded: row == null ? void 0 : row.__EXP__,
                   "expanded-row": row && row.__EXPANDED_ROW__
                 }),
                 style: normalizeStyle({
@@ -2737,8 +2735,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           "cell-active": col.mergeCells && unref(activeMergedCells).has(cellKeyGen(row, col)),
                           "seq-column": col.type === "seq",
                           active: props.cellActive && currentSelectedCellKey.value === cellKeyGen(row, col),
-                          expanded: col.type === "expand" && (row.__EXPANDED__ ? colKeyGen.value(row.__EXPANDED__) === colKeyGen.value(col) : false),
-                          "tree-expanded": col.type === "tree-node" && row.__T_EXPANDED__,
+                          expanded: col.type === "expand" && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKeyGen.value(col) : false),
+                          "tree-expanded": col.type === "tree-node" && row.__T_EXP__,
                           "drag-row-cell": col.type === "dragRow"
                         }
                       ]
@@ -2749,27 +2747,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       onMouseleave: ($event) => onCellMouseLeave($event, row, col),
                       onMouseover: ($event) => onCellMouseOver($event, row, col)
                     }), [
-                      col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock("div", {
+                      col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
                         key: 0,
                         class: "table-cell-wrapper",
-                        title: row == null ? void 0 : row[col.dataIndex],
-                        style: normalizeStyle({ paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + "px" })
+                        col,
+                        row,
+                        rowIndex: getRowIndex(rowIndex),
+                        colIndex,
+                        cellValue: row && row[col.dataIndex],
+                        expanded: row ? row.__EXP_ : null,
+                        "tree-expanded": row ? row.__T_EXP__ : null
+                      }, {
+                        stkFoldIcon: withCtx(() => [
+                          createVNode(TriangleIcon, {
+                            onClick: ($event) => triangleClick($event, row, col)
+                          }, null, 8, ["onClick"])
+                        ]),
+                        stkDragIcon: withCtx(() => [
+                          createVNode(DragHandle, {
+                            onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
+                          }, null, 8, ["onDragstart"])
+                        ]),
+                        _: 2
+                      }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock("div", {
+                        key: 1,
+                        class: "table-cell-wrapper",
+                        title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : "",
+                        style: normalizeStyle(col.type === "tree-node" ? { paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + "px" } : {})
                       }, [
-                        col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
-                          key: 0,
-                          col,
-                          row,
-                          rowIndex: getRowIndex(rowIndex),
-                          colIndex,
-                          cellValue: row && row[col.dataIndex],
-                          expanded: row && row.__EXPANDED__ || null,
-                          "tree-expanded": row && row.__T_EXPANDED__ || null
-                        }, {
-                          stkFoldIcon: withCtx(() => [
-                            createVNode(TriangleIcon)
-                          ]),
-                          _: 2
-                        }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                          createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
+                        ], 64)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                          createVNode(DragHandle, {
+                            onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
+                          }, null, 8, ["onDragstart"]),
+                          createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
+                        ], 64)) : col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                           col.type === "expand" || col.type === "tree-node" && row.children !== void 0 ? (openBlock(), createBlock(TriangleIcon, {
                             key: 0,
                             onClick: ($event) => triangleClick($event, row, col)
@@ -2777,43 +2790,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           createElementVNode("span", {
                             style: normalizeStyle(col.type === "tree-node" && !row.children ? "padding-left: 16px;" : "")
                           }, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 5)
+                        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                          createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
                         ], 64))
-                      ], 12, _hoisted_12)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                        col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
-                          key: 0,
-                          class: "table-cell-wrapper",
-                          col,
-                          row,
-                          rowIndex: getRowIndex(rowIndex),
-                          colIndex,
-                          cellValue: row && row[col.dataIndex]
-                        }, {
-                          stkFoldIcon: withCtx(() => [
-                            createVNode(TriangleIcon)
-                          ]),
-                          stkDragIcon: withCtx(() => [
-                            createVNode(DragHandle, {
-                              onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
-                            }, null, 8, ["onDragstart"])
-                          ]),
-                          _: 2
-                        }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
-                          key: 1,
-                          class: "table-cell-wrapper",
-                          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) + getRowIndex(rowIndex) + 1), 1)
-                          ], 64)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                            createVNode(DragHandle, {
-                              onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
-                            }, null, 8, ["onDragstart"]),
-                            createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
-                          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                            createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
-                          ], 64))
-                        ], 8, _hoisted_13))
-                      ], 64))
+                      ], 12, _hoisted_12))
                     ], 16, _hoisted_11)) : createCommentVNode("", true)
                   ], 64);
                 }), 256))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.9",
-  "description": "Simple realtime virtual table for vue3 and vue2.7",
+  "version": "0.8.11",
+  "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
   "packageManager": "pnpm@10.7.0",

package/src/StkTable/StkTable.vue

@@ -115,7 +115,7 @@
                         active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
                         hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
                         [rowClassName(row, getRowIndex(rowIndex)) || '']: true,
-                        expanded: row?.__EXPANDED__,
+                        expanded: row?.__EXP__,
                         'expanded-row': row && row.__EXPANDED_ROW__,
                     }"
                     :style="{
@@ -152,9 +152,8 @@
                                         'cell-active': col.mergeCells && activeMergedCells.has(cellKeyGen(row, col)),
                                         'seq-column': col.type === 'seq',
                                         active: props.cellActive && currentSelectedCellKey === cellKeyGen(row, col),
-                                        expanded:
-                                            col.type === 'expand' && (row.__EXPANDED__ ? colKeyGen(row.__EXPANDED__) === colKeyGen(col) : false),
-                                        'tree-expanded': col.type === 'tree-node' && row.__T_EXPANDED__,
+                                        expanded: col.type === 'expand' && (row.__EXP__ ? colKeyGen(row.__EXP__) === colKeyGen(col) : false),
+                                        'tree-expanded': col.type === 'tree-node' && row.__T_EXP__,
                                         'drag-row-cell': col.type === 'dragRow',
                                     },
                                 ]"
@@ -165,71 +164,53 @@
                                 @mouseleave="onCellMouseLeave($event, row, col)"
                                 @mouseover="onCellMouseOver($event, row, col)"
                             >
-                                <template v-if="col.type === 'expand' || col.type === 'tree-node'">
-                                    <div
-                                        class="table-cell-wrapper"
-                                        :title="row?.[col.dataIndex]"
-                                        :style="{ paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + 'px' }"
-                                    >
-                                        <component
-                                            :is="col.customCell"
-                                            v-if="col.customCell"
-                                            :col="col"
-                                            :row="row"
-                                            :rowIndex="getRowIndex(rowIndex)"
-                                            :colIndex="colIndex"
-                                            :cellValue="row && row[col.dataIndex]"
-                                            :expanded="(row && row.__EXPANDED__) || null"
-                                            :tree-expanded="(row && row.__T_EXPANDED__) || null"
-                                        >
-                                            <template #stkFoldIcon>
-                                                <TriangleIcon></TriangleIcon>
-                                            </template>
-                                        </component>
-                                        <template v-else>
-                                            <TriangleIcon
-                                                v-if="col.type === 'expand' || (col.type === 'tree-node' && row.children !== void 0)"
-                                                @click="triangleClick($event, row, col)"
-                                            />
-                                            <span :style="col.type === 'tree-node' && !row.children ? 'padding-left: 16px;' : ''">
-                                                {{ row?.[col.dataIndex] ?? '' }}
-                                            </span>
-                                        </template>
-                                    </div>
-                                </template>
-                                <template v-else>
-                                    <component
-                                        :is="col.customCell"
-                                        v-if="col.customCell"
-                                        class="table-cell-wrapper"
-                                        :col="col"
-                                        :row="row"
-                                        :rowIndex="getRowIndex(rowIndex)"
-                                        :colIndex="colIndex"
-                                        :cellValue="row && row[col.dataIndex]"
-                                    >
-                                        <template #stkFoldIcon>
-                                            <TriangleIcon></TriangleIcon>
-                                        </template>
-                                        <template #stkDragIcon>
-                                            <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
-                                        </template>
-                                    </component>
-                                    <div v-else class="table-cell-wrapper" :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''">
-                                        <template v-if="col.type === 'seq'">
-                                            {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
-                                        </template>
-                                        <template v-else-if="col.type === 'dragRow'">
-                                            <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
-                                            <span>
-                                                {{ row?.[col.dataIndex] ?? '' }}
-                                            </span>
-                                        </template>
-                                        <template v-else>
-                                            {{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
-                                        </template>
-                                    </div>
-                                </template>
+                                <component
+                                    :is="col.customCell"
+                                    v-if="col.customCell"
+                                    class="table-cell-wrapper"
+                                    :col="col"
+                                    :row="row"
+                                    :rowIndex="getRowIndex(rowIndex)"
+                                    :colIndex="colIndex"
+                                    :cellValue="row && row[col.dataIndex]"
+                                    :expanded="row ? row.__EXP_ : null"
+                                    :tree-expanded="row ? row.__T_EXP__ : null"
+                                >
+                                    <template #stkFoldIcon>
+                                        <TriangleIcon @click="triangleClick($event, row, col)"></TriangleIcon>
+                                    </template>
+                                    <template #stkDragIcon>
+                                        <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
+                                    </template>
+                                </component>
+                                <div
+                                    v-else
+                                    class="table-cell-wrapper"
+                                    :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''"
+                                    :style="col.type === 'tree-node' ? { paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + 'px' } : {}"
+                                >
+                                    <template v-if="col.type === 'seq'">
+                                        {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
+                                    </template>
+                                    <template v-else-if="col.type === 'dragRow'">
+                                        <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
+                                        <span>
+                                            {{ row?.[col.dataIndex] ?? '' }}
+                                        </span>
+                                    </template>
+                                    <template v-else-if="col.type === 'expand' || col.type === 'tree-node'">
+                                        <TriangleIcon
+                                            v-if="col.type === 'expand' || (col.type === 'tree-node' && row.children !== void 0)"
+                                            @click="triangleClick($event, row, col)"
+                                        />
+                                        <span :style="col.type === 'tree-node' && !row.children ? 'padding-left: 16px;' : ''">
+                                            {{ row?.[col.dataIndex] ?? '' }}
+                                        </span>
+                                    </template>
+                                    <template v-else>
+                                        {{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
+                                    </template>
+                                </div>
                             </td>
                         </template>
                     </template>
@@ -456,7 +437,7 @@ const props = withDefaults(
         rowHeight: DEFAULT_ROW_HEIGHT,
         autoRowHeight: false,
         rowHover: true,
-        rowActive: true,
+        rowActive: () => DEFAULT_ROW_ACTIVE_CONFIG,
         rowCurrentRevokable: true,
         headerRowHeight: DEFAULT_ROW_HEIGHT,
         virtual: false,
@@ -721,7 +702,7 @@ const rowActiveProp = computed<Required<RowActiveOption<DT>>>(() => {
     if (typeof rowActive === 'boolean') {
         return {
             ...DEFAULT_ROW_ACTIVE_CONFIG,
-            enabled: rowActive,
+            enabled: rowActive ?? true,
             revokable: Boolean(props.rowCurrentRevokable),
         };
     } else {
@@ -905,31 +886,7 @@ watch(
 
 watch(
     () => props.dataSource,
-    val => {
-        if (!Array.isArray(val)) {
-            console.warn('invalid dataSource');
-            return;
-        }
-
-        let needInitVirtualScrollY = false;
-        if (dataSourceCopy.value.length !== val.length) {
-            needInitVirtualScrollY = true;
-        }
-        initDataSource(val);
-        updateMaxRowSpan();
-        // if data length is not change, not init virtual scroll
-        if (needInitVirtualScrollY) {
-            // wait for table render,initVirtualScrollY has get `dom` operation.
-            nextTick(() => initVirtualScrollY());
-        }
-        const sortColValue = sortCol.value;
-        if (!isEmptyValue(sortColValue) && !props.sortRemote) {
-            // sort
-            const colKey = colKeyGen.value;
-            const column = tableHeaderLast.value.find(it => colKey(it) === sortColValue);
-            onColumnSort(column, false);
-        }
-    },
+    val => updateDataSource(val),
 );
 
 watch(
@@ -1058,18 +1015,45 @@ function dealColumns() {
     tableHeadersForCalc.value = tableHeadersForCalcTemp;
 }
 
+function updateDataSource(val:DT[]) {
+    if (!Array.isArray(val)) {
+        console.warn('invalid dataSource');
+        return;
+    }
+
+    let needInitVirtualScrollY = false;
+    if (dataSourceCopy.value.length !== val.length) {
+        needInitVirtualScrollY = true;
+    }
+    initDataSource(val);
+    updateMaxRowSpan();
+    // if data length is not change, not init virtual scroll
+    if (needInitVirtualScrollY) {
+        // wait for table render,initVirtualScrollY has get `dom` operation.
+        nextTick(() => initVirtualScrollY());
+    }
+    const sortColValue = sortCol.value;
+    if (!isEmptyValue(sortColValue) && !props.sortRemote) {
+        // sort
+        const colKey = colKeyGen.value;
+        const column = tableHeaderLast.value.find(it => colKey(it) === sortColValue);
+        onColumnSort(column, false);
+    }
+}
+
+
 /**
  * 行唯一值生成
  */
 function rowKeyGen(row: DT | null | undefined) {
     if (!row) return row;
-    let key = rowKeyGenCache.get(row) || (row as PrivateRowDT).__ROW_KEY__;
+    let key = rowKeyGenCache.get(row) || (row as PrivateRowDT).__ROW_K__;
     if (!key) {
         key = rowKeyGenComputed.value(row);
 
         if (key === void 0) {
             // key为undefined时，不应该高亮行。因此重新生成key
-            key = Math.random().toString();
+            key = Math.random().toString(36).slice(2);
         }
         rowKeyGenCache.set(row, key);
     }
@@ -1301,50 +1285,47 @@ function onCellMouseDown(e: MouseEvent, row: DT, col: StkTableColumn<DT>, rowInd
 }
 
 /**
- * 鼠标滚轮事件监听。代理滚轮事件，防止滚动过快出现白屏。
+ * proxy scroll, prevent white screen
  * @param e
  */
 function onTableWheel(e: WheelEvent) {
     if (props.smoothScroll) {
         return;
     }
+    // if is resizing, not allow scroll
     if (isColResizing.value) {
-        // 正在调整列宽时，不允许用户滚动
         e.stopPropagation();
         return;
     }
-    // #region ---- 控制滚动，防止出现白屏--
     const dom = tableContainerRef.value;
     if (!dom) return;
+    if (!virtual_on.value && !virtualX_on.value) return;
+
     const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
     const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
-    /** 是否滚动在下面 */
     const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
-    /** 是否滚动在右侧 */
     const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
-    const { deltaY, deltaX } = e;
+    const { deltaY, deltaX, shiftKey } = e;
 
-    /**
-     * 只有虚拟滚动时，才要用 wheel 代理scroll，防止滚动过快导致的白屏。
-     * 滚动条在边界情况时，not preventDefault 。因为会阻塞父级滚动条滚动。
-     */
-    if (virtual_on.value && deltaY) {
+    if (virtual_on.value && deltaY && !shiftKey) {
         if ((deltaY > 0 && !isScrollBottom) || (deltaY < 0 && scrollTop > 0)) {
-            e.preventDefault();
+            e.preventDefault(); // parent element scroll
         }
         dom.scrollTop += deltaY;
     }
-    if (virtualX_on.value && deltaX) {
-        if ((deltaX > 0 && !isScrollRight) || (deltaX < 0 && scrollLeft > 0)) {
+    if (virtualX_on.value) {
+        let distance = deltaX;
+        if (shiftKey && deltaY) {
+            distance = deltaY;
+        }
+        if ((distance > 0 && !isScrollRight) || (distance < 0 && scrollLeft > 0)) {
             e.preventDefault();
         }
-        dom.scrollLeft += deltaX;
+        dom.scrollLeft += distance;
     }
-    //#endregion
 }
 
 /**
- * 滚动条监听
  * @param e scrollEvent
  */
 function onTableScroll(e: Event) {

package/src/StkTable/types/index.ts

@@ -17,7 +17,9 @@ export type CustomCellProps<T extends Record<string, any>> = {
      * - 不展开: null
      * - 展开: 返回column配置
      */
-    expanded?: PrivateRowDT['__EXPANDED__'];
+    expanded: PrivateRowDT['__EXP__'];
+    /** if tree expanded */
+    treeExpanded: PrivateRowDT['__T_EXP__']
 };
 
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
@@ -139,25 +141,25 @@ export type PrivateRowDT = {
     /**
      * Only expanded row will add this key
      *
-     * If user define the `__ROW_KEY__` in table data, this value will be used as the row key
+     * If user define the `__ROW_K__` in table data, this value will be used as the row key
      * @private
      */
-    __ROW_KEY__?: string;
+    __ROW_K__?: string;
     /**
      * if row expanded
      * @private
      */
-    __EXPANDED__?: StkTableColumn<any> | null;
+    __EXP__?: StkTableColumn<any> | null;
     /**
      * if tree node row expanded
      * @private
      */
-    __T_EXPANDED__?: boolean;
+    __T_EXP__?: boolean;
     /**
      * tree parent key
      * @private
      */
-    __T_PARENT_K__?: UniqKey;
+    __T_P_K__?: UniqKey;
     /**
      * tree level
      * @private

package/src/StkTable/useRowExpand.ts

@@ -9,7 +9,7 @@ type Option<DT extends Record<string, any>> = {
 };
 
 export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
-    const expandedKey = '__EXPANDED__';
+    const expandedKey = '__EXP__';
 
     function isExpanded(row: DT, col?: StkTableColumn<DT> | null) {
         return row?.[expandedKey] === col ? !row?.[expandedKey] : true;
@@ -45,7 +45,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         // delete other expanded row below the target row
         for (let i = index + 1; i < tempData.length; i++) {
             const item: PrivateRowDT = tempData[i];
-            const rowKey = item.__ROW_KEY__;
+            const rowKey = item.__ROW_K__;
             if (rowKey?.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
                 tempData.splice(i, 1);
                 i--;
@@ -64,7 +64,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         if (expand) {
             // insert new expanded row
             const newExpandRow: ExpandedRow = {
-                __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
+                __ROW_K__: EXPANDED_ROW_KEY_PREFIX + rowKey,
                 __EXPANDED_ROW__: row,
                 __EXPANDED_COL__: col,
             };
@@ -72,7 +72,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         }
 
         if (row) {
-            row.__EXPANDED__ = expand ? col : null;
+            row.__EXP__ = expand ? col : null;
         }
 
         dataSourceCopy.value = tempData;

package/src/StkTable/useTree.ts

@@ -14,7 +14,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
 
     /** click expended icon to toggle expand row */
     function toggleTreeNode(row: DT, col: any) {
-        const expand = row ? !row.__T_EXPANDED__ : false;
+        const expand = row ? !row.__T_EXP__ : false;
         privateSetTreeExpand(row, { expand, col, isClick: true });
     }
 
@@ -47,7 +47,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
             const level = row.__T_LV__ || 0;
             let expanded = option?.expand;
             if (expanded === void 0) {
-                expanded = !row.__T_EXPANDED__;
+                expanded = !row.__T_EXP__;
             }
             if (expanded) {
                 const children = expandNode(row, level);
@@ -73,13 +73,13 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
     }
 
     function setNodeExpanded(row: DT, expanded: boolean, level?: number, parent?: DT) {
-        row.__T_EXPANDED__ = expanded;
+        row.__T_EXP__ = expanded;
         if (level !== void 0) {
             row.__T_LV__ = level;
         }
-        if (parent) {
-            row.__T_PARENT_K__ = rowKeyGen(parent);
-        }
+        // if (parent) {
+        //     row.__T_P_K__ = rowKeyGen(parent);
+        // }
     }
 
     /**
@@ -94,23 +94,19 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
             for (let i = 0; i < data.length; i++) {
                 const item = data[i];
                 result.push(item);
-                const isExpanded = Boolean(item.__T_EXPANDED__);
+                const isExpanded = Boolean(item.__T_EXP__);
                 setNodeExpanded(item, isExpanded, level, parent);
                 if (!isExpanded) {
                     if (defaultExpandAll) {
                         setNodeExpanded(item, true);
                     } else {
-                        if (defaultExpandLevel) {
-                            if (level < defaultExpandLevel) {
-                                setNodeExpanded(item, true);
-                            }
+                        if (defaultExpandLevel && level < defaultExpandLevel) {
+                            setNodeExpanded(item, true);
                         }
-                        if (defaultExpandKeys) {
-                            if (defaultExpandKeys.includes(rowKeyGen(item))) {
-                                setNodeExpanded(item, true);
-                            }
+                        if (defaultExpandKeys?.includes(rowKeyGen(item))) {
+                            setNodeExpanded(item, true);
                         }
-                        if (!item.__T_EXPANDED__) {
+                        if (!item.__T_EXP__) {
                             continue;
                         }
                     }
@@ -127,7 +123,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
             row.children.forEach((child: DT) => {
                 result.push(child);
                 const childLv = level + 1;
-                if (child.__T_EXPANDED__ && child.children) {
+                if (child.__T_EXP__ && child.children) {
                     const res = expandNode(child, childLv);
                     result = result.concat(res);
                 } else {