stk-table-vue 0.2.2 → 0.2.5

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 {
@@ -138,37 +151,32 @@ function separatedData(sortOption, targetDataSource, isNumber) {
 function tableSort(sortOption, order, dataSource, sortConfig = {}) {
   if (!(dataSource == null ? void 0 : dataSource.length))
     return dataSource || [];
-  sortConfig = Object.assign({ emptyToBottom: false }, sortConfig);
+  sortConfig = { emptyToBottom: false, ...sortConfig };
   let targetDataSource = [...dataSource];
+  let sortField = sortOption.sortField || sortOption.dataIndex;
+  if (!order && sortConfig.defaultSort) {
+    order = sortConfig.defaultSort.order;
+    sortField = sortConfig.defaultSort.dataIndex;
+  }
   if (typeof sortOption.sorter === "function") {
     const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
     if (customSorterData)
       targetDataSource = customSorterData;
   } else if (order) {
-    const sortField = sortOption.sortField || sortOption.dataIndex;
     let { sortType } = sortOption;
     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;
@@ -184,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(val);
+}
+function getColWidthStr(col, key = "width") {
+  const val = col == null ? void 0 : col[key];
+  if (typeof val === "number") {
+    return val + "px";
   }
-  return parseInt((col == null ? void 0 : col.width) ?? Default_Col_Width);
+  return val;
 }
 function useColResize({
   tableContainer,
@@ -367,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 {
@@ -423,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;
         }
       }
     }
@@ -436,11 +471,14 @@ function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX,
     getFixedStyle
   };
 }
-function useHighlight({ props, tableContainer, rowKeyGen }) {
-  const highlightInter = computed(() => {
-    return interpolateRgb(Highlight_Color[props.theme].from, Highlight_Color[props.theme].to);
-  });
-  const highlightDimRows = /* @__PURE__ */ new Set();
+const HIGHLIGHT_ROW_CLASS = "highlight-row";
+const HIGHLIGHT_CELL_CLASS = "highlight-cell";
+function useHighlight({ props, tableContainer }) {
+  const highlightRowStore = ref({});
+  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();
   let calcHighlightDimLoop = false;
@@ -451,18 +489,17 @@ function useHighlight({ props, tableContainer, rowKeyGen }) {
     const recursion = () => {
       window.setTimeout(() => {
         const nowTs = Date.now();
-        const needDeleteRows = [];
-        highlightDimRows.forEach((row) => {
-          const progress = (nowTs - row._bgc_progress_ms) / Highlight_Duration;
+        highlightDimRowKeys.forEach((rowKeyValue) => {
+          const highlightItem = highlightRowStore.value[rowKeyValue];
+          const progress = (nowTs - highlightItem.bgc_progress_ms) / Highlight_Duration;
           if (0 < progress && progress < 1) {
-            row._bgc = highlightInter.value(progress);
+            highlightItem.bgc = highlightInter.value(progress);
           } else {
-            row._bgc = "";
-            needDeleteRows.push(row);
+            highlightItem.bgc = "";
+            highlightDimRowKeys.delete(rowKeyValue);
           }
         });
-        needDeleteRows.forEach((row) => highlightDimRows.delete(row));
-        if (highlightDimRows.size > 0) {
+        if (highlightDimRowKeys.size > 0) {
           recursion();
         } else {
           calcHighlightDimLoop = false;
@@ -476,16 +513,16 @@ function useHighlight({ props, tableContainer, rowKeyGen }) {
     const cellEl = (_a = tableContainer.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
     if (!cellEl)
       return;
-    if (cellEl.classList.contains("highlight-cell")) {
-      cellEl.classList.remove("highlight-cell");
+    if (cellEl.classList.contains(HIGHLIGHT_CELL_CLASS)) {
+      cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
       void cellEl.offsetHeight;
     }
-    cellEl.classList.add("highlight-cell");
+    cellEl.classList.add(HIGHLIGHT_CELL_CLASS);
     window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
     highlightDimCellsTimeout.set(
       rowKeyValue,
       window.setTimeout(() => {
-        cellEl.classList.remove("highlight-cell");
+        cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
         highlightDimCellsTimeout.delete(rowKeyValue);
       }, Highlight_Duration)
     );
@@ -498,11 +535,12 @@ function useHighlight({ props, tableContainer, rowKeyGen }) {
       const nowTs = Date.now();
       for (let i = 0; i < rowKeyValues.length; i++) {
         const rowKeyValue = rowKeyValues[i];
-        const row = props.dataSource.find((it) => rowKeyGen(it) === rowKeyValue);
-        if (!row)
-          continue;
-        row._bgc_progress_ms = nowTs;
-        highlightDimRows.add(row);
+        highlightRowStore.value[rowKeyValue] = {
+          bgc: "",
+          bgc_progress: 0,
+          bgc_progress_ms: nowTs
+        };
+        highlightDimRowKeys.add(rowKeyValue);
       }
       calcHighlightLoop();
     } else {
@@ -513,8 +551,8 @@ function useHighlight({ props, tableContainer, rowKeyGen }) {
         const rowEl = (_a = tableContainer.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]`);
         if (!rowEl)
           continue;
-        if (rowEl.classList.contains("highlight-row")) {
-          rowEl.classList.remove("highlight-row");
+        if (rowEl.classList.contains(HIGHLIGHT_ROW_CLASS)) {
+          rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
           needRepaint = true;
         }
         rowElTemp.push(rowEl);
@@ -522,7 +560,7 @@ function useHighlight({ props, tableContainer, rowKeyGen }) {
         highlightDimRowsTimeout.set(
           rowKeyValue,
           window.setTimeout(() => {
-            rowEl.classList.remove("highlight-row");
+            rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
             highlightDimRowsTimeout.delete(rowKeyValue);
           }, Highlight_Duration)
         );
@@ -530,10 +568,11 @@ function useHighlight({ props, tableContainer, rowKeyGen }) {
       if (needRepaint) {
         void ((_b = tableContainer.value) == null ? void 0 : _b.offsetWidth);
       }
-      rowElTemp.forEach((el) => el.classList.add("highlight-row"));
+      rowElTemp.forEach((el) => el.classList.add(HIGHLIGHT_ROW_CLASS));
     }
   }
   return {
+    highlightRowStore,
     setHighlightDimRow,
     setHighlightDimCell
   };
@@ -561,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]) {
@@ -574,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() {
@@ -642,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,
@@ -720,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() {
@@ -741,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;
     }
@@ -753,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);
@@ -887,8 +952,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     virtualX: { type: Boolean, default: false },
     columns: { default: () => [] },
     dataSource: { default: () => [] },
-    rowKey: { type: [String, Function], default: "" },
-    colKey: { type: [String, Function], default: "dataIndex" },
+    rowKey: { type: [String, Number, Function], default: "" },
+    colKey: { type: [String, Number, Function], default: "dataIndex" },
     emptyCellText: { default: "--" },
     noDataFull: { type: Boolean, default: false },
     showNoData: { type: Boolean, default: true },
@@ -905,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 }) {
@@ -947,16 +1014,16 @@ 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,
       virtualX_offsetRight
     });
-    const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
+    const { highlightRowStore, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer });
     if (props.autoResize) {
       useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });
     }
@@ -1008,7 +1075,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       initVirtualScroll();
       updateFixedShadow();
+      dealDefaultSorter();
     });
+    function dealDefaultSorter() {
+      if (!props.sortConfig.defaultSort)
+        return;
+      const { dataIndex, order } = props.sortConfig.defaultSort;
+      setSorter(dataIndex, order);
+    }
     function dealColumns() {
       tableHeaders.value = [];
       tableHeaderLast.value = [];
@@ -1023,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);
@@ -1045,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;
@@ -1067,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;
     }
@@ -1093,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;
@@ -1104,8 +1193,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (click)
         sortOrderIndex.value++;
       sortOrderIndex.value = sortOrderIndex.value % 3;
-      const order = sortSwitchOrder[sortOrderIndex.value];
+      let order = sortSwitchOrder[sortOrderIndex.value];
       const sortConfig = props.sortConfig;
+      const defaultSort = sortConfig.defaultSort;
+      if (!order && defaultSort) {
+        order = defaultSort.order;
+        sortOrderIndex.value = sortSwitchOrder.indexOf(order);
+        sortCol.value = defaultSort.dataIndex;
+      }
       if (!props.sortRemote || options.force) {
         dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);
       }
@@ -1189,7 +1284,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a;
       const newOption = { silent: true, sortOption: null, sort: true, ...option };
       sortCol.value = dataIndex;
-      sortOrderIndex.value = sortSwitchOrder.findIndex((it) => it === order);
+      sortOrderIndex.value = sortSwitchOrder.indexOf(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)
@@ -1308,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)],
@@ -1377,6 +1472,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }), 128)) : createCommentVNode("", true)
             ], 4)) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, i) => {
+              var _a;
               return openBlock(), createElementBlock("tr", {
                 key: _ctx.rowKey ? rowKeyGen(row) : i,
                 "data-row-key": _ctx.rowKey ? rowKeyGen(row) : i,
@@ -1386,7 +1482,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   [_ctx.rowClassName(row, i)]: true
                 }),
                 style: normalizeStyle({
-                  backgroundColor: row._bgc
+                  backgroundColor: (_a = unref(highlightRowStore)[rowKeyGen(row)]) == null ? void 0 : _a.bgc
                 }),
                 onClick: (e) => onRowClick(e, row),
                 onDblclick: (e) => onRowDblclick(e, row),