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

package/lib/stk-table-vue.js

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v0.8.13
+ * 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, customRef, onUnmounted, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, mergeProps, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, withCtx, createVNode } from "vue";
+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) {
@@ -225,6 +225,26 @@ 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;
@@ -1051,6 +1071,133 @@ 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 isAddListeners = false;
   const isDragScroll = customRef((track, trigger) => {
@@ -1742,24 +1889,26 @@ function useVirtualScroll({
     clearAllAutoHeight
   };
 }
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = ["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 = ["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 = ["title"];
-const _hoisted_12 = {
+const _hoisted_11 = ["colspan"];
+const _hoisted_12 = { class: "table-cell-wrapper" };
+const _hoisted_13 = ["title"];
+const _hoisted_14 = {
   key: 3,
   class: "vt-x-right"
 };
@@ -1812,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 }) {
@@ -1886,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 });
@@ -1966,6 +2117,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         nextTick(() => {
           initVirtualScrollX();
           updateFixedShadow();
+          updateCustomScrollbar();
         });
       }
     );
@@ -1995,7 +2147,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     watch(
       () => props.dataSource,
-      (val) => updateDataSource(val)
+      (val) => {
+        updateDataSource(val);
+        nextTick(() => {
+          updateCustomScrollbar();
+        });
+      }
     );
     watch(
       () => props.fixedColShadow,
@@ -2439,6 +2596,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (isXScroll) {
         emits("scroll-x", e);
       }
+      updateCustomScrollbar();
     }
     function onTrMouseOver(e) {
       const tr = getClosestTr(e);
@@ -2700,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
@@ -2722,208 +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 }),
-          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_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))
+        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(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", 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: "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("th", {
+                unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
                   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", 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)
+                  style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
+                  class: "padding-top-tr"
+                }, [
+                  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(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
-                      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", {
+                    unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
+                    row && row.__EXP_R__ ? (openBlock(), createElementBlock("td", {
                       key: 1,
-                      class: "table-header-resizer right",
-                      onMousedown: ($event) => unref(onThResizeMouseDown)($event, col)
-                    }, null, 40, _hoisted_5)) : createCommentVNode("", true)
-                  ], 16, _hoisted_2);
+                      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,
+                            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(virtualX_on) ? (openBlock(), createElementBlock("th", {
+                unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
                   key: 1,
-                  class: "vt-x-right",
-                  style: normalizeStyle(`min-width:${unref(virtualX_offsetRight)}px;width:${unref(virtualX_offsetRight)}px`)
+                  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);
-            }), 128))
-          ])) : createCommentVNode("", true),
-          createElementVNode("tbody", {
-            class: "stk-tbody-main",
-            onClick: onCellClick,
-            onMousedown: onCellMouseDown,
-            onMouseover: onCellMouseOver
-          }, [
-            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) => {
-              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_8)) : createCommentVNode("", true),
-                row && row.__EXP_R__ ? (openBlock(), createElementBlock("td", {
-                  key: 1,
-                  colspan: unref(virtualX_columnPart).length
-                }, [
-                  createElementVNode("div", _hoisted_10, [
-                    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_9)) : (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,
-                        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_11))
-                    ], 16)) : createCommentVNode("", true)
-                  ], 64);
-                }), 256)),
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true)
-              ], 16, _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)
-        ], 38),
+              ], 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[7] || (_cache[7] = 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);
     };
   }