stk-table-vue 0.6.4 → 0.6.6

package/README.md

@@ -1,10 +1,18 @@
 # StkTable (Sticky Table)
+![NPM License](https://img.shields.io/npm/l/stk-table-vue)
+![NPM Version](https://img.shields.io/npm/v/stk-table-vue)
+![NPM Type Definitions](https://img.shields.io/npm/types/stk-table-vue)
+![NPM Downloads](https://img.shields.io/npm/dw/stk-table-vue)
 
 Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
 
 Vue2.7支持引入源码(**ts**)使用。
 
-repo: 
+[Stk Table Vue 文档](https://ja-plus.github.io/stk-table-vue/)
+
+## License
+MIT
+repo(求 star🌟): 
 - [Github](https://github.com/ja-plus/stk-table-vue)
 - [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
 
@@ -227,7 +235,7 @@ export type StkProps = {
    * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
    * - 会自动更新props.columns中的with属性
    */
-  colResizable?: boolean;
+  colResizable?: boolean | ColResizableConfig;
   /** 可拖动至最小的列宽 */
   colMinWidth?: number;
   /**
@@ -281,7 +289,7 @@ export type StkProps = {
   expandConfig?: {
     height?: number;
   };
-  /** 列拖动配置 */
+  /** 行拖动配置 */
   dragRowConfig?: {
     mode?: 'none' | 'insert' | 'swap';
   };

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

@@ -1,4 +1,4 @@
-import { AutoRowHeightConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, SeqConfig, SortConfig, SortOption, StkTableColumn, UniqKeyProp } from './types/index';
+import { AutoRowHeightConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, SeqConfig, SortConfig, SortOption, StkTableColumn, UniqKeyProp, ColResizableConfig } from './types/index';
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
 /**
@@ -26,6 +26,7 @@ declare function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option?: {
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  * @param option.force 是否触发排序-默认true
+ * @return 表格数据
  */
 declare function setSorter(colKey: string, order: Order, option?: {
     sortOption?: SortOption<DT>;
@@ -42,7 +43,10 @@ declare function resetSorter(): void;
 declare function scrollTo(top?: number | null, left?: number | null): void;
 /** get current table data */
 declare function getTableData(): any[];
-/** get current sort info */
+/**
+ * get current sort info
+ * @return {{key:string,order:Order}[]}
+ */
 declare function getSortColumns(): {
     key: string | number | symbol | undefined;
     order: "desc" | "asc";
@@ -138,7 +142,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
      * - 会自动更新props.columns中的with属性
      */
-    colResizable?: boolean | undefined;
+    colResizable?: boolean | ColResizableConfig<any> | undefined;
     /** 可拖动至最小的列宽 */
     colMinWidth?: number | undefined;
     /**
@@ -169,7 +173,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     seqConfig?: SeqConfig | undefined;
     /** 展开行配置 */
     expandConfig?: ExpandConfig | undefined;
-    /** 列拖动配置 */
+    /** 行拖动配置 */
     dragRowConfig?: DragRowConfig | undefined;
     /**
      * 固定头，固定列实现方式。(非响应式)
@@ -383,7 +387,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
      * - 会自动更新props.columns中的with属性
      */
-    colResizable?: boolean | undefined;
+    colResizable?: boolean | ColResizableConfig<any> | undefined;
     /** 可拖动至最小的列宽 */
     colMinWidth?: number | undefined;
     /**
@@ -414,7 +418,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     seqConfig?: SeqConfig | undefined;
     /** 展开行配置 */
     expandConfig?: ExpandConfig | undefined;
-    /** 列拖动配置 */
+    /** 行拖动配置 */
     dragRowConfig?: DragRowConfig | undefined;
     /**
      * 固定头，固定列实现方式。(非响应式)
@@ -471,7 +475,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     selectedCellRevokable: boolean;
     headerDrag: HeaderDragConfig;
     rowClassName: (row: any, i: number) => string;
-    colResizable: boolean;
+    colResizable: boolean | ColResizableConfig<any>;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
     autoResize: boolean | (() => void);
@@ -492,6 +496,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
         col: any;
     }): any;
     empty?(_: {}): any;
+    customBottom?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,3 +1,3 @@
 export { default as StkTable } from './StkTable.vue';
-export { tableSort, insertToOrderedArray, strCompare } from './utils';
+export { tableSort, insertToOrderedArray, strCompare, binarySearch } from './utils';
 export type { StkTableColumn } from './types/index';

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

@@ -185,6 +185,7 @@ export type SeqConfig = {
 };
 /** Configuration options for the expand column  */
 export type ExpandConfig = {
+    /** worked in virtual mode */
     height?: number;
 };
 export type ExpandedRow = PrivateRowDT & {
@@ -211,4 +212,7 @@ export type AutoRowHeightConfig<DT> = {
     /** Estimated row height */
     expectedHeight?: number | ((row: DT, index: number) => number);
 };
+export type ColResizableConfig<DT extends Record<string, any>> = {
+    disabled: (col: StkTableColumn<DT>) => boolean;
+};
 export {};

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

@@ -11,6 +11,7 @@ type Params<DT extends Record<string, any>> = {
 };
 /** 列宽拖动 */
 export declare function useColResize<DT extends Record<string, any>>({ tableContainerRef, tableHeaderLast, colResizeIndicatorRef, props, emits, colKeyGen, fixedCols, }: Params<DT>): {
+    colResizeOn: ComputedRef<((col: StkTableColumn<DT>) => boolean) | (() => any)>;
     isColResizing: Ref<boolean, boolean>;
     onThResizeMouseDown: (e: MouseEvent, col: StkTableColumn<DT>, leftHandle?: boolean) => void;
 };

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

@@ -6,14 +6,14 @@ type Params<T extends Record<string, any>> = {
     colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
     getFixedColPosition: ComputedRef<(col: StkTableColumn<T>) => number>;
     tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
-    tableHeaderLast: ShallowRef<StkTableColumn<T>[]>;
+    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
     tableContainerRef: Ref<HTMLDivElement | undefined>;
 };
 /**
  * 固定列处理
  * @returns
  */
-export declare function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen, getFixedColPosition, tableHeaders, tableHeaderLast, tableContainerRef, }: Params<DT>): {
+export declare function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen, getFixedColPosition, tableHeaders, tableHeadersForCalc, tableContainerRef, }: Params<DT>): {
     /** 正在被固定的列 */
     fixedCols: ShallowRef<StkTableColumn<DT>[], StkTableColumn<DT>[]>;
     /** 固定列class */

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

@@ -1,4 +1,6 @@
 import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../types';
+/** 是否空值 */
+export declare function isEmptyValue(val: any, isNumber?: boolean): boolean;
 /**
  * 对有序数组插入新数据
  *
@@ -12,6 +14,12 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../typ
  * @return targetArray 的浅拷贝
  */
 export declare function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: T, targetArray: T[], sortConfig?: SortConfig<T>): T[];
+/**
+ * 二分查找
+ *  @param searchArray 查找数组
+ *  @param compareCallback 比较函数，返回 -1|0|1
+ */
+export declare function binarySearch(searchArray: any[], compareCallback: (midIndex: number) => number): number;
 /**
  * 字符串比较
  * @param a
@@ -19,7 +27,7 @@ export declare function insertToOrderedArray<T extends object>(sortState: SortSt
  * @param type 类型
  * @param isNumber 是否是数字类型
  * @param localeCompare 是否 使用Array.prototyshpe.localeCompare
- * @return {-1|0|1}
+ * @return {number} <0: a < b, 0: a = b, >0: a > b
  */
 export declare function strCompare(a: string, b: string, isNumber: boolean, localeCompare?: boolean): number;
 /**
@@ -37,5 +45,5 @@ export declare function tableSort<T extends Record<string, any>>(sortOption: Sor
 /** 多级表头深度 从0开始为一级*/
 export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: number): number;
 /** number width +px */
-export declare function transformWidthToStr(width?: string | number): string;
+export declare function transformWidthToStr(width?: string | number): string | undefined;
 export declare function getBrowsersVersion(browserName: string): number;

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { openBlock, createElementBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, shallowRef, computed, defineComponent, nextTick, toRaw, normalizeClass, unref, normalizeStyle, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createVNode, createTextVNode } from "vue";
+import { openBlock, createElementBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeClass, unref, normalizeStyle, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createVNode, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -48,7 +48,7 @@ function _sfc_render(_ctx, _cache) {
 }
 const SortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
 function isEmptyValue(val, isNumber) {
-  let isEmpty = val === null || val === "" || val === void 0;
+  let isEmpty = val === null || val === void 0;
   if (isNumber) {
     isEmpty = isEmpty || typeof val === "boolean" || Number.isNaN(+val);
   }
@@ -59,7 +59,6 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
   sortConfig = { emptyToBottom: false, ...sortConfig };
   let { sortType } = sortState;
   if (!sortType) sortType = typeof newItem[dataIndex];
-  const isNumber = sortType === "number";
   const data = [...targetArray];
   if (!order || !data.length) {
     data.unshift(newItem);
@@ -68,26 +67,32 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
   if (sortConfig.emptyToBottom && isEmptyValue(newItem)) {
     data.push(newItem);
   }
-  let sIndex = 0;
-  let eIndex = data.length - 1;
+  const isNumber = sortType === "number";
   const targetVal = newItem[dataIndex];
-  while (sIndex <= eIndex) {
-    const midIndex = Math.floor((sIndex + eIndex) / 2);
+  const sIndex = binarySearch(data, (midIndex) => {
     const midVal = data[midIndex][dataIndex];
     const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
+    return order === "asc" ? compareRes : -compareRes;
+  });
+  data.splice(sIndex, 0, newItem);
+  return data;
+}
+function binarySearch(searchArray, compareCallback) {
+  let sIndex = 0;
+  let eIndex = searchArray.length - 1;
+  while (sIndex <= eIndex) {
+    const midIndex = Math.floor((sIndex + eIndex) / 2);
+    const compareRes = compareCallback(midIndex);
     if (compareRes === 0) {
       sIndex = midIndex;
       break;
-    } else if (compareRes === -1) {
-      if (order === "asc") sIndex = midIndex + 1;
-      else eIndex = midIndex - 1;
+    } else if (compareRes < 0) {
+      sIndex = midIndex + 1;
     } else {
-      if (order === "asc") eIndex = midIndex - 1;
-      else sIndex = midIndex + 1;
+      eIndex = midIndex - 1;
     }
   }
-  data.splice(sIndex, 0, newItem);
-  return data;
+  return sIndex;
 }
 function strCompare(a, b, isNumber, localeCompare = false) {
   let _a = a;
@@ -158,6 +163,7 @@ function howDeepTheHeader(arr, level = 0) {
   return Math.max(...levels);
 }
 function transformWidthToStr(width) {
+  if (width === void 0) return;
   const numberWidth = Number(width);
   return width + (!Number.isNaN(numberWidth) ? "px" : "");
 }
@@ -303,6 +309,12 @@ function useColResize({
     startOffsetTableX: 0,
     revertMoveX: false
   };
+  const colResizeOn = computed(() => {
+    if (Object.prototype.toString.call(props.colResizable) === "[object Object]") {
+      return (col) => !props.colResizable.disabled(col);
+    }
+    return () => props.colResizable;
+  });
   onMounted(() => {
     initColResizeEvent();
   });
@@ -411,6 +423,7 @@ function useColResize({
     return column;
   }
   return {
+    colResizeOn,
     isColResizing,
     onThResizeMouseDown
   };
@@ -420,7 +433,7 @@ function useFixedCol({
   colKeyGen,
   getFixedColPosition,
   tableHeaders,
-  tableHeaderLast,
+  tableHeadersForCalc,
   tableContainerRef
 }) {
   const fixedShadowCols = shallowRef([]);
@@ -443,23 +456,8 @@ function useFixedCol({
     });
     return colMap;
   });
-  function getColAndParentCols(col, type = 1) {
-    if (!col) return [];
-    const colsTemp = [];
-    let node = { __PARENT__: col };
-    while (node = node.__PARENT__) {
-      if (type === 1 && node.fixed) {
-        colsTemp.push(node);
-      }
-      if (type === 2) {
-        colsTemp.push(node);
-      }
-    }
-    return colsTemp;
-  }
   function updateFixedShadow(virtualScrollX) {
     const fixedColsTemp = [];
-    const fixedShadowColsTemp = [];
     let clientWidth, scrollLeft;
     if (virtualScrollX == null ? void 0 : virtualScrollX.value) {
       const {
@@ -478,26 +476,29 @@ function useFixedCol({
       clientWidth = cw;
       scrollLeft = sl;
     }
-    let leftShadowCol = null;
-    let rightShadowCol = null;
-    let left = 0;
-    tableHeaderLast.value.forEach((col) => {
-      const position = getFixedColPosition.value(col);
-      if (col.fixed === "left" && position + scrollLeft > left) {
-        leftShadowCol = col;
-        fixedColsTemp.push(...getColAndParentCols(col, 2));
-      }
-      left += getCalculatedColWidth(col);
-      if (!rightShadowCol && col.fixed === "right" && scrollLeft + clientWidth - left < position) {
-        rightShadowCol = col;
-      }
-      if (rightShadowCol && col.fixed === "right") {
-        fixedColsTemp.push(...getColAndParentCols(col, 2));
-      }
+    const leftShadowCol = [];
+    const rightShadowCol = [];
+    tableHeadersForCalc.value.forEach((row, level) => {
+      let left = 0;
+      row.forEach((col) => {
+        const position = getFixedColPosition.value(col);
+        const isFixedLeft = col.fixed === "left";
+        const isFixedRight = col.fixed === "right";
+        if (isFixedLeft && position + scrollLeft > left) {
+          fixedColsTemp.push(col);
+          leftShadowCol[level] = col;
+        }
+        left += getCalculatedColWidth(col);
+        if (isFixedRight && scrollLeft + clientWidth - left < position) {
+          fixedColsTemp.push(col);
+          if (!rightShadowCol[level]) {
+            rightShadowCol[level] = col;
+          }
+        }
+      });
     });
     if (props.fixedColShadow) {
-      fixedShadowColsTemp.push(...getColAndParentCols(leftShadowCol), ...getColAndParentCols(rightShadowCol));
-      fixedShadowCols.value = fixedShadowColsTemp.filter(Boolean);
+      fixedShadowCols.value = [...leftShadowCol, ...rightShadowCol].filter(Boolean);
     }
     fixedCols.value = fixedColsTemp;
   }
@@ -633,7 +634,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
             const { ts, duration } = store;
             const timeOffset = nowTs - ts;
             if (nowTs - ts < duration) {
-              updateRowBgc(rowKeyValue, store, timeOffset);
+              updateRowAnimation(rowKeyValue, store, timeOffset);
             } else {
               highlightDimRowsAnimation.delete(rowKeyValue);
             }
@@ -708,7 +709,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
           const rowKeyValue = rowKeyValues[i];
           const store = { ts: nowTs, visible: false, keyframe, duration };
           highlightDimRowsAnimation.set(rowKeyValue, store);
-          updateRowBgc(rowKeyValue, store, 0);
+          updateRowAnimation(rowKeyValue, store, 0);
         }
         calcRowHighlightLoop();
       } else {
@@ -770,7 +771,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
       }, duration)
     );
   }
-  function updateRowBgc(rowKeyValue, store, timeOffset) {
+  function updateRowAnimation(rowKeyValue, store, timeOffset) {
     const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
     const { visible, keyframe, duration: initialDuration } = store;
     if (!rowEl) {
@@ -916,7 +917,7 @@ function useThDrag({ props, emits, colKeyGen }) {
     emits("th-drop", th.dataset.colKey);
   }
   function handleColOrderChange(dragStartKey, dragEndKey) {
-    if (!dragStartKey || !dragEndKey) return;
+    if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
     if (dragConfig.value.mode !== "none") {
       const columns = [...props.columns];
       const dragStartIndex = columns.findIndex((col) => colKeyGen.value(col) === dragStartKey);
@@ -1064,6 +1065,9 @@ function useVirtualScroll({
     offsetLeft: 0,
     scrollLeft: 0
   });
+  const hasExpandCol = computed(() => {
+    return tableHeaderLast.value.some((col) => col.type === "expand");
+  });
   const virtual_on = computed(() => {
     return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize * 2;
   });
@@ -1170,7 +1174,8 @@ function useVirtualScroll({
     let expectedHeight;
     if (storedHeight) {
       return storedHeight;
-    } else if (expectedHeight = (_a = props.autoRowHeight) == null ? void 0 : _a.expectedHeight) {
+    }
+    if (expectedHeight = (_a = props.autoRowHeight) == null ? void 0 : _a.expectedHeight) {
       if (typeof expectedHeight === "function") {
         return expectedHeight(row);
       } else {
@@ -1179,6 +1184,18 @@ function useVirtualScroll({
     }
     return props.rowHeight || DEFAULT_ROW_HEIGHT;
   };
+  const createGetRowHeightFn = () => {
+    var _a;
+    if (props.autoRowHeight) {
+      return (row) => getAutoRowHeight(row);
+    }
+    if (hasExpandCol.value) {
+      const { rowHeight } = virtualScroll.value;
+      const expandedRowHeight = ((_a = props.expandConfig) == null ? void 0 : _a.height) || rowHeight;
+      return (row) => row.__EXPANDED_ROW__ ? expandedRowHeight : rowHeight;
+    }
+    return () => props.rowHeight || DEFAULT_ROW_HEIGHT;
+  };
   function updateVirtualScrollY(sTop = 0) {
     var _a;
     const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
@@ -1186,21 +1203,27 @@ function useVirtualScroll({
     if (!virtual_on.value) {
       return;
     }
+    const dataSourceCopyTemp = dataSourceCopy.value;
     const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
     let startIndex = 0;
     let autoRowHeightTop = 0;
-    if (autoRowHeight) {
-      (_a = trRef.value) == null ? void 0 : _a.forEach((tr) => {
-        const { rowKey } = tr.dataset;
-        if (!rowKey || autoRowHeightMap.has(rowKey)) return;
-        autoRowHeightMap.set(rowKey, tr.offsetHeight);
-      });
-      for (let i = 0; i < dataSourceCopy.value.length; i++) {
-        const height = getAutoRowHeight(dataSourceCopy.value[i]);
+    let getRowHeight = null;
+    const dataLength = dataSourceCopyTemp.length;
+    if (autoRowHeight || hasExpandCol.value) {
+      if (autoRowHeight) {
+        (_a = trRef.value) == null ? void 0 : _a.forEach((tr) => {
+          const { rowKey } = tr.dataset;
+          if (!rowKey || autoRowHeightMap.has(rowKey)) return;
+          autoRowHeightMap.set(rowKey, tr.offsetHeight);
+        });
+      }
+      getRowHeight = createGetRowHeightFn();
+      for (let i = 0; i < dataLength; i++) {
+        const height = getRowHeight(dataSourceCopyTemp[i]);
         autoRowHeightTop += height;
         if (autoRowHeightTop >= sTop) {
           startIndex = i;
-          autoRowHeightTop = autoRowHeightTop - height;
+          autoRowHeightTop -= height;
           break;
         }
       }
@@ -1210,13 +1233,13 @@ function useVirtualScroll({
     let endIndex = startIndex + pageSize;
     if (stripe && startIndex > 0 && startIndex % 2) {
       startIndex -= 1;
-      if (autoRowHeight) {
-        const height = getAutoRowHeight(dataSourceCopy.value[startIndex]);
+      if (autoRowHeight || hasExpandCol.value) {
+        const height = getRowHeight(dataSourceCopyTemp[startIndex]);
         autoRowHeightTop -= height;
       }
     }
     startIndex = Math.max(0, startIndex);
-    endIndex = Math.min(endIndex, dataSourceCopy.value.length);
+    endIndex = Math.min(endIndex, dataLength);
     if (startIndex >= endIndex) {
       startIndex = endIndex - pageSize;
     }
@@ -1224,7 +1247,7 @@ function useVirtualScroll({
       window.clearTimeout(vue2ScrollYTimeout);
     }
     let offsetTop = 0;
-    if (autoRowHeight) {
+    if (autoRowHeight || hasExpandCol.value) {
       offsetTop = autoRowHeightTop;
     } else {
       if (oldStartIndex === startIndex && oldEndIndex === endIndex) {
@@ -1473,9 +1496,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getFixedColPosition,
       tableContainerRef,
       tableHeaders,
-      tableHeaderLast
+      tableHeadersForCalc
     });
-    const { isColResizing, onThResizeMouseDown } = useColResize({
+    const { isColResizing, onThResizeMouseDown, colResizeOn } = useColResize({
       props,
       emits,
       colKeyGen,
@@ -2175,12 +2198,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       col.sorter ? (openBlock(), createElementBlock("span", _hoisted_4, [
                         createVNode(SortIcon)
                       ])) : createCommentVNode("", true),
-                      _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
+                      unref(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
                         key: 4,
                         class: "table-header-resizer left",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
                       }, null, 40, _hoisted_5)) : createCommentVNode("", true),
-                      _ctx.colResizable ? (openBlock(), createElementBlock("div", {
+                      unref(colResizeOn)(col) ? (openBlock(), createElementBlock("div", {
                         key: 5,
                         class: "table-header-resizer right",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
@@ -2235,7 +2258,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "expanded-row": row && row.__EXPANDED_ROW__
                 }),
                 style: normalizeStyle({
-                  "--row-height": row && row.__EXPANDED_ROW__ && unref(virtual_on) && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
+                  "--row-height": row && row.__EXPANDED_ROW__ && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
                 }),
                 onClick: (e) => onRowClick(e, row),
                 onDblclick: (e) => onRowDblclick(e, row),
@@ -2325,13 +2348,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "empty", {}, () => [
             _cache[7] || (_cache[7] = createTextVNode("暂无数据"))
           ])
-        ], 2)) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "customBottom")
       ], 38);
     };
   }
 });
 export {
   _sfc_main as StkTable,
+  binarySearch,
   insertToOrderedArray,
   strCompare,
   tableSort

package/lib/style.css

@@ -38,8 +38,6 @@
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
-  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);
 }
 .stk-table.dark{
   --th-bgc:#202029;
@@ -63,21 +61,22 @@
   --drag-handle-hover-color:#5d6064;
   color:#d1d1e0;
 }
-.stk-table.headless{
+.stk-table.headless.border{
   border-top:1px solid var(--border-color);
   background-image:var(--bg-border-right), var(--bg-border-bottom);
 }
 .stk-table.col-resizable .stk-table-main{
-  width:-moz-fit-content !important;
-  width:fit-content !important;
-  min-width:-moz-min-content !important;
-  min-width:min-content !important;
+  width:-moz-fit-content;
+  width:fit-content;
+  min-width:-moz-min-content;
+  min-width:min-content;
 }
 .stk-table.is-col-resizing th{
   pointer-events:none;
 }
 .stk-table.border{
   border-left:1px solid var(--border-color);
+  background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
 .stk-table.border th,
 .stk-table.border td{
@@ -104,13 +103,13 @@
 .stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
   background-color:var(--stripe-bgc);
 }
-.stk-table.stripe.row-hover .stk-tbody-main tr:hover{
+.stk-table.stripe.row-hover .stk-table-main .stk-tbody-main tr:hover{
   background-color:var(--tr-hover-bgc);
 }
-.stk-table.stripe.row-active .stk-tbody-main tr.active{
+.stk-table.stripe.row-active .stk-table-main .stk-tbody-main tr.active{
   background-color:var(--tr-active-bgc);
 }
-.stk-table.row-hover .stk-tbody-main tr:hover{
+.stk-table.row-hover .stk-table-main .stk-tbody-main tr:hover{
   background-color:var(--tr-hover-bgc);
 }
 .stk-table.row-active .stk-tbody-main tr.active{
@@ -142,6 +141,9 @@
   max-height:calc(var(--header-row-height) * 1);
   max-height:calc(var(--header-row-height) * var(--row-span, 1));
 }
+.stk-table.virtual .table-header-cell-wrapper .table-header-title{
+  max-height:inherit;
+}
 .stk-table.virtual tbody td{
   height:var(--row-height);
 }
@@ -258,7 +260,7 @@
 .stk-table .expand-cell{
   cursor:pointer;
 }
-.stk-table .expand-cell .table-cell-wrapper.expanded-cell-wrapper::before{
+.stk-table .expand-cell .expanded-cell-wrapper::before{
   content:'';
   display:inline-block;
   margin:0 2px;
@@ -269,7 +271,7 @@
   border-bottom:4px solid transparent;
   transition:transform 0.2s ease;
 }
-.stk-table .expand-cell .table-cell-wrapper.expanded-cell-wrapper > span{
+.stk-table .expand-cell .expanded-cell-wrapper > span{
   margin-left:var(--cell-padding-x);
 }
 .stk-table .expand-cell.expanded .table-cell-wrapper::before{