stk-table-vue 0.2.3 → 0.2.5

package/README.md

@@ -4,6 +4,10 @@ Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐
 
 Vue2.7支持引入源码(**ts**)使用。
 
+repo: 
+- [Github](https://github.com/ja-plus/stk-table-vue)
+- [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
+
 ## Bug TODO:
 * [x] props.dataSource 为 shallowRef 时，高亮行不生效。(bug:2024.02.21)(resolved:0.2.3)
 
@@ -18,7 +22,7 @@ Vue2.7支持引入源码(**ts**)使用。
     - [] sticky column 动态计算阴影位置。
 * [] 列筛选。
 * [x] 斑马纹。
-  - [] 虚拟滚动斑马纹。
+  - [x] 虚拟滚动斑马纹。
 * [x] 表头拖动更改顺序。
 * [x] 表头拖动调整列宽。
 * [x] 排序
@@ -33,10 +37,10 @@ Vue2.7支持引入源码(**ts**)使用。
 * 鼠标悬浮在表格上，键盘滚动虚拟表格。
   - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight` 按键支持。
   - [x] 键盘 `PageUp`/ `PageDown` 按键支持。
-* [] 不传row-key 时，自动按序号生成id。
 * [] 非虚拟滚动时，大数据分批加载。
 * [x] vue2.7支持（引入源码使用）。
   - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
+* [] `props.emptyCellText` 支持传入函数。
 
 
 ## Usage
@@ -188,7 +192,14 @@ export type StkProps = {
         dataIndex: keyof T;
         order: Order;
     };
+    /**
+     * string排序是否使用 String.prototype.localCompare
+     * 默认true (历史设计问题，为了兼容，默认true)
+     */
+    stringLocaleCompare?: boolean;
   },
+  /** 隐藏头部title。可传入dataIndex数组 */
+  hideHeaderTitle?: boolean | string[];
 };
 ```
 #### Emits
@@ -404,3 +415,8 @@ export type StkTableColumn<T extends Record<string, any>> = {
   ]
 </script>
 ```
+
+## Special Example
+### 鼠标悬浮表头时，不展示title
+* 将 `StkTableColumn` 中的 `title` 字段置为 "" 空字符串。这样th中就没有title了。
+* 使用 `StkTableColumn` 中的 `customHeaderCell` 属性中，自定义表头渲染。

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

@@ -13,7 +13,7 @@ declare function setCurrentRow(rowKey: string, option?: {
  * 设置表头排序状态
  * @param dataIndex 列字段
  * @param order 正序倒序
- * @param option.sortOption 指定排序参数
+ * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  */
@@ -113,6 +113,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optimizeVue2Scroll?: boolean | undefined;
     /** 排序配置 */
     sortConfig?: SortConfig<any> | undefined;
+    /** 隐藏头部title。可传入dataIndex数组 */
+    hideHeaderTitle?: boolean | string[] | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -146,7 +148,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optimizeVue2Scroll: boolean;
     sortConfig: () => {
         emptyToBottom: boolean;
+        stringLocaleCompare: boolean;
     };
+    hideHeaderTitle: boolean;
 }>, {
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll: (height?: number | undefined) => void;
@@ -269,6 +273,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optimizeVue2Scroll?: boolean | undefined;
     /** 排序配置 */
     sortConfig?: SortConfig<any> | undefined;
+    /** 隐藏头部title。可传入dataIndex数组 */
+    hideHeaderTitle?: boolean | string[] | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -302,7 +308,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optimizeVue2Scroll: boolean;
     sortConfig: () => {
         emptyToBottom: boolean;
+        stringLocaleCompare: boolean;
     };
+    hideHeaderTitle: boolean;
 }>>> & {
     onScroll?: ((ev: Event, data: {
         startIndex: number;
@@ -353,6 +361,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fixedColShadow: boolean;
     optimizeVue2Scroll: boolean;
     sortConfig: SortConfig<any>;
+    hideHeaderTitle: boolean | string[];
 }, {}>, {
     tableHeader?(_: {
         col: StkTableColumn<any>;

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

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

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

@@ -83,5 +83,10 @@ export type SortConfig<T extends Record<string, any>> = {
         dataIndex: keyof T;
         order: Order;
     };
+    /**
+     * string排序是否使用 String.prototype.localCompare
+     * 默认true (&$&应该false)
+     */
+    stringLocaleCompare?: boolean;
 };
 export {};

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

@@ -1,9 +1,9 @@
 import { CSSProperties, Ref } from 'vue';
 import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
-type Options = {
+type Options<T extends Record<string, any>> = {
     props: any;
-    tableHeaderLast: Ref<StkTableColumn<any>[]>;
+    tableHeaders: Ref<StkTableColumn<T>[][]>;
     virtualScroll: Ref<VirtualScrollStore>;
     virtualScrollX: Ref<VirtualScrollXStore>;
     virtualX_on: Ref<boolean>;
@@ -14,7 +14,7 @@ type Options = {
  * @param param0
  * @returns
  */
-export declare function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight }: Options): {
+export declare function useFixedStyle<DT extends Record<string, any>>({ props, tableHeaders, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight, }: Options<DT>): {
     getFixedStyle: (tagType: 1 | 2, col: StkTableColumn<any>, depth?: number) => CSSProperties;
 };
 export {};

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

@@ -1,10 +1,11 @@
 import { Ref, ShallowRef } from 'vue';
 import { StkTableColumn } from './types';
 type Option<DT extends Record<string, any>> = {
-    tableContainer: Ref<HTMLElement | undefined>;
     props: any;
+    tableContainer: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
     tableHeaderLast: Ref<StkTableColumn<DT>[]>;
+    tableHeaders: Ref<StkTableColumn<DT>[][]>;
 };
 /** 暂存纵向虚拟滚动的数据 */
 export type VirtualScrollStore = {
@@ -41,7 +42,7 @@ export type VirtualScrollXStore = {
  * @param param0
  * @returns
  */
-export declare function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainer, dataSourceCopy, tableHeaderLast }: Option<DT>): {
+export declare function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainer, dataSourceCopy, tableHeaderLast, tableHeaders, }: Option<DT>): {
     virtualScroll: Ref<{
         containerHeight: number;
         pageSize: number;

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

@@ -8,7 +8,7 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './type
  * @param newItem 要插入的数据
  * @param targetArray 表格数据
  */
-export declare function insertToOrderedArray<T extends object>(sortState: SortState<keyof T>, newItem: any, targetArray: T[]): T[];
+export declare function insertToOrderedArray<T extends object>(sortState: SortState<keyof T>, newItem: any, targetArray: T[], sortConfig?: SortConfig<T>): T[];
 /**
  * 表格排序抽离
  * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
@@ -25,3 +25,5 @@ export declare function tableSort<T extends Record<string, any>>(sortOption: Sor
 export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: number): number;
 /** 获取列宽 */
 export declare function getColWidth(col: StkTableColumn<any> | null): number;
+/** 获取列宽配置。用于支持列宽配置数字 */
+export declare function getColWidthStr(col: StkTableColumn<any> | null | undefined, key?: 'width' | 'minWidth' | 'maxWidth'): string | undefined;

package/lib/stk-table-vue.js

@@ -70,23 +70,35 @@ function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs })
     }, debounceMs);
   }
 }
-function insertToOrderedArray(sortState, newItem, targetArray) {
+function isEmptyValue(val, isNumber) {
+  let isEmpty = val === null || val === "";
+  if (isNumber) {
+    isEmpty || (isEmpty = typeof val === "boolean" || Number.isNaN(+val));
+  }
+  return isEmpty;
+}
+function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {}) {
   const { dataIndex, order } = sortState;
+  sortConfig = { emptyToBottom: false, ...sortConfig };
   let { sortType } = sortState;
   if (!sortType)
     sortType = typeof newItem[dataIndex];
+  const isNumber = sortType === "number";
   const data = [...targetArray];
   if (!order) {
     data.unshift(newItem);
     return data;
   }
+  if (sortConfig.emptyToBottom && isEmptyValue(data)) {
+    data.push(newItem);
+  }
   let sIndex = 0;
   let eIndex = data.length - 1;
   const targetVal = newItem[dataIndex];
   while (sIndex <= eIndex) {
     const midIndex = Math.floor((sIndex + eIndex) / 2);
     const midVal = data[midIndex][dataIndex];
-    const compareRes = strCompare(midVal, targetVal, sortType);
+    const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
     if (compareRes === 0) {
       sIndex = midIndex;
       break;
@@ -105,17 +117,21 @@ function insertToOrderedArray(sortState, newItem, targetArray) {
   data.splice(sIndex, 0, newItem);
   return data;
 }
-function strCompare(a, b, type) {
-  if (type === "number") {
-    if (+a > +b)
-      return 1;
-    else if (+a === +b)
-      return 0;
-    else
-      return -1;
-  } else {
+function strCompare(a, b, isNumber, localeCompare = false) {
+  let _a = a;
+  let _b = b;
+  if (isNumber) {
+    _a = +a;
+    _b = +b;
+  } else if (localeCompare) {
     return String(a).localeCompare(b);
   }
+  if (_a > _b)
+    return 1;
+  else if (_a === _b)
+    return 0;
+  else
+    return -1;
 }
 function separatedData(sortOption, targetDataSource, isNumber) {
   const emptyArr = [];
@@ -123,10 +139,7 @@ function separatedData(sortOption, targetDataSource, isNumber) {
   for (let i = 0; i < targetDataSource.length; i++) {
     const row = targetDataSource[i];
     const sortField = sortOption.sortField || sortOption.dataIndex;
-    let isEmpty = row[sortField] === null || row[sortField] === "";
-    if (isNumber) {
-      isEmpty || (isEmpty = typeof row[sortField] === "boolean" || Number.isNaN(+row[sortField]));
-    }
+    const isEmpty = isEmptyValue(row[sortField], isNumber);
     if (isEmpty) {
       emptyArr.push(row);
     } else {
@@ -154,25 +167,16 @@ function tableSort(sortOption, order, dataSource, sortConfig = {}) {
     if (!sortType)
       sortType = typeof dataSource[0][sortField];
     const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, sortType === "number");
-    if (sortType === "number") {
-      if (order === "asc") {
-        valueArr.sort((a, b) => +a[sortField] - +b[sortField]);
-        targetDataSource = [...emptyArr, ...valueArr];
-      } else {
-        valueArr.sort((a, b) => +b[sortField] - +a[sortField]);
-        targetDataSource = [...valueArr, ...emptyArr];
-      }
+    const isNumber = sortType === "number";
+    if (order === "asc") {
+      valueArr.sort((a, b) => strCompare(a[sortField], b[sortField], isNumber, sortConfig.stringLocaleCompare));
     } else {
-      if (order === "asc") {
-        valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
-        targetDataSource = [...emptyArr, ...valueArr];
-      } else {
-        valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
-        targetDataSource = [...valueArr, ...emptyArr];
-      }
+      valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, sortConfig.stringLocaleCompare));
     }
-    if (sortConfig.emptyToBottom) {
+    if (order === "desc" || sortConfig.emptyToBottom) {
       targetDataSource = [...valueArr, ...emptyArr];
+    } else {
+      targetDataSource = [...emptyArr, ...valueArr];
     }
   }
   return targetDataSource;
@@ -188,10 +192,18 @@ function howDeepTheHeader(arr, level = 1) {
   return Math.max(...levels);
 }
 function getColWidth(col) {
-  if (typeof (col == null ? void 0 : col.width) === "number") {
-    return Math.floor(col.width ?? Default_Col_Width);
+  const val = (col == null ? void 0 : col.width) ?? Default_Col_Width;
+  if (typeof val === "number") {
+    return Math.floor(val);
   }
-  return parseInt((col == null ? void 0 : col.width) ?? Default_Col_Width);
+  return parseInt(val);
+}
+function getColWidthStr(col, key = "width") {
+  const val = col == null ? void 0 : col[key];
+  if (typeof val === "number") {
+    return val + "px";
+  }
+  return val;
 }
 function useColResize({
   tableContainer,
@@ -371,36 +383,54 @@ function useFixedCol({ props, tableHeaderLast, tableContainer }) {
     updateFixedShadow
   };
 }
-function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight }) {
+function useFixedStyle({
+  props,
+  tableHeaders,
+  virtualScroll,
+  virtualScrollX,
+  virtualX_on,
+  virtualX_offsetRight
+}) {
   const fixedColumnsPositionStore = computed(() => {
-    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 += getColWidth(item);
-      }
-      if (!rightStartIndex && item.fixed === "right") {
-        rightStartIndex = i;
+    const colKeyStore = {};
+    const refStore = /* @__PURE__ */ new WeakMap();
+    tableHeaders.value.forEach((cols) => {
+      let left = 0;
+      let rightStartIndex = 0;
+      for (let i = 0; i < cols.length; i++) {
+        const item = cols[i];
+        if (item.fixed === "left") {
+          if (item.dataIndex) {
+            colKeyStore[item.dataIndex] = left;
+          } else {
+            refStore.set(item, left);
+          }
+          left += getColWidth(item);
+        }
+        if (!rightStartIndex && item.fixed === "right") {
+          rightStartIndex = i;
+        }
       }
-    }
-    let right = 0;
-    for (let i = cols.length - 1; i >= rightStartIndex; i--) {
-      const item = cols[i];
-      if (item.fixed === "right") {
-        store[item.dataIndex] = right;
-        right += getColWidth(item);
+      let right = 0;
+      for (let i = cols.length - 1; i >= rightStartIndex; i--) {
+        const item = cols[i];
+        if (item.fixed === "right") {
+          if (item.dataIndex) {
+            colKeyStore[item.dataIndex] = right;
+          } else {
+            refStore.set(item, right);
+          }
+          right += getColWidth(item);
+        }
       }
-    }
-    return store;
+    });
+    return { refStore, colKeyStore };
   });
   function getFixedStyle(tagType, col, depth = 0) {
-    const { fixed, dataIndex } = col;
+    const { fixed } = col;
     const isFixedLeft = fixed === "left";
     const style = {};
+    const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
     if (Is_Legacy_Mode) {
       style.position = "relative";
     } else {
@@ -427,10 +457,11 @@ function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX,
           style.right = `${virtualX_offsetRight.value}px`;
         }
       } else {
+        const lr = (col.dataIndex ? colKeyStore[col.dataIndex] : refStore.get(col)) + "px";
         if (isFixedLeft) {
-          style.left = fixedColumnsPositionStore.value[dataIndex] + "px";
+          style.left = lr;
         } else {
-          style.right = fixedColumnsPositionStore.value[dataIndex] + "px";
+          style.right = lr;
         }
       }
     }
@@ -444,9 +475,9 @@ const HIGHLIGHT_ROW_CLASS = "highlight-row";
 const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 function useHighlight({ props, tableContainer }) {
   const highlightRowStore = ref({});
-  const highlightFrom = Highlight_Color[props.theme].from;
-  const highlightTo = Highlight_Color[props.theme].to;
-  const highlightInter = computed(() => interpolateRgb(highlightFrom, highlightTo));
+  const highlightFrom = computed(() => Highlight_Color[props.theme].from);
+  const highlightTo = computed(() => Highlight_Color[props.theme].to);
+  const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
   const highlightDimRowKeys = /* @__PURE__ */ new Set();
   const highlightDimRowsTimeout = /* @__PURE__ */ new Map();
   const highlightDimCellsTimeout = /* @__PURE__ */ new Map();
@@ -569,10 +600,11 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     if (!isMouseOver)
       return;
     e.preventDefault();
-    const { scrollTop, rowHeight, pageSize } = virtualScroll.value;
+    const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
     const { scrollLeft } = virtualScrollX.value;
     const { headless, headerRowHeight } = props;
     const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+    const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
     if (e.code === SCROLL_CODES[0]) {
       scrollTo(scrollTop - rowHeight, null);
     } else if (e.code === SCROLL_CODES[1]) {
@@ -582,9 +614,9 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     } else if (e.code === SCROLL_CODES[3]) {
       scrollTo(null, scrollLeft - rowHeight);
     } else if (e.code === SCROLL_CODES[4]) {
-      scrollTo(scrollTop - rowHeight * pageSize - headerHeight, null);
+      scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
     } else if (e.code === SCROLL_CODES[5]) {
-      scrollTo(scrollTop + rowHeight * pageSize - headerHeight, null);
+      scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
     }
   }
   function handleMouseEnter() {
@@ -650,7 +682,13 @@ function useThDrag({ props, emits }) {
   };
 }
 const VUE2_SCROLL_TIMEOUT_MS = 200;
-function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLast }) {
+function useVirtualScroll({
+  props,
+  tableContainer,
+  dataSourceCopy,
+  tableHeaderLast,
+  tableHeaders
+}) {
   const virtualScroll = ref({
     containerHeight: 0,
     rowHeight: props.rowHeight,
@@ -728,11 +766,13 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
     } else {
       containerHeight = offsetHeight || Default_Table_Height;
     }
-    Object.assign(virtualScroll.value, {
-      containerHeight,
-      pageSize: Math.ceil(containerHeight / rowHeight) + 1
-      // 这里最终+1，因为headless=true无头时，需要上下各预渲染一行。
-    });
+    const { headless, headerRowHeight } = props;
+    let pageSize = Math.ceil(containerHeight / rowHeight);
+    if (!headless) {
+      const headerToBodyRowHeightCount = Math.floor(tableHeaders.value.length * (headerRowHeight || rowHeight) / rowHeight);
+      pageSize -= headerToBodyRowHeightCount;
+    }
+    Object.assign(virtualScroll.value, { containerHeight, pageSize });
     updateVirtualScrollY(scrollTop);
   }
   function initVirtualScrollX() {
@@ -749,9 +789,27 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
   let vue2ScrollYTimeout = null;
   function updateVirtualScrollY(sTop = 0) {
     const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
-    const startIndex = Math.floor(sTop / rowHeight);
-    const offsetTop = startIndex * rowHeight;
+    virtualScroll.value.scrollTop = sTop;
+    let startIndex = Math.floor(sTop / rowHeight);
+    if (props.stripe) {
+      startIndex -= 1;
+    }
+    if (startIndex < 0) {
+      startIndex = 0;
+    }
+    if (props.stripe && startIndex !== 0) {
+      const scrollRows = Math.abs(oldStartIndex - startIndex);
+      if (scrollRows < 2) {
+        return;
+      } else if (scrollRows % 2) {
+        startIndex -= 1;
+      }
+    }
     let endIndex = startIndex + pageSize;
+    if (props.stripe) {
+      endIndex += 2;
+    }
+    const offsetTop = startIndex * rowHeight;
     if (endIndex > dataSourceCopy.value.length) {
       endIndex = dataSourceCopy.value.length;
     }
@@ -761,12 +819,11 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
     if (!props.optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
       Object.assign(virtualScroll.value, {
         startIndex,
-        offsetTop,
         endIndex,
-        scrollTop: sTop
+        offsetTop
       });
     } else {
-      Object.assign(virtualScroll.value, { endIndex, scrollTop: sTop });
+      virtualScroll.value.endIndex = endIndex;
       vue2ScrollYTimeout = window.setTimeout(() => {
         Object.assign(virtualScroll.value, { startIndex, offsetTop });
       }, VUE2_SCROLL_TIMEOUT_MS);
@@ -913,8 +970,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     fixedColShadow: { type: Boolean, default: false },
     optimizeVue2Scroll: { type: Boolean, default: false },
     sortConfig: { default: () => ({
-      emptyToBottom: false
-    }) }
+      emptyToBottom: false,
+      stringLocaleCompare: true
+    }) },
+    hideHeaderTitle: { type: [Boolean, Array], 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 }) {
@@ -955,10 +1014,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       initVirtualScrollX,
       updateVirtualScrollY,
       updateVirtualScrollX
-    } = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast });
+    } = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast, tableHeaders });
     const { getFixedStyle } = useFixedStyle({
       props,
-      tableHeaderLast,
+      tableHeaders,
       virtualScroll,
       virtualScrollX,
       virtualX_on,
@@ -1038,17 +1097,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           tableHeaders.value[depth] = [];
         }
         let allChildrenLen = 0;
+        let allChildrenWidthSum = 0;
         arr.forEach((col) => {
           col.__PARENT__ = parent;
           let colChildrenLen = 1;
+          let colWidth = 0;
           if (col.children) {
-            colChildrenLen = flat(
+            const [len, widthSum] = flat(
               col.children,
               col,
               depth + 1
               /* , col.fixed */
             );
+            colChildrenLen = len;
+            colWidth = widthSum;
           } else {
+            colWidth = getColWidth(col);
             tempHeaderLast.push(col);
           }
           tableHeaders.value[depth].push(col);
@@ -1060,9 +1124,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (colSpan !== 1) {
             col.colSpan = colSpan;
           }
+          if (!props.fixedMode && col.width === void 0) {
+            col.width = colWidth + "px";
+          }
           allChildrenLen += colChildrenLen;
+          allChildrenWidthSum += colWidth;
         });
-        return allChildrenLen;
+        return [allChildrenLen, allChildrenWidthSum];
       }
       flat(copyColumn, null);
       tableHeaderLast.value = tempHeaderLast;
@@ -1082,17 +1150,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return typeof props.colKey === "function" ? props.colKey(col) : col[props.colKey];
     }
     function getColWidthStyle(col) {
+      const width = getColWidthStr(col);
+      const minWidth = getColWidthStr(col, "minWidth");
+      const maxWidth = getColWidthStr(col, "maxWidth");
       const style = {
-        width: col.width,
-        minWidth: col.minWidth,
-        maxWidth: col.maxWidth
+        width,
+        minWidth: minWidth ?? width,
+        maxWidth: maxWidth ?? width
       };
       if (props.colResizable) {
-        style.minWidth = col.width;
-        style.maxWidth = col.width;
-      } else {
-        style.minWidth = col.minWidth === void 0 ? col.width : col.minWidth;
-        style.maxWidth = col.maxWidth === void 0 ? col.width : col.maxWidth;
+        style.minWidth = width;
+        style.maxWidth = width;
       }
       return style;
     }
@@ -1108,6 +1176,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return style;
     }
+    function getHeaderTitle(col) {
+      if (props.hideHeaderTitle === true || Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(col.dataIndex)) {
+        return "";
+      }
+      return col.title || "";
+    }
     function onColumnSort(col, click = true, options = {}) {
       if (!(col == null ? void 0 : col.sorter))
         return;
@@ -1329,7 +1403,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
                     colspan: col.colSpan,
                     style: normalizeStyle(getCellStyle(1, col, rowIndex)),
-                    title: col.title,
+                    title: getHeaderTitle(col),
                     class: normalizeClass([
                       col.sorter ? "sortable" : "",
                       col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],