stk-table-vue 0.0.2 → 0.1.0

package/lib/stk-table-vue.js

@@ -1,5 +1,25 @@
 import { onMounted, onBeforeUnmount, watch, ref, computed, defineComponent, shallowRef, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
+const Default_Col_Width = "100";
+const Default_Table_Height = 100;
+const Default_Table_Width = 200;
+const Default_Row_Height = 28;
+const Highlight_Color = {
+  light: { from: "#71a2fd", to: "#fff" },
+  dark: { from: "#1e4c99", to: "#181c21" }
+};
+const Highlight_Duration = 2e3;
+const Highlight_Color_Change_Freq = 100;
+let _chromeVersion = 0;
+try {
+  const userAgent = navigator.userAgent.match(/chrome\/\d+/i);
+  if (userAgent) {
+    _chromeVersion = +userAgent[0].split("/")[1];
+  }
+} catch (e) {
+  console.error("Cannot get Chrome version", e);
+}
+const Is_Legacy_Mode = _chromeVersion < 56;
 function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }) {
   let resizeObserver = null;
   onMounted(() => {
@@ -50,25 +70,6 @@ function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, deb
     }, debounceMs);
   }
 }
-const Default_Col_Width = "100";
-const Default_Table_Height = 100;
-const Default_Table_Width = 200;
-const Highlight_Color = {
-  light: { from: "#71a2fd", to: "#fff" },
-  dark: { from: "#1e4c99", to: "#181c21" }
-};
-const Highlight_Duration = 2e3;
-const Highlight_Color_Change_Freq = 100;
-let _chromeVersion = 0;
-try {
-  const userAgent = navigator.userAgent.match(/chrome\/\d+/i);
-  if (userAgent) {
-    _chromeVersion = +userAgent[0].split("/")[1];
-  }
-} catch (e) {
-  console.error("Cannot get Chrome version", e);
-}
-const Is_Legacy_Mode = _chromeVersion < 56;
 function useColResize({
   tableContainer,
   tableHeaderLast,
@@ -360,8 +361,8 @@ function useHighlight({ props, tableContainer, rowKeyGen }) {
     setHighlightDimCell
   };
 }
-const ARROW_CODES = ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"];
-function useKeyboardArrowScroll(targetElement, { scrollTo, virtualScroll, virtualScrollX }) {
+const SCROLL_CODES = ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft", "PageUp", "PageDown"];
+function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders }) {
   let isMouseOver = false;
   onMounted(() => {
     var _a, _b, _c;
@@ -378,21 +379,27 @@ function useKeyboardArrowScroll(targetElement, { scrollTo, virtualScroll, virtua
     (_c = targetElement.value) == null ? void 0 : _c.removeEventListener("mousedown", handleMouseDown);
   });
   function handleKeydown(e) {
-    if (!ARROW_CODES.includes(e.code))
+    if (!SCROLL_CODES.includes(e.code))
       return;
     if (!isMouseOver)
       return;
     e.preventDefault();
-    const { scrollTop, rowHeight } = virtualScroll.value;
+    const { scrollTop, rowHeight, pageSize } = virtualScroll.value;
     const { scrollLeft } = virtualScrollX.value;
-    if (e.code === ARROW_CODES[0]) {
+    const { headless, headerRowHeight } = props;
+    const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+    if (e.code === SCROLL_CODES[0]) {
       scrollTo(scrollTop - rowHeight, null);
-    } else if (e.code === ARROW_CODES[1]) {
+    } else if (e.code === SCROLL_CODES[1]) {
       scrollTo(null, scrollLeft + rowHeight);
-    } else if (e.code === ARROW_CODES[2]) {
+    } else if (e.code === SCROLL_CODES[2]) {
       scrollTo(scrollTop + rowHeight, null);
-    } else if (e.code === ARROW_CODES[3]) {
+    } else if (e.code === SCROLL_CODES[3]) {
       scrollTo(null, scrollLeft - rowHeight);
+    } else if (e.code === SCROLL_CODES[4]) {
+      scrollTo(scrollTop - rowHeight * pageSize - headerHeight, null);
+    } else if (e.code === SCROLL_CODES[5]) {
+      scrollTo(scrollTop + rowHeight * pageSize - headerHeight, null);
     }
   }
   function handleMouseEnter() {
@@ -469,7 +476,7 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
     return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
   });
   const virtualX_on = computed(() => {
-    return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getCalcWidth(col), 0) > virtualScrollX.value.containerWidth * 1.5;
+    return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getCalcWidth(col), 0) > virtualScrollX.value.containerWidth + 100;
   });
   const virtualX_columnPart = computed(() => {
     if (virtualX_on.value) {
@@ -696,10 +703,16 @@ function howDeepTheHeader(arr, level = 1) {
   });
   return Math.max(...levels);
 }
-const _hoisted_1 = { key: 0 };
+const _hoisted_1 = {
+  key: 0
+};
 const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
-const _hoisted_3 = { class: "table-header-cell-wrapper" };
-const _hoisted_4 = { class: "table-header-title" };
+const _hoisted_3 = {
+  class: "table-header-cell-wrapper"
+};
+const _hoisted_4 = {
+  class: "table-header-title"
+};
 const _hoisted_5 = {
   key: 2,
   class: "table-header-sorter"
@@ -709,71 +722,150 @@ const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
   width: "16px",
   height: "16px",
   viewBox: "0 0 16 16"
-}, [
-  /* @__PURE__ */ createElementVNode("g", { id: "sort-btn" }, [
-    /* @__PURE__ */ createElementVNode("polygon", {
-      id: "arrow-up",
-      fill: "#757699",
-      points: "8 2 4.8 6 11.2 6"
-    }),
-    /* @__PURE__ */ createElementVNode("polygon", {
-      id: "arrow-down",
-      transform: "translate(8, 12) rotate(-180) translate(-8, -12) ",
-      points: "8 10 4.8 14 11.2 14"
-    })
-  ])
-], -1);
-const _hoisted_7 = [
-  _hoisted_6
-];
+}, [/* @__PURE__ */ createElementVNode("polygon", {
+  class: "arrow-up",
+  fill: "#757699",
+  points: "8 2 4.8 6 11.2 6"
+}), /* @__PURE__ */ createElementVNode("polygon", {
+  class: "arrow-down",
+  transform: "translate(8, 12) rotate(-180) translate(-8, -12) ",
+  points: "8 10 4.8 14 11.2 14"
+})], -1);
+const _hoisted_7 = [_hoisted_6];
 const _hoisted_8 = ["onMousedown"];
 const _hoisted_9 = ["onMousedown"];
 const _hoisted_10 = {
   key: 0,
   class: "virtual-x-left",
-  style: { "padding": "0" }
+  style: {
+    "padding": "0"
+  }
 };
 const _hoisted_11 = ["data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
 const _hoisted_12 = {
   key: 0,
   class: "virtual-x-left",
-  style: { "padding": "0" }
+  style: {
+    "padding": "0"
+  }
 };
 const _hoisted_13 = ["data-index", "onClick"];
 const _hoisted_14 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
-    width: { default: "" },
-    minWidth: { default: "" },
-    maxWidth: { default: "" },
-    stripe: { type: Boolean, default: false },
-    fixedMode: { type: Boolean, default: false },
-    headless: { type: Boolean, default: false },
-    theme: { default: "light" },
-    rowHeight: { default: 28 },
-    virtual: { type: Boolean, default: false },
-    virtualX: { type: Boolean, default: false },
-    columns: { default: () => [] },
-    dataSource: { default: () => [] },
-    rowKey: { type: [String, Function], default: "" },
-    colKey: { type: [String, Function], default: "dataIndex" },
-    emptyCellText: { default: "--" },
-    noDataFull: { type: Boolean, default: false },
-    showNoData: { type: Boolean, default: true },
-    sortRemote: { type: Boolean, default: false },
-    showHeaderOverflow: { type: Boolean, default: false },
-    showOverflow: { type: Boolean, default: false },
-    showTrHoverClass: { type: Boolean, default: false },
-    headerDrag: { type: Boolean, default: false },
-    rowClassName: { type: Function, default: () => "" },
-    colResizable: { type: Boolean, default: false },
-    colMinWidth: { default: 10 },
-    bordered: { type: [Boolean, String], default: true },
-    autoResize: { type: [Boolean, Function], default: true }
+    width: {
+      default: ""
+    },
+    minWidth: {
+      default: ""
+    },
+    maxWidth: {
+      default: ""
+    },
+    stripe: {
+      type: Boolean,
+      default: false
+    },
+    fixedMode: {
+      type: Boolean,
+      default: false
+    },
+    headless: {
+      type: Boolean,
+      default: false
+    },
+    theme: {
+      default: "light"
+    },
+    rowHeight: {
+      default: Default_Row_Height
+    },
+    headerRowHeight: {
+      default: null
+    },
+    virtual: {
+      type: Boolean,
+      default: false
+    },
+    virtualX: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      default: () => []
+    },
+    dataSource: {
+      default: () => []
+    },
+    rowKey: {
+      type: [String, Function],
+      default: ""
+    },
+    colKey: {
+      type: [String, Function],
+      default: "dataIndex"
+    },
+    emptyCellText: {
+      default: "--"
+    },
+    noDataFull: {
+      type: Boolean,
+      default: false
+    },
+    showNoData: {
+      type: Boolean,
+      default: true
+    },
+    sortRemote: {
+      type: Boolean,
+      default: false
+    },
+    showHeaderOverflow: {
+      type: Boolean,
+      default: false
+    },
+    showOverflow: {
+      type: Boolean,
+      default: false
+    },
+    showTrHoverClass: {
+      type: Boolean,
+      default: false
+    },
+    headerDrag: {
+      type: Boolean,
+      default: false
+    },
+    rowClassName: {
+      type: Function,
+      default: () => ""
+    },
+    colResizable: {
+      type: Boolean,
+      default: false
+    },
+    colMinWidth: {
+      default: 10
+    },
+    bordered: {
+      type: [Boolean, String],
+      default: true
+    },
+    autoResize: {
+      type: [Boolean, Function],
+      default: true
+    },
+    fixedColShadow: {
+      type: Boolean,
+      default: false
+    }
   },
   emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
     const props = __props;
     const emits = __emit;
     const tableContainer = ref();
@@ -786,8 +878,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tableHeaders = ref([]);
     const tableHeaderLast = ref([]);
     const dataSourceCopy = shallowRef([...props.dataSource]);
+    const fixedShadow = ref({
+      /** 是否展示左侧固定列阴影 */
+      showL: false,
+      /** 是否展示右侧固定列阴影 */
+      showR: false,
+      /** 保存需要出现阴影的列 */
+      cols: []
+    });
     const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
-    const { isColResizing, onThResizeMouseDown } = useColResize({
+    const {
+      isColResizing,
+      onThResizeMouseDown
+    } = useColResize({
       props,
       emits,
       colKeyGen,
@@ -795,7 +898,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableContainer,
       tableHeaderLast
     });
-    const { onThDragStart, onThDragOver, onThDrop } = useThDrag({ emits });
+    const {
+      onThDragStart,
+      onThDragOver,
+      onThDrop
+    } = useThDrag({
+      emits
+    });
     const {
       virtualScroll,
       virtualScrollX,
@@ -810,8 +919,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       initVirtualScrollX,
       updateVirtualScrollY,
       updateVirtualScrollX
-    } = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast });
-    const { getFixedStyle } = useFixedStyle({
+    } = useVirtualScroll({
+      tableContainer,
+      props,
+      dataSourceCopy,
+      tableHeaderLast
+    });
+    const {
+      getFixedStyle
+    } = useFixedStyle({
       props,
       tableHeaderLast,
       virtualScroll,
@@ -819,48 +935,58 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       virtualX_on,
       virtualX_offsetRight
     });
-    const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
+    const {
+      setHighlightDimCell,
+      setHighlightDimRow
+    } = useHighlight({
+      props,
+      tableContainer,
+      rowKeyGen
+    });
     if (props.autoResize) {
-      useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs: 500 });
+      useAutoResize({
+        tableContainer,
+        initVirtualScroll,
+        scrollTo,
+        props,
+        debounceMs: 500
+      });
     }
     useKeyboardArrowScroll(tableContainer, {
+      props,
       scrollTo,
       virtualScroll,
-      virtualScrollX
+      virtualScrollX,
+      tableHeaders
+    });
+    watch(() => props.columns, () => {
+      dealColumns();
+      initVirtualScrollX();
     });
-    watch(
-      () => props.columns,
-      () => {
-        dealColumns();
-        initVirtualScrollX();
-      }
-    );
     dealColumns();
-    watch(
-      () => props.dataSource,
-      (val) => {
-        if (!val) {
-          console.warn("invalid dataSource");
-          return;
-        }
-        let needInitVirtualScrollY = false;
-        if (dataSourceCopy.value.length !== val.length) {
-          needInitVirtualScrollY = true;
-        }
-        dataSourceCopy.value = [...val];
-        if (needInitVirtualScrollY)
-          initVirtualScrollY();
-        if (sortCol.value) {
-          const column = tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
-          onColumnSort(column, false);
-        }
-      },
-      {
-        deep: false
+    watch(() => props.dataSource, (val) => {
+      if (!val) {
+        console.warn("invalid dataSource");
+        return;
       }
-    );
+      let needInitVirtualScrollY = false;
+      if (dataSourceCopy.value.length !== val.length) {
+        needInitVirtualScrollY = true;
+      }
+      dataSourceCopy.value = [...val];
+      if (needInitVirtualScrollY)
+        initVirtualScrollY();
+      if (sortCol.value) {
+        const column = tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
+        onColumnSort(column, false);
+      }
+      updateFixedShadow();
+    }, {
+      deep: false
+    });
     onMounted(() => {
       initVirtualScroll();
+      updateFixedShadow();
     });
     function dealColumns() {
       tableHeaders.value = [];
@@ -871,16 +997,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (deep > 1 && props.virtualX) {
         console.error("多级表头不支持横向虚拟滚动");
       }
-      function flat(arr, depth = 0) {
+      function flat(arr, parent, depth = 0) {
         if (!tableHeaders.value[depth]) {
           tableHeaders.value[depth] = [];
         }
         let allChildrenLen = 0;
         arr.forEach((col) => {
+          col.__PARENT__ = parent;
           let colChildrenLen = 1;
           if (col.children) {
             colChildrenLen = flat(
               col.children,
+              col,
               depth + 1
               /* , col.fixed */
             );
@@ -900,8 +1028,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
         return allChildrenLen;
       }
-      flat(copyColumn);
+      flat(copyColumn, null);
       tableHeaderLast.value = tempHeaderLast;
+      dealFixedColShadow();
+    }
+    function dealFixedColShadow() {
+      if (!props.fixedColShadow)
+        return;
+      fixedShadow.value.cols = [];
+      const lastLeftCol = tableHeaderLast.value.findLast((it) => it.fixed === "left");
+      const lastRightCol = tableHeaderLast.value.find((it) => it.fixed === "right");
+      let node = {
+        __PARENT__: lastLeftCol
+      };
+      while (node = node.__PARENT__) {
+        if (node.fixed) {
+          fixedShadow.value.cols.push(node);
+        }
+      }
+      node = {
+        __PARENT__: lastRightCol
+      };
+      while (node = node.__PARENT__) {
+        if (node.fixed) {
+          fixedShadow.value.cols.push(node);
+        }
+      }
+    }
+    function getFixedColClass(col) {
+      const {
+        showR,
+        showL,
+        cols
+      } = fixedShadow.value;
+      const classArr = [col.fixed ? "fixed-cell" : "", col.fixed ? "fixed-cell--" + col.fixed : "", props.fixedColShadow && col.fixed && (showL && col.fixed === "left" || showR && col.fixed === "right") && cols.includes(col) ? "fixed-cell--shadow" : ""];
+      return classArr;
+    }
+    function updateFixedShadow() {
+      if (!props.fixedColShadow)
+        return;
+      const {
+        clientWidth,
+        scrollWidth,
+        scrollLeft
+      } = tableContainer.value;
+      fixedShadow.value.showL = Boolean(scrollLeft);
+      fixedShadow.value.showR = Math.abs(scrollWidth - scrollLeft - clientWidth) > 0.5;
     }
     function rowKeyGen(row) {
       let key = rowKeyGenStore.get(row);
@@ -944,7 +1116,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onColumnSort(col, click = true, options = {}) {
       if (!(col == null ? void 0 : col.sorter))
         return;
-      options = { force: false, emit: false, ...options };
+      options = {
+        force: false,
+        emit: false,
+        ...options
+      };
       if (sortCol.value !== col.dataIndex) {
         sortCol.value = col.dataIndex;
         sortOrderIndex.value = 0;
@@ -992,9 +1168,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onTableScroll(e) {
       if (!(e == null ? void 0 : e.target))
         return;
-      const { scrollTop, scrollLeft } = e.target;
-      const isYScroll = scrollTop !== virtualScroll.value.scrollTop;
-      const isXScroll = scrollLeft !== virtualScrollX.value.scrollLeft;
+      const {
+        scrollTop,
+        scrollLeft
+      } = e.target;
+      const {
+        scrollTop: vScrollTop,
+        startIndex,
+        endIndex
+      } = virtualScroll.value;
+      const {
+        scrollLeft: vScrollLeft
+      } = virtualScrollX.value;
+      const isYScroll = scrollTop !== vScrollTop;
+      const isXScroll = scrollLeft !== vScrollLeft;
       if (isYScroll) {
         virtualScroll.value.scrollTop = scrollTop;
       }
@@ -1003,13 +1190,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       if (isXScroll) {
         virtualScrollX.value.scrollLeft = scrollLeft;
+        updateFixedShadow();
       }
       if (virtualX_on.value) {
         updateVirtualScrollX(scrollLeft);
       }
       const data = {
-        startIndex: virtualScroll.value.startIndex,
-        endIndex: virtualScroll.value.endIndex
+        startIndex,
+        endIndex
       };
       if (isYScroll) {
         emits("scroll", e, data);
@@ -1023,7 +1211,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         currentHover.value = rowKeyGen(row);
       }
     }
-    function setCurrentRow(rowKey, option = { silent: false }) {
+    function setCurrentRow(rowKey, option = {
+      silent: false
+    }) {
       if (!dataSourceCopy.value.length)
         return;
       currentItem.value = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
@@ -1033,13 +1223,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function setSorter(dataIndex, order, option = {}) {
       var _a;
-      const newOption = { silent: true, sortOption: null, sort: true, ...option };
+      const newOption = {
+        silent: true,
+        sortOption: null,
+        sort: true,
+        ...option
+      };
       sortCol.value = dataIndex;
       sortOrderIndex.value = sortSwitchOrder.findIndex((it) => it === order);
       if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
         const column = newOption.sortOption || tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
         if (column)
-          onColumnSort(column, false, { force: true, emit: !newOption.silent });
+          onColumnSort(column, false, {
+            force: true,
+            emit: !newOption.silent
+          });
         else
           console.warn("Can not find column by dataIndex:", sortCol.value);
       }
@@ -1062,16 +1260,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return toRaw(dataSourceCopy.value);
     }
     __expose({
+      /** 初始化横向纵向虚拟滚动 */
       initVirtualScroll,
+      /** 初始化横向虚拟滚动 */
       initVirtualScrollX,
+      /** 初始化纵向虚拟滚动 */
       initVirtualScrollY,
+      /** 设置当前选中行 */
       setCurrentRow,
+      /** 设置高亮渐暗单元格 */
       setHighlightDimCell,
+      /** 设置高亮渐暗行 */
       setHighlightDimRow,
+      /** 表格排序列dataIndex */
       sortCol,
+      /** 设置排序 */
       setSorter,
+      /** 重置排序 */
       resetSorter,
+      /** 滚动至 */
       scrollTo,
+      /** 获取表格数据 */
       getTableData
     });
     return (_ctx, _cache) => {
@@ -1091,174 +1300,137 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "border-body-v": props.bordered === "body-v",
           stripe: props.stripe
         }]),
-        style: normalizeStyle(_ctx.virtual && { "--row-height": unref(virtualScroll).rowHeight + "px" }),
+        style: normalizeStyle(_ctx.virtual && {
+          "--row-height": unref(virtualScroll).rowHeight + "px",
+          "--header-row-height": (props.headerRowHeight || props.rowHeight) + "px"
+        }),
         onScroll: onTableScroll,
         onWheel: onTableWheel
-      }, [
-        withDirectives(createElementVNode("div", {
-          ref_key: "colResizeIndicator",
-          ref: colResizeIndicator,
-          class: "column-resize-indicator"
-        }, null, 512), [
-          [vShow, _ctx.colResizable]
-        ]),
-        createElementVNode("table", {
-          class: normalizeClass(["stk-table-main", {
-            "fixed-mode": props.fixedMode
-          }]),
-          style: normalizeStyle({ width: _ctx.width, minWidth: _ctx.minWidth, maxWidth: _ctx.maxWidth })
-        }, [
-          !_ctx.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] = (e) => onHeaderMenu(e))
-              }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
-                  key: 0,
-                  class: "virtual-x-left",
-                  style: normalizeStyle({
-                    minWidth: 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: col.dataIndex,
-                    "data-col-key": colKeyGen(col),
-                    draggable: _ctx.headerDrag ? "true" : "false",
-                    rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
-                    colspan: col.colSpan,
-                    style: normalizeStyle(getCellStyle(1, col, rowIndex)),
-                    title: col.title,
-                    class: normalizeClass([
-                      col.sorter ? "sortable" : "",
-                      col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
-                      _ctx.showHeaderOverflow ? "text-overflow" : "",
-                      col.headerClassName,
-                      col.fixed ? "fixed-cell" : "",
-                      col.fixed ? "fixed-cell--" + col.fixed : ""
-                    ]),
-                    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_3, [
-                      col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
-                        key: 0,
-                        col
-                      }, null, 8, ["col"])) : renderSlot(_ctx.$slots, "tableHeader", {
-                        key: 1,
-                        column: col
-                      }, () => [
-                        createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
-                      ]),
-                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true),
-                      _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
-                        key: 3,
-                        class: "table-header-resizer left",
-                        onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
-                      }, null, 40, _hoisted_8)) : createCommentVNode("", true),
-                      _ctx.colResizable ? (openBlock(), createElementBlock("div", {
-                        key: 4,
-                        class: "table-header-resizer right",
-                        onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
-                      }, null, 40, _hoisted_9)) : createCommentVNode("", true)
-                    ])
-                  ], 46, _hoisted_2);
-                }), 128)),
-                unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
-                  key: 1,
-                  class: "virtual-x-right",
-                  style: normalizeStyle({
-                    minWidth: unref(virtualX_offsetRight) + "px",
-                    width: unref(virtualX_offsetRight) + "px"
-                  })
-                }, null, 4)) : createCommentVNode("", true)
-              ], 32);
-            }), 128))
-          ])) : createCommentVNode("", true),
-          createElementVNode("tbody", null, [
-            unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
-              key: 0,
-              style: normalizeStyle({ height: `${unref(virtualScroll).offsetTop}px` }),
-              class: "padding-top-tr"
-            }, [
-              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
-              _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
-                return openBlock(), createElementBlock("td", {
-                  key: col.dataIndex,
-                  style: normalizeStyle(getCellStyle(2, col))
-                }, null, 4);
-              }), 128)) : createCommentVNode("", true)
-            ], 4)) : createCommentVNode("", true),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, i) => {
-              return openBlock(), createElementBlock("tr", {
-                key: _ctx.rowKey ? rowKeyGen(row) : i,
-                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : i,
-                class: normalizeClass({
-                  active: _ctx.rowKey ? rowKeyGen(row) === (currentItem.value && rowKeyGen(currentItem.value)) : row === currentItem.value,
-                  hover: _ctx.rowKey ? rowKeyGen(row) === currentHover.value : row === currentHover.value,
-                  [_ctx.rowClassName(row, i)]: true
-                }),
-                style: normalizeStyle({
-                  backgroundColor: row._bgc
-                }),
-                onClick: (e) => onRowClick(e, row),
-                onDblclick: (e) => onRowDblclick(e, row),
-                onContextmenu: (e) => onRowMenu(e, row),
-                onMouseover: (e) => onTrMouseOver(e, row)
-              }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
-                  return openBlock(), createElementBlock("td", {
-                    key: col.dataIndex,
-                    "data-index": col.dataIndex,
-                    class: normalizeClass([
-                      col.className,
-                      _ctx.showOverflow ? "text-overflow" : "",
-                      col.fixed ? "fixed-cell" : "",
-                      col.fixed ? "fixed-cell--" + col.fixed : ""
-                    ]),
-                    style: normalizeStyle(getCellStyle(2, col)),
-                    onClick: (e) => onCellClick(e, row, col)
-                  }, [
-                    col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
-                      key: 0,
-                      col,
-                      row,
-                      "cell-value": row[col.dataIndex]
-                    }, null, 8, ["col", "row", "cell-value"])) : (openBlock(), createElementBlock("div", {
-                      key: 1,
-                      class: "table-cell-wrapper",
-                      title: row[col.dataIndex]
-                    }, toDisplayString(row[col.dataIndex] ?? _ctx.emptyCellText), 9, _hoisted_14))
-                  ], 14, _hoisted_13);
-                }), 128))
-              ], 46, _hoisted_11);
-            }), 128)),
-            unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
-              key: 1,
-              style: normalizeStyle({ height: `${unref(virtual_offsetBottom)}px` })
-            }, null, 4)) : createCommentVNode("", true)
-          ])
-        ], 6),
-        (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
+      }, [withDirectives(createElementVNode("div", {
+        ref_key: "colResizeIndicator",
+        ref: colResizeIndicator,
+        class: "column-resize-indicator"
+      }, null, 512), [[vShow, _ctx.colResizable]]), createElementVNode("table", {
+        class: normalizeClass(["stk-table-main", {
+          "fixed-mode": props.fixedMode
+        }]),
+        style: normalizeStyle({
+          width: _ctx.width,
+          minWidth: _ctx.minWidth,
+          maxWidth: _ctx.maxWidth
+        })
+      }, [!_ctx.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] = (e) => onHeaderMenu(e))
+        }, [unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
           key: 0,
-          class: normalizeClass(["stk-table-no-data", { "no-data-full": _ctx.noDataFull }])
-        }, [
-          renderSlot(_ctx.$slots, "empty", {}, () => [
-            createTextVNode("暂无数据")
-          ])
-        ], 2)) : createCommentVNode("", true)
-      ], 38);
+          class: "virtual-x-left",
+          style: normalizeStyle({
+            minWidth: 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: col.dataIndex,
+            "data-col-key": colKeyGen(col),
+            draggable: _ctx.headerDrag ? "true" : "false",
+            rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
+            colspan: col.colSpan,
+            style: normalizeStyle(getCellStyle(1, col, rowIndex)),
+            title: col.title,
+            class: normalizeClass([col.sorter ? "sortable" : "", col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)], _ctx.showHeaderOverflow ? "text-overflow" : "", col.headerClassName, ...getFixedColClass(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_3, [col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
+            key: 0,
+            col
+          }, null, 8, ["col"])) : renderSlot(_ctx.$slots, "tableHeader", {
+            key: 1,
+            col
+          }, () => [createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)]), col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true), _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
+            key: 3,
+            class: "table-header-resizer left",
+            onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
+          }, null, 40, _hoisted_8)) : createCommentVNode("", true), _ctx.colResizable ? (openBlock(), createElementBlock("div", {
+            key: 4,
+            class: "table-header-resizer right",
+            onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
+          }, null, 40, _hoisted_9)) : createCommentVNode("", true)])], 46, _hoisted_2);
+        }), 128)), unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
+          key: 1,
+          class: "virtual-x-right",
+          style: normalizeStyle({
+            minWidth: unref(virtualX_offsetRight) + "px",
+            width: unref(virtualX_offsetRight) + "px"
+          })
+        }, null, 4)) : createCommentVNode("", true)], 32);
+      }), 128))])) : createCommentVNode("", true), createElementVNode("tbody", null, [unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
+        key: 0,
+        style: normalizeStyle({
+          height: `${unref(virtualScroll).offsetTop}px`
+        }),
+        class: "padding-top-tr"
+      }, [unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true), _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, {
+        key: 1
+      }, renderList(unref(virtualX_columnPart), (col) => {
+        return openBlock(), createElementBlock("td", {
+          key: col.dataIndex,
+          style: normalizeStyle(getCellStyle(2, col))
+        }, null, 4);
+      }), 128)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, i) => {
+        return openBlock(), createElementBlock("tr", {
+          key: _ctx.rowKey ? rowKeyGen(row) : i,
+          "data-row-key": _ctx.rowKey ? rowKeyGen(row) : i,
+          class: normalizeClass({
+            active: _ctx.rowKey ? rowKeyGen(row) === (currentItem.value && rowKeyGen(currentItem.value)) : row === currentItem.value,
+            hover: _ctx.rowKey ? rowKeyGen(row) === currentHover.value : row === currentHover.value,
+            [_ctx.rowClassName(row, i)]: true
+          }),
+          style: normalizeStyle({
+            backgroundColor: row._bgc
+          }),
+          onClick: (e) => onRowClick(e, row),
+          onDblclick: (e) => onRowDblclick(e, row),
+          onContextmenu: (e) => onRowMenu(e, row),
+          onMouseover: (e) => onTrMouseOver(e, row)
+        }, [unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
+          return openBlock(), createElementBlock("td", {
+            key: col.dataIndex,
+            "data-index": col.dataIndex,
+            class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", ...getFixedColClass(col)]),
+            style: normalizeStyle(getCellStyle(2, col)),
+            onClick: (e) => onCellClick(e, row, col)
+          }, [col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
+            key: 0,
+            col,
+            row,
+            "cell-value": row[col.dataIndex]
+          }, null, 8, ["col", "row", "cell-value"])) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "table-cell-wrapper",
+            title: row[col.dataIndex]
+          }, toDisplayString(row[col.dataIndex] ?? _ctx.emptyCellText), 9, _hoisted_14))], 14, _hoisted_13);
+        }), 128))], 46, _hoisted_11);
+      }), 128)), unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
+        key: 1,
+        style: normalizeStyle({
+          height: `${unref(virtual_offsetBottom)}px`
+        })
+      }, null, 4)) : createCommentVNode("", true)])], 6), (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["stk-table-no-data", {
+          "no-data-full": _ctx.noDataFull
+        }])
+      }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode("暂无数据")])], 2)) : createCommentVNode("", true)], 38);
     };
   }
 });