stk-table-vue 0.11.3 → 0.11.4

package/lib/index-t5SJ6KNv.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.3
+ * version: v0.11.4
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

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

@@ -1,5 +1,5 @@
 import { FilterStatus } from './components/Filter/types';
-import { AreaSelectionConfig, AreaSelectionRange, AutoRowHeightConfig, ColResizableConfig, DragRowConfig, ExpandConfig, ExperimentalConfig, FooterConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, PrivateStkTableColumn, RowActiveOption, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, TreeConfig, UniqKey, UniqKeyProp } from './types/index';
+import { AreaSelectionConfig, AreaSelectionRange, AutoRowHeightConfig, ColResizableConfig, DragRowConfig, ExpandConfig, ExperimentalConfig, FooterConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, PrivateStkTableColumn, RowActiveOption, SeqConfig, SortConfig, StkTableColumn, TreeConfig, UniqKey, UniqKeyProp } from './types/index';
 import { ScrollbarOptions } from './useScrollbar';
 
 /** Generic stands for DataType */
@@ -28,25 +28,6 @@ declare function setCurrentRow(rowKeyOrRow: string | undefined | DT, option?: {
 declare function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option?: {
     silent: boolean;
 }): void;
-/**
- * 设置表头排序状态。
- * @param colKey 列唯一键字段。如果你想要取消排序状态，请使用`resetSorter`
- * @param order 正序倒序
- * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
- * @param option.sort 是否触发排序-默认true
- * @param option.silent 是否禁止触发回调-默认true
- * @param option.force 是否触发排序-默认true
- * @param option.append 是否追加排序（多列排序模式）。为true时保留现有排序状态，将新排序添加到最前面；为false时替换所有排序状态
- * @return 表格数据
- */
-declare function setSorter(colKey: string, order: Order, option?: {
-    sortOption?: SortOption<DT>;
-    force?: boolean;
-    silent?: boolean;
-    sort?: boolean;
-    append?: boolean;
-}): any[];
-declare function resetSorter(): void;
 /**
  * set scroll bar position
  * @param top null to not change
@@ -55,14 +36,6 @@ 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
- * @return {{key:string,order:Order}[]}
- */
-declare function getSortColumns(): {
-    key: keyof DT | undefined;
-    order: Order;
-}[];
 declare function __VLS_template(): {
     tableHeader?(_: {
         col: PrivateStkTableColumn<PrivateRowDT>;
@@ -359,34 +332,43 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         sortField?: string | number | symbol | undefined;
         sortType?: "number" | "string" | undefined;
         order: Order;
-    }[], SortState<any>[] | {
+    }[], {
         key?: any;
         dataIndex: string;
         sortField?: string | number | symbol | undefined;
         sortType?: "number" | "string" | undefined;
         order: Order;
-    }[]>;
+    }[] | import('.').SortState<any>[]>;
     /**
      * 表格排序列顺序
      *
      * en: get current sort info
      * @see {@link getSortColumns}
      */
-    getSortColumns: typeof getSortColumns;
+    getSortColumns: () => {
+        key: string | number | symbol | undefined;
+        order: Order;
+    }[];
     /**
      * 设置表头排序状态
      *
      * en: Set the sort status of the table header
      * @see {@link setSorter}
      */
-    setSorter: typeof setSorter;
+    setSorter: (colKey: string, order: Order, option?: {
+        sortOption?: import('.').SortOption<any> | undefined;
+        force?: boolean;
+        silent?: boolean;
+        sort?: boolean;
+        append?: boolean;
+    }) => any[];
     /**
      * 重置sorter状态
      *
      * en: Reset the sorter status
      * @see {@link resetSorter}
      */
-    resetSorter: typeof resetSorter;
+    resetSorter: () => void;
     /**
      * 滚动至
      *

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

@@ -0,0 +1,38 @@
+import { Ref } from 'vue';
+import { Order, SortOption, SortState, StkTableColumn, UniqKey } from './types/index';
+
+/**
+ * 排序 Hook
+ * 管理表格排序状态和相关操作
+ * @param props 表格 props
+ * @param colKeyGen 列 key 生成函数
+ * @param tableHeaderLast 表头最后一行（叶子节点）
+ * @param dataSourceCopy 数据源副本 ref
+ * @param initDataSource 初始化数据源函数
+ * @param emits 事件发射函数
+ * @returns 排序相关状态和方法
+ */
+export declare function useSorter<DT extends Record<string, any>>(props: any, emits: any, colKeyGen: Ref<(col: StkTableColumn<DT>) => string>, tableHeaderLast: Ref<StkTableColumn<DT>[]>, dataSourceCopy: Ref<DT[]>, initDataSource: (data?: DT[], option?: {
+    forceSort?: boolean;
+}) => void): readonly [Ref<{
+    key?: any;
+    dataIndex: import('vue').UnwrapRef<keyof DT & string>;
+    sortField?: import('vue').UnwrapRef<keyof DT> | undefined;
+    sortType?: "number" | "string" | undefined;
+    order: Order;
+}[], SortState<DT>[] | {
+    key?: any;
+    dataIndex: import('vue').UnwrapRef<keyof DT & string>;
+    sortField?: import('vue').UnwrapRef<keyof DT> | undefined;
+    sortType?: "number" | "string" | undefined;
+    order: Order;
+}[]>, import('vue').ComputedRef<keyof DT | undefined>, (col: StkTableColumn<DT> | undefined | null) => void, (colKey: string, order: Order, option?: {
+    sortOption?: SortOption<DT>;
+    force?: boolean;
+    silent?: boolean;
+    sort?: boolean;
+    append?: boolean;
+}) => DT[], () => void, () => {
+    key: keyof DT | undefined;
+    order: Order;
+}[], () => void, (colKey: UniqKey) => SortState<DT> | undefined, (dataSource: DT[]) => DT[]];

package/lib/stk-table-vue.js

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v0.11.3
+ * version: v0.11.4
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { createElementBlock, openBlock, createElementVNode, defineComponent, normalizeStyle, createBlock, createCommentVNode, toDisplayString, ref, computed, onMounted, onBeforeUnmount, watch, shallowRef, onUnmounted, nextTick, customRef, provide, toRef, toRaw, normalizeClass, unref, renderSlot, Fragment, renderList, mergeProps, resolveDynamicComponent, withCtx, createTextVNode, createVNode, createApp, markRaw, getCurrentInstance, h } from "vue";
+import { createElementBlock, openBlock, createElementVNode, defineComponent, normalizeStyle, createBlock, createCommentVNode, toDisplayString, ref, computed, onMounted, onBeforeUnmount, watch, shallowRef, onUnmounted, nextTick, customRef, toRaw, provide, toRef, normalizeClass, unref, renderSlot, Fragment, renderList, mergeProps, resolveDynamicComponent, withCtx, createTextVNode, createVNode, createApp, markRaw, getCurrentInstance, h } from "vue";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -2258,7 +2258,7 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
       const headerToBodyRowHeightCount = Math.floor(tableHeaderHeight.value / rowHeight);
       pageSize -= headerToBodyRowHeightCount;
     }
-    const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
+    const maxScrollTop = Math.max(0, dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight);
     if (scrollTop > maxScrollTop) {
       scrollTop = maxScrollTop;
     }
@@ -2306,7 +2306,14 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
     const dataSourceCopyTemp = dataSourceCopy.value;
     const dataLength = dataSourceCopyTemp.length;
     const rowHeight = getRowHeightFn.value();
-    const vsValue = {};
+    const vsValue = {
+      startIndex: 0,
+      // github #34 init
+      endIndex: dataLength,
+      // github #34 init
+      offsetTop: 0
+      // github #34 init
+    };
     const scrollHeight = dataLength * rowHeight + tableHeaderHeight.value;
     const { enabled: scrollbarEnable } = scrollbarOptions.value;
     if (scrollbarEnable) {
@@ -2505,6 +2512,162 @@ function useWheeling(resetDelay = 500) {
   };
   return [get, set];
 }
+const SORT_SWITCH_ORDER = [null, "desc", "asc"];
+function useSorter(props, emits, colKeyGen, tableHeaderLast, dataSourceCopy, initDataSource) {
+  const sortStates = ref([]);
+  const isMultiSort = computed(() => props.sortConfig.multiSort ?? false);
+  const multiSortLimit = computed(() => props.sortConfig.multiSortLimit ?? 3);
+  const sortCol = computed(() => {
+    var _a;
+    return (_a = sortStates.value[0]) == null ? void 0 : _a.dataIndex;
+  });
+  function getColumnSortState(colKey) {
+    return sortStates.value[getSortStateIndex(colKey)];
+  }
+  function getSortStateIndex(colKey) {
+    return sortStates.value.findIndex((s) => s.key === colKey || s.dataIndex === colKey);
+  }
+  function addOrUpdateSortState(newState, mode) {
+    const existingIndex = sortStates.value.findIndex((s) => s.key === newState.key || s.dataIndex === newState.dataIndex);
+    if (existingIndex >= 0) {
+      sortStates.value.splice(existingIndex, 1);
+    }
+    if (mode && isMultiSort.value) {
+      if (sortStates.value.length >= multiSortLimit.value) {
+        sortStates.value.pop();
+      }
+      sortStates.value.unshift(newState);
+    } else {
+      sortStates.value = [newState];
+    }
+  }
+  function updateSortState(col, colKey) {
+    const existingIndex = getSortStateIndex(colKey);
+    let newOrder;
+    if (existingIndex >= 0) {
+      const currentOrder = sortStates.value[existingIndex].order;
+      const currentIndex = SORT_SWITCH_ORDER.indexOf(currentOrder);
+      newOrder = SORT_SWITCH_ORDER[(currentIndex + 1) % 3];
+      if (newOrder === null) {
+        sortStates.value.splice(existingIndex, 1);
+      } else {
+        const updatedState = { ...sortStates.value[existingIndex], order: newOrder };
+        addOrUpdateSortState(updatedState, 1);
+      }
+    } else {
+      newOrder = SORT_SWITCH_ORDER[1];
+      const newState = {
+        key: colKey,
+        dataIndex: col.dataIndex,
+        sortField: col.sortField,
+        sortType: col.sortType,
+        order: newOrder
+      };
+      addOrUpdateSortState(newState, 1);
+    }
+    return newOrder;
+  }
+  function sortData(dataSource) {
+    if (!sortStates.value.length) return dataSource;
+    const sortConfig = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig };
+    let result = dataSource.slice();
+    for (let i = sortStates.value.length - 1; i >= 0; i--) {
+      const state = sortStates.value[i];
+      const col = tableHeaderLast.value.find((c) => state.key && colKeyGen.value(c) === state.key || c.dataIndex === state.dataIndex);
+      if (col && state.order) {
+        const colSortConfig = { ...sortConfig, ...col.sortConfig };
+        result = tableSort(col, state.order, result, colSortConfig);
+      }
+    }
+    return result;
+  }
+  function onColumnSort(col) {
+    if (!col) {
+      console.warn("onColumnSort: not found col:", col);
+      return;
+    }
+    if (!col.sorter) {
+      return;
+    }
+    const colKey = colKeyGen.value(col);
+    let order = updateSortState(col, colKey);
+    const sortConfig = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig, ...col.sortConfig };
+    if (!order && sortConfig.defaultSort) {
+      const defaultColKey = sortConfig.defaultSort.key || sortConfig.defaultSort.dataIndex;
+      if (defaultColKey) {
+        const defaultCol = tableHeaderLast.value.find((item) => colKeyGen.value(item) === defaultColKey);
+        if (defaultCol) {
+          col = defaultCol;
+          order = sortConfig.defaultSort.order;
+          if (order) {
+            addOrUpdateSortState({
+              key: defaultColKey,
+              dataIndex: defaultCol.dataIndex,
+              sortField: defaultCol.sortField,
+              sortType: defaultCol.sortType,
+              order
+            });
+          }
+        }
+      }
+    }
+    if (!props.sortRemote) {
+      initDataSource();
+    }
+    emits("sort-change", col, order, toRaw(dataSourceCopy.value), sortConfig);
+  }
+  function setSorter(colKey, order, option = {}) {
+    var _a;
+    const newOption = { silent: true, sortOption: null, sort: true, append: false, ...option };
+    const colKeyGenValue = colKeyGen.value;
+    let column;
+    if (order) {
+      column = newOption.sortOption || tableHeaderLast.value.find((it) => colKeyGenValue(it) === colKey);
+      if (column) {
+        const newState = {
+          key: colKey,
+          dataIndex: column.dataIndex,
+          sortField: column.sortField,
+          sortType: column.sortType,
+          order
+        };
+        const mode = newOption.append && isMultiSort.value ? 1 : 0;
+        addOrUpdateSortState(newState, mode);
+      }
+    } else {
+      sortStates.value = [];
+    }
+    if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
+      if (!props.sortRemote || newOption.force) {
+        initDataSource(props.dataSource, { forceSort: newOption.force });
+      }
+    }
+    if (!newOption.silent) {
+      if (!column) {
+        column = newOption.sortOption || tableHeaderLast.value.find((it) => colKeyGenValue(it) === colKey);
+      }
+      if (column) {
+        emits("sort-change", column, order, toRaw(dataSourceCopy.value), props.sortConfig);
+      } else {
+        console.warn("Can not find column by key:", colKey);
+      }
+    }
+    return dataSourceCopy.value;
+  }
+  function resetSorter() {
+    sortStates.value = [];
+    initDataSource();
+  }
+  function getSortColumns() {
+    return sortStates.value.map((s) => ({ key: s.key || s.dataIndex, order: s.order }));
+  }
+  function dealDefaultSorter() {
+    if (!props.sortConfig.defaultSort) return;
+    const { key, dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+    setSorter(key || dataIndex, order, { force: false, silent });
+  }
+  return [sortStates, sortCol, onColumnSort, setSorter, resetSorter, getSortColumns, dealDefaultSorter, getColumnSortState, sortData];
+}
 const _hoisted_1 = ["tabindex"];
 const _hoisted_2 = { class: "stk-table-scroll-container" };
 const _hoisted_3 = { key: 0 };
@@ -2622,14 +2785,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const currentSelectedCellKey = ref();
     let currentHoverRow = null;
     const currentHoverRowKey = ref(null);
-    const sortSwitchOrder = [null, "desc", "asc"];
-    const isMultiSort = computed(() => props.sortConfig.multiSort ?? false);
-    const multiSortLimit = computed(() => props.sortConfig.multiSortLimit ?? 3);
-    const sortStates = ref([]);
-    const sortCol = computed(() => {
-      var _a;
-      return (_a = sortStates.value[0]) == null ? void 0 : _a.dataIndex;
-    });
     const [tableHeaders, tableHeadersForCalc, dealColumns] = useTableColumns(props.virtualX, isRelativeMode);
     const filterStatus = ref({});
     const tableHeaderLast = computed(() => tableHeadersForCalc.value.slice(-1)[0] || []);
@@ -2700,6 +2855,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return (_b = props.experimental) == null ? void 0 : _b.scrollY;
     });
     const rowKeyGenCache = /* @__PURE__ */ new WeakMap();
+    const [sortStates, sortCol, onColumnSort, setSorter, resetSorter, getSortColumns, dealDefaultSorter, getColumnSortState, sortData] = useSorter(
+      props,
+      emits,
+      colKeyGen,
+      tableHeaderLast,
+      dataSourceCopy,
+      initDataSource
+    );
     const [isSRBRActive] = useScrollRowByRow(props, tableContainerRef);
     const [onThDragStart, onThDragOver, onThDrop, isHeaderDraggable] = useThDrag(props, emits, colKeyGen);
     const [onTrDragStart, onTrDragEnter, onTrDragOver, onTrDrop, onTrDragEnd] = useTrDrag(props, emits, dataSourceCopy);
@@ -2852,14 +3015,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     function initDataSource(v = props.dataSource, option) {
       let dataSourceTemp = v.slice();
+      if (!props.sortRemote || (option == null ? void 0 : option.forceSort)) {
+        dataSourceTemp = sortData(dataSourceTemp);
+      }
       if (isTreeData.value) {
         dataSourceTemp = flatTreeData(dataSourceTemp);
       }
       dataSourceTemp = filterDataSource(dataSourceTemp);
-      if ((!props.sortRemote || (option == null ? void 0 : option.forceSort)) && sortStates.value.length) {
-        const sortConfig = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig };
-        dataSourceTemp = execMultiSort(dataSourceTemp, sortConfig);
-      }
       dataSourceCopy.value = dataSourceTemp;
     }
     function setFilter(status, option) {
@@ -2881,11 +3043,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         });
       });
     }
-    function dealDefaultSorter() {
-      if (!props.sortConfig.defaultSort) return;
-      const { key, dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
-      setSorter(key || dataIndex, order, { force: false, silent });
-    }
     function handleDealColumns() {
       dealColumns(props.columns);
     }
@@ -3068,99 +3225,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         ...mergeCellsWrapper(row, col, rowIndex, colIndex)
       };
     }
-    function getColumnSortState(colKey) {
-      return sortStates.value[getSortStateIndex(colKey)];
-    }
-    function getSortStateIndex(colKey) {
-      return sortStates.value.findIndex((s) => s.key === colKey || s.dataIndex === colKey);
-    }
-    function addOrUpdateSortState(newState, mode) {
-      const existingIndex = sortStates.value.findIndex((s) => s.key === newState.key || s.dataIndex === newState.dataIndex);
-      if (existingIndex >= 0) {
-        sortStates.value.splice(existingIndex, 1);
-      }
-      if (mode && isMultiSort.value) {
-        if (sortStates.value.length >= multiSortLimit.value) {
-          sortStates.value.pop();
-        }
-        sortStates.value.unshift(newState);
-      } else {
-        sortStates.value = [newState];
-      }
-    }
-    function updateSortState(col, colKey) {
-      const existingIndex = getSortStateIndex(colKey);
-      let newOrder;
-      if (existingIndex >= 0) {
-        const currentOrder = sortStates.value[existingIndex].order;
-        const currentIndex = sortSwitchOrder.indexOf(currentOrder);
-        newOrder = sortSwitchOrder[(currentIndex + 1) % 3];
-        if (newOrder === null) {
-          sortStates.value.splice(existingIndex, 1);
-        } else {
-          const updatedState = { ...sortStates.value[existingIndex], order: newOrder };
-          addOrUpdateSortState(updatedState, 1);
-        }
-      } else {
-        newOrder = sortSwitchOrder[1];
-        const newState = {
-          key: colKey,
-          dataIndex: col.dataIndex,
-          sortField: col.sortField,
-          sortType: col.sortType,
-          order: newOrder
-        };
-        addOrUpdateSortState(newState, 1);
-      }
-      return newOrder;
-    }
-    function execMultiSort(dataSource, sortConfig) {
-      let result = dataSource.slice();
-      for (let i = sortStates.value.length - 1; i >= 0; i--) {
-        const state = sortStates.value[i];
-        const col = tableHeaderLast.value.find((c) => state.key && colKeyGen.value(c) === state.key || c.dataIndex === state.dataIndex);
-        if (col && state.order) {
-          const colSortConfig = { ...sortConfig, ...col.sortConfig };
-          result = tableSort(col, state.order, result, colSortConfig);
-        }
-      }
-      return result;
-    }
-    function onColumnSort(col) {
-      if (!col) {
-        console.warn("onColumnSort: not found col:", col);
-        return;
-      }
-      if (!col.sorter) {
-        return;
-      }
-      const colKey = colKeyGen.value(col);
-      let order = updateSortState(col, colKey);
-      let sortConfig = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig, ...col.sortConfig };
-      if (!order && sortConfig.defaultSort) {
-        const defaultColKey = sortConfig.defaultSort.key || sortConfig.defaultSort.dataIndex;
-        if (defaultColKey) {
-          const defaultCol = tableHeaderLast.value.find((item) => colKeyGen.value(item) === defaultColKey);
-          if (defaultCol) {
-            col = defaultCol;
-            order = sortConfig.defaultSort.order;
-            if (order) {
-              addOrUpdateSortState({
-                key: defaultColKey,
-                dataIndex: defaultCol.dataIndex,
-                sortField: defaultCol.sortField,
-                sortType: defaultCol.sortType,
-                order
-              });
-            }
-          }
-        }
-      }
-      if (!props.sortRemote) {
-        initDataSource();
-      }
-      emits("sort-change", col, order, toRaw(dataSourceCopy.value), sortConfig);
-    }
     function onRowClick(e) {
       var _a, _b;
       const rowIndex = getClosestTrIndex(e.target);
@@ -3300,7 +3364,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         const { scrollTop, scrollLeft } = e.target;
         const { scrollTop: vScrollTop } = virtualScroll.value;
         const { scrollLeft: vScrollLeft } = virtualScrollX.value;
-        const isYScroll = scrollTop !== vScrollTop;
+        const isYScroll = isExperimentalScrollY.value ? false : scrollTop !== vScrollTop;
         const isXScroll = scrollLeft !== vScrollLeft;
         if (isYScroll) {
           updateVirtualScrollY(scrollTop);
@@ -3408,48 +3472,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         );
       }
     }
-    function setSorter(colKey, order, option = {}) {
-      var _a;
-      const newOption = { silent: true, sortOption: null, sort: true, append: false, ...option };
-      const colKeyGenValue = colKeyGen.value;
-      let column;
-      if (order) {
-        column = newOption.sortOption || tableHeaderLast.value.find((it) => colKeyGenValue(it) === colKey);
-        if (column) {
-          const newState = {
-            key: colKey,
-            dataIndex: column.dataIndex,
-            sortField: column.sortField,
-            sortType: column.sortType,
-            order
-          };
-          const mode = newOption.append && isMultiSort.value ? 1 : 0;
-          addOrUpdateSortState(newState, mode);
-        }
-      } else {
-        sortStates.value = [];
-      }
-      if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
-        if (!props.sortRemote || newOption.force) {
-          initDataSource(props.dataSource, { forceSort: newOption.force });
-        }
-      }
-      if (!newOption.silent) {
-        if (!column) {
-          column = newOption.sortOption || tableHeaderLast.value.find((it) => colKeyGenValue(it) === colKey);
-        }
-        if (column) {
-          emits("sort-change", column, order, toRaw(dataSourceCopy.value), props.sortConfig);
-        } else {
-          console.warn("Can not find column by key:", colKey);
-        }
-      }
-      return dataSourceCopy.value;
-    }
-    function resetSorter() {
-      sortStates.value = [];
-      initDataSource();
-    }
     function scrollTo(top = 0, left = 0) {
       if (!tableContainerRef.value) return;
       if (top !== null) tableContainerRef.value.scrollTop = top;
@@ -3458,9 +3480,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     function getTableData() {
       return toRaw(dataSourceCopy.value);
     }
-    function getSortColumns() {
-      return sortStates.value.map((s) => ({ key: s.key || s.dataIndex, order: s.order }));
-    }
     __expose({
       /**
        * 重新计算虚拟列表宽高

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.3
+ * version: v0.11.4
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "description": "High performance 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

@@ -283,8 +283,6 @@ import {
     RowActiveOption,
     SeqConfig,
     SortConfig,
-    SortOption,
-    SortState,
     StkTableColumn,
     TagType,
     TreeConfig,
@@ -309,8 +307,9 @@ import { useTrDrag } from './useTrDrag';
 import { useTree } from './useTree';
 import { useVirtualScroll } from './useVirtualScroll';
 import { useWheeling } from './useWheeling';
+import { useSorter } from './useSorter';
 import { createStkTableId, getCalculatedColWidth } from './utils/constRefUtils';
-import { getClosestColKey, getClosestTr, getClosestTrIndex, isEmptyValue, rafThrottle, tableSort, transformWidthToStr } from './utils/index';
+import { getClosestColKey, getClosestTr, getClosestTrIndex, rafThrottle, transformWidthToStr } from './utils/index';
 import { useAreaSelection } from './features';
 
 /** Generic stands for DataType */
@@ -730,24 +729,6 @@ const currentHoverRowKey = ref<UniqKey | null>(null);
 /** 当前hover的列的key */
 // const currentColHoverKey = ref(null);
 
-/** 排序切换顺序 */
-const sortSwitchOrder: Order[] = [null, 'desc', 'asc'] as const;
-
-/** 是否启用多列排序 */
-const isMultiSort = computed(() => props.sortConfig.multiSort ?? false);
-
-/** 多列排序限制 */
-const multiSortLimit = computed(() => props.sortConfig.multiSortLimit ?? 3);
-
-/**
- * 多列排序状态数组
- * 优先级按数组顺序，越靠前优先级越高（先点击的优先级高）
- */
-const sortStates = ref<SortState<DT>[]>([]);
-
-/** 对外暴露：当前排序的列 key（只读计算属性） */
-const sortCol = computed<keyof DT | undefined>(() => sortStates.value[0]?.dataIndex);
-
 const [tableHeaders, tableHeadersForCalc, dealColumns] = useTableColumns<DT>(props.virtualX, isRelativeMode);
 
 const filterStatus = ref<Record<UniqKey, FilterStatus>>({});
@@ -834,6 +815,16 @@ const isExperimentalScrollY = computed(() => {
 
 const rowKeyGenCache = new WeakMap();
 
+// 使用 useSorter hook 管理排序逻辑
+const [sortStates, sortCol, onColumnSort, setSorter, resetSorter, getSortColumns, dealDefaultSorter, getColumnSortState, sortData] = useSorter<DT>(
+    props,
+    emits,
+    colKeyGen,
+    tableHeaderLast,
+    dataSourceCopy,
+    initDataSource,
+);
+
 const [isSRBRActive] = useScrollRowByRow(props, tableContainerRef);
 
 const [onThDragStart, onThDragOver, onThDrop, isHeaderDraggable] = useThDrag(props, emits, colKeyGen);
@@ -1016,15 +1007,16 @@ onMounted(() => {
 
 function initDataSource(v = props.dataSource, option?: { forceSort?: boolean }) {
     let dataSourceTemp = v.slice(); // shallow copy
+
+    // 排序（tableSort 内部会根据 sortChildren 自动处理树形递归排序）
+    if (!props.sortRemote || option?.forceSort) {
+        dataSourceTemp = sortData(dataSourceTemp);
+    }
+
     if (isTreeData.value) {
-        // only tree data need flat
         dataSourceTemp = flatTreeData(dataSourceTemp);
     }
     dataSourceTemp = filterDataSource(dataSourceTemp);
-    if ((!props.sortRemote || option?.forceSort) && sortStates.value.length) {
-        const sortConfig = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig };
-        dataSourceTemp = execMultiSort(dataSourceTemp, sortConfig);
-    }
     dataSourceCopy.value = dataSourceTemp;
 }
 
@@ -1054,12 +1046,6 @@ function filterDataSource(dataSource: DT[]) {
     });
 }
 
-function dealDefaultSorter() {
-    if (!props.sortConfig.defaultSort) return;
-    const { key, dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
-    setSorter((key || dataIndex) as string, order, { force: false, silent });
-}
-
 /**
  * Wrapper for dealColumns to pass props.columns
  */
@@ -1277,144 +1263,6 @@ function getTDProps(row: PrivateRowDT | null | undefined, col: StkTableColumn<Pr
     };
 }
 
-function getColumnSortState(colKey: UniqKey): SortState<DT> | undefined {
-    return sortStates.value[getSortStateIndex(colKey)];
-}
-/**
- * 获取列的排序状态索引
- */
-function getSortStateIndex(colKey: UniqKey): number {
-    return sortStates.value.findIndex(s => s.key === colKey || s.dataIndex === colKey);
-}
-
-/**
- * 添加或更新排序状态到 sortStates
- * @param newState 新的排序状态
- * @param mode '1' - 追加模式（多列排序），0 - 替换模式（单列排序）
- */
-function addOrUpdateSortState(newState: SortState<DT>, mode?: 1 | 0) {
-    const existingIndex = sortStates.value.findIndex(s => s.key === newState.key || s.dataIndex === newState.dataIndex);
-
-    if (existingIndex >= 0) {
-        // 移除已存在的相同列
-        sortStates.value.splice(existingIndex, 1);
-    }
-
-    if (mode && isMultiSort.value) {
-        // 多列排序模式：检查数量限制，然后添加到最前面
-        if (sortStates.value.length >= multiSortLimit.value) {
-            sortStates.value.pop();
-        }
-        sortStates.value.unshift(newState);
-    } else {
-        sortStates.value = [newState];
-    }
-}
-
-function updateSortState(col: StkTableColumn<DT>, colKey: UniqKey): Order {
-    const existingIndex = getSortStateIndex(colKey);
-    let newOrder: Order;
-
-    if (existingIndex >= 0) {
-        // 已存在该列的排序，切换排序顺序
-        const currentOrder = sortStates.value[existingIndex].order;
-        const currentIndex = sortSwitchOrder.indexOf(currentOrder);
-        newOrder = sortSwitchOrder[(currentIndex + 1) % 3];
-
-        if (newOrder === null) {
-            // 取消排序，从数组中移除
-            sortStates.value.splice(existingIndex, 1);
-        } else {
-            // 更新排序顺序
-            const updatedState = { ...sortStates.value[existingIndex], order: newOrder };
-            addOrUpdateSortState(updatedState, 1);
-        }
-    } else {
-        newOrder = sortSwitchOrder[1];
-
-        const newState: SortState<DT> = {
-            key: colKey,
-            dataIndex: col.dataIndex,
-            sortField: col.sortField,
-            sortType: col.sortType,
-            order: newOrder,
-        };
-
-        addOrUpdateSortState(newState, 1);
-    }
-
-    return newOrder;
-}
-
-/**
- * 执行多列排序
- */
-function execMultiSort(dataSource: DT[], sortConfig: SortConfig<DT>): DT[] {
-    let result = dataSource.slice();
-
-    // 从后往前排序，这样前面的排序优先级更高
-    for (let i = sortStates.value.length - 1; i >= 0; i--) {
-        const state = sortStates.value[i];
-        const col = tableHeaderLast.value.find(c => (state.key && colKeyGen.value(c) === state.key) || c.dataIndex === state.dataIndex);
-        if (col && state.order) {
-            const colSortConfig = { ...sortConfig, ...col.sortConfig };
-            result = tableSort(col, state.order, result, colSortConfig);
-        }
-    }
-
-    return result;
-}
-
-/**
- * 表头点击排序
- *
- * en: Sort a column
- * @param click 是否为点击表头触发
- * @param options.force sort-remote 开启后是否强制排序
- * @param options.emit 是否触发回调
- */
-function onColumnSort(col: StkTableColumn<DT> | undefined | null) {
-    if (!col) {
-        console.warn('onColumnSort: not found col:', col);
-        return;
-    }
-    if (!col.sorter) {
-        // 点击表头触发的排序，如果列没有配置sorter则不处理。setSorter 触发的排序则保持通行。
-        return;
-    }
-    const colKey = colKeyGen.value(col);
-
-    let order = updateSortState(col, colKey);
-    let sortConfig: SortConfig<DT> = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig, ...col.sortConfig };
-
-    // 处理 defaultSort（当取消排序时）
-    if (!order && sortConfig.defaultSort) {
-        const defaultColKey = sortConfig.defaultSort.key || sortConfig.defaultSort.dataIndex;
-        if (defaultColKey) {
-            const defaultCol = tableHeaderLast.value.find(item => colKeyGen.value(item) === defaultColKey);
-            if (defaultCol) {
-                col = defaultCol;
-                order = sortConfig.defaultSort.order;
-                if (order) {
-                    addOrUpdateSortState({
-                        key: defaultColKey,
-                        dataIndex: defaultCol.dataIndex,
-                        sortField: defaultCol.sortField,
-                        sortType: defaultCol.sortType,
-                        order,
-                    });
-                }
-            }
-        }
-    }
-
-    if (!props.sortRemote) {
-        initDataSource();
-    }
-
-    emits('sort-change', col, order, toRaw(dataSourceCopy.value), sortConfig);
-}
-
 function onRowClick(e: MouseEvent) {
     const rowIndex = getClosestTrIndex(e.target as HTMLElement);
     const row = dataSourceCopy.value[rowIndex];
@@ -1591,7 +1439,9 @@ function onTableScroll(e: Event) {
         const { scrollTop, scrollLeft } = e.target as HTMLElement;
         const { scrollTop: vScrollTop } = virtualScroll.value;
         const { scrollLeft: vScrollLeft } = virtualScrollX.value;
-        const isYScroll = scrollTop !== vScrollTop;
+        // 在 experimental.scrollY 模式下，纵向滚动通过 transform 模拟，DOM scrollTop 始终为 0，
+        // 不能用来判断纵向滚动，否则横向滚动时会误触发纵向滚动重置
+        const isYScroll = isExperimentalScrollY.value ? false : scrollTop !== vScrollTop;
         const isXScroll = scrollLeft !== vScrollLeft;
 
         if (isYScroll) {
@@ -1713,69 +1563,6 @@ function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option = { silent:
     }
 }
 
-/**
- * 设置表头排序状态。
- * @param colKey 列唯一键字段。如果你想要取消排序状态，请使用`resetSorter`
- * @param order 正序倒序
- * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
- * @param option.sort 是否触发排序-默认true
- * @param option.silent 是否禁止触发回调-默认true
- * @param option.force 是否触发排序-默认true
- * @param option.append 是否追加排序（多列排序模式）。为true时保留现有排序状态，将新排序添加到最前面；为false时替换所有排序状态
- * @return 表格数据
- */
-function setSorter(
-    colKey: string,
-    order: Order,
-    option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean; append?: boolean } = {},
-) {
-    const newOption = { silent: true, sortOption: null, sort: true, append: false, ...option };
-    const colKeyGenValue = colKeyGen.value;
-    let column: StkTableColumn<DT> | undefined;
-
-    if (order) {
-        column = newOption.sortOption || tableHeaderLast.value.find(it => colKeyGenValue(it) === colKey);
-        if (column) {
-            const newState: SortState<DT> = {
-                key: colKey,
-                dataIndex: column.dataIndex,
-                sortField: column.sortField,
-                sortType: column.sortType,
-                order,
-            };
-
-            const mode = newOption.append && isMultiSort.value ? 1 : 0;
-            addOrUpdateSortState(newState, mode);
-        }
-    } else {
-        sortStates.value = [];
-    }
-
-    if (newOption.sort && dataSourceCopy.value?.length) {
-        if (!props.sortRemote || newOption.force) {
-            initDataSource(props.dataSource, { forceSort: newOption.force });
-        }
-    }
-
-    if (!newOption.silent) {
-        if (!column) {
-            column = newOption.sortOption || tableHeaderLast.value.find(it => colKeyGenValue(it) === colKey);
-        }
-        if (column) {
-            emits('sort-change', column, order, toRaw(dataSourceCopy.value), props.sortConfig);
-        } else {
-            console.warn('Can not find column by key:', colKey);
-        }
-    }
-
-    return dataSourceCopy.value;
-}
-
-function resetSorter() {
-    sortStates.value = [];
-    initDataSource();
-}
-
 /**
  * set scroll bar position
  * @param top null to not change
@@ -1792,14 +1579,6 @@ function getTableData() {
     return toRaw(dataSourceCopy.value);
 }
 
-/**
- * get current sort info
- * @return {{key:string,order:Order}[]}
- */
-function getSortColumns(): { key: keyof DT | undefined; order: Order }[] {
-    return sortStates.value.map(s => ({ key: s.key || s.dataIndex, order: s.order }));
-}
-
 defineExpose({
     /**
      * 重新计算虚拟列表宽高

package/src/StkTable/useSorter.ts

@@ -0,0 +1,262 @@
+import { computed, ref, toRaw, type Ref } from 'vue';
+import { DEFAULT_SORT_CONFIG } from './const';
+import type { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKey } from './types/index';
+import { tableSort } from './utils/index';
+
+/**
+ * 排序切换顺序
+ */
+const SORT_SWITCH_ORDER: Order[] = [null, 'desc', 'asc'] as const;
+
+/**
+ * 排序 Hook
+ * 管理表格排序状态和相关操作
+ * @param props 表格 props
+ * @param colKeyGen 列 key 生成函数
+ * @param tableHeaderLast 表头最后一行（叶子节点）
+ * @param dataSourceCopy 数据源副本 ref
+ * @param initDataSource 初始化数据源函数
+ * @param emits 事件发射函数
+ * @returns 排序相关状态和方法
+ */
+export function useSorter<DT extends Record<string, any>>(
+    props: any,
+    emits: any,
+    colKeyGen: Ref<(col: StkTableColumn<DT>) => string>,
+    tableHeaderLast: Ref<StkTableColumn<DT>[]>,
+    dataSourceCopy: Ref<DT[]>,
+    initDataSource: (data?: DT[], option?: { forceSort?: boolean }) => void,
+) {
+    /** 多列排序状态数组 */
+    const sortStates = ref<SortState<DT>[]>([]);
+
+    /** 是否启用多列排序 */
+    const isMultiSort = computed(() => props.sortConfig.multiSort ?? false);
+
+    /** 多列排序限制 */
+    const multiSortLimit = computed(() => props.sortConfig.multiSortLimit ?? 3);
+
+    /** 对外暴露：当前排序的列 key（只读计算属性） */
+    const sortCol = computed<keyof DT | undefined>(() => sortStates.value[0]?.dataIndex);
+
+    /**
+     * 获取列的排序状态
+     */
+    function getColumnSortState(colKey: UniqKey): SortState<DT> | undefined {
+        return sortStates.value[getSortStateIndex(colKey)] as SortState<DT> | undefined;
+    }
+
+    /**
+     * 获取列的排序状态索引
+     */
+    function getSortStateIndex(colKey: UniqKey): number {
+        return sortStates.value.findIndex(s => s.key === colKey || s.dataIndex === colKey);
+    }
+
+    /**
+     * 添加或更新排序状态到 sortStates
+     * @param newState 新的排序状态
+     * @param mode '1' - 追加模式（多列排序），0 - 替换模式（单列排序）
+     */
+    function addOrUpdateSortState(newState: SortState<DT>, mode?: 1 | 0) {
+        const existingIndex = sortStates.value.findIndex(s => s.key === newState.key || s.dataIndex === newState.dataIndex);
+
+        if (existingIndex >= 0) {
+            // 移除已存在的相同列
+            sortStates.value.splice(existingIndex, 1);
+        }
+
+        if (mode && isMultiSort.value) {
+            // 多列排序模式：检查数量限制，然后添加到最前面
+            if (sortStates.value.length >= multiSortLimit.value) {
+                sortStates.value.pop();
+            }
+            sortStates.value.unshift(newState as any);
+        } else {
+            sortStates.value = [newState as any];
+        }
+    }
+
+    /**
+     * 更新排序状态（点击表头时调用）
+     */
+    function updateSortState(col: StkTableColumn<DT>, colKey: UniqKey): Order {
+        const existingIndex = getSortStateIndex(colKey);
+        let newOrder: Order;
+
+        if (existingIndex >= 0) {
+            // 已存在该列的排序，切换排序顺序
+            const currentOrder = sortStates.value[existingIndex].order;
+            const currentIndex = SORT_SWITCH_ORDER.indexOf(currentOrder);
+            newOrder = SORT_SWITCH_ORDER[(currentIndex + 1) % 3];
+
+            if (newOrder === null) {
+                // 取消排序，从数组中移除
+                sortStates.value.splice(existingIndex, 1);
+            } else {
+                // 更新排序顺序
+                const updatedState = { ...sortStates.value[existingIndex], order: newOrder };
+                addOrUpdateSortState(updatedState as any, 1);
+            }
+        } else {
+            newOrder = SORT_SWITCH_ORDER[1];
+
+            const newState: SortState<DT> = {
+                key: colKey,
+                dataIndex: col.dataIndex,
+                sortField: col.sortField,
+                sortType: col.sortType,
+                order: newOrder,
+            };
+
+            addOrUpdateSortState(newState, 1);
+        }
+
+        return newOrder;
+    }
+
+    /**
+     * 对数据源执行排序
+     * tableSort 内部会根据 sortChildren 配置自动处理树形递归排序
+     */
+    function sortData(dataSource: DT[]): DT[] {
+        if (!sortStates.value.length) return dataSource;
+        
+        const sortConfig = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig };
+        let result = dataSource.slice();
+
+        // 从后往前排序，这样前面的排序优先级更高
+        for (let i = sortStates.value.length - 1; i >= 0; i--) {
+            const state = sortStates.value[i];
+            const col = tableHeaderLast.value.find(c => (state.key && colKeyGen.value(c) === state.key) || c.dataIndex === state.dataIndex);
+            if (col && state.order) {
+                const colSortConfig = { ...sortConfig, ...col.sortConfig };
+                result = tableSort(col, state.order, result, colSortConfig);
+            }
+        }
+
+        return result;
+    }
+
+    /**
+     * 表头点击排序
+     */
+    function onColumnSort(col: StkTableColumn<DT> | undefined | null) {
+        if (!col) {
+            console.warn('onColumnSort: not found col:', col);
+            return;
+        }
+        if (!col.sorter) {
+            // 点击表头触发的排序，如果列没有配置sorter则不处理。setSorter 触发的排序则保持通行。
+            return;
+        }
+        const colKey = colKeyGen.value(col);
+
+        let order = updateSortState(col, colKey);
+        const sortConfig: SortConfig<DT> = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig, ...col.sortConfig };
+
+        // 处理 defaultSort（当取消排序时）
+        if (!order && sortConfig.defaultSort) {
+            const defaultColKey = sortConfig.defaultSort.key || sortConfig.defaultSort.dataIndex;
+            if (defaultColKey) {
+                const defaultCol = tableHeaderLast.value.find(item => colKeyGen.value(item) === defaultColKey);
+                if (defaultCol) {
+                    col = defaultCol;
+                    order = sortConfig.defaultSort.order;
+                    if (order) {
+                        addOrUpdateSortState({
+                            key: defaultColKey,
+                            dataIndex: defaultCol.dataIndex,
+                            sortField: defaultCol.sortField,
+                            sortType: defaultCol.sortType,
+                            order,
+                        });
+                    }
+                }
+            }
+        }
+
+        if (!props.sortRemote) {
+            initDataSource();
+        }
+
+        emits('sort-change', col, order, toRaw(dataSourceCopy.value), sortConfig);
+    }
+
+    /**
+     * 设置表头排序状态
+     */
+    function setSorter(
+        colKey: string,
+        order: Order,
+        option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean; append?: boolean } = {},
+    ): DT[] {
+        const newOption = { silent: true, sortOption: null, sort: true, append: false, ...option };
+        const colKeyGenValue = colKeyGen.value;
+        let column: StkTableColumn<DT> | undefined;
+
+        if (order) {
+            column = newOption.sortOption || tableHeaderLast.value.find(it => colKeyGenValue(it) === colKey);
+            if (column) {
+                const newState: SortState<DT> = {
+                    key: colKey,
+                    dataIndex: column.dataIndex,
+                    sortField: column.sortField,
+                    sortType: column.sortType,
+                    order,
+                };
+
+                const mode = newOption.append && isMultiSort.value ? 1 : 0;
+                addOrUpdateSortState(newState, mode);
+            }
+        } else {
+            sortStates.value = [];
+        }
+
+        if (newOption.sort && dataSourceCopy.value?.length) {
+            if (!props.sortRemote || newOption.force) {
+                initDataSource(props.dataSource, { forceSort: newOption.force });
+            }
+        }
+
+        if (!newOption.silent) {
+            if (!column) {
+                column = newOption.sortOption || tableHeaderLast.value.find(it => colKeyGenValue(it) === colKey);
+            }
+            if (column) {
+                emits('sort-change', column, order, toRaw(dataSourceCopy.value), props.sortConfig);
+            } else {
+                console.warn('Can not find column by key:', colKey);
+            }
+        }
+
+        return dataSourceCopy.value;
+    }
+
+    /**
+     * 重置排序器
+     */
+    function resetSorter() {
+        sortStates.value = [];
+        initDataSource();
+    }
+
+    /**
+     * 获取排序列信息
+     */
+    function getSortColumns(): { key: keyof DT | undefined; order: Order }[] {
+        return sortStates.value.map(s => ({ key: s.key || s.dataIndex, order: s.order }));
+    }
+
+    /**
+     * 处理默认排序
+     */
+    function dealDefaultSorter() {
+        if (!props.sortConfig.defaultSort) return;
+        const { key, dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+        setSorter((key || dataIndex) as string, order, { force: false, silent });
+    }
+
+    // 只返回需要在组件外部使用的方法和状态
+    return [sortStates, sortCol, onColumnSort, setSorter, resetSorter, getSortColumns, dealDefaultSorter, getColumnSortState, sortData] as const;
+}

package/src/StkTable/useVirtualScroll.ts

@@ -212,7 +212,7 @@ export function useVirtualScroll<DT extends Record<string, any>>(
             const headerToBodyRowHeightCount = Math.floor(tableHeaderHeight.value / rowHeight);
             pageSize -= headerToBodyRowHeightCount; //减去表头行数
         }
-        const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
+        const maxScrollTop = Math.max(0, dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight);
         if (scrollTop > maxScrollTop) {
             /** fix： 滚动条不在顶部时，表格数据变少，导致滚动条位置有误 */
             scrollTop = maxScrollTop;
@@ -272,7 +272,11 @@ export function useVirtualScroll<DT extends Record<string, any>>(
         const dataLength = dataSourceCopyTemp.length;
         const rowHeight = getRowHeightFn.value();
 
-        const vsValue: any = {};
+        const vsValue: any = {
+            startIndex: 0, // github #34 init
+            endIndex: dataLength, // github #34 init
+            offsetTop: 0, // github #34 init
+        };
         const scrollHeight = dataLength * rowHeight + tableHeaderHeight.value;
         const { enabled: scrollbarEnable } = scrollbarOptions.value;
         if (scrollbarEnable) {