stk-table-vue 0.6.2 → 0.6.4

package/README.md

@@ -180,7 +180,7 @@ export type StkProps = {
   dataSource?: any[];
   /** 行唯一键 (行唯一值不能为undefined）*/
   rowKey?: UniqKeyProp;
-  /** 列唯一键 */
+  /** 列唯一键。默认`dataIndex`*/
   colKey?: UniqKeyProp;
   /** 空值展示文字 */
   emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);

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

@@ -1,4 +1,4 @@
-import { AutoRowHeightConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
+import { AutoRowHeightConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, SeqConfig, SortConfig, SortOption, StkTableColumn, UniqKeyProp } from './types/index';
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
 /**
@@ -19,15 +19,15 @@ declare function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option?: {
     silent: boolean;
 }): void;
 /**
- * 设置表头排序状态
- * @param dataIndex 列字段
+ * 设置表头排序状态。
+ * @param colKey 列唯一键字段。如果你想要取消排序状态，请使用`resetSorter`
  * @param order 正序倒序
  * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  * @param option.force 是否触发排序-默认true
  */
-declare function setSorter(dataIndex: string, order: Order, option?: {
+declare function setSorter(colKey: string, order: Order, option?: {
     sortOption?: SortOption<DT>;
     force?: boolean;
     silent?: boolean;
@@ -43,7 +43,10 @@ declare function scrollTo(top?: number | null, left?: number | null): void;
 /** get current table data */
 declare function getTableData(): any[];
 /** get current sort info */
-declare function getSortColumns(): Partial<SortState<DT>>[];
+declare function getSortColumns(): {
+    key: string | number | symbol | undefined;
+    order: "desc" | "asc";
+}[];
 /**
  *
  * @param rowKeyOrRow rowKey or row
@@ -158,7 +161,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     optimizeVue2Scroll?: boolean | undefined;
     /** 排序配置 */
     sortConfig?: SortConfig<any> | undefined;
-    /** 隐藏头部title。可传入dataIndex数组 */
+    /** 隐藏头部title。可传入colKey数组 */
     hideHeaderTitle?: boolean | string[] | undefined;
     /** 高亮配置 */
     highlightConfig?: HighlightConfig | undefined;
@@ -226,7 +229,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      * en: Set highlight cell
      * @see {@link setHighlightDimCell}
      */
-    setHighlightDimCell: (rowKeyValue: import('./types/index').UniqKey, dataIndex: string, option?: import('./types/highlightDimOptions').HighlightDimCellOption) => void;
+    setHighlightDimCell: (rowKeyValue: import('./types/index').UniqKey, colKeyValue: string, option?: import('./types/highlightDimOptions').HighlightDimCellOption) => void;
     /**
      * 设置高亮行
      *
@@ -235,9 +238,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      */
     setHighlightDimRow: (rowKeyValues: import('./types/index').UniqKey[], option?: import('./types/highlightDimOptions').HighlightDimRowOption) => void;
     /**
-     * 表格排序列dataIndex
+     * 表格排序列colKey
      *
-     * en: Table sort column dataIndex
+     * en: Table sort column colKey
      */
     sortCol: import('vue').Ref<string | number | symbol | undefined, string | number | symbol | undefined>;
     /**
@@ -403,7 +406,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     optimizeVue2Scroll?: boolean | undefined;
     /** 排序配置 */
     sortConfig?: SortConfig<any> | undefined;
-    /** 隐藏头部title。可传入dataIndex数组 */
+    /** 隐藏头部title。可传入colKey数组 */
     hideHeaderTitle?: boolean | string[] | undefined;
     /** 高亮配置 */
     highlightConfig?: HighlightConfig | undefined;
@@ -435,6 +438,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     width: string;
     minWidth: string;
     maxWidth: string;
+    sortConfig: SortConfig<any>;
     rowHeight: number;
     headerRowHeight: number | null;
     headless: boolean;
@@ -472,7 +476,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     bordered: boolean | "h" | "v" | "body-v";
     autoResize: boolean | (() => void);
     fixedColShadow: boolean;
-    sortConfig: SortConfig<any>;
     hideHeaderTitle: boolean | string[];
     highlightConfig: HighlightConfig;
     seqConfig: SeqConfig;

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

@@ -38,7 +38,6 @@ export type CustomCell<T extends CustomCellProps<U> | CustomHeaderCellProps<U>,
 export type StkTableColumn<T extends Record<string, any>> = {
     /**
      * 用于区分相同dataIndex 的列。
-     * 需要自行配置colKey="(col: StkTableColumn<any>) => col.key ?? col.dataIndex"
      */
     key?: any;
     /**
@@ -72,6 +71,8 @@ export type StkTableColumn<T extends Record<string, any>> = {
     sortField?: keyof T;
     /** 排序方式。按数字/字符串 */
     sortType?: 'number' | 'string';
+    /** 配置当前列的排序规则 */
+    sortConfig?: Pick<SortConfig<T>, 'emptyToBottom' | 'stringLocaleCompare'>;
     /** 固定列 */
     fixed?: 'left' | 'right' | null;
     /** private */ rowSpan?: number;
@@ -144,6 +145,12 @@ export type SortConfig<T extends Record<string, any>> = {
      * 类似onMounted时，调用setSorter点了下表头。
      */
     defaultSort?: {
+        /**
+         * 列唯一键，
+         *
+         * 如果您配了 `props.colKey` 则这里表示的列唯一键的值
+         */
+        key?: StkTableColumn<T>['key'];
         dataIndex: StkTableColumn<T>['dataIndex'];
         order: Order;
         sortField?: StkTableColumn<T>['sortField'];

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

@@ -2,12 +2,12 @@ import { ComputedRef, ShallowRef } from 'vue';
 import { StkTableColumn, UniqKey } from './types';
 type Params<T extends Record<string, any>> = {
     colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
-    tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
+    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
 };
 /**
  * 固定列fixed左侧或者右侧的距离
  * - col.fixed = left 则得到距离左侧的距离
  * - col.fixed = right 则得到距离右侧的距离
  */
-export declare function useGetFixedColPosition<DT extends Record<string, any>>({ tableHeaders, colKeyGen }: Params<DT>): ComputedRef<(col: StkTableColumn<any>) => number>;
+export declare function useGetFixedColPosition<DT extends Record<string, any>>({ tableHeadersForCalc, colKeyGen }: Params<DT>): ComputedRef<(col: StkTableColumn<any>) => number>;
 export {};

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

@@ -12,6 +12,6 @@ type Params = {
 export declare function useHighlight({ props, stkTableId, tableContainerRef }: Params): {
     highlightSteps: number | null;
     setHighlightDimRow: (rowKeyValues: UniqKey[], option?: HighlightDimRowOption) => void;
-    setHighlightDimCell: (rowKeyValue: UniqKey, dataIndex: string, option?: HighlightDimCellOption) => void;
+    setHighlightDimCell: (rowKeyValue: UniqKey, colKeyValue: string, option?: HighlightDimCellOption) => void;
 };
 export {};

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

@@ -14,6 +14,6 @@ export declare function useThDrag<DT extends Record<string, any>>({ props, emits
     onThDragOver: (e: DragEvent) => void;
     onThDrop: (e: DragEvent) => void;
     /** 是否可拖拽 */
-    isHeaderDraggable: (col: StkTableColumn<DT>) => boolean;
+    isHeaderDraggable: (col: StkTableColumn<DT>) => any;
 };
 export {};

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

@@ -4,7 +4,7 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../typ
  *
  * 注意：不会改变原数组，返回新数组
  * @param sortState
- * @param sortState.dataIndex 排序的列
+ * @param sortState.dataIndex 排序的字段
  * @param sortState.order 排序顺序
  * @param sortState.sortType 排序方式
  * @param newItem 要插入的数据
@@ -34,8 +34,8 @@ export declare function strCompare(a: string, b: string, isNumber: boolean, loca
  * @param dataSource 排序的数组
  */
 export declare function tableSort<T extends Record<string, any>>(sortOption: SortOption<T>, order: Order, dataSource: T[], sortConfig?: SortConfig<T>): T[];
-/** 表头column配置的层级 */
+/** 多级表头深度 从0开始为一级*/
 export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: number): number;
-/** number列宽+px */
-export declare function transformWidthToStr(width?: string | number): string | undefined;
+/** number width +px */
+export declare function transformWidthToStr(width?: string | number): string;
 export declare function getBrowsersVersion(browserName: string): number;

package/lib/stk-table-vue.js

@@ -147,7 +147,7 @@ function tableSort(sortOption, order, dataSource, sortConfig = {}) {
   }
   return targetDataSource;
 }
-function howDeepTheHeader(arr, level = 1) {
+function howDeepTheHeader(arr, level = 0) {
   const levels = [level];
   arr.forEach((item) => {
     var _a;
@@ -158,10 +158,8 @@ function howDeepTheHeader(arr, level = 1) {
   return Math.max(...levels);
 }
 function transformWidthToStr(width) {
-  if (typeof width === "number") {
-    return width + "px";
-  }
-  return width;
+  const numberWidth = Number(width);
+  return width + (!Number.isNaN(numberWidth) ? "px" : "");
 }
 function getBrowsersVersion(browserName) {
   try {
@@ -369,7 +367,8 @@ function useColResize({
     const { clientX } = e;
     let moveX = clientX - startX;
     const currentColWidth = getCalculatedColWidth(lastCol);
-    if (currentColWidth + moveX < props.colMinWidth) {
+    const minWidth = (lastCol == null ? void 0 : lastCol.minWidth) ?? props.colMinWidth;
+    if (currentColWidth + moveX < minWidth) {
       moveX = -currentColWidth;
     }
     const offsetTableX = startOffsetTableX + moveX;
@@ -529,7 +528,8 @@ function useFixedStyle({
       if (isRelativeMode.value) {
         style.top = virtualScroll.value.scrollTop + "px";
       } else {
-        style.top = depth * props.rowHeight + "px";
+        const rowHeight = props.headerRowHeight ?? props.rowHeight;
+        style.top = depth * rowHeight + "px";
       }
     }
     const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
@@ -554,17 +554,17 @@ function useFixedStyle({
   }
   return getFixedStyle;
 }
-function useGetFixedColPosition({ tableHeaders, colKeyGen }) {
+function useGetFixedColPosition({ tableHeadersForCalc, colKeyGen }) {
   const getFixedColPosition = computed(() => {
     const colKeyStore = {};
     const refStore = /* @__PURE__ */ new WeakMap();
-    tableHeaders.value.forEach((cols) => {
+    tableHeadersForCalc.value.forEach((cols) => {
       let left = 0;
       let rightStartIndex = 0;
       for (let i = 0; i < cols.length; i++) {
         const item = cols[i];
         if (item.fixed === "left") {
-          const colKey = colKeyGen.value(item) || item.dataIndex;
+          const colKey = colKeyGen.value(item);
           if (colKey) {
             colKeyStore[colKey] = left;
           } else {
@@ -579,7 +579,7 @@ function useGetFixedColPosition({ tableHeaders, colKeyGen }) {
       let right = 0;
       for (let i = cols.length - 1; i >= rightStartIndex; i--) {
         const item = cols[i];
-        const colKey = colKeyGen.value(item) || item.dataIndex;
+        const colKey = colKeyGen.value(item);
         if (item.fixed === "right") {
           if (colKey) {
             colKeyStore[colKey] = right;
@@ -591,7 +591,7 @@ function useGetFixedColPosition({ tableHeaders, colKeyGen }) {
       }
     });
     return (col) => {
-      const colKey = colKeyGen.value(col) || col.dataIndex;
+      const colKey = colKeyGen.value(col);
       return colKey ? colKeyStore[colKey] : refStore.get(col) || 0;
     };
   });
@@ -675,9 +675,9 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
     };
     recursion();
   }
-  function setHighlightDimCell(rowKeyValue, dataIndex, option = {}) {
+  function setHighlightDimCell(rowKeyValue, colKeyValue, option = {}) {
     var _a;
-    const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
+    const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-cell-key="${rowKeyValue}--${colKeyValue}"]`);
     const { className, method, duration, keyframe } = {
       className: HIGHLIGHT_CELL_CLASS,
       method: "animation",
@@ -939,7 +939,7 @@ function useThDrag({ props, emits, colKeyGen }) {
     onThDragOver,
     onThDrop,
     /** 是否可拖拽 */
-    isHeaderDraggable: (col) => !dragConfig.value.disabled(col)
+    isHeaderDraggable: (col) => dragConfig.value.draggable && !dragConfig.value.disabled(col)
   };
 }
 const TR_DRAGGING_CLASS = "tr-dragging";
@@ -1334,7 +1334,7 @@ const _hoisted_9 = {
 };
 const _hoisted_10 = ["colspan"];
 const _hoisted_11 = { class: "table-cell-wrapper" };
-const _hoisted_12 = ["data-index", "cell-key", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_12 = ["data-cell-key", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
 const _hoisted_13 = ["title"];
 const _hoisted_14 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -1409,6 +1409,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const sortSwitchOrder = [null, "desc", "asc"];
     const tableHeaders = shallowRef([]);
     const tableHeaderLast = shallowRef([]);
+    const tableHeadersForCalc = shallowRef([]);
     const dataSourceCopy = shallowRef([...props.dataSource]);
     const colKeyGen = computed(() => {
       if (typeof props.colKey === "function") {
@@ -1444,7 +1445,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setAutoHeight,
       clearAllAutoHeight
     } = useVirtualScroll({ tableContainerRef, trRef, props, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen });
-    const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeaders });
+    const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeadersForCalc });
     const getFixedStyle = useFixedStyle({
       props,
       isRelativeMode,
@@ -1527,7 +1528,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           nextTick(() => initVirtualScrollY());
         }
         if (sortCol.value) {
-          const column = tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
+          const column = tableHeaderLast.value.find((it) => colKeyGen.value(it) === sortCol.value);
           onColumnSort(column, false);
         }
       },
@@ -1547,11 +1548,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     function dealDefaultSorter() {
       if (!props.sortConfig.defaultSort) return;
-      const { dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
-      setSorter(dataIndex, order, { force: false, silent });
+      const { key, dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+      setSorter(key || dataIndex, order, { force: false, silent });
     }
     function dealColumns() {
-      let tableHeadersTemp = [];
+      const tableHeadersTemp = [];
+      const tableHeadersForCalcTemp = [];
       let copyColumn = props.columns;
       if (isRelativeMode.value) {
         let leftCol = [];
@@ -1568,15 +1570,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
         copyColumn = [...leftCol, ...centerCol, ...rightCol];
       }
-      const deep = howDeepTheHeader(copyColumn);
+      const maxDeep = howDeepTheHeader(copyColumn);
       const tempHeaderLast = [];
-      if (deep > 1 && props.virtualX) {
+      if (maxDeep > 0 && props.virtualX) {
         console.error("多级表头不支持横向虚拟滚动");
       }
+      for (let i = 0; i <= maxDeep; i++) {
+        tableHeadersTemp[i] = [];
+        tableHeadersForCalcTemp[i] = [];
+      }
       function flat(arr, parent, depth = 0) {
-        if (!tableHeadersTemp[depth]) {
-          tableHeadersTemp[depth] = [];
-        }
         let allChildrenLen = 0;
         let allChildrenWidthSum = 0;
         arr.forEach((col) => {
@@ -1592,20 +1595,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             );
             colChildrenLen = len;
             colWidth = widthSum;
+            tableHeadersForCalcTemp[depth].push(col);
           } else {
             colWidth = getColWidth(col);
             tempHeaderLast.push(col);
+            for (let i = depth; i <= maxDeep; i++) {
+              tableHeadersForCalcTemp[i].push(col);
+            }
           }
+          col.__WIDTH__ = colWidth;
           tableHeadersTemp[depth].push(col);
-          const rowSpan = col.children ? 1 : deep - depth;
+          const rowSpan = col.children ? 1 : maxDeep - depth + 1;
           const colSpan = colChildrenLen;
-          if (rowSpan !== 1) {
+          if (rowSpan > 1) {
             col.rowSpan = rowSpan;
           }
-          if (colSpan !== 1) {
+          if (colSpan > 1) {
             col.colSpan = colSpan;
           }
-          col.__WIDTH__ = colWidth;
           allChildrenLen += colChildrenLen;
           allChildrenWidthSum += colWidth;
         });
@@ -1614,6 +1621,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       flat(copyColumn, null);
       tableHeaders.value = tableHeadersTemp;
       tableHeaderLast.value = tempHeaderLast;
+      tableHeadersForCalc.value = tableHeadersForCalcTemp;
     }
     function rowKeyGen(row) {
       if (!row) return row;
@@ -1669,34 +1677,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     });
     function getHeaderTitle(col) {
-      if (props.hideHeaderTitle === true || Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(col.dataIndex)) {
+      const colKey = colKeyGen.value(col);
+      if (props.hideHeaderTitle === true || Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(colKey)) {
         return "";
       }
       return col.title || "";
     }
     function onColumnSort(col, click = true, options = {}) {
-      if (!(col == null ? void 0 : col.sorter) && click) {
+      if (!col) {
+        console.warn("onColumnSort: col is not found");
+        return;
+      }
+      if (!col.sorter && click) {
         return;
       }
       options = { force: false, emit: false, ...options };
-      if (sortCol.value !== col.dataIndex) {
-        sortCol.value = col.dataIndex;
+      const colKey = colKeyGen.value(col);
+      if (sortCol.value !== colKey) {
+        sortCol.value = colKey;
         sortOrderIndex.value = 0;
       }
       if (click) sortOrderIndex.value++;
       sortOrderIndex.value = sortOrderIndex.value % 3;
       let order = sortSwitchOrder[sortOrderIndex.value];
-      const sortConfig = props.sortConfig;
+      const sortConfig = { ...props.sortConfig, ...col.sortConfig };
       const defaultSort = sortConfig.defaultSort;
       if (!order && defaultSort) {
-        if (!defaultSort.dataIndex) {
-          console.error("sortConfig.defaultSort.dataIndex is required");
+        const colKey2 = defaultSort.key || defaultSort.dataIndex;
+        if (!colKey2) {
+          console.error("sortConfig.defaultSort key or 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;
+        sortCol.value = colKey2;
+        col = null;
+        for (const row of tableHeaders.value) {
+          const c = row.find((item) => colKeyGen.value(item) === colKey2);
+          if (c) {
+            col = c;
+            break;
+          }
+        }
       }
       if (!props.sortRemote || options.force) {
         const sortOption = col || defaultSort;
@@ -1859,15 +1881,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         );
       }
     }
-    function setSorter(dataIndex, order, option = {}) {
+    function setSorter(colKey, order, option = {}) {
       var _a;
       const newOption = { silent: true, sortOption: null, sort: true, ...option };
-      sortCol.value = dataIndex;
+      sortCol.value = colKey;
       sortOrderIndex.value = sortSwitchOrder.indexOf(order);
       if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
-        const column = newOption.sortOption || tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
+        const column = newOption.sortOption || tableHeaderLast.value.find((it) => colKeyGen.value(it) === sortCol.value);
         if (column) onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
-        else console.warn("Can not find column by dataIndex:", sortCol.value);
+        else console.warn("Can not find column by key:", sortCol.value);
       }
       return dataSourceCopy.value;
     }
@@ -1887,7 +1909,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function getSortColumns() {
       const sortOrder = sortSwitchOrder[sortOrderIndex.value];
       if (!sortOrder) return [];
-      return [{ dataIndex: sortCol.value, order: sortOrder }];
+      return [{ key: sortCol.value, order: sortOrder }];
     }
     function toggleExpandRow(row, col) {
       const isExpand = (row == null ? void 0 : row.__EXPANDED__) === col ? !(row == null ? void 0 : row.__EXPANDED__) : true;
@@ -1985,9 +2007,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
        */
       setHighlightDimRow,
       /**
-       * 表格排序列dataIndex
+       * 表格排序列colKey
        *
-       * en: Table sort column dataIndex
+       * en: Table sort column colKey
        */
       sortCol,
       /**
@@ -2111,7 +2133,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 4)) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) && rowIndex === tableHeaders.value.length - 1 ? unref(virtualX_columnPart) : row, (col, colIndex) => {
                   return openBlock(), createElementBlock("th", {
-                    key: col.dataIndex,
+                    key: colKeyGen.value(col),
                     "data-col-key": colKeyGen.value(col),
                     draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
                     rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
@@ -2120,7 +2142,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     title: getHeaderTitle(col),
                     class: normalizeClass([
                       col.sorter ? "sortable" : "",
-                      col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
+                      colKeyGen.value(col) === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
                       col.headerClassName,
                       unref(fixedColClassMap).get(colKeyGen.value(col))
                     ]),
@@ -2191,7 +2213,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_7)) : createCommentVNode("", true),
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
-                  key: col.dataIndex,
+                  key: colKeyGen.value(col),
                   style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
                 }, null, 4);
               }), 128)) : createCommentVNode("", true)
@@ -2199,16 +2221,16 @@ 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(virtualScroll).startIndex + rowIndex),
+                id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex),
                 ref_for: true,
                 ref_key: "trRef",
                 ref: trRef,
-                key: _ctx.rowKey ? rowKeyGen(row) : unref(virtualScroll).startIndex + rowIndex,
-                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : unref(virtualScroll).startIndex + rowIndex,
+                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,
                 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(virtualScroll).startIndex + rowIndex)]: true,
+                  [_ctx.rowClassName(row, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)]: true,
                   expanded: row == null ? void 0 : row.__EXPANDED__,
                   "expanded-row": row && row.__EXPANDED_ROW__
                 }),
@@ -2219,7 +2241,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onDblclick: (e) => onRowDblclick(e, row),
                 onContextmenu: (e) => onRowMenu(e, row),
                 onMouseover: (e) => onTrMouseOver(e, row),
-                onDrop: (e) => unref(onTrDrop)(e, unref(virtualScroll).startIndex + rowIndex)
+                onDrop: (e) => unref(onTrDrop)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
               }, [
                 unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_9)) : createCommentVNode("", true),
                 row && row.__EXPANDED_ROW__ ? (openBlock(), createElementBlock("td", {
@@ -2239,9 +2261,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ])
                 ], 8, _hoisted_10)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
                   return openBlock(), createElementBlock("td", {
-                    key: col.dataIndex,
-                    "data-index": col.dataIndex,
-                    "cell-key": rowKeyGen(row) + "--" + colKeyGen.value(col),
+                    key: colKeyGen.value(col),
+                    "data-cell-key": cellKeyGen(row, col),
                     style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col))),
                     class: normalizeClass([
                       col.className,
@@ -2267,7 +2288,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: "table-cell-wrapper",
                       col,
                       row,
-                      rowIndex: unref(virtualScroll).startIndex + rowIndex,
+                      rowIndex: (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
                       colIndex,
                       cellValue: row == null ? void 0 : row[col.dataIndex],
                       expanded: (row == null ? void 0 : row.__EXPANDED__) || null
@@ -2277,10 +2298,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       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(virtualScroll).startIndex + rowIndex + 1), 1)
+                        createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex + 1), 1)
                       ], 64)) : col.type === "expand" ? (openBlock(), createElementBlock("span", _hoisted_14, 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(virtualScroll).startIndex + rowIndex)
+                          onDragstart: (e) => unref(onTrDragStart)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
                         }, null, 8, ["onDragstart"]),
                         createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
                       ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [

package/lib/style.css

@@ -38,8 +38,6 @@
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
-  border-left:1px solid #e8e8f4;
-  border-left:1px solid var(--border-color);
   background-image:linear-gradient(180deg, #e8e8f4 1px, transparent 1px), linear-gradient(270deg, #e8e8f4 1px, transparent 1px), linear-gradient(0deg, #e8e8f4 1px, transparent 1px);
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
@@ -78,12 +76,8 @@
 .stk-table.is-col-resizing th{
   pointer-events:none;
 }
-.stk-table.border-h{
-  --bg-border-right:linear-gradient(transparent, transparent);
-  --bg-border-left:linear-gradient(transparent, transparent);
-}
-.stk-table.border-v{
-  --bg-border-bottom:linear-gradient(transparent, transparent);
+.stk-table.border{
+  border-left:1px solid var(--border-color);
 }
 .stk-table.border th,
 .stk-table.border td{
@@ -92,6 +86,15 @@
 .stk-table.border thead tr:first-child th{
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
+.stk-table.border-h{
+  border-left:none;
+  --bg-border-right:linear-gradient(transparent, transparent);
+  --bg-border-left:linear-gradient(transparent, transparent);
+}
+.stk-table.border-v{
+  --bg-border-bottom:linear-gradient(transparent, transparent);
+  --bg-border-top:linear-gradient(transparent, transparent);
+}
 .stk-table.border-body-v tbody{
   --bg-border-bottom:linear-gradient(transparent, transparent);
 }