stk-table-vue 0.8.13 → 0.9.0-beta.1

package/lib/stk-table-vue.js

@@ -1,4 +1,12 @@
-import { createElementBlock, openBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, onUnmounted, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, mergeProps, withCtx, createVNode } from "vue";
+/**
+ * name: stk-table-vue
+ * version: v0.9.0-beta.1
+ * 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, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, onUnmounted, nextTick, customRef, defineComponent, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, mergeProps, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, withCtx, createVNode } from "vue";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -203,6 +211,40 @@ function getBrowsersVersion(browserName) {
 function pureCellKeyGen(rowKey, colKey) {
   return rowKey + CELL_KEY_SEPARATE + colKey;
 }
+function getClosestTr(e) {
+  const target = e.target;
+  const tr = target == null ? void 0 : target.closest("tr");
+  return tr;
+}
+function getClosestTrIndex(e) {
+  const tr = getClosestTr(e);
+  if (!tr) return -1;
+  return Number(tr.dataset.rowI);
+}
+function getClosestColKey(e) {
+  var _a, _b;
+  return (_b = (_a = e.target) == null ? void 0 : _a.closest("td")) == null ? void 0 : _b.dataset.colKey;
+}
+function throttle(fn, delay) {
+  let timer;
+  let lastArgs = null;
+  const callFn = function() {
+    if (lastArgs) {
+      fn(...lastArgs);
+      lastArgs = null;
+    }
+  };
+  return function(...args) {
+    lastArgs = args;
+    if (!timer) {
+      callFn();
+      timer = self.setTimeout(() => {
+        callFn();
+        timer = 0;
+      }, delay);
+    }
+  };
+}
 const DEFAULT_COL_WIDTH = "100";
 const DEFAULT_TABLE_HEIGHT = 100;
 const DEFAULT_TABLE_WIDTH = 200;
@@ -483,19 +525,19 @@ function useFixedCol({
     tableHeaders.value.forEach((cols) => {
       cols.forEach((col) => {
         const fixed = col.fixed;
-        const showShadow = fixedColShadow && fixed && fixedShadowColsValue.includes(col);
-        const classObj = {
-          "fixed-cell--active": fixedColsValue.includes(col)
-          // 表示该列正在被固定
-        };
+        const showShadow = fixed && fixedColShadow && fixedShadowColsValue.includes(col);
+        const classList = [];
+        if (fixedColsValue.includes(col)) {
+          classList.push("fixed-cell--active");
+        }
         if (fixed) {
-          classObj["fixed-cell"] = true;
-          classObj["fixed-cell--" + fixed] = true;
+          classList.push("fixed-cell");
+          classList.push("fixed-cell--" + fixed);
         }
         if (showShadow) {
-          classObj["fixed-cell--shadow"] = true;
+          classList.push("fixed-cell--shadow");
         }
-        colMap.set(colKey(col), classObj);
+        colMap.set(colKey(col), classList);
       });
     });
     return colMap;
@@ -686,7 +728,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
   }
   function setHighlightDimCell(rowKeyValue, colKeyValue, option = {}) {
     var _a;
-    const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-cell-key="${pureCellKeyGen(rowKeyValue, colKeyValue)}"]`);
+    const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"] [data-col-key="${colKeyValue}"]`);
     if (!cellEl) return;
     const { className, method, duration, keyframe } = {
       className: HIGHLIGHT_CELL_CLASS,
@@ -920,10 +962,8 @@ function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, v
   function hideCells(rowKey, colKey, colspan, isSelfRow = false, mergeCellKey) {
     const startIndex = tableHeaderLast.value.findIndex((item) => colKeyGen.value(item) === colKey);
     for (let i = startIndex; i < startIndex + colspan; i++) {
-      if (!isSelfRow) {
-        if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
-        hoverRowMap.value[rowKey].add(mergeCellKey);
-      }
+      if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
+      hoverRowMap.value[rowKey].add(mergeCellKey);
       if (isSelfRow && i === startIndex) {
         continue;
       }
@@ -959,7 +999,7 @@ function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, v
   function updateActiveMergedCells(clear, rowKey) {
     if (!rowActiveProp.value.enabled) return;
     if (clear) {
-      activeMergedCells.value.clear();
+      activeMergedCells.value = /* @__PURE__ */ new Set();
       return;
     }
     activeMergedCells.value = rowKey !== void 0 && hoverRowMap.value[rowKey] || new Set(hoverMergedCells.value);
@@ -1031,11 +1071,164 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
     setRowExpand
   };
 }
+function useScrollbar(containerRef, options = false) {
+  const defaultOptions = {
+    enabled: true,
+    minHeight: 20,
+    minWidth: 20,
+    width: 8,
+    height: 8
+  };
+  const mergedOptions = {
+    ...defaultOptions,
+    ...typeof options === "boolean" ? { enabled: options } : options
+  };
+  const showScrollbar = ref({ x: false, y: false });
+  const scrollbar = ref({ h: 0, w: 0, top: 0, left: 0 });
+  let isDraggingVertical = false;
+  let isDraggingHorizontal = false;
+  let dragStartY = 0;
+  let dragStartX = 0;
+  let dragStartTop = 0;
+  let dragStartLeft = 0;
+  let resizeObserver = null;
+  const throttledUpdateScrollbar = throttle(() => {
+    updateCustomScrollbar();
+  }, 200);
+  onMounted(() => {
+    if (mergedOptions.enabled && containerRef.value) {
+      resizeObserver = new ResizeObserver(throttledUpdateScrollbar);
+      resizeObserver.observe(containerRef.value);
+    }
+    initScrollbar();
+  });
+  onUnmounted(() => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+  });
+  function updateCustomScrollbar() {
+    if (!mergedOptions.enabled || !containerRef.value) return;
+    const container = containerRef.value;
+    const { scrollHeight, clientHeight, scrollWidth, clientWidth, scrollTop, scrollLeft } = container;
+    const needVertical = scrollHeight > clientHeight;
+    const needHorizontal = scrollWidth > clientWidth;
+    showScrollbar.value = { x: needHorizontal, y: needVertical };
+    if (needVertical) {
+      const ratio = clientHeight / scrollHeight;
+      scrollbar.value.h = Math.max(mergedOptions.minHeight, ratio * clientHeight);
+      scrollbar.value.top = scrollTop / (scrollHeight - clientHeight) * (clientHeight - scrollbar.value.h);
+    }
+    if (needHorizontal) {
+      const ratio = clientWidth / scrollWidth;
+      scrollbar.value.w = Math.max(mergedOptions.minWidth, ratio * clientWidth);
+      scrollbar.value.left = scrollLeft / (scrollWidth - clientWidth) * (clientWidth - scrollbar.value.w);
+    }
+  }
+  function onVerticalScrollbarMouseDown(e) {
+    e.preventDefault();
+    isDraggingVertical = true;
+    const container = containerRef.value;
+    if (!container) return;
+    dragStartTop = container.scrollTop;
+    dragStartY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+    document.addEventListener("mousemove", onVerticalDrag);
+    document.addEventListener("mouseup", onDragEnd);
+    document.addEventListener("touchmove", onVerticalDrag, { passive: false });
+    document.addEventListener("touchend", onDragEnd);
+  }
+  function onHorizontalScrollbarMouseDown(e) {
+    e.preventDefault();
+    isDraggingHorizontal = true;
+    const container = containerRef.value;
+    if (!container) return;
+    dragStartLeft = container.scrollLeft;
+    dragStartX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+    document.addEventListener("mousemove", onHorizontalDrag);
+    document.addEventListener("mouseup", onDragEnd);
+    document.addEventListener("touchmove", onHorizontalDrag, { passive: false });
+    document.addEventListener("touchend", onDragEnd);
+  }
+  function onVerticalDrag(e) {
+    if (!isDraggingVertical || !containerRef.value) return;
+    e.preventDefault();
+    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+    const deltaY = clientY - dragStartY;
+    const container = containerRef.value;
+    const { scrollHeight, clientHeight } = container;
+    const scrollRange = scrollHeight - clientHeight;
+    const trackRange = clientHeight - scrollbar.value.h;
+    const scrollDelta = deltaY / trackRange * scrollRange;
+    container.scrollTop = dragStartTop + scrollDelta;
+  }
+  function onHorizontalDrag(e) {
+    if (!isDraggingHorizontal || !containerRef.value) return;
+    e.preventDefault();
+    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+    const deltaX = clientX - dragStartX;
+    const container = containerRef.value;
+    const { scrollWidth, clientWidth } = container;
+    const scrollRange = scrollWidth - clientWidth;
+    const trackRange = clientWidth - scrollbar.value.w;
+    const scrollDelta = deltaX / trackRange * scrollRange;
+    container.scrollLeft = dragStartLeft + scrollDelta;
+  }
+  function onDragEnd() {
+    isDraggingVertical = false;
+    isDraggingHorizontal = false;
+    document.removeEventListener("mousemove", onVerticalDrag);
+    document.removeEventListener("mousemove", onHorizontalDrag);
+    document.removeEventListener("mouseup", onDragEnd);
+    document.removeEventListener("touchmove", onVerticalDrag);
+    document.removeEventListener("touchmove", onHorizontalDrag);
+    document.removeEventListener("touchend", onDragEnd);
+  }
+  function initScrollbar() {
+    nextTick(() => {
+      updateCustomScrollbar();
+    });
+  }
+  return {
+    scrollbarOptions: mergedOptions,
+    scrollbar,
+    showScrollbar,
+    onVerticalScrollbarMouseDown,
+    onHorizontalScrollbarMouseDown,
+    updateCustomScrollbar
+  };
+}
 function useScrollRowByRow({ props, tableContainerRef }) {
-  let isMouseDown = false;
   let isAddListeners = false;
-  let lastScrollTop = 0;
-  const isDragScroll = ref(false);
+  const isDragScroll = customRef((track, trigger) => {
+    let value = false;
+    let debounceTimer = 0;
+    return {
+      get() {
+        track();
+        return value;
+      },
+      set(newValue) {
+        if (value && !newValue) {
+          if (debounceTimer) {
+            window.clearTimeout(debounceTimer);
+          }
+          debounceTimer = window.setTimeout(() => {
+            value = newValue;
+            trigger();
+            debounceTimer = 0;
+          }, 300);
+        } else {
+          if (debounceTimer) {
+            window.clearTimeout(debounceTimer);
+            debounceTimer = 0;
+          }
+          value = newValue;
+          trigger();
+        }
+      }
+    };
+  });
   const onlyDragScroll = computed(() => props.scrollRowByRow === "scrollbar");
   const isSRBRActive = computed(() => {
     if (onlyDragScroll.value) {
@@ -1062,7 +1255,6 @@ function useScrollRowByRow({ props, tableContainerRef }) {
     if (!container) return;
     container.addEventListener("mousedown", handleMouseDown);
     container.addEventListener("mouseup", handleMouseUp);
-    container.addEventListener("scroll", handleScroll);
     isAddListeners = true;
   }
   function removeEventListener() {
@@ -1070,22 +1262,16 @@ function useScrollRowByRow({ props, tableContainerRef }) {
     if (!container) return;
     container.removeEventListener("mousedown", handleMouseDown);
     container.removeEventListener("mouseup", handleMouseUp);
-    container.removeEventListener("scroll", handleScroll);
     isAddListeners = false;
   }
   function handleMouseDown(e) {
-    isMouseDown = true;
-    lastScrollTop = e.target.scrollTop;
+    const el = e.target;
+    if (el.classList.contains("stk-table")) {
+      isDragScroll.value = true;
+    }
   }
   function handleMouseUp() {
-    isMouseDown = false;
     isDragScroll.value = false;
-    lastScrollTop = 0;
-  }
-  function handleScroll(e) {
-    const scrollTop = e.target.scrollTop;
-    if (!isMouseDown || scrollTop === lastScrollTop) return;
-    isDragScroll.value = true;
   }
   return { isSRBRActive, isDragScroll };
 }
@@ -1168,11 +1354,6 @@ function useTrDrag({ props, emits, dataSourceCopy }) {
   const dragRowConfig = computed(() => {
     return { mode: "insert", ...props.dragRowConfig };
   });
-  function getClosestTr(e) {
-    const target = e.target;
-    const tr = target == null ? void 0 : target.closest("tr");
-    return tr;
-  }
   function onTrDragStart(e, rowIndex) {
     var _a;
     const tr = getClosestTr(e);
@@ -1708,24 +1889,29 @@ function useVirtualScroll({
     clearAllAutoHeight
   };
 }
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
-const _hoisted_3 = ["onMousedown"];
-const _hoisted_4 = { class: "table-header-title" };
+const _hoisted_1 = { style: { "display": "flex" } };
+const _hoisted_2 = { style: { "display": "flex", "flex-direction": "column" } };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = ["onClick"];
 const _hoisted_5 = ["onMousedown"];
-const _hoisted_6 = {
+const _hoisted_6 = { class: "table-header-title" };
+const _hoisted_7 = ["onMousedown"];
+const _hoisted_8 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_7 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover", "onDrop"];
-const _hoisted_8 = {
+const _hoisted_9 = ["onDrop"];
+const _hoisted_10 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_9 = ["colspan"];
-const _hoisted_10 = { class: "table-cell-wrapper" };
-const _hoisted_11 = ["onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
-const _hoisted_12 = ["title"];
+const _hoisted_11 = ["colspan"];
+const _hoisted_12 = { class: "table-cell-wrapper" };
+const _hoisted_13 = ["title"];
+const _hoisted_14 = {
+  key: 3,
+  class: "vt-x-right"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -1775,7 +1961,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     treeConfig: { default: () => ({}) },
     cellFixedMode: { default: "sticky" },
     smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL },
-    scrollRowByRow: { type: [Boolean, String], default: false }
+    scrollRowByRow: { type: [Boolean, String], default: false },
+    scrollbar: { type: [Boolean, Object], default: false }
   },
   emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "cell-mousedown", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "row-order-change", "col-resize", "toggle-row-expand", "toggle-tree-expand", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1849,6 +2036,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return (containerHeight - tableHeaderHeight.value) % rowHeight;
     });
     const rowKeyGenCache = /* @__PURE__ */ new WeakMap();
+    const { scrollbarOptions, scrollbar, showScrollbar, onVerticalScrollbarMouseDown, onHorizontalScrollbarMouseDown, updateCustomScrollbar } = useScrollbar(tableContainerRef, props.scrollbar);
     const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
     const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
     const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
@@ -1929,6 +2117,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         nextTick(() => {
           initVirtualScrollX();
           updateFixedShadow();
+          updateCustomScrollbar();
         });
       }
     );
@@ -1958,7 +2147,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     watch(
       () => props.dataSource,
-      (val) => updateDataSource(val)
+      (val) => {
+        updateDataSource(val);
+        nextTick(() => {
+          updateCustomScrollbar();
+        });
+      }
     );
     watch(
       () => props.fixedColShadow,
@@ -2117,7 +2311,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     });
     function getRowIndex(rowIndex) {
-      return rowIndex + (virtual_on.value ? virtualScroll.value.startIndex : 0);
+      return rowIndex + virtualScroll.value.startIndex;
     }
     function getHeaderTitle(col) {
       const colKey = colKeyGen.value(col);
@@ -2126,7 +2320,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return col.title || "";
     }
-    function getTDProps(row, col) {
+    function getTRProps(row, index) {
+      var _a, _b;
+      const rowIndex = getRowIndex(index);
+      const rowKey = rowKeyGen(row);
+      let classStr = props.rowClassName(row, rowIndex) || " " + ((row == null ? void 0 : row.__EXP__) ? "expanded" : "") + " " + ((row == null ? void 0 : row.__EXP_R__) ? "expanded-row" : "");
+      if (currentRowKey.value === rowKey || row === currentRow.value) {
+        classStr += " active";
+      }
+      if (props.showTrHoverClass && (rowKey === currentHoverRowKey.value || row === currentHoverRow)) {
+        classStr += " hover";
+      }
+      const result = {
+        id: stkTableId + "-" + rowKey,
+        "data-row-key": rowKey,
+        "data-row-i": rowIndex,
+        class: classStr,
+        style: ""
+      };
+      const needRowHeight = (row == null ? void 0 : row.__EXP_R__) && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height);
+      if (needRowHeight) {
+        result.style = `--row-height: ${(_b = props.expandConfig) == null ? void 0 : _b.height}px`;
+      }
+      return result;
+    }
+    function getTHProps(col) {
+      const colKey = colKeyGen.value(col);
+      return {
+        "data-col-key": colKey,
+        draggable: Boolean(isHeaderDraggable(col)),
+        rowspan: virtualX_on.value ? 1 : col.__R_SP__,
+        colspan: col.__C_SP__,
+        style: cellStyleMap.value[TagType.TH].get(colKey),
+        title: getHeaderTitle(col),
+        class: [
+          col.sorter ? "sortable" : "",
+          colKey === sortCol.value && sortOrderIndex.value !== 0 && "sorter-" + sortSwitchOrder[sortOrderIndex.value],
+          col.headerClassName,
+          fixedColClassMap.value.get(colKey)
+        ]
+      };
+    }
+    function getTDProps(row, col, rowIndex, colIndex) {
       const colKey = colKeyGen.value(col);
       if (!row) {
         return {
@@ -2134,7 +2369,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         };
       }
       const cellKey = cellKeyGen(row, col);
-      const classList = [col.className, fixedColClassMap.value.get(colKeyGen.value(col))];
+      const classList = [col.className, fixedColClassMap.value.get(colKey)];
       if (col.mergeCells) {
         if (hoverMergedCells.value.has(cellKey)) {
           classList.push("cell-hover");
@@ -2148,17 +2383,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       if (col.type === "seq") {
         classList.push("seq-column");
-      } else if (col.type === "expand" && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKeyGen.value(col) : false)) {
+      } else if (col.type === "expand" && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKey : false)) {
         classList.push("expanded");
-      } else if (col.type === "tree-node" && row.__T_EXP__) {
+      } else if (row.__T_EXP__ && col.type === "tree-node") {
         classList.push("tree-expanded");
       } else if (col.type === "dragRow") {
         classList.push("drag-row-cell");
       }
       return {
-        "data-cell-key": cellKey,
+        "data-col-key": colKey,
         style: cellStyleMap.value[TagType.TD].get(colKey),
-        class: classList
+        class: classList,
+        ...mergeCellsWrapper(row, col, rowIndex, colIndex)
       };
     }
     function onColumnSort(col, click = true, options = {}) {
@@ -2216,8 +2452,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emits("sort-change", col, order, toRaw(dataSourceTemp), sortConfig);
       }
     }
-    function onRowClick(e, row, rowIndex) {
+    function onRowClick(e) {
       var _a, _b;
+      const rowIndex = getClosestTrIndex(e);
+      const row = dataSourceCopy.value[rowIndex];
+      if (!row) return;
       emits("row-click", e, row, { rowIndex });
       if ((_b = (_a = rowActiveProp.value).disabled) == null ? void 0 : _b.call(_a, row)) return;
       const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
@@ -2231,13 +2470,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       emits("current-change", e, row, { select: !isCurrentRow });
     }
-    function onRowDblclick(e, row, rowIndex) {
+    function onRowDblclick(e) {
+      const rowIndex = getClosestTrIndex(e);
+      const row = dataSourceCopy.value[rowIndex];
+      if (!row) return;
       emits("row-dblclick", e, row, { rowIndex });
     }
     function onHeaderMenu(e) {
       emits("header-row-menu", e);
     }
-    function onRowMenu(e, row, rowIndex) {
+    function onRowMenu(e) {
+      const rowIndex = getClosestTrIndex(e);
+      const row = dataSourceCopy.value[rowIndex];
+      if (!row) return;
       emits("row-menu", e, row, { rowIndex });
     }
     function triangleClick(e, row, col) {
@@ -2247,7 +2492,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         toggleTreeNode(row, col);
       }
     }
-    function onCellClick(e, row, col, rowIndex) {
+    function onCellClick(e) {
+      const rowIndex = getClosestTrIndex(e);
+      const row = dataSourceCopy.value[rowIndex];
+      if (!row) return;
+      const colKey = getClosestColKey(e);
+      const col = tableHeaderLast.value.find((item) => colKeyGen.value(item) === colKey);
+      if (!col) return;
       if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
         const result = { row, col, select: false, rowIndex };
@@ -2261,19 +2512,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       emits("cell-click", e, row, col, { rowIndex });
     }
+    function getCellEventData(e) {
+      const rowIndex = getClosestTrIndex(e) || 0;
+      const row = dataSourceCopy.value[rowIndex];
+      const colKey = getClosestColKey(e);
+      const col = tableHeaderLast.value.find((item) => colKeyGen.value(item) === colKey);
+      return { row, col, rowIndex };
+    }
     function onHeaderCellClick(e, col) {
+      onColumnSort(col);
       emits("header-cell-click", e, col);
     }
-    function onCellMouseEnter(e, row, col) {
+    function onCellMouseEnter(e) {
+      const { row, col } = getCellEventData(e);
       emits("cell-mouseenter", e, row, col);
     }
-    function onCellMouseLeave(e, row, col) {
+    function onCellMouseLeave(e) {
+      const { row, col } = getCellEventData(e);
       emits("cell-mouseleave", e, row, col);
     }
-    function onCellMouseOver(e, row, col) {
+    function onCellMouseOver(e) {
+      const { row, col } = getCellEventData(e);
       emits("cell-mouseover", e, row, col);
     }
-    function onCellMouseDown(e, row, col, rowIndex) {
+    function onCellMouseDown(e) {
+      const { row, col, rowIndex } = getCellEventData(e);
       emits("cell-mousedown", e, row, col, { rowIndex });
     }
     function onTableWheel(e) {
@@ -2285,20 +2548,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       const dom = tableContainerRef.value;
-      if (!dom) return;
-      if (!virtual_on.value && !virtualX_on.value) return;
-      const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
-      const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
-      const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
-      const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
+      if (!virtual_on.value && !virtualX_on.value || !dom) return;
       const { deltaY, deltaX, shiftKey } = e;
       if (virtual_on.value && deltaY && !shiftKey) {
+        const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
+        const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
         if (deltaY > 0 && !isScrollBottom || deltaY < 0 && scrollTop > 0) {
           e.preventDefault();
         }
         dom.scrollTop += deltaY;
       }
       if (virtualX_on.value) {
+        const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
+        const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
         let distance = deltaX;
         if (shiftKey && deltaY) {
           distance = deltaY;
@@ -2334,13 +2596,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (isXScroll) {
         emits("scroll-x", e);
       }
+      updateCustomScrollbar();
     }
-    function onTrMouseOver(_e, row) {
+    function onTrMouseOver(e) {
+      const tr = getClosestTr(e);
+      if (!tr) return;
+      const rowIndex = Number(tr.dataset.rowI);
+      const row = dataSourceCopy.value[rowIndex];
       if (currentHoverRow === row) return;
       currentHoverRow = row;
-      const rowKey = rowKeyGen(row);
+      const rowKey = tr.dataset.rowKey;
       if (props.showTrHoverClass) {
-        currentHoverRowKey.value = rowKey;
+        currentHoverRowKey.value = rowKey || null;
       }
       if (props.rowHover) {
         updateHoverMergedCells(rowKey);
@@ -2591,13 +2858,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "header-text-overflow": props.showHeaderOverflow,
           "fixed-relative-mode": isRelativeMode.value,
           "auto-row-height": props.autoRowHeight,
-          "scroll-row-by-row": unref(isSRBRActive)
+          "scroll-row-by-row": unref(isSRBRActive),
+          "scrollbar-on": unref(scrollbarOptions).enabled
         }]),
         style: normalizeStyle({
           "--row-height": props.autoRowHeight ? void 0 : unref(virtualScroll).rowHeight + "px",
           "--header-row-height": props.headerRowHeight + "px",
           "--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s",
-          "--highlight-timing-function": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : ""
+          "--highlight-timing-function": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : "",
+          "--sb-width": `${unref(scrollbarOptions).width}px`,
+          "--sb-height": `${unref(scrollbarOptions).height}px`
         }),
         onScroll: onTableScroll,
         onWheel: onTableWheel
@@ -2613,239 +2883,238 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref: colResizeIndicatorRef,
           class: "column-resize-indicator"
         }, null, 512)) : createCommentVNode("", true),
-        createElementVNode("table", {
-          class: normalizeClass(["stk-table-main", {
-            "fixed-mode": props.fixedMode
-          }]),
-          style: normalizeStyle({ width: __props.width, minWidth: __props.minWidth, maxWidth: __props.maxWidth })
-        }, [
-          !__props.headless ? (openBlock(), createElementBlock("thead", _hoisted_1, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
-              return openBlock(), createElementBlock("tr", {
-                key: rowIndex,
-                onContextmenu: _cache[3] || (_cache[3] = ($event) => onHeaderMenu($event))
-              }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
-                  key: 0,
-                  class: "vt-x-left",
-                  style: normalizeStyle(`min-width:${unref(virtualScrollX).offsetLeft}px;width:${unref(virtualScrollX).offsetLeft}px`)
-                }, 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: colKeyGen.value(col),
-                    "data-col-key": colKeyGen.value(col),
-                    draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
-                    rowspan: unref(virtualX_on) ? 1 : col.__R_SP__,
-                    colspan: col.__C_SP__,
-                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TH].get(colKeyGen.value(col))),
-                    title: getHeaderTitle(col),
-                    class: normalizeClass([
-                      col.sorter ? "sortable" : "",
-                      colKeyGen.value(col) === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
-                      col.headerClassName,
-                      unref(fixedColClassMap).get(colKeyGen.value(col))
-                    ]),
-                    onClick: (e) => {
-                      onColumnSort(col);
-                      onHeaderCellClick(e, col);
-                    },
-                    onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
-                    (...args) => unref(onThDragStart) && unref(onThDragStart)(...args)),
-                    onDrop: _cache[1] || (_cache[1] = //@ts-ignore
-                    (...args) => unref(onThDrop) && unref(onThDrop)(...args)),
-                    onDragover: _cache[2] || (_cache[2] = //@ts-ignore
-                    (...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("table", {
+              class: normalizeClass(["stk-table-main", {
+                "fixed-mode": props.fixedMode
+              }]),
+              style: normalizeStyle({ width: __props.width, minWidth: __props.minWidth, maxWidth: __props.maxWidth }),
+              onDragover: _cache[4] || (_cache[4] = //@ts-ignore
+              (...args) => unref(onTrDragOver) && unref(onTrDragOver)(...args)),
+              onDragenter: _cache[5] || (_cache[5] = //@ts-ignore
+              (...args) => unref(onTrDragEnter) && unref(onTrDragEnter)(...args)),
+              onDragend: _cache[6] || (_cache[6] = //@ts-ignore
+              (...args) => unref(onTrDragEnd) && unref(onTrDragEnd)(...args)),
+              onClick: onRowClick,
+              onDblclick: onRowDblclick,
+              onContextmenu: onRowMenu,
+              onMouseover: onTrMouseOver
+            }, [
+              !__props.headless ? (openBlock(), createElementBlock("thead", _hoisted_3, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
+                  return openBlock(), createElementBlock("tr", {
+                    key: rowIndex,
+                    onContextmenu: _cache[3] || (_cache[3] = ($event) => onHeaderMenu($event))
                   }, [
-                    unref(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
+                    unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
                       key: 0,
-                      class: "table-header-resizer left",
-                      onMousedown: ($event) => unref(onThResizeMouseDown)($event, col, true)
-                    }, null, 40, _hoisted_3)) : createCommentVNode("", true),
-                    createElementVNode("div", {
-                      class: "table-header-cell-wrapper",
-                      style: normalizeStyle({ "--row-span": unref(virtualX_on) ? 1 : col.__R_SP__ })
-                    }, [
-                      col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
-                        key: 0,
-                        col,
-                        colIndex,
-                        rowIndex
-                      }, null, 8, ["col", "colIndex", "rowIndex"])) : renderSlot(_ctx.$slots, "tableHeader", {
-                        key: 1,
-                        col
-                      }, () => [
-                        createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
-                      ]),
-                      col.sorter ? (openBlock(), createBlock(SortIcon, {
-                        key: 2,
-                        class: "table-header-sorter"
-                      })) : createCommentVNode("", true)
-                    ], 4),
-                    unref(colResizeOn)(col) ? (openBlock(), createElementBlock("div", {
+                      class: "vt-x-left",
+                      style: normalizeStyle(`min-width:${unref(virtualScrollX).offsetLeft}px;width:${unref(virtualScrollX).offsetLeft}px`)
+                    }, 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", mergeProps({
+                        key: colKeyGen.value(col)
+                      }, { ref_for: true }, getTHProps(col), {
+                        onClick: (e) => onHeaderCellClick(e, col),
+                        onDragstart: _cache[0] || (_cache[0] = ($event) => __props.headerDrag ? unref(onThDragStart) : void 0),
+                        onDrop: _cache[1] || (_cache[1] = ($event) => __props.headerDrag ? unref(onThDrop) : void 0),
+                        onDragover: _cache[2] || (_cache[2] = ($event) => __props.headerDrag ? unref(onThDragOver) : void 0)
+                      }), [
+                        unref(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
+                          key: 0,
+                          class: "table-header-resizer left",
+                          onMousedown: ($event) => unref(onThResizeMouseDown)($event, col, true)
+                        }, null, 40, _hoisted_5)) : createCommentVNode("", true),
+                        createElementVNode("div", {
+                          class: "table-header-cell-wrapper",
+                          style: normalizeStyle(`--row-span:${unref(virtualX_on) ? 1 : col.__R_SP__}`)
+                        }, [
+                          col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
+                            key: 0,
+                            col,
+                            colIndex,
+                            rowIndex
+                          }, null, 8, ["col", "colIndex", "rowIndex"])) : renderSlot(_ctx.$slots, "tableHeader", {
+                            key: 1,
+                            col
+                          }, () => [
+                            createElementVNode("span", _hoisted_6, toDisplayString(col.title), 1)
+                          ]),
+                          col.sorter ? (openBlock(), createBlock(SortIcon, {
+                            key: 2,
+                            class: "table-header-sorter"
+                          })) : createCommentVNode("", true)
+                        ], 4),
+                        unref(colResizeOn)(col) ? (openBlock(), createElementBlock("div", {
+                          key: 1,
+                          class: "table-header-resizer right",
+                          onMousedown: ($event) => unref(onThResizeMouseDown)($event, col)
+                        }, null, 40, _hoisted_7)) : createCommentVNode("", true)
+                      ], 16, _hoisted_4);
+                    }), 128)),
+                    unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
                       key: 1,
-                      class: "table-header-resizer right",
-                      onMousedown: ($event) => unref(onThResizeMouseDown)($event, col)
-                    }, null, 40, _hoisted_5)) : createCommentVNode("", true)
-                  ], 46, _hoisted_2);
-                }), 128)),
-                unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
-                  key: 1,
-                  class: "vt-x-right",
-                  style: normalizeStyle(`min-width:${unref(virtualX_offsetRight)}px;width:${unref(virtualX_offsetRight)}px`)
-                }, null, 4)) : createCommentVNode("", true)
-              ], 32);
-            }), 128))
-          ])) : createCommentVNode("", true),
-          createElementVNode("tbody", {
-            class: "stk-tbody-main",
-            onDragover: _cache[5] || (_cache[5] = //@ts-ignore
-            (...args) => unref(onTrDragOver) && unref(onTrDragOver)(...args)),
-            onDragenter: _cache[6] || (_cache[6] = //@ts-ignore
-            (...args) => unref(onTrDragEnter) && unref(onTrDragEnter)(...args)),
-            onDragend: _cache[7] || (_cache[7] = //@ts-ignore
-            (...args) => unref(onTrDragEnd) && unref(onTrDragEnd)(...args))
-          }, [
-            unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
-              key: 0,
-              style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
-              class: "padding-top-tr"
-            }, [
-              unref(virtualX_on) && __props.fixedMode && __props.headless ? (openBlock(), createElementBlock("td", _hoisted_6)) : createCommentVNode("", true),
-              __props.fixedMode && __props.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
-                return openBlock(), createElementBlock("td", {
-                  key: colKeyGen.value(col),
-                  style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
-                }, null, 4);
-              }), 128)) : createCommentVNode("", true)
-            ], 4)) : createCommentVNode("", true),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
-              var _a, _b;
-              return openBlock(), createElementBlock("tr", {
-                id: unref(stkTableId) + "-" + (__props.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)),
-                ref_for: true,
-                ref_key: "trRef",
-                ref: trRef,
-                key: __props.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
-                "data-row-key": __props.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
-                class: normalizeClass({
-                  active: __props.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
-                  hover: props.showTrHoverClass && (__props.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
-                  [__props.rowClassName(row, getRowIndex(rowIndex)) || ""]: true,
-                  expanded: row && row.__EXP__,
-                  "expanded-row": row && row.__EXP_R__
-                }),
-                style: normalizeStyle({
-                  "--row-height": row && row.__EXP_R__ && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
-                }),
-                onClick: ($event) => onRowClick($event, row, getRowIndex(rowIndex)),
-                onDblclick: ($event) => onRowDblclick($event, row, getRowIndex(rowIndex)),
-                onContextmenu: ($event) => onRowMenu($event, row, getRowIndex(rowIndex)),
-                onMouseover: ($event) => onTrMouseOver($event, row),
-                onMouseleave: _cache[4] || (_cache[4] = ($event) => onTrMouseLeave($event)),
-                onDrop: ($event) => unref(onTrDrop)($event, getRowIndex(rowIndex))
+                      class: "vt-x-right",
+                      style: normalizeStyle(`min-width:${unref(virtualX_offsetRight)}px;width:${unref(virtualX_offsetRight)}px`)
+                    }, null, 4)) : createCommentVNode("", true)
+                  ], 32);
+                }), 128))
+              ])) : createCommentVNode("", true),
+              createElementVNode("tbody", {
+                class: "stk-tbody-main",
+                onClick: onCellClick,
+                onMousedown: onCellMouseDown,
+                onMouseover: onCellMouseOver
               }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_8)) : createCommentVNode("", true),
-                row && row.__EXP_R__ ? (openBlock(), createElementBlock("td", {
-                  key: 1,
-                  colspan: unref(virtualX_columnPart).length
+                unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
+                  key: 0,
+                  style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
+                  class: "padding-top-tr"
                 }, [
-                  createElementVNode("div", _hoisted_10, [
-                    renderSlot(_ctx.$slots, "expand", {
-                      row: row.__EXP_R__,
-                      col: row.__EXP_C__
-                    }, () => {
-                      var _a2;
-                      return [
-                        createTextVNode(toDisplayString(((_a2 = row.__EXP_R__) == null ? void 0 : _a2[row.__EXP_C__.dataIndex]) ?? ""), 1)
-                      ];
-                    })
-                  ])
-                ], 8, _hoisted_9)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
-                  var _a2;
-                  return openBlock(), createElementBlock(Fragment, null, [
-                    !((_a2 = unref(hiddenCellMap)[rowKeyGen(row)]) == null ? void 0 : _a2.has(colKeyGen.value(col))) ? (openBlock(), createElementBlock("td", mergeProps({
-                      key: colKeyGen.value(col)
-                    }, { ref_for: true }, {
-                      ...getTDProps(row, col),
-                      ...unref(mergeCellsWrapper)(row, col, rowIndex, colIndex)
-                    }, {
-                      onClick: ($event) => onCellClick($event, row, col, getRowIndex(rowIndex)),
-                      onMousedown: ($event) => onCellMouseDown($event, row, col, getRowIndex(rowIndex)),
-                      onMouseenter: ($event) => onCellMouseEnter($event, row, col),
-                      onMouseleave: ($event) => onCellMouseLeave($event, row, col),
-                      onMouseover: ($event) => onCellMouseOver($event, row, col)
-                    }), [
-                      col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
-                        key: 0,
-                        class: "table-cell-wrapper",
-                        col,
-                        row,
-                        rowIndex: getRowIndex(rowIndex),
-                        colIndex,
-                        cellValue: row && row[col.dataIndex],
-                        expanded: row && row.__EXP__,
-                        "tree-expanded": row && row.__T_EXP__
-                      }, {
-                        stkFoldIcon: withCtx(() => [
-                          createVNode(TriangleIcon, {
-                            onClick: ($event) => triangleClick($event, row, col)
-                          }, null, 8, ["onClick"])
-                        ]),
-                        stkDragIcon: withCtx(() => [
-                          createVNode(DragHandle, {
-                            onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
-                          }, null, 8, ["onDragstart"])
-                        ]),
-                        _: 2
-                      }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock("div", {
-                        key: 1,
-                        class: "table-cell-wrapper",
-                        title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : "",
-                        style: normalizeStyle(col.type === "tree-node" ? { paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + "px" } : {})
-                      }, [
-                        col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                          createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
-                        ], 64)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                          createVNode(DragHandle, {
-                            onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
-                          }, null, 8, ["onDragstart"]),
-                          createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
-                        ], 64)) : col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                          col.type === "expand" || col.type === "tree-node" && row.children !== void 0 ? (openBlock(), createBlock(TriangleIcon, {
+                  unref(virtualX_on) && __props.fixedMode && __props.headless ? (openBlock(), createElementBlock("td", _hoisted_8)) : createCommentVNode("", true),
+                  __props.fixedMode && __props.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
+                    return openBlock(), createElementBlock("td", {
+                      key: colKeyGen.value(col),
+                      style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
+                    }, null, 4);
+                  }), 128)) : createCommentVNode("", true)
+                ], 4)) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
+                  return openBlock(), createElementBlock("tr", mergeProps({
+                    ref_for: true,
+                    ref_key: "trRef",
+                    ref: trRef,
+                    key: rowKeyGen(row)
+                  }, { ref_for: true }, getTRProps(row, rowIndex), {
+                    onDrop: ($event) => unref(onTrDrop)($event, getRowIndex(rowIndex)),
+                    onMouseleave: onTrMouseLeave
+                  }), [
+                    unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
+                    row && row.__EXP_R__ ? (openBlock(), createElementBlock("td", {
+                      key: 1,
+                      colspan: unref(virtualX_columnPart).length
+                    }, [
+                      createElementVNode("div", _hoisted_12, [
+                        renderSlot(_ctx.$slots, "expand", {
+                          row: row.__EXP_R__,
+                          col: row.__EXP_C__
+                        }, () => {
+                          var _a;
+                          return [
+                            createTextVNode(toDisplayString(((_a = row.__EXP_R__) == null ? void 0 : _a[row.__EXP_C__.dataIndex]) ?? ""), 1)
+                          ];
+                        })
+                      ])
+                    ], 8, _hoisted_11)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
+                      var _a;
+                      return openBlock(), createElementBlock(Fragment, null, [
+                        !((_a = unref(hiddenCellMap)[rowKeyGen(row)]) == null ? void 0 : _a.has(colKeyGen.value(col))) ? (openBlock(), createElementBlock("td", mergeProps({
+                          key: colKeyGen.value(col)
+                        }, { ref_for: true }, getTDProps(row, col, rowIndex, colIndex), {
+                          onMouseenter: onCellMouseEnter,
+                          onMouseleave: onCellMouseLeave
+                        }), [
+                          col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
                             key: 0,
-                            onClick: ($event) => triangleClick($event, row, col)
-                          }, null, 8, ["onClick"])) : createCommentVNode("", true),
-                          createElementVNode("span", {
-                            style: normalizeStyle(col.type === "tree-node" && !row.children ? "padding-left: 16px;" : "")
-                          }, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 5)
-                        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-                          createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
-                        ], 64))
-                      ], 12, _hoisted_12))
-                    ], 16, _hoisted_11)) : createCommentVNode("", true)
-                  ], 64);
-                }), 256))
-              ], 46, _hoisted_7);
-            }), 128)),
-            unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
-              key: 1,
-              style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
-            }, null, 4)) : createCommentVNode("", true),
-            SRBRBottomHeight.value ? (openBlock(), createElementBlock("tr", {
-              key: 2,
-              style: normalizeStyle(`height: ${SRBRBottomHeight.value}px`)
-            }, null, 4)) : createCommentVNode("", true)
-          ], 32)
-        ], 6),
+                            class: "table-cell-wrapper",
+                            col,
+                            row,
+                            rowIndex: getRowIndex(rowIndex),
+                            colIndex,
+                            cellValue: row && row[col.dataIndex],
+                            expanded: row && row.__EXP__,
+                            "tree-expanded": row && row.__T_EXP__
+                          }, {
+                            stkFoldIcon: withCtx(() => [
+                              createVNode(TriangleIcon, {
+                                onClick: ($event) => triangleClick($event, row, col)
+                              }, null, 8, ["onClick"])
+                            ]),
+                            stkDragIcon: withCtx(() => [
+                              createVNode(DragHandle, {
+                                onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
+                              }, null, 8, ["onDragstart"])
+                            ]),
+                            _: 2
+                          }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock("div", {
+                            key: 1,
+                            class: "table-cell-wrapper",
+                            title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : "",
+                            style: normalizeStyle(col.type === "tree-node" && row.__T_LV__ ? `padding-left:${row.__T_LV__ * 16}px` : "")
+                          }, [
+                            col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                              createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
+                            ], 64)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                              createVNode(DragHandle, {
+                                onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
+                              }, null, 8, ["onDragstart"]),
+                              createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
+                            ], 64)) : col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                              col.type === "expand" || col.type === "tree-node" && row.children !== void 0 ? (openBlock(), createBlock(TriangleIcon, {
+                                key: 0,
+                                onClick: ($event) => triangleClick($event, row, col)
+                              }, null, 8, ["onClick"])) : createCommentVNode("", true),
+                              createElementVNode("span", {
+                                style: normalizeStyle(col.type === "tree-node" && !row.children ? "padding-left: 16px;" : "")
+                              }, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 5)
+                            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                              createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
+                            ], 64))
+                          ], 12, _hoisted_13))
+                        ], 16)) : createCommentVNode("", true)
+                      ], 64);
+                    }), 256)),
+                    unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_14)) : createCommentVNode("", true)
+                  ], 16, _hoisted_9);
+                }), 128)),
+                unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
+                  key: 1,
+                  style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
+                }, null, 4)) : createCommentVNode("", true),
+                SRBRBottomHeight.value ? (openBlock(), createElementBlock("tr", {
+                  key: 2,
+                  style: normalizeStyle(`height: ${SRBRBottomHeight.value}px`)
+                }, null, 4)) : createCommentVNode("", true)
+              ], 32)
+            ], 38),
+            renderSlot(_ctx.$slots, "customBottom")
+          ]),
+          unref(showScrollbar).y ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            ref: "verticalScrollbarRef",
+            class: "stk-sb-thumb vertical",
+            style: normalizeStyle({
+              height: `${unref(scrollbar).h}px`,
+              transform: `translateY(${unref(scrollbar).top}px)`
+            }),
+            onMousedown: _cache[7] || (_cache[7] = //@ts-ignore
+            (...args) => unref(onVerticalScrollbarMouseDown) && unref(onVerticalScrollbarMouseDown)(...args)),
+            onTouchstart: _cache[8] || (_cache[8] = //@ts-ignore
+            (...args) => unref(onVerticalScrollbarMouseDown) && unref(onVerticalScrollbarMouseDown)(...args))
+          }, null, 36)) : createCommentVNode("", true)
+        ]),
         (!dataSourceCopy.value || !dataSourceCopy.value.length) && __props.showNoData ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: normalizeClass(["stk-table-no-data", { "no-data-full": __props.noDataFull }])
         }, [
           renderSlot(_ctx.$slots, "empty", {}, () => [
-            _cache[8] || (_cache[8] = createTextVNode("暂无数据", -1))
+            _cache[11] || (_cache[11] = createTextVNode("暂无数据", -1))
           ])
         ], 2)) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "customBottom")
+        unref(showScrollbar).x ? (openBlock(), createElementBlock("div", {
+          key: 3,
+          ref: "horizontalScrollbarRef",
+          class: "stk-sb-thumb horizontal",
+          style: normalizeStyle({
+            width: `${unref(scrollbar).w}px`,
+            transform: `translateX(${unref(scrollbar).left}px)`
+          }),
+          onMousedown: _cache[9] || (_cache[9] = //@ts-ignore
+          (...args) => unref(onHorizontalScrollbarMouseDown) && unref(onHorizontalScrollbarMouseDown)(...args)),
+          onTouchstart: _cache[10] || (_cache[10] = //@ts-ignore
+          (...args) => unref(onHorizontalScrollbarMouseDown) && unref(onHorizontalScrollbarMouseDown)(...args))
+        }, null, 36)) : createCommentVNode("", true)
       ], 38);
     };
   }