stk-table-vue 0.4.8 → 0.4.10

package/README.md

@@ -12,7 +12,7 @@ repo:
 
 ## Bug TODO:
 * [x] props.dataSource 为 shallowRef 时，高亮行不生效。(bug:2024.02.21)(resolved:0.2.3)
-* [] 固定列列宽拖动目标。
+* [x] 右侧固定列列宽拖动目标。（v0.4.10）
 * [] 惯性滚动优化。
 
 ## Feature TODO:
@@ -251,10 +251,10 @@ export type StkProps = {
 ```js
   {
     /**
-     * 排序变更触发
-     * ```(col: StkTableColumn<DT>, order: Order, data: DT[])```
+     * 排序变更触发。defaultSort.dataIndex 找不到时，col 将返回null。
+     * ```(col: StkTableColumn<DT> | null, order: Order, data: DT[])```
      */
-    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[], sortConfig: SortConfig): void;
+    (e: 'sort-change', col: StkTableColumn<DT> | null, order: Order, data: DT[], sortConfig: SortConfig): void;
     /**
      * 一行点击事件
      * ```(ev: MouseEvent, row: DT)```

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

@@ -4,10 +4,10 @@ import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, S
 type DT = any;
 /**
  * 选中一行，
- * @param {string} rowKey selected rowKey, null to unselect
+ * @param {string} rowKey selected rowKey, undefined to unselect
  * @param {boolean} option.silent 是否触发回调
  */
-declare function setCurrentRow(rowKey: string, option?: {
+declare function setCurrentRow(rowKey: string | undefined, option?: {
     silent: boolean;
 }): void;
 /**
@@ -198,8 +198,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     /** 设置高亮渐暗单元格 */
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
         className?: string | undefined; /**
-         * 排序变更触发
-         * ```(col: StkTableColumn<DT>, order: Order, data: DT[])```
+         * 排序变更触发。defaultSort.dataIndex 找不到时，col 将返回null。
+         * ```(col: StkTableColumn<DT> | null, order: Order, data: DT[])```
          */
         method?: "animation" | "css" | undefined;
         keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;
@@ -226,7 +226,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     /** 获取表格数据 */
     getTableData: typeof getTableData;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "sort-change": (col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
+    "sort-change": (col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
     "row-click": (ev: MouseEvent, row: any) => void;
     "current-change": (ev: MouseEvent | null, row: any, data: {
         select: boolean;
@@ -406,7 +406,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     "onTh-drag-start"?: ((dragStartKey: string) => any) | undefined;
     "onCol-order-change"?: ((dragStartKey: string, targetColKey: string) => any) | undefined;
     "onTh-drop"?: ((targetColKey: string) => any) | undefined;
-    "onSort-change"?: ((col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig<any>) => 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;
     "onCurrent-change"?: ((ev: MouseEvent | null, row: any, data: {
         select: boolean;

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

@@ -121,8 +121,11 @@ export type SortConfig<T extends Record<string, any>> = {
      * 类似onMounted时，调用setSorter点了下表头。
      */
     defaultSort?: {
-        dataIndex: keyof T;
+        dataIndex: StkTableColumn<T>['dataIndex'];
         order: Order;
+        sortField?: StkTableColumn<T>['sortField'];
+        sortType?: StkTableColumn<T>['sortType'];
+        sorter?: StkTableColumn<T>['sorter'];
         /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
         silent?: boolean;
     };

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

@@ -8,10 +8,11 @@ type Params<DT extends Record<string, any>> = {
     tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
     colResizeIndicatorRef: Ref<HTMLElement | undefined>;
     colKeyGen: ComputedRef<(p: any) => UniqKey>;
+    fixedCols: Ref<StkTableColumn<DT>[]>;
 };
 /** 列宽拖动 */
-export declare function useColResize<DT extends Record<string, any>>({ tableContainerRef, tableHeaderLast, colResizeIndicatorRef, props, emits, colKeyGen, }: Params<DT>): {
+export declare function useColResize<DT extends Record<string, any>>({ tableContainerRef, tableHeaderLast, colResizeIndicatorRef, props, emits, colKeyGen, fixedCols, }: Params<DT>): {
     isColResizing: Ref<boolean>;
-    onThResizeMouseDown: (e: MouseEvent, col: StkTableColumn<DT>, isPrev?: boolean) => void;
+    onThResizeMouseDown: (e: MouseEvent, col: StkTableColumn<DT>, leftHandle?: boolean) => void;
 };
 export {};

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

@@ -15,6 +15,8 @@ type Params<T extends Record<string, any>> = {
  * @returns
  */
 export declare function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen, getFixedColPosition, tableHeaders, tableHeaderLast, tableContainerRef, }: Params<DT>): {
+    /** 正在被固定的列 */
+    fixedCols: ShallowRef<StkTableColumn<DT>[]>;
     /** 固定列class */
     fixedColClassMap: ComputedRef<Map<any, any>>;
     /** 滚动条变化时，更新需要展示阴影的列 */

package/lib/stk-table-vue.js

@@ -1,7 +1,7 @@
 import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, nextTick, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 function isEmptyValue(val, isNumber) {
-  let isEmpty = val === null || val === "";
+  let isEmpty = val === null || val === "" || val === void 0;
   if (isNumber) {
     isEmpty = isEmpty || typeof val === "boolean" || Number.isNaN(+val);
   }
@@ -69,7 +69,7 @@ function separatedData(sortOption, targetDataSource, isNumber) {
   for (let i = 0; i < targetDataSource.length; i++) {
     const row = targetDataSource[i];
     const sortField = sortOption.sortField || sortOption.dataIndex;
-    const isEmpty = isEmptyValue(row[sortField], isNumber);
+    const isEmpty = isEmptyValue(row == null ? void 0 : row[sortField], isNumber);
     if (isEmpty) {
       emptyArr.push(row);
     } else {
@@ -79,7 +79,7 @@ function separatedData(sortOption, targetDataSource, isNumber) {
   return [valueArr, emptyArr];
 }
 function tableSort(sortOption, order, dataSource, sortConfig = {}) {
-  if (!(dataSource == null ? void 0 : dataSource.length))
+  if (!(dataSource == null ? void 0 : dataSource.length) || !sortOption)
     return dataSource || [];
   sortConfig = { emptyToBottom: false, ...sortConfig };
   let targetDataSource = [...dataSource];
@@ -96,8 +96,8 @@ function tableSort(sortOption, order, dataSource, sortConfig = {}) {
     let { sortType } = sortOption;
     if (!sortType)
       sortType = typeof dataSource[0][sortField];
-    const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, sortType === "number");
     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 {
@@ -234,15 +234,16 @@ function useColResize({
   colResizeIndicatorRef,
   props,
   emits,
-  colKeyGen
+  colKeyGen,
+  fixedCols
 }) {
   const isColResizing = ref(false);
   let colResizeState = {
     currentCol: null,
-    currentColIndex: 0,
     lastCol: null,
     startX: 0,
-    startOffsetTableX: 0
+    startOffsetTableX: 0,
+    revertMoveX: false
   };
   onMounted(() => {
     initColResizeEvent();
@@ -258,7 +259,7 @@ function useColResize({
     window.removeEventListener("mousemove", onThResizeMouseMove);
     window.removeEventListener("mouseup", onThResizeMouseUp);
   }
-  function onThResizeMouseDown(e, col, isPrev = false) {
+  function onThResizeMouseDown(e, col, leftHandle = false) {
     if (!tableContainerRef.value)
       return;
     e.stopPropagation();
@@ -267,19 +268,32 @@ function useColResize({
     const { scrollLeft, scrollTop } = tableContainerRef.value;
     const { left } = tableContainerRef.value.getBoundingClientRect();
     const tableHeaderLastValue = tableHeaderLast.value;
-    let colIndex = tableHeaderLastValue.findIndex((it) => colKeyGen.value(it) === colKeyGen.value(col));
-    if (isPrev) {
-      colIndex -= 1;
-      col = tableHeaderLastValue[colIndex];
+    let revertMoveX = false;
+    const colIndex = tableHeaderLastValue.findIndex((it) => colKeyGen.value(it) === colKeyGen.value(col));
+    const fixedIndex = fixedCols.value.indexOf(col);
+    const isFixed = fixedIndex !== -1;
+    if (leftHandle) {
+      if (isFixed && col.fixed === "right") {
+        revertMoveX = true;
+      } else {
+        if (colIndex - 1 >= 0) {
+          col = tableHeaderLastValue[colIndex - 1];
+        }
+      }
+    } else {
+      if (isFixed && col.fixed === "right") {
+        revertMoveX = true;
+        col = fixedCols.value[fixedIndex + 1] || col;
+      }
     }
     const offsetTableX = clientX - left + scrollLeft;
     isColResizing.value = true;
     Object.assign(colResizeState, {
       currentCol: col,
-      currentColIndex: colIndex,
       lastCol: findLastChildCol(col),
       startX: clientX,
-      startOffsetTableX: offsetTableX
+      startOffsetTableX: offsetTableX,
+      revertMoveX
     });
     if (colResizeIndicatorRef.value) {
       const style = colResizeIndicatorRef.value.style;
@@ -308,9 +322,9 @@ function useColResize({
   function onThResizeMouseUp(e) {
     if (!isColResizing.value)
       return;
-    const { startX, lastCol } = colResizeState;
+    const { startX, lastCol, revertMoveX } = colResizeState;
     const { clientX } = e;
-    const moveX = clientX - startX;
+    const moveX = revertMoveX ? startX - clientX : clientX - startX;
     let width = getCalculatedColWidth(lastCol) + moveX;
     if (width < props.colMinWidth)
       width = props.colMinWidth;
@@ -328,10 +342,10 @@ function useColResize({
     isColResizing.value = false;
     colResizeState = {
       currentCol: null,
-      currentColIndex: 0,
       lastCol: null,
       startX: 0,
-      startOffsetTableX: 0
+      startOffsetTableX: 0,
+      revertMoveX: false
     };
   }
   function findLastChildCol(column) {
@@ -435,6 +449,8 @@ function useFixedCol({
     fixedCols.value = fixedColsTemp;
   }
   return {
+    /** 正在被固定的列 */
+    fixedCols,
     /** 固定列class */
     fixedColClassMap,
     /** 滚动条变化时，更新需要展示阴影的列 */
@@ -1122,17 +1138,18 @@ const _hoisted_6 = [
 ];
 const _hoisted_7 = ["onMousedown"];
 const _hoisted_8 = ["onMousedown"];
-const _hoisted_9 = {
+const _hoisted_9 = { class: "stk-tbody-main" };
+const _hoisted_10 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_10 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
-const _hoisted_11 = {
+const _hoisted_11 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
+const _hoisted_12 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_12 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
-const _hoisted_13 = ["title"];
+const _hoisted_13 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_14 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -1213,14 +1230,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
-    const { isColResizing, onThResizeMouseDown } = useColResize({
-      props,
-      emits,
-      colKeyGen,
-      colResizeIndicatorRef,
-      tableContainerRef,
-      tableHeaderLast
-    });
     const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits });
     const {
       virtualScroll,
@@ -1259,7 +1268,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableHeaders,
       virtual_on
     });
-    const { fixedColClassMap, updateFixedShadow } = useFixedCol({
+    const { fixedCols, fixedColClassMap, updateFixedShadow } = useFixedCol({
       props,
       colKeyGen,
       getFixedColPosition,
@@ -1267,6 +1276,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableHeaders,
       tableHeaderLast
     });
+    const { isColResizing, onThResizeMouseDown } = useColResize({
+      props,
+      emits,
+      colKeyGen,
+      colResizeIndicatorRef,
+      tableContainerRef,
+      tableHeaderLast,
+      fixedCols
+    });
     watch(
       () => props.columns,
       () => {
@@ -1468,12 +1486,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const sortConfig = props.sortConfig;
       const defaultSort = sortConfig.defaultSort;
       if (!order && defaultSort) {
-        order = defaultSort.order;
+        if (!defaultSort.dataIndex) {
+          console.error("sortConfig.defaultSort.dataIndex is required");
+          return;
+        }
+        order = defaultSort.order || "desc";
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
         sortCol.value = defaultSort.dataIndex;
+        col = props.columns.find((item) => item.dataIndex === defaultSort.dataIndex) || null;
       }
       if (!props.sortRemote || options.force) {
-        dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);
+        const sortOption = col || defaultSort;
+        if (sortOption) {
+          dataSourceCopy.value = tableSort(sortOption, order, props.dataSource, sortConfig);
+        }
       }
       if (click || options.emit) {
         emits("sort-change", col, order, toRaw(dataSourceCopy.value), sortConfig);
@@ -1582,6 +1608,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function setCurrentRow(rowKey, option = { silent: false }) {
       if (!dataSourceCopy.value.length)
         return;
+      if (rowKey === void 0) {
+        currentRow.value = void 0;
+        currentRowKey.value = void 0;
+      }
       const row = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
       if (!row) {
         console.warn("setCurrentRow failed.rowKey:", rowKey);
@@ -1668,6 +1698,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["stk-table", {
           virtual: _ctx.virtual,
           "virtual-x": _ctx.virtualX,
+          "vt-on": unref(virtual_on),
           dark: _ctx.theme === "dark",
           headless: _ctx.headless,
           "is-col-resizing": unref(isColResizing),
@@ -1783,15 +1814,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ], 32);
             }), 128))
           ], 512)) : createCommentVNode("", true),
-          createElementVNode("tbody", {
-            class: normalizeClass(["stk-tbody-main", unref(virtual_on) ? "vt-on" : "vt-off"])
-          }, [
+          createElementVNode("tbody", _hoisted_9, [
             unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
               key: 0,
               style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
               class: "padding-top-tr"
             }, [
-              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_9)) : createCommentVNode("", true),
+              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: col.dataIndex,
@@ -1814,7 +1843,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onContextmenu: (e) => onRowMenu(e, row),
                 onMouseover: (e) => onTrMouseOver(e, row)
               }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_11)) : createCommentVNode("", true),
+                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col, colIndex) => {
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
@@ -1843,16 +1872,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                         createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
                       ], 64))
-                    ], 8, _hoisted_13))
-                  ], 46, _hoisted_12);
+                    ], 8, _hoisted_14))
+                  ], 46, _hoisted_13);
                 }), 128))
-              ], 42, _hoisted_10);
+              ], 42, _hoisted_11);
             }), 128)),
             unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
               key: 1,
               style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
             }, null, 4)) : createCommentVNode("", true)
-          ], 2)
+          ])
         ], 6),
         (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
           key: 1,

package/lib/style.css

@@ -91,16 +91,22 @@
 .stk-table.border-body-v tbody{
   --bg-border-bottom:linear-gradient(transparent, transparent);
 }
-.stk-table.stripe .stk-tbody-main.vt-on tr:nth-child(odd){
+.stk-table.stripe .stk-tbody-main tr:nth-child(even){
   background-color:var(--stripe-bgc);
 }
-.stk-table.stripe .stk-tbody-main.vt-off tr:nth-child(even){
+.stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
   background-color:var(--stripe-bgc);
 }
-.stk-table.row-hover tbody tr:hover{
+.stk-table.stripe.row-hover .stk-tbody-main tr:hover{
   background-color:var(--tr-hover-bgc);
 }
-.stk-table.row-active tbody tr.active{
+.stk-table.stripe.row-active .stk-tbody-main tr.active{
+  background-color:var(--tr-active-bgc);
+}
+.stk-table.row-hover .stk-tbody-main tr:hover{
+  background-color:var(--tr-hover-bgc);
+}
+.stk-table.row-active .stk-tbody-main tr.active{
   background-color:var(--tr-active-bgc);
 }
 .stk-table.cell-hover tbody td:hover{

package/package.json

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

@@ -6,6 +6,7 @@
         :class="{
             virtual,
             'virtual-x': virtualX,
+            'vt-on': virtual_on,
             dark: theme === 'dark',
             headless,
             'is-col-resizing': isColResizing,
@@ -121,7 +122,7 @@
             <!-- 用于虚拟滚动表格内容定位 @deprecated 有兼容问题-->
             <!-- <tbody v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }"></tbody> -->
             <!-- <tbody :style="{ transform: `translateY(${virtualScroll.offsetTop}px)` }"> -->
-            <tbody class="stk-tbody-main" :class="virtual_on ? 'vt-on' : 'vt-off'">
+            <tbody class="stk-tbody-main">
                 <tr v-if="virtual_on" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on && fixedMode && headless" class="vt-x-left"></td>
@@ -365,10 +366,10 @@ const props = withDefaults(
 
 const emits = defineEmits<{
     /**
-     * 排序变更触发
-     * ```(col: StkTableColumn<DT>, order: Order, data: DT[])```
+     * 排序变更触发。defaultSort.dataIndex 找不到时，col 将返回null。
+     * ```(col: StkTableColumn<DT> | null, order: Order, data: DT[])```
      */
-    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[], sortConfig: SortConfig<DT>): void;
+    (e: 'sort-change', col: StkTableColumn<DT> | null, order: Order, data: DT[], sortConfig: SortConfig<DT>): void;
     /**
      * 一行点击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -531,15 +532,6 @@ const getEmptyCellText = computed(() => {
 /** rowKey缓存 */
 const rowKeyGenStore = new WeakMap();
 
-const { isColResizing, onThResizeMouseDown } = useColResize({
-    props,
-    emits,
-    colKeyGen,
-    colResizeIndicatorRef,
-    tableContainerRef,
-    tableHeaderLast,
-});
-
 const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits });
 
 const {
@@ -591,7 +583,7 @@ useKeyboardArrowScroll(tableContainerRef, {
 });
 
 /** 固定列处理 */
-const { fixedColClassMap, updateFixedShadow } = useFixedCol({
+const { fixedCols, fixedColClassMap, updateFixedShadow } = useFixedCol({
     props,
     colKeyGen,
     getFixedColPosition,
@@ -600,6 +592,16 @@ const { fixedColClassMap, updateFixedShadow } = useFixedCol({
     tableHeaderLast,
 });
 
+const { isColResizing, onThResizeMouseDown } = useColResize({
+    props,
+    emits,
+    colKeyGen,
+    colResizeIndicatorRef,
+    tableContainerRef,
+    tableHeaderLast,
+    fixedCols,
+});
+
 watch(
     () => props.columns,
     () => {
@@ -839,7 +841,7 @@ function getHeaderTitle(col: StkTableColumn<DT>): string {
  * @param options.force sort-remote 开启后是否强制排序
  * @param options.emit 是否触发回调
  */
-function onColumnSort(col?: StkTableColumn<DT>, click = true, options: { force?: boolean; emit?: boolean } = {}) {
+function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true, options: { force?: boolean; emit?: boolean } = {}) {
     if (!col?.sorter) return;
     options = { force: false, emit: false, ...options };
     if (sortCol.value !== col.dataIndex) {
@@ -855,13 +857,21 @@ function onColumnSort(col?: StkTableColumn<DT>, click = true, options: { force?:
     const defaultSort = sortConfig.defaultSort;
 
     if (!order && defaultSort) {
+        if (!defaultSort.dataIndex) {
+            console.error('sortConfig.defaultSort.dataIndex is required');
+            return;
+        }
         // 没有排序时变成默认排序
-        order = defaultSort.order;
+        order = defaultSort.order || 'desc';
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
         sortCol.value = defaultSort.dataIndex as string;
+        col = props.columns.find(item => item.dataIndex === defaultSort.dataIndex) || null;
     }
     if (!props.sortRemote || options.force) {
-        dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);
+        const sortOption = col || defaultSort;
+        if (sortOption) {
+            dataSourceCopy.value = tableSort(sortOption, order, props.dataSource, sortConfig);
+        }
     }
     // 只有点击才触发事件
     if (click || options.emit) {
@@ -1017,11 +1027,15 @@ function onTrMouseOver(_e: MouseEvent, row: DT) {
 
 /**
  * 选中一行，
- * @param {string} rowKey selected rowKey, null to unselect
+ * @param {string} rowKey selected rowKey, undefined to unselect
  * @param {boolean} option.silent 是否触发回调
  */
-function setCurrentRow(rowKey: string, option = { silent: false }) {
+function setCurrentRow(rowKey: string | undefined, option = { silent: false }) {
     if (!dataSourceCopy.value.length) return;
+    if (rowKey === void 0) {
+        currentRow.value = void 0;
+        currentRowKey.value = void 0;
+    }
     const row = dataSourceCopy.value.find(it => rowKeyGen(it) === rowKey);
     if (!row) {
         console.warn('setCurrentRow failed.rowKey:', rowKey);

package/src/StkTable/style.less

@@ -134,23 +134,31 @@
     }
 
     /* 斑马纹*/
-    &.stripe .stk-tbody-main {
-
-        &.vt-on tr:nth-child(odd) {
+    &.stripe {
+        .stk-tbody-main tr:nth-child(even) {
             background-color: var(--stripe-bgc);
         }
 
-        &.vt-off tr:nth-child(even) {
+        &.vt-on .stk-tbody-main tr:nth-child(odd) {
             background-color: var(--stripe-bgc);
         }
+
+        &.row-hover .stk-tbody-main tr:hover {
+            background-color: var(--tr-hover-bgc);
+        }
+
+        &.row-active .stk-tbody-main tr.active {
+            background-color: var(--tr-active-bgc);
+        }
     }
 
-    &.row-hover tbody tr:hover {
+
+    &.row-hover .stk-tbody-main tr:hover {
         background-color: var(--tr-hover-bgc);
     }
 
 
-    &.row-active tbody tr.active {
+    &.row-active .stk-tbody-main tr.active {
         background-color: var(--tr-active-bgc);
     }
 

package/src/StkTable/types/index.ts

@@ -132,8 +132,11 @@ export type SortConfig<T extends Record<string, any>> = {
      * 类似onMounted时，调用setSorter点了下表头。
      */
     defaultSort?: {
-        dataIndex: keyof T;
+        dataIndex: StkTableColumn<T>['dataIndex'];
         order: Order;
+        sortField?: StkTableColumn<T>['sortField'];
+        sortType?: StkTableColumn<T>['sortType'];
+        sorter?: StkTableColumn<T>['sorter'];
         /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
         silent?: boolean;
     };

package/src/StkTable/useColResize.ts

@@ -5,14 +5,14 @@ import { getCalculatedColWidth } from './utils';
 type ColResizeState<DT extends Record<string, any>> = {
     /** 当前被拖动的列*/
     currentCol: StkTableColumn<DT> | null;
-    /** 当前被拖动列的下标 */
-    currentColIndex: number;
     /** 最后一个叶子列 */
     lastCol: StkTableColumn<DT> | null;
     /** 鼠标按下开始位置 */
     startX: number;
     /** 鼠标按下时鼠标对于表格的偏移量 */
     startOffsetTableX: 0;
+    /** 是否反向计算，true:左增右减。false:左减右增 */
+    revertMoveX: boolean;
 };
 
 type Params<DT extends Record<string, any>> = {
@@ -22,6 +22,7 @@ type Params<DT extends Record<string, any>> = {
     tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
     colResizeIndicatorRef: Ref<HTMLElement | undefined>;
     colKeyGen: ComputedRef<(p: any) => UniqKey>;
+    fixedCols: Ref<StkTableColumn<DT>[]>;
 };
 
 /** 列宽拖动 */
@@ -32,6 +33,7 @@ export function useColResize<DT extends Record<string, any>>({
     props,
     emits,
     colKeyGen,
+    fixedCols,
 }: Params<DT>) {
     /** 列宽是否在拖动 */
     const isColResizing = ref(false);
@@ -39,10 +41,10 @@ export function useColResize<DT extends Record<string, any>>({
     /** 列宽调整状态 */
     let colResizeState: ColResizeState<DT> = {
         currentCol: null,
-        currentColIndex: 0,
         lastCol: null,
         startX: 0,
         startOffsetTableX: 0,
+        revertMoveX: false,
     };
 
     onMounted(() => {
@@ -68,9 +70,9 @@ export function useColResize<DT extends Record<string, any>>({
      * 拖动开始
      * @param e
      * @param col 当前列配置
-     * @param isPrev 是否要上一列
+     * @param leftHandle 是否是左侧的拖动条
      */
-    function onThResizeMouseDown(e: MouseEvent, col: StkTableColumn<DT>, isPrev = false) {
+    function onThResizeMouseDown(e: MouseEvent, col: StkTableColumn<DT>, leftHandle = false) {
         if (!tableContainerRef.value) return;
         e.stopPropagation();
         e.preventDefault();
@@ -78,23 +80,43 @@ export function useColResize<DT extends Record<string, any>>({
         const { scrollLeft, scrollTop } = tableContainerRef.value;
         const { left } = tableContainerRef.value.getBoundingClientRect();
         const tableHeaderLastValue = tableHeaderLast.value;
+        let revertMoveX = false;
         /** 列下标 */
-        let colIndex = tableHeaderLastValue.findIndex(it => colKeyGen.value(it) === colKeyGen.value(col));
-        if (isPrev) {
-            // 上一列
-            colIndex -= 1;
-            col = tableHeaderLastValue[colIndex];
+        const colIndex = tableHeaderLastValue.findIndex(it => colKeyGen.value(it) === colKeyGen.value(col));
+        const fixedIndex = fixedCols.value.indexOf(col);
+        /** 是否正在被固定 */
+        const isFixed = fixedIndex !== -1;
+
+        if (leftHandle) {
+            // 左侧拖动条
+            if (isFixed && col.fixed === 'right') {
+                // 对于固定右侧的列，拖动左侧的把，需要反向计算
+                revertMoveX = true;
+            } else {
+                // 默认拖动右侧的把，取上一列
+                if (colIndex - 1 >= 0) {
+                    col = tableHeaderLastValue[colIndex - 1];
+                }
+            }
+        } else {
+            // 右侧拖动条
+            if (isFixed && col.fixed === 'right') {
+                // 对于固定右侧的列，拖动右侧的把，需要拖动下一固定的列
+                revertMoveX = true;
+                col = fixedCols.value[fixedIndex + 1] || col;
+            }
         }
+
         const offsetTableX = clientX - left + scrollLeft;
 
         // 记录拖动状态
         isColResizing.value = true;
         Object.assign(colResizeState, {
             currentCol: col,
-            currentColIndex: colIndex,
             lastCol: findLastChildCol(col),
             startX: clientX,
             startOffsetTableX: offsetTableX,
+            revertMoveX,
         });
 
         // 展示指示线，更新其位置
@@ -132,9 +154,9 @@ export function useColResize<DT extends Record<string, any>>({
      */
     function onThResizeMouseUp(e: MouseEvent) {
         if (!isColResizing.value) return;
-        const { startX, lastCol } = colResizeState;
+        const { startX, lastCol, revertMoveX } = colResizeState;
         const { clientX } = e;
-        const moveX = clientX - startX;
+        const moveX = revertMoveX ? startX - clientX : clientX - startX;
 
         // 移动量不小于最小列宽
         let width = getCalculatedColWidth(lastCol) + moveX;
@@ -157,10 +179,10 @@ export function useColResize<DT extends Record<string, any>>({
         isColResizing.value = false;
         colResizeState = {
             currentCol: null,
-            currentColIndex: 0,
             lastCol: null,
             startX: 0,
             startOffsetTableX: 0,
+            revertMoveX: false,
         };
     }
 

package/src/StkTable/useFixedCol.ts

@@ -125,6 +125,8 @@ export function useFixedCol<DT extends Record<string, any>>({
     }
 
     return {
+        /** 正在被固定的列 */
+        fixedCols,
         /** 固定列class */
         fixedColClassMap,
         /** 滚动条变化时，更新需要展示阴影的列 */

package/src/StkTable/utils/index.ts

@@ -3,7 +3,7 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../typ
 
 /** 是否空值 */
 function isEmptyValue(val: any, isNumber?: boolean) {
-    let isEmpty = val === null || val === '';
+    let isEmpty = val === null || val === '' || val === void 0;
     if (isNumber) {
         isEmpty = isEmpty || typeof val === 'boolean' || Number.isNaN(+val);
     }
@@ -104,7 +104,7 @@ function separatedData<T extends Record<string, any>>(sortOption: SortOption<T>,
     for (let i = 0; i < targetDataSource.length; i++) {
         const row = targetDataSource[i];
         const sortField = sortOption.sortField || sortOption.dataIndex;
-        const isEmpty = isEmptyValue(row[sortField], isNumber);
+        const isEmpty = isEmptyValue(row?.[sortField], isNumber); // deal row is null
         if (isEmpty) {
             emptyArr.push(row);
         } else {
@@ -131,7 +131,8 @@ export function tableSort<T extends Record<string, any>>(
     dataSource: T[],
     sortConfig: SortConfig<T> = {},
 ): T[] {
-    if (!dataSource?.length) return dataSource || [];
+    if (!dataSource?.length || !sortOption) return dataSource || [];
+
     sortConfig = { emptyToBottom: false, ...sortConfig };
     let targetDataSource = [...dataSource];
     let sortField = sortOption.sortField || sortOption.dataIndex;
@@ -149,8 +150,8 @@ export function tableSort<T extends Record<string, any>>(
         let { sortType } = sortOption;
         if (!sortType) sortType = typeof dataSource[0][sortField] as 'number' | 'string';
 
-        const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, sortType === 'number');
         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));