stk-table-vue 0.0.1-beta.4 → 0.0.1-beta.6

package/README.md

@@ -1,7 +1,7 @@
-# StkTable
+# StkTable (Sticky Table)
 
 Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
-js体积(38kb)
+js体积(未压缩41kb)
 
 ## 功能
 * [x] 高亮行，单元格。
@@ -109,6 +109,18 @@ export type StkProps = Partial<{
 
     /** 可拖动至最小的列宽 */
     colMinWidth: number;
+
+    /**
+     * 单元格分割线。
+     * 默认横竖都有
+     * "h" - 仅展示横线
+     * "v" - 仅展示竖线
+     * "body-v" - 仅表体展示竖线
+     */
+    bordered: boolean | 'h' | 'v' | 'body-v';
+
+    /** 自动重新计算虚拟滚动高度宽度。默认true */
+    autoResize: boolean;
 }>;
 ```
 
@@ -151,12 +163,6 @@ export type StkTableColumn<T extends Record<string, any>> = {
     customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
-    /**
-     * 单元格分割线。
-     * 默认横竖都有
-     * horizontal - 仅展示横线
-     */
-    border: boolean | 'horizontal';
 };
 ```
 

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

@@ -1,12 +1,9 @@
+import { SortOption, StkTableColumn } from './types/index';
 /**
- * @author JA+
- * 不支持低版本浏览器非虚拟滚动表格的表头固定，列固定，因为会卡。
- * TODO:存在的问题：
- * [] column.dataIndex 作为唯一键，不能重复
- * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
- * [] highlight-row 颜色不能恢复到active的颜色
+ * 初始化虚拟滚动参数
+ * @param {number} [height] 虚拟滚动的高度
  */
-import { SortOption, StkTableColumn } from '../StkTable/types/index';
+declare function initVirtualScroll(height?: number): void;
 /**
  * 选中一行，
  * @param {string} rowKey
@@ -49,8 +46,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     virtualX: boolean;
     columns: StkTableColumn<any>[];
     dataSource: any[];
-    rowKey: import('../StkTable/types/index').UniqKey;
-    colKey: import('../StkTable/types/index').UniqKey;
+    rowKey: import("./types/index").UniqKey;
+    colKey: import("./types/index").UniqKey;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -63,6 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
+    autoResize: boolean;
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -88,10 +86,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean;
+    autoResize: boolean;
 }>, {
+    initVirtualScroll: typeof initVirtualScroll;
+    initVirtualScrollX: () => void;
+    initVirtualScrollY: (height?: number | undefined) => void;
     setCurrentRow: typeof setCurrentRow;
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
     setHighlightDimRow: (rowKeyValues: (string | number)[]) => void;
+    sortCol: import("vue").Ref<string | null | undefined>;
     setSorter: typeof setSorter;
     resetSorter: typeof resetSorter;
     scrollTo: typeof scrollTo;
@@ -121,8 +124,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     virtualX: boolean;
     columns: StkTableColumn<any>[];
     dataSource: any[];
-    rowKey: import('../StkTable/types/index').UniqKey;
-    colKey: import('../StkTable/types/index').UniqKey;
+    rowKey: import("./types/index").UniqKey;
+    colKey: import("./types/index").UniqKey;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -135,6 +138,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
+    autoResize: boolean;
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -160,6 +164,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean;
+    autoResize: boolean;
 }>>> & {
     onScroll?: ((...args: any[]) => any) | undefined;
     "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
@@ -178,7 +183,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     width: string;
     minWidth: string;
     maxWidth: string;
-    colKey: import('../StkTable/types/index').UniqKey;
+    colKey: import("./types/index").UniqKey;
     fixedMode: boolean;
     headless: boolean;
     theme: "light" | "dark";
@@ -186,7 +191,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     virtualX: boolean;
     columns: StkTableColumn<any>[];
     dataSource: any[];
-    rowKey: import('../StkTable/types/index').UniqKey;
+    rowKey: import("./types/index").UniqKey;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -199,6 +204,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
+    autoResize: boolean;
 }, {}>, {
     tableHeader?(_: {
         column: StkTableColumn<any>;

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

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

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

@@ -118,5 +118,10 @@ export type StkProps = Partial<{
      * "body-v" - 仅表体展示竖线
      */
     bordered: boolean | 'h' | 'v' | 'body-v';
+    /**
+     * 自动重新计算虚拟滚动高度宽度。默认true
+     * [非响应式]
+     */
+    autoResize: boolean;
 }>;
 export {};

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

@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+type Options = {
+    tableContainer: Ref<HTMLElement | undefined>;
+    initVirtualScroll: () => void;
+    scrollTo: () => void;
+    props: any;
+    /** 防抖延时 */
+    debounceMs: number;
+};
+/**
+ * 窗口变化自动重置虚拟滚动
+ * @param param0
+ */
+export declare function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }: Options): void;
+export {};

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { ref, onMounted, onBeforeUnmount, computed, defineComponent, shallowRef, watch, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode, pushScopeId, popScopeId } from "vue";
+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;
@@ -19,6 +19,54 @@ try {
   console.error("Cannot get Chrome version", e);
 }
 const Is_Legacy_Mode = _chromeVersion < 56;
+function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }) {
+  let resizeObserver = null;
+  onMounted(() => {
+    initResizeObserver();
+  });
+  onBeforeUnmount(() => {
+    removeResizeObserver();
+  });
+  function initResizeObserver() {
+    if (window.ResizeObserver) {
+      if (!tableContainer.value) {
+        const watchDom = watch(
+          () => tableContainer,
+          () => {
+            initResizeObserver();
+            watchDom();
+          }
+        );
+        return;
+      }
+      resizeObserver = new ResizeObserver(resizeCallback);
+      resizeObserver.observe(tableContainer.value);
+    } else {
+      window.addEventListener("resize", resizeCallback);
+    }
+  }
+  function removeResizeObserver() {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    } else {
+      window.removeEventListener("resize", resizeCallback);
+    }
+  }
+  let debounceTime = 0;
+  function resizeCallback() {
+    if (debounceTime) {
+      window.clearTimeout(debounceTime);
+    }
+    debounceTime = window.setTimeout(() => {
+      if (props.autoResize) {
+        scrollTo();
+        initVirtualScroll();
+      }
+      debounceTime = 0;
+    }, debounceMs);
+  }
+}
 function useColResize({ tableContainer, tableHeaderLast, colResizeIndicator, props, emit, colKeyGen }) {
   const isColResizing = ref(false);
   let colResizeState = {
@@ -328,17 +376,17 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
   });
   function initVirtualScrollY(height) {
     var _a, _b;
-    if (virtual_on.value) {
-      virtualScroll.value.containerHeight = typeof height === "number" ? height : ((_a = tableContainer.value) == null ? void 0 : _a.offsetHeight) || Default_Table_Height;
-      updateVirtualScrollY((_b = tableContainer.value) == null ? void 0 : _b.scrollTop);
-    }
+    if (!virtual_on.value)
+      return;
+    virtualScroll.value.containerHeight = typeof height === "number" ? height : ((_a = tableContainer.value) == null ? void 0 : _a.offsetHeight) || Default_Table_Height;
+    updateVirtualScrollY((_b = tableContainer.value) == null ? void 0 : _b.scrollTop);
   }
   function initVirtualScrollX() {
-    if (props.virtualX) {
-      const { offsetWidth, scrollLeft } = tableContainer.value || {};
-      virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
-      updateVirtualScrollX(scrollLeft);
-    }
+    if (!props.virtualX)
+      return;
+    const { offsetWidth, scrollLeft } = tableContainer.value || {};
+    virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
+    updateVirtualScrollX(scrollLeft);
   }
   function updateVirtualScrollY(sTop = 0) {
     const { rowHeight } = virtualScroll.value;
@@ -444,6 +492,8 @@ function strCompare(a, b, type) {
   }
 }
 function tableSort(sortOption, order, dataSource) {
+  if (!(dataSource == null ? void 0 : dataSource.length))
+    return dataSource || [];
   let targetDataSource = [...dataSource];
   if (typeof sortOption.sorter === "function") {
     const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
@@ -492,7 +542,6 @@ function howDeepTheColumn(arr, level = 1) {
   });
   return Math.max(...levels);
 }
-const _withScopeId = (n) => (pushScopeId("data-v-0aa41491"), n = n(), popScopeId(), n);
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
 const _hoisted_3 = { class: "table-header-cell-wrapper" };
@@ -501,7 +550,7 @@ const _hoisted_5 = {
   key: 2,
   class: "table-header-sorter"
 };
-const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16px",
   height: "16px",
@@ -519,7 +568,7 @@ const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElem
       points: "8 10 4.8 14 11.2 14"
     })
   ])
-], -1));
+], -1);
 const _hoisted_7 = [
   _hoisted_6
 ];
@@ -564,7 +613,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     rowClassName: { type: Function, default: () => "" },
     colResizable: { type: Boolean, default: false },
     colMinWidth: { default: 10 },
-    bordered: { type: [Boolean, String], default: true }
+    bordered: { type: [Boolean, String], default: true },
+    autoResize: { type: Boolean, default: true }
   },
   emits: [
     "sort-change",
@@ -608,15 +658,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const store = {};
       const cols = [...tableHeaderLast.value];
       let left = 0;
+      let rightStartIndex = 0;
       for (let i = 0; i < cols.length; i++) {
         const item = cols[i];
         if (item.fixed === "left") {
           store[item.dataIndex] = left;
           left += parseInt(item.width || Default_Col_Width);
         }
+        if (!rightStartIndex && item.fixed === "right") {
+          rightStartIndex = i;
+        }
       }
       let right = 0;
-      for (let i = cols.length - 1; i >= 0; i--) {
+      for (let i = cols.length - 1; i >= rightStartIndex; i--) {
         const item = cols[i];
         if (item.fixed === "right") {
           store[item.dataIndex] = right;
@@ -649,6 +703,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateVirtualScrollX
     } = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast });
     const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
+    if (props.autoResize) {
+      useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs: 500 });
+    }
     watch(
       () => props.columns,
       () => {
@@ -660,6 +717,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => props.dataSource,
       (val) => {
+        if (!val) {
+          console.warn("invalid dataSource");
+          return;
+        }
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
           needInitVirtualScrollY = true;
@@ -904,9 +965,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return toRaw(dataSourceCopy.value);
     }
     __expose({
+      initVirtualScroll,
+      initVirtualScrollX,
+      initVirtualScrollY,
       setCurrentRow,
       setHighlightDimCell,
       setHighlightDimRow,
+      sortCol,
       setSorter,
       resetSorter,
       scrollTo,
@@ -972,7 +1037,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       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 ? "fixed-cell--" + col.fixed : ""
                     ]),
                     onClick: (e) => {
                       onColumnSort(col);
@@ -994,7 +1060,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         column: col
                       }, () => [
                         createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
-                      ], true),
+                      ]),
                       col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true),
                       _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
                         key: 3,
@@ -1055,7 +1121,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
                     "data-index": col.dataIndex,
-                    class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", col.fixed ? "fixed-cell" : ""]),
+                    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)
                   }, [
@@ -1085,22 +1156,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "empty", {}, () => [
             createTextVNode("暂无数据")
-          ], true)
+          ])
         ], 2)) : createCommentVNode("", true)
       ], 38);
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const StkTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0aa41491"]]);
 export {
-  StkTable,
+  _sfc_main as StkTable,
   insertToOrderedArray,
   tableSort
 };

package/lib/style.css

@@ -1,4 +1,4 @@
-.stk-table[data-v-0aa41491] {
+.stk-table {
   --row-height: 28px;
   --cell-padding-x: 8px;
   --resize-handle-width: 4px;
@@ -28,7 +28,7 @@
   /** 列宽调整指示器 */
   /**虚拟滚动模式 */
 }
-.stk-table.dark[data-v-0aa41491] {
+.stk-table.dark {
   --th-bgc: #181c21;
   --td-bgc: #181c21;
   --border-color: #26292e;
@@ -43,45 +43,45 @@
   --col-resize-indicator-color: #5d6064;
   color: #d0d1d2;
 }
-.stk-table.headless[data-v-0aa41491] {
+.stk-table.headless {
   border-top: 1px solid var(--border-color);
 }
-.stk-table.is-col-resizing th[data-v-0aa41491] {
+.stk-table.is-col-resizing th {
   pointer-events: none;
 }
-.stk-table.border-h[data-v-0aa41491] {
+.stk-table.border-h {
   --bg-border-right: linear-gradient(transparent, transparent);
   --bg-border-left: linear-gradient(transparent, transparent);
 }
-.stk-table.border-v[data-v-0aa41491] {
+.stk-table.border-v {
   --bg-border-bottom: linear-gradient(transparent, transparent);
 }
-.stk-table.border .stk-table-main th[data-v-0aa41491],
-.stk-table.border .stk-table-main td[data-v-0aa41491] {
+.stk-table.border .stk-table-main th,
+.stk-table.border .stk-table-main td {
   background-image: var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border .stk-table-main thead tr:first-child th[data-v-0aa41491] {
+.stk-table.border .stk-table-main thead tr:first-child th {
   background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border .stk-table-main thead tr:first-child th[data-v-0aa41491]:first-child {
+.stk-table.border .stk-table-main thead tr:first-child th:first-child {
   background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border .stk-table-main thead tr th[data-v-0aa41491]:first-child {
+.stk-table.border .stk-table-main thead tr th:first-child {
   background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border .stk-table-main tbody td[data-v-0aa41491]:first-child {
+.stk-table.border .stk-table-main tbody td:first-child {
   background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th[data-v-0aa41491] {
+.stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th {
   background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th[data-v-0aa41491] {
+.stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th {
   background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border-body-v .stk-table-main tbody[data-v-0aa41491] {
+.stk-table.border-body-v .stk-table-main tbody {
   --bg-border-bottom: linear-gradient(transparent, transparent);
 }
-.stk-table .column-resize-indicator[data-v-0aa41491] {
+.stk-table .column-resize-indicator {
   width: 0;
   height: 100%;
   border-left: 1px dashed var(--col-resize-indicator-color);
@@ -90,122 +90,131 @@
   display: none;
   pointer-events: none;
 }
-.stk-table .stk-table-main[data-v-0aa41491] {
+.stk-table .stk-table-main {
   border-spacing: 0;
   border-collapse: separate;
+  width: fit-content;
+  min-width: 100%;
 }
-.stk-table .stk-table-main.fixed-mode[data-v-0aa41491] {
+.stk-table .stk-table-main.fixed-mode {
   table-layout: fixed;
 }
-.stk-table .stk-table-main th[data-v-0aa41491],
-.stk-table .stk-table-main td[data-v-0aa41491] {
+.stk-table .stk-table-main th,
+.stk-table .stk-table-main td {
   z-index: 1;
   height: var(--row-height);
   font-size: 14px;
   box-sizing: border-box;
   padding: 0 var(--cell-padding-x);
 }
-.stk-table .stk-table-main thead tr:first-child th[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr:first-child th {
   position: sticky;
   top: 0;
 }
-.stk-table .stk-table-main thead tr th[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th {
   background-color: var(--th-bgc);
 }
-.stk-table .stk-table-main thead tr th.sortable[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th.sortable {
   cursor: pointer;
 }
-.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper {
   white-space: nowrap;
   overflow: hidden;
 }
-.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up {
   fill: var(--sort-arrow-hover-color);
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down {
   fill: var(--sort-arrow-hover-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter {
+  display: initial;
+}
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up {
   fill: var(--sort-arrow-active-sub-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down {
   fill: var(--sort-arrow-active-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter {
+  display: initial;
+}
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up {
   fill: var(--sort-arrow-active-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down {
   fill: var(--sort-arrow-active-sub-color);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper {
   max-width: 100%;
   display: inline-flex;
   align-items: center;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title {
   overflow: hidden;
   align-self: flex-start;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter {
   flex-shrink: 0;
   margin-left: 4px;
   width: 16px;
   height: 16px;
+  display: none;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491],
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up,
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down {
   fill: var(--sort-arrow-color);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer {
   position: absolute;
   top: 0;
   bottom: 0;
   cursor: col-resize;
   width: var(--resize-handle-width);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left {
   left: 0;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right[data-v-0aa41491] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right {
   right: 0;
 }
-.stk-table .stk-table-main tbody[data-v-0aa41491] {
+.stk-table .stk-table-main tbody {
   /**高亮渐暗 */
 }
-@keyframes dim-0aa41491 {
+@keyframes dim {
 from {
     background-color: var(--highlight-color);
 }
 }
-.stk-table .stk-table-main tbody tr[data-v-0aa41491] {
+.stk-table .stk-table-main tbody tr {
   background-color: var(--td-bgc);
 }
-.stk-table .stk-table-main tbody tr.highlight-row[data-v-0aa41491] {
-  animation: dim-0aa41491 2s linear;
+.stk-table .stk-table-main tbody tr.highlight-row {
+  animation: dim 2s linear;
 }
-.stk-table .stk-table-main tbody tr.hover[data-v-0aa41491],
-.stk-table .stk-table-main tbody tr[data-v-0aa41491]:hover {
+.stk-table .stk-table-main tbody tr.hover,
+.stk-table .stk-table-main tbody tr:hover {
   background-color: var(--tr-hover-bgc);
 }
-.stk-table .stk-table-main tbody tr.active[data-v-0aa41491] {
+.stk-table .stk-table-main tbody tr.active {
   background-color: var(--tr-active-bgc);
 }
-.stk-table .stk-table-main tbody tr td.fixed-cell[data-v-0aa41491] {
+.stk-table .stk-table-main tbody tr td.fixed-cell {
   background-color: inherit;
 }
-.stk-table .stk-table-main tbody tr td.highlight-cell[data-v-0aa41491] {
-  animation: dim-0aa41491 2s linear;
+.stk-table .stk-table-main tbody tr td.highlight-cell {
+  animation: dim 2s linear;
 }
-.stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper[data-v-0aa41491] {
+.stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.stk-table .stk-table-no-data[data-v-0aa41491] {
+.stk-table .stk-table-no-data {
   background-color: var(--table-bgc);
   line-height: var(--row-height);
   text-align: center;
@@ -220,27 +229,27 @@ from {
   align-items: center;
   justify-content: center;
 }
-.stk-table .stk-table-no-data.no-data-full[data-v-0aa41491] {
+.stk-table .stk-table-no-data.no-data-full {
   flex: 1;
 }
-.stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper[data-v-0aa41491] {
+.stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper {
   overflow: hidden;
   max-height: var(--row-height);
 }
-.stk-table.virtual .stk-table-main tbody[data-v-0aa41491] {
+.stk-table.virtual .stk-table-main tbody {
   position: relative;
 }
-.stk-table.virtual .stk-table-main tbody tr.padding-top-tr td[data-v-0aa41491] {
+.stk-table.virtual .stk-table-main tbody tr.padding-top-tr td {
   height: 0;
 }
-.stk-table.virtual .stk-table-main tbody tr td[data-v-0aa41491] {
+.stk-table.virtual .stk-table-main tbody tr td {
   height: var(--row-height);
   line-height: 1;
 }
-.stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper[data-v-0aa41491] {
+.stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper {
   max-height: var(--row-height);
   overflow: hidden;
 }
-.stk-table.virtual-x .stk-table-main .virtual-x-left[data-v-0aa41491] {
+.stk-table.virtual-x .stk-table-main .virtual-x-left {
   padding: 0;
 }

package/lib/test/utils/DragResize.d.ts

@@ -0,0 +1,28 @@
+export default class DragResize {
+    /**
+     *
+     * @param {HTMLElement} el
+     */
+    constructor(el: HTMLElement);
+    buttonSize: {
+        width: number;
+        height: number;
+    };
+    /** @type {ResizeObserver} */
+    resizeObserver: ResizeObserver;
+    /** @type {DOMRect} */
+    targetDOMRect: DOMRect;
+    /** @type {{left:number,top:number}} */
+    resizeButtonStyle: {
+        left: number;
+        top: number;
+    };
+    el: HTMLElement;
+    initData(): void;
+    createResizeButton(): void;
+    resizeButton: HTMLElement | undefined;
+    /** 监听元素大小改变 */
+    onResize(): void;
+    addButtonHoverStyle(): void;
+    addEvent(): void;
+}

package/lib/test/utils/h.d.ts

@@ -0,0 +1,10 @@
+/**
+ * createElement function
+ * h(tag[, text[,children]])
+ * h(tag[, attrs[,children]])
+ * h(tag[, children])
+ * @param {String} tag 标签名称，支持tag#id.class emmet写法，暂支持id ,class
+ * @param {Object | String | Number | Array<HTMLElement>} attrs 传Object为属性，传String为textContent，传数组为children
+ * @param {Array<HTMLElement>} children
+ */
+export default function h(tag: string, attrs: Object | string | number | Array<HTMLElement>, children: Array<HTMLElement>): HTMLElement;

package/package.json

@@ -1,60 +1,60 @@
-{
-    "name": "stk-table-vue",
-    "version": "0.0.1-beta.4",
-    "description": "simple realtime virtual table for vue3",
-    "main": "./lib/stk-table-vue.js",
-    "types": "./lib/StkTable/index.d.ts",
-    "packageManager": "pnpm@8.11.0",
-    "directories": {
-        "test": "test"
-    },
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "test": "vitest"
-    },
-    "keywords": [
-        "virtual table",
-        "vue",
-        "highlight",
-        "sticky"
-    ],
-    "files": [
-        "lib",
-        "src"
-    ],
-    "author": "japlus",
-    "repository": {
-        "type": "git",
-        "url": "https://gitee.com/japlus/stk-table-vue"
-    },
-    "license": "MIT",
-    "devDependencies": {
-        "@types/d3-interpolate": "^3.0.4",
-        "@typescript-eslint/eslint-plugin": "^6.14.0",
-        "@typescript-eslint/parser": "^6.14.0",
-        "@vitejs/plugin-vue": "^4.5.0",
-        "@vitejs/plugin-vue-jsx": "^3.1.0",
-        "@vue/test-utils": "2.4.0-alpha.2",
-        "eslint": "^8.55.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-html": "^7.1.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "eslint-plugin-vue": "^9.19.2",
-        "happy-dom": "^12.10.3",
-        "less": "^4.2.0",
-        "prettier": "^3.1.1",
-        "pug": "^3.0.2",
-        "typescript": "^5.3.3",
-        "vite": "^5.0.6",
-        "vite-plugin-dts": "^3.6.4",
-        "vitest": "^1.1.0",
-        "vue": "^3.3.9",
-        "vue-eslint-parser": "^9.3.2",
-        "vue-loader": "^17.2.2"
-    },
-    "dependencies": {
-        "d3-interpolate": "^3.0.1"
-    }
+{
+    "name": "stk-table-vue",
+    "version": "0.0.1-beta.6",
+    "description": "simple realtime virtual table for vue3",
+    "main": "./lib/stk-table-vue.js",
+    "types": "./lib/StkTable/index.d.ts",
+    "packageManager": "pnpm@8.11.0",
+    "directories": {
+        "test": "test"
+    },
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "test": "vitest"
+    },
+    "keywords": [
+        "virtual table",
+        "vue",
+        "highlight",
+        "sticky"
+    ],
+    "files": [
+        "lib",
+        "src"
+    ],
+    "author": "japlus",
+    "repository": {
+        "type": "git",
+        "url": "https://gitee.com/japlus/stk-table-vue"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@types/d3-interpolate": "^3.0.4",
+        "@typescript-eslint/eslint-plugin": "^6.14.0",
+        "@typescript-eslint/parser": "^6.14.0",
+        "@vitejs/plugin-vue": "^4.5.0",
+        "@vitejs/plugin-vue-jsx": "^3.1.0",
+        "@vue/test-utils": "2.4.0-alpha.2",
+        "eslint": "^8.55.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-html": "^7.1.0",
+        "eslint-plugin-prettier": "^5.0.1",
+        "eslint-plugin-vue": "^9.19.2",
+        "happy-dom": "^12.10.3",
+        "less": "^4.2.0",
+        "prettier": "^3.1.1",
+        "pug": "^3.0.2",
+        "typescript": "^5.3.3",
+        "vite": "^5.0.6",
+        "vite-plugin-dts": "^3.6.4",
+        "vitest": "^1.1.0",
+        "vue": "^3.3.9",
+        "vue-eslint-parser": "^9.3.2",
+        "vue-loader": "^17.2.2"
+    },
+    "dependencies": {
+        "d3-interpolate": "^3.0.1"
+    }
 }

package/src/StkTable/StkTable.vue

@@ -66,6 +66,7 @@
                             showHeaderOverflow ? 'text-overflow' : '',
                             col.headerClassName,
                             col.fixed ? 'fixed-cell' : '',
+                            col.fixed ? 'fixed-cell--' + col.fixed : '',
                         ]"
                         @click="
                             e => {
@@ -161,7 +162,12 @@
                         v-for="col in virtualX_columnPart"
                         :key="col.dataIndex"
                         :data-index="col.dataIndex"
-                        :class="[col.className, showOverflow ? 'text-overflow' : '', col.fixed ? 'fixed-cell' : '']"
+                        :class="[
+                            col.className,
+                            showOverflow ? 'text-overflow' : '',
+                            col.fixed ? 'fixed-cell' : '',
+                            col.fixed ? 'fixed-cell--' + col.fixed : '',
+                        ]"
                         :style="getCellStyle(2, col)"
                         @click="e => onCellClick(e, row, col)"
                     >
@@ -189,9 +195,10 @@
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
  * [] highlight-row 颜色不能恢复到active的颜色
  */
-import { Order, SortOption, StkProps, StkTableColumn } from '@/StkTable/types/index';
 import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Col_Width, Is_Legacy_Mode } from './const';
+import { Order, SortOption, StkProps, StkTableColumn } from './types/index';
+import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useHighlight } from './useHighlight';
 import { useThDrag } from './useThDrag';
@@ -223,6 +230,7 @@ const props = withDefaults(defineProps<StkProps>(), {
     colResizable: false,
     colMinWidth: 10,
     bordered: true,
+    autoResize: true,
 });
 
 const emit = defineEmits([
@@ -283,15 +291,20 @@ const fixedColumnsPositionStore = computed(() => {
     const store: Record<string, number> = {};
     const cols = [...tableHeaderLast.value];
     let left = 0;
+    /**遍历右侧fixed时，因为left已经遍历过一次了。所以，可以拿到right遍历边界 */
+    let rightStartIndex = 0;
     for (let i = 0; i < cols.length; i++) {
         const item = cols[i];
         if (item.fixed === 'left') {
             store[item.dataIndex] = left;
             left += parseInt(item.width || Default_Col_Width);
         }
+        if (!rightStartIndex && item.fixed === 'right') {
+            rightStartIndex = i;
+        }
     }
     let right = 0;
-    for (let i = cols.length - 1; i >= 0; i--) {
+    for (let i = cols.length - 1; i >= rightStartIndex; i--) {
         const item = cols[i];
         if (item.fixed === 'right') {
             store[item.dataIndex] = right;
@@ -333,6 +346,10 @@ const {
  */
 const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
 
+if (props.autoResize) {
+    useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs: 500 });
+}
+
 watch(
     () => props.columns,
     () => {
@@ -346,6 +363,10 @@ dealColumns();
 watch(
     () => props.dataSource,
     val => {
+        if (!val) {
+            console.warn('invalid dataSource');
+            return;
+        }
         // dealColumns(val);
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
@@ -694,9 +715,13 @@ function getTableData() {
 }
 
 defineExpose({
+    initVirtualScroll,
+    initVirtualScrollX,
+    initVirtualScrollY,
     setCurrentRow,
     setHighlightDimCell,
     setHighlightDimRow,
+    sortCol,
     setSorter,
     resetSorter,
     scrollTo,
@@ -704,7 +729,7 @@ defineExpose({
 });
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .stk-table {
     // contain: strict;
     --row-height: 28px;
@@ -846,6 +871,8 @@ defineExpose({
     .stk-table-main {
         border-spacing: 0;
         border-collapse: separate;
+        width: fit-content; // 用于兼容低版本，低版本width超过100%的时候还是100%，导致sticky错误。
+        min-width: 100%; // 用于兼容低版本chrome。低版本min-width 是min-content;
         &.fixed-mode {
             table-layout: fixed;
         }
@@ -896,7 +923,7 @@ defineExpose({
                     }
 
                     &.sorter-desc .table-header-cell-wrapper .table-header-sorter {
-                        // display:initial;
+                        display: initial;
                         #arrow-up {
                             fill: var(--sort-arrow-active-sub-color);
                         }
@@ -907,7 +934,7 @@ defineExpose({
                     }
 
                     &.sorter-asc .table-header-cell-wrapper .table-header-sorter {
-                        // display:initial;
+                        display: initial;
                         #arrow-up {
                             fill: var(--sort-arrow-active-color);
                         }
@@ -932,8 +959,7 @@ defineExpose({
                             margin-left: 4px;
                             width: 16px;
                             height: 16px;
-
-                            // display:none;
+                            display: none;
                             #arrow-up,
                             #arrow-down {
                                 fill: var(--sort-arrow-color);

package/src/StkTable/index.ts

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

package/src/StkTable/types/index.ts

@@ -140,4 +140,10 @@ export type StkProps = Partial<{
      * "body-v" - 仅表体展示竖线
      */
     bordered: boolean | 'h' | 'v' | 'body-v';
+
+    /**
+     * 自动重新计算虚拟滚动高度宽度。默认true
+     * [非响应式]
+     */
+    autoResize: boolean;
 }>;

package/src/StkTable/useAutoResize.ts

@@ -0,0 +1,67 @@
+import { Ref, onBeforeUnmount, onMounted, watch } from 'vue';
+
+type Options = {
+    tableContainer: Ref<HTMLElement | undefined>;
+    initVirtualScroll: () => void;
+    scrollTo: () => void;
+    props: any;
+    /** 防抖延时 */
+    debounceMs: number;
+};
+/**
+ * 窗口变化自动重置虚拟滚动
+ * @param param0
+ */
+export function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }: Options) {
+    let resizeObserver: ResizeObserver | null = null;
+
+    onMounted(() => {
+        initResizeObserver();
+    });
+
+    onBeforeUnmount(() => {
+        removeResizeObserver();
+    });
+
+    function initResizeObserver() {
+        if (window.ResizeObserver) {
+            if (!tableContainer.value) {
+                const watchDom = watch(
+                    () => tableContainer,
+                    () => {
+                        initResizeObserver();
+                        watchDom();
+                    },
+                );
+                return;
+            }
+            resizeObserver = new ResizeObserver(resizeCallback);
+            resizeObserver.observe(tableContainer.value);
+        } else {
+            window.addEventListener('resize', resizeCallback);
+        }
+    }
+
+    function removeResizeObserver() {
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = null;
+        } else {
+            window.removeEventListener('resize', resizeCallback);
+        }
+    }
+
+    let debounceTime = 0;
+    function resizeCallback() {
+        if (debounceTime) {
+            window.clearTimeout(debounceTime);
+        }
+        debounceTime = window.setTimeout(() => {
+            if (props.autoResize) {
+                scrollTo();
+                initVirtualScroll();
+            }
+            debounceTime = 0;
+        }, debounceMs);
+    }
+}

package/src/StkTable/useVirtualScroll.ts

@@ -91,29 +91,18 @@ export function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableH
      * @param {number} [height] 虚拟滚动的高度
      */
     function initVirtualScrollY(height?: number) {
-        if (virtual_on.value) {
-            virtualScroll.value.containerHeight = typeof height === 'number' ? height : tableContainer.value?.offsetHeight || Default_Table_Height;
-            updateVirtualScrollY(tableContainer.value?.scrollTop);
-            // const { offsetTop, containerHeight, rowHeight } = virtualScroll.value;
-            // const tableAllHeight = dataSourceCopy.value.length * rowHeight;
-            // const overflowHeight = tableAllHeight - containerHeight;
-            // if (overflowHeight < offsetTop && overflowHeight > 0) {
-            //   virtualScroll.value.offsetTop = overflowHeight;
-            //   virtualScroll.value.startIndex = Math.ceil(overflowHeight / rowHeight);
-            // } else if (overflowHeight <= 0) {
-            //   virtualScroll.value.offsetTop = 0;
-            //   virtualScroll.value.startIndex = 0;
-            // }
-        }
+        if (!virtual_on.value) return;
+        // FIXME: 可能多次获取offsetHeight 会导致浏览器频繁重排
+        virtualScroll.value.containerHeight = typeof height === 'number' ? height : tableContainer.value?.offsetHeight || Default_Table_Height;
+        updateVirtualScrollY(tableContainer.value?.scrollTop);
     }
 
     function initVirtualScrollX() {
-        if (props.virtualX) {
-            const { offsetWidth, scrollLeft } = tableContainer.value || {};
-            // scrollTo(null, 0);
-            virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
-            updateVirtualScrollX(scrollLeft);
-        }
+        if (!props.virtualX) return;
+        const { offsetWidth, scrollLeft } = tableContainer.value || {};
+        // scrollTo(null, 0);
+        virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
+        updateVirtualScrollX(scrollLeft);
     }
 
     /** 通过滚动条位置，计算虚拟滚动的参数 */

package/src/StkTable/utils.ts

@@ -72,6 +72,7 @@ function strCompare(a: string, b: string, type: 'number' | 'string'): number {
  * @param dataSource 排序的数组
  */
 export function tableSort(sortOption: SortOption, order: Order, dataSource: any[]): any[] {
+    if (!dataSource?.length) return dataSource || [];
     let targetDataSource = [...dataSource];
     if (typeof sortOption.sorter === 'function') {
         const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });