stk-table-vue 0.6.8 → 0.6.10

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { openBlock, createElementBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeClass, unref, normalizeStyle, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createVNode, createTextVNode } from "vue";
+import { createElementBlock, openBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, createVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -59,7 +59,7 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
   sortConfig = { emptyToBottom: false, ...sortConfig };
   let { sortType } = sortState;
   if (!sortType) sortType = typeof newItem[dataIndex];
-  const data = [...targetArray];
+  const data = targetArray.slice();
   if (!order || !data.length) {
     data.unshift(newItem);
     return data;
@@ -125,7 +125,7 @@ function separatedData(sortOption, targetDataSource, isNumber) {
 function tableSort(sortOption, order, dataSource, sortConfig = {}) {
   if (!(dataSource == null ? void 0 : dataSource.length) || !sortOption) return dataSource || [];
   sortConfig = { emptyToBottom: false, ...sortConfig };
-  let targetDataSource = [...dataSource];
+  let targetDataSource = dataSource.slice();
   let sortField = sortOption.sortField || sortOption.dataIndex;
   if (!order && sortConfig.defaultSort) {
     order = sortConfig.defaultSort.order;
@@ -145,9 +145,9 @@ function tableSort(sortOption, order, dataSource, sortConfig = {}) {
       valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, sortConfig.stringLocaleCompare));
     }
     if (order === "desc" || sortConfig.emptyToBottom) {
-      targetDataSource = [...valueArr, ...emptyArr];
+      targetDataSource = valueArr.concat(emptyArr);
     } else {
-      targetDataSource = [...emptyArr, ...valueArr];
+      targetDataSource = emptyArr.concat(valueArr);
     }
   }
   return targetDataSource;
@@ -197,6 +197,7 @@ const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
 const DEFAULT_SMOOTH_SCROLL = _chromeVersion < 85;
 const STK_ID_PREFIX = "stk";
 const EXPANDED_ROW_KEY_PREFIX = "expanded-";
+const CELL_KEY_SEPARATE = "--";
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
   TagType2[TagType2["TD"] = 1] = "TD";
@@ -283,7 +284,7 @@ function getColWidth(col) {
   return parseInt(val);
 }
 function getCalculatedColWidth(col) {
-  return (col == null ? void 0 : col.__WIDTH__) ?? +DEFAULT_COL_WIDTH;
+  return (col && col.__WIDTH__) ?? 100;
 }
 function createStkTableId() {
   let id = window.__STK_TB_ID_COUNT__;
@@ -338,7 +339,8 @@ function useColResize({
     const { left } = tableContainerRef.value.getBoundingClientRect();
     const tableHeaderLastValue = tableHeaderLast.value;
     let revertMoveX = false;
-    const colIndex = tableHeaderLastValue.findIndex((it) => colKeyGen.value(it) === colKeyGen.value(col));
+    const colKey = colKeyGen.value;
+    const colIndex = tableHeaderLastValue.findIndex((it) => colKey(it) === colKey(col));
     const fixedIndex = fixedCols.value.indexOf(col);
     const isFixed = fixedIndex !== -1;
     if (leftHandle) {
@@ -394,10 +396,11 @@ function useColResize({
     const moveX = revertMoveX ? startX - clientX : clientX - startX;
     let width = getCalculatedColWidth(lastCol) + moveX;
     if (width < props.colMinWidth) width = props.colMinWidth;
-    const curCol = tableHeaderLast.value.find((it) => colKeyGen.value(it) === colKeyGen.value(lastCol));
+    const colKey = colKeyGen.value;
+    const curCol = tableHeaderLast.value.find((it) => colKey(it) === colKey(lastCol));
     if (!curCol) return;
     curCol.width = width + "px";
-    emits("update:columns", [...props.columns]);
+    emits("update:columns", props.columns.slice());
     emits("col-resize", { ...curCol });
     if (colResizeIndicatorRef.value) {
       const style = colResizeIndicatorRef.value.style;
@@ -441,38 +444,39 @@ function useFixedCol({
   const fixedColClassMap = computed(() => {
     const colMap = /* @__PURE__ */ new Map();
     const fixedShadowColsValue = fixedShadowCols.value;
+    const fixedColsValue = fixedCols.value;
+    const colKey = colKeyGen.value;
+    const fixedColShadow = props.fixedColShadow;
     tableHeaders.value.forEach((cols) => {
       cols.forEach((col) => {
-        const showShadow = props.fixedColShadow && col.fixed && fixedShadowColsValue.includes(col);
+        const fixed = col.fixed;
+        const showShadow = fixedColShadow && fixed && fixedShadowColsValue.includes(col);
         const classObj = {
-          "fixed-cell": col.fixed,
-          ["fixed-cell--" + col.fixed]: col.fixed,
-          "fixed-cell--shadow": showShadow,
-          ["fixed-cell--active"]: fixedCols.value.includes(col)
+          "fixed-cell--active": fixedColsValue.includes(col)
           // 表示该列正在被固定
         };
-        colMap.set(colKeyGen.value(col), classObj);
+        if (fixed) {
+          classObj["fixed-cell"] = true;
+          classObj["fixed-cell--" + fixed] = true;
+        }
+        if (showShadow) {
+          classObj["fixed-cell--shadow"] = true;
+        }
+        colMap.set(colKey(col), classObj);
       });
     });
     return colMap;
   });
   function updateFixedShadow(virtualScrollX) {
     const fixedColsTemp = [];
+    const getFixedColPositionValue = getFixedColPosition.value;
     let clientWidth, scrollLeft;
     if (virtualScrollX == null ? void 0 : virtualScrollX.value) {
-      const {
-        containerWidth: cw,
-        /* scrollWidth: sw, */
-        scrollLeft: sl
-      } = virtualScrollX.value;
+      const { containerWidth: cw, scrollLeft: sl } = virtualScrollX.value;
       clientWidth = cw;
       scrollLeft = sl;
     } else {
-      const {
-        clientWidth: cw,
-        /* scrollWidth: sw, */
-        scrollLeft: sl
-      } = tableContainerRef.value;
+      const { clientWidth: cw, scrollLeft: sl } = tableContainerRef.value;
       clientWidth = cw;
       scrollLeft = sl;
     }
@@ -481,7 +485,7 @@ function useFixedCol({
     tableHeadersForCalc.value.forEach((row, level) => {
       let left = 0;
       row.forEach((col) => {
-        const position = getFixedColPosition.value(col);
+        const position = getFixedColPositionValue(col);
         const isFixedLeft = col.fixed === "left";
         const isFixedRight = col.fixed === "right";
         if (isFixedLeft && position + scrollLeft > left) {
@@ -498,7 +502,7 @@ function useFixedCol({
       });
     });
     if (props.fixedColShadow) {
-      fixedShadowCols.value = [...leftShadowCol, ...rightShadowCol].filter(Boolean);
+      fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean);
     }
     fixedCols.value = fixedColsTemp;
   }
@@ -524,17 +528,17 @@ function useFixedStyle({
     const { fixed } = col;
     if (tagType === TagType.TD && !fixed) return null;
     const style = {};
+    const { headerRowHeight, rowHeight } = props;
     const isFixedLeft = fixed === "left";
+    const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+    const scrollRight = scrollWidth - containerWidth - scrollLeft;
     if (tagType === TagType.TH) {
       if (isRelativeMode.value) {
         style.top = virtualScroll.value.scrollTop + "px";
       } else {
-        const rowHeight = props.headerRowHeight ?? props.rowHeight;
-        style.top = depth * rowHeight + "px";
+        style.top = depth * (headerRowHeight ?? rowHeight) + "px";
       }
     }
-    const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
-    const scrollRight = scrollWidth - containerWidth - scrollLeft;
     if (fixed === "left" || fixed === "right") {
       if (isRelativeMode.value) {
         if (isFixedLeft) {
@@ -559,13 +563,14 @@ function useGetFixedColPosition({ tableHeadersForCalc, colKeyGen }) {
   const getFixedColPosition = computed(() => {
     const colKeyStore = {};
     const refStore = /* @__PURE__ */ new WeakMap();
+    const colKeyGenValue = colKeyGen.value;
     tableHeadersForCalc.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") {
-          const colKey = colKeyGen.value(item);
+          const colKey = colKeyGenValue(item);
           if (colKey) {
             colKeyStore[colKey] = left;
           } else {
@@ -580,7 +585,7 @@ function useGetFixedColPosition({ tableHeadersForCalc, colKeyGen }) {
       let right = 0;
       for (let i = cols.length - 1; i >= rightStartIndex; i--) {
         const item = cols[i];
-        const colKey = colKeyGen.value(item);
+        const colKey = colKeyGenValue(item);
         if (item.fixed === "right") {
           if (colKey) {
             colKeyStore[colKey] = right;
@@ -592,7 +597,7 @@ function useGetFixedColPosition({ tableHeadersForCalc, colKeyGen }) {
       }
     });
     return (col) => {
-      const colKey = colKeyGen.value(col);
+      const colKey = colKeyGenValue(col);
       return colKey ? colKeyStore[colKey] : refStore.get(col) || 0;
     };
   });
@@ -919,7 +924,7 @@ function useThDrag({ props, emits, colKeyGen }) {
   function handleColOrderChange(dragStartKey, dragEndKey) {
     if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
     if (dragConfig.value.mode !== "none") {
-      const columns = [...props.columns];
+      const columns = props.columns.slice();
       const dragStartIndex = columns.findIndex((col) => colKeyGen.value(col) === dragStartKey);
       const dragEndIndex = columns.findIndex((col) => colKeyGen.value(col) === dragEndKey);
       if (dragStartIndex === -1 || dragEndIndex === -1) return;
@@ -1014,7 +1019,7 @@ function useTrDrag({ props, emits, dataSourceCopy }) {
     const endIndex = rowIndex;
     if (sourceIndex === endIndex) return;
     if (mode !== "none") {
-      const dataSourceTemp = [...dataSourceCopy.value];
+      const dataSourceTemp = dataSourceCopy.value.slice();
       const sourceRow = dataSourceTemp[sourceIndex];
       if (mode === "swap") {
         dataSourceTemp[sourceIndex] = dataSourceTemp[endIndex];
@@ -1023,7 +1028,7 @@ function useTrDrag({ props, emits, dataSourceCopy }) {
         dataSourceTemp.splice(sourceIndex, 1);
         dataSourceTemp.splice(endIndex, 0, sourceRow);
       }
-      dataSourceCopy.value = [...dataSourceTemp];
+      dataSourceCopy.value = dataSourceTemp;
     }
     emits("row-order-change", sourceIndex, endIndex);
   }
@@ -1157,25 +1162,25 @@ function useVirtualScroll({
   }
   let vue2ScrollYTimeout = null;
   const autoRowHeightMap = /* @__PURE__ */ new Map();
-  const setAutoHeight = (rowKey, height) => {
+  function setAutoHeight(rowKey, height) {
     if (!height) {
       autoRowHeightMap.delete(rowKey);
     } else {
       autoRowHeightMap.set(rowKey, height);
     }
-  };
-  const clearAllAutoHeight = () => {
+  }
+  function clearAllAutoHeight() {
     autoRowHeightMap.clear();
-  };
-  const getAutoRowHeight = (row) => {
+  }
+  function getAutoRowHeight(row) {
     var _a;
     const rowKey = String(rowKeyGen(row));
     const storedHeight = autoRowHeightMap.get(rowKey);
-    let expectedHeight;
     if (storedHeight) {
       return storedHeight;
     }
-    if (expectedHeight = (_a = props.autoRowHeight) == null ? void 0 : _a.expectedHeight) {
+    const expectedHeight = (_a = props.autoRowHeight) == null ? void 0 : _a.expectedHeight;
+    if (expectedHeight) {
       if (typeof expectedHeight === "function") {
         return expectedHeight(row);
       } else {
@@ -1183,8 +1188,8 @@ function useVirtualScroll({
       }
     }
     return props.rowHeight || DEFAULT_ROW_HEIGHT;
-  };
-  const createGetRowHeightFn = () => {
+  }
+  function createGetRowHeightFn() {
     var _a;
     if (props.autoRowHeight) {
       return (row) => getAutoRowHeight(row);
@@ -1195,7 +1200,7 @@ function useVirtualScroll({
       return (row) => row.__EXPANDED_ROW__ ? expandedRowHeight : rowHeight;
     }
     return () => props.rowHeight || DEFAULT_ROW_HEIGHT;
-  };
+  }
   function updateVirtualScrollY(sTop = 0) {
     var _a;
     const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
@@ -1270,7 +1275,7 @@ function useVirtualScroll({
     const tableHeaderLastValue = tableHeaderLast.value;
     const headerLength = tableHeaderLastValue == null ? void 0 : tableHeaderLastValue.length;
     if (!headerLength) return;
-    const { scrollLeft } = virtualScrollX.value;
+    const { scrollLeft, containerWidth } = virtualScrollX.value;
     let startIndex = 0;
     let offsetLeft = 0;
     let colWidthSum = 0;
@@ -1293,12 +1298,12 @@ function useVirtualScroll({
       }
     }
     colWidthSum = leftFirstColRestWidth;
-    const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
+    const containerW = containerWidth - leftColWidthSum;
     let endIndex = headerLength;
     for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
       const col = tableHeaderLastValue[colIndex];
       colWidthSum += getCalculatedColWidth(col);
-      if (colWidthSum >= containerWidth) {
+      if (colWidthSum >= containerW) {
         endIndex = colIndex + 1;
         break;
       }
@@ -1335,31 +1340,23 @@ function useVirtualScroll({
   };
 }
 const _hoisted_1 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
-const _hoisted_2 = {
-  key: 1,
-  class: "table-header-title"
-};
+const _hoisted_2 = ["onMousedown"];
 const _hoisted_3 = { class: "table-header-title" };
-const _hoisted_4 = {
-  key: 3,
-  class: "table-header-sorter"
-};
-const _hoisted_5 = ["onMousedown"];
-const _hoisted_6 = ["onMousedown"];
-const _hoisted_7 = {
+const _hoisted_4 = ["onMousedown"];
+const _hoisted_5 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_8 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover", "onDrop"];
-const _hoisted_9 = {
+const _hoisted_6 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover", "onDrop"];
+const _hoisted_7 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_10 = ["colspan"];
-const _hoisted_11 = { class: "table-cell-wrapper" };
-const _hoisted_12 = ["data-cell-key", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
-const _hoisted_13 = ["title"];
-const _hoisted_14 = { key: 1 };
+const _hoisted_8 = ["colspan"];
+const _hoisted_9 = { class: "table-cell-wrapper" };
+const _hoisted_10 = ["data-cell-key", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_11 = ["title"];
+const _hoisted_12 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -1410,9 +1407,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     expandConfig: { default: () => ({}) },
     dragRowConfig: { default: () => ({}) },
     cellFixedMode: { default: "sticky" },
-    smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL }
+    smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL },
+    scrollRowByRow: { type: Boolean, default: false }
   },
-  emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "row-order-change", "col-resize", "toggle-row-expand", "update:columns"],
+  emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "cell-mousedown", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "row-order-change", "col-resize", "toggle-row-expand", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const stkTableId = createStkTableId();
     const props = __props;
@@ -1431,21 +1429,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let sortOrderIndex = ref(0);
     const sortSwitchOrder = [null, "desc", "asc"];
     const tableHeaders = shallowRef([]);
-    const tableHeaderLast = shallowRef([]);
     const tableHeadersForCalc = shallowRef([]);
-    const dataSourceCopy = shallowRef([...props.dataSource]);
+    const tableHeaderLast = computed(() => tableHeadersForCalc.value.at(-1) || []);
+    const dataSourceCopy = shallowRef(props.dataSource.slice());
+    const rowKeyGenComputed = computed(() => {
+      const { rowKey } = props;
+      if (typeof rowKey === "function") {
+        return (row) => rowKey(row);
+      } else {
+        return (row) => row[rowKey];
+      }
+    });
     const colKeyGen = computed(() => {
-      if (typeof props.colKey === "function") {
-        return (col) => props.colKey(col);
+      const { colKey } = props;
+      if (typeof colKey === "function") {
+        return (col) => colKey(col);
       } else {
-        return (col) => col ? col[props.colKey] : null;
+        return (col) => col[colKey];
       }
     });
     const getEmptyCellText = computed(() => {
-      if (typeof props.emptyCellText === "string") {
-        return () => props.emptyCellText;
+      const { emptyCellText } = props;
+      if (typeof emptyCellText === "string") {
+        return () => emptyCellText;
       } else {
-        return (col, row) => props.emptyCellText({ row, col });
+        return (col, row) => emptyCellText({ row, col });
       }
     });
     const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
@@ -1546,17 +1554,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (dataSourceCopy.value.length !== val.length) {
           needInitVirtualScrollY = true;
         }
-        dataSourceCopy.value = [...val];
+        dataSourceCopy.value = val.slice();
         if (needInitVirtualScrollY) {
           nextTick(() => initVirtualScrollY());
         }
-        if (sortCol.value) {
-          const column = tableHeaderLast.value.find((it) => colKeyGen.value(it) === sortCol.value);
+        const sortColValue = sortCol.value;
+        if (sortColValue) {
+          const colKey = colKeyGen.value;
+          const column = tableHeaderLast.value.find((it) => colKey(it) === sortColValue);
           onColumnSort(column, false);
         }
-      },
-      {
-        deep: false
       }
     );
     watch(
@@ -1591,12 +1598,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             centerCol.push(col);
           }
         });
-        copyColumn = [...leftCol, ...centerCol, ...rightCol];
+        copyColumn = leftCol.concat(centerCol).concat(rightCol);
       }
       const maxDeep = howDeepTheHeader(copyColumn);
-      const tempHeaderLast = [];
       if (maxDeep > 0 && props.virtualX) {
-        console.error("多级表头不支持横向虚拟滚动");
+        console.error("StkTableVue:多级表头不支持横向虚拟滚动!");
       }
       for (let i = 0; i <= maxDeep; i++) {
         tableHeadersTemp[i] = [];
@@ -1621,7 +1627,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             tableHeadersForCalcTemp[depth].push(col);
           } else {
             colWidth = getColWidth(col);
-            tempHeaderLast.push(col);
             for (let i = depth; i <= maxDeep; i++) {
               tableHeadersForCalcTemp[i].push(col);
             }
@@ -1643,18 +1648,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       flat(copyColumn, null);
       tableHeaders.value = tableHeadersTemp;
-      tableHeaderLast.value = tempHeaderLast;
       tableHeadersForCalc.value = tableHeadersForCalcTemp;
     }
     function rowKeyGen(row) {
       if (!row) return row;
-      let key = rowKeyGenStore.get(row);
+      let key = rowKeyGenStore.get(row) || row.__ROW_KEY__;
       if (!key) {
-        if (row.__ROW_KEY__) {
-          key = row.__ROW_KEY__;
-        } else {
-          key = typeof props.rowKey === "function" ? props.rowKey(row) : row[props.rowKey];
-        }
+        key = rowKeyGenComputed.value(row);
         if (key === void 0) {
           key = Math.random().toString();
         }
@@ -1663,35 +1663,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return key;
     }
     function cellKeyGen(row, col) {
-      return rowKeyGen(row) + "--" + colKeyGen.value(col);
+      return rowKeyGen(row) + CELL_KEY_SEPARATE + colKeyGen.value(col);
     }
     const cellStyleMap = computed(() => {
       const thMap = /* @__PURE__ */ new Map();
       const tdMap = /* @__PURE__ */ new Map();
+      const { virtualX, colResizable } = props;
       tableHeaders.value.forEach((cols, depth) => {
         cols.forEach((col) => {
           const colKey = colKeyGen.value(col);
-          const width = props.virtualX ? getCalculatedColWidth(col) + "px" : transformWidthToStr(col.width);
+          const width = virtualX ? getCalculatedColWidth(col) + "px" : transformWidthToStr(col.width);
           const style = {
             width
           };
-          if (props.colResizable) {
+          if (colResizable) {
             style.minWidth = width;
             style.maxWidth = width;
           } else {
             style.minWidth = transformWidthToStr(col.minWidth) ?? width;
             style.maxWidth = transformWidthToStr(col.maxWidth) ?? width;
           }
-          thMap.set(colKey, {
-            ...style,
-            ...getFixedStyle(TagType.TH, col, depth),
-            textAlign: col.headerAlign
-          });
-          tdMap.set(colKey, {
-            ...style,
-            ...getFixedStyle(TagType.TD, col, depth),
-            textAlign: col.align
-          });
+          thMap.set(colKey, Object.assign({ textAlign: col.headerAlign }, style, getFixedStyle(TagType.TH, col, depth)));
+          tdMap.set(colKey, Object.assign({ textAlign: col.align }, style, getFixedStyle(TagType.TD, col, depth), { textAlign: col.align }));
         });
       });
       return {
@@ -1708,7 +1701,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function onColumnSort(col, click = true, options = {}) {
       if (!col) {
-        console.warn("onColumnSort: col is not found");
+        console.warn("onColumnSort: not found col:", col);
         return;
       }
       if (!col.sorter && click) {
@@ -1725,6 +1718,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       let order = sortSwitchOrder[sortOrderIndex.value];
       const sortConfig = { ...props.sortConfig, ...col.sortConfig };
       const defaultSort = sortConfig.defaultSort;
+      const colKeyGenValue = colKeyGen.value;
       if (!order && defaultSort) {
         const colKey2 = defaultSort.key || defaultSort.dataIndex;
         if (!colKey2) {
@@ -1736,7 +1730,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         sortCol.value = colKey2;
         col = null;
         for (const row of tableHeaders.value) {
-          const c = row.find((item) => colKeyGen.value(item) === colKey2);
+          const c = row.find((item) => colKeyGenValue(item) === colKey2);
           if (c) {
             col = c;
             break;
@@ -1762,12 +1756,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         currentRow.value = void 0;
         currentRowKey.value = void 0;
-        emits("current-change", e, row, { select: false });
       } else {
         currentRow.value = row;
         currentRowKey.value = rowKeyGen(row);
-        emits("current-change", e, row, { select: true });
       }
+      emits("current-change", e, row, { select: !isCurrentRow });
     }
     function onRowDblclick(e, row) {
       emits("row-dblclick", e, row);
@@ -1779,15 +1772,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits("row-menu", e, row);
     }
     function onCellClick(e, row, col) {
+      if (col.type === "expand") {
+        toggleExpandRow(row, col);
+      }
       if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
+        const result = { row, col, select: false };
         if (props.selectedCellRevokable && currentSelectedCellKey.value === cellKey) {
           currentSelectedCellKey.value = void 0;
-          emits("cell-selected", e, { select: false, row, col });
         } else {
           currentSelectedCellKey.value = cellKey;
-          emits("cell-selected", e, { select: true, row, col });
+          result.select = true;
         }
+        emits("cell-selected", e, result);
       }
       emits("cell-click", e, row, col);
     }
@@ -1803,6 +1800,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onCellMouseOver(e, row, col) {
       emits("cell-mouseover", e, row, col);
     }
+    function onCellMouseDown(e, row, col) {
+      emits("cell-mousedown", e, row, col);
+    }
     function onTableWheel(e) {
       if (props.smoothScroll) {
         return;
@@ -1834,7 +1834,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onTableScroll(e) {
       if (!(e == null ? void 0 : e.target)) return;
       const { scrollTop, scrollLeft } = e.target;
-      const { scrollTop: vScrollTop } = virtualScroll.value;
+      const { scrollTop: vScrollTop, startIndex, endIndex } = virtualScroll.value;
       const { scrollLeft: vScrollLeft } = virtualScrollX.value;
       const isYScroll = scrollTop !== vScrollTop;
       const isXScroll = scrollLeft !== vScrollLeft;
@@ -1849,10 +1849,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         updateFixedShadow(virtualScrollX);
       }
-      const { startIndex, endIndex } = virtualScroll.value;
-      const data = { startIndex, endIndex };
       if (isYScroll) {
-        emits("scroll", e, data);
+        emits("scroll", e, { startIndex, endIndex });
       }
       if (isXScroll) {
         emits("scroll-x", e);
@@ -1909,8 +1907,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const newOption = { silent: true, sortOption: null, sort: true, ...option };
       sortCol.value = colKey;
       sortOrderIndex.value = sortSwitchOrder.indexOf(order);
+      const colKeyGenValue = colKeyGen.value;
       if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
-        const column = newOption.sortOption || tableHeaderLast.value.find((it) => colKeyGen.value(it) === sortCol.value);
+        const column = newOption.sortOption || tableHeaderLast.value.find((it) => colKeyGenValue(it) === sortCol.value);
         if (column) onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
         else console.warn("Can not find column by key:", sortCol.value);
       }
@@ -1919,7 +1918,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function resetSorter() {
       sortCol.value = void 0;
       sortOrderIndex.value = 0;
-      dataSourceCopy.value = [...props.dataSource];
+      dataSourceCopy.value = props.dataSource.slice();
     }
     function scrollTo(top = 0, left = 0) {
       if (!tableContainerRef.value) return;
@@ -1945,7 +1944,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         rowKey = rowKeyGen(rowKeyOrRow);
       }
-      const tempData = [...dataSourceCopy.value];
+      const tempData = dataSourceCopy.value.slice();
       const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
       if (index === -1) {
         console.warn("expandRow failed.rowKey:", rowKey);
@@ -2116,7 +2115,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "text-overflow": props.showOverflow,
           "header-text-overflow": props.showHeaderOverflow,
           "fixed-relative-mode": isRelativeMode.value,
-          "auto-row-height": props.autoRowHeight
+          "auto-row-height": props.autoRowHeight,
+          "scroll-row-by-row": props.scrollRowByRow
         }]),
         style: normalizeStyle({
           "--row-height": props.autoRowHeight ? void 0 : unref(virtualScroll).rowHeight + "px",
@@ -2127,8 +2127,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onScroll: onTableScroll,
         onWheel: onTableWheel
       }, [
-        _ctx.colResizable ? (openBlock(), createElementBlock("div", {
+        props.scrollRowByRow && _ctx.virtual ? (openBlock(), createElementBlock("div", {
           key: 0,
+          class: "row-by-row-table-height",
+          style: normalizeStyle({ height: dataSourceCopy.value.length * unref(virtualScroll).rowHeight + "px" })
+        }, null, 4)) : createCommentVNode("", true),
+        _ctx.colResizable ? (openBlock(), createElementBlock("div", {
+          key: 1,
           ref_key: "colResizeIndicatorRef",
           ref: colResizeIndicatorRef,
           class: "column-resize-indicator"
@@ -2180,6 +2185,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     onDragover: _cache[2] || (_cache[2] = //@ts-ignore
                     (...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
                   }, [
+                    unref(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "table-header-resizer left",
+                      onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
+                    }, null, 40, _hoisted_2)) : createCommentVNode("", true),
                     createElementVNode("div", {
                       class: "table-header-cell-wrapper",
                       style: normalizeStyle({ "--row-span": unref(virtualX_on) ? 1 : col.rowSpan })
@@ -2189,26 +2199,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         col,
                         colIndex,
                         rowIndex
-                      }, null, 8, ["col", "colIndex", "rowIndex"])) : col.type === "seq" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(col.title), 1)) : renderSlot(_ctx.$slots, "tableHeader", {
-                        key: 2,
+                      }, null, 8, ["col", "colIndex", "rowIndex"])) : renderSlot(_ctx.$slots, "tableHeader", {
+                        key: 1,
                         col
                       }, () => [
                         createElementVNode("span", _hoisted_3, toDisplayString(col.title), 1)
                       ]),
-                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_4, [
-                        createVNode(SortIcon)
-                      ])) : createCommentVNode("", true),
-                      unref(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
-                        key: 4,
-                        class: "table-header-resizer left",
-                        onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
-                      }, null, 40, _hoisted_5)) : createCommentVNode("", true),
-                      unref(colResizeOn)(col) ? (openBlock(), createElementBlock("div", {
-                        key: 5,
-                        class: "table-header-resizer right",
-                        onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
-                      }, null, 40, _hoisted_6)) : createCommentVNode("", true)
-                    ], 4)
+                      col.sorter ? (openBlock(), createBlock(SortIcon, {
+                        key: 2,
+                        class: "table-header-sorter"
+                      })) : createCommentVNode("", true)
+                    ], 4),
+                    unref(colResizeOn)(col) ? (openBlock(), createElementBlock("div", {
+                      key: 1,
+                      class: "table-header-resizer right",
+                      onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
+                    }, null, 40, _hoisted_4)) : createCommentVNode("", true)
                   ], 46, _hoisted_1);
                 }), 128)),
                 unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
@@ -2228,12 +2234,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onDragend: _cache[6] || (_cache[6] = //@ts-ignore
             (...args) => unref(onTrDragEnd) && unref(onTrDragEnd)(...args))
           }, [
-            unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
+            unref(virtual_on) && !props.scrollRowByRow ? (openBlock(), createElementBlock("tr", {
               key: 0,
               style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
               class: "padding-top-tr"
             }, [
-              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_7)) : createCommentVNode("", true),
+              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_5)) : createCommentVNode("", true),
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: colKeyGen.value(col),
@@ -2266,12 +2272,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onMouseover: (e) => onTrMouseOver(e, row),
                 onDrop: (e) => unref(onTrDrop)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
               }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_9)) : createCommentVNode("", true),
+                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_7)) : createCommentVNode("", true),
                 row && row.__EXPANDED_ROW__ ? (openBlock(), createElementBlock("td", {
                   key: 1,
                   colspan: unref(virtualX_columnPart).length
                 }, [
-                  createElementVNode("div", _hoisted_11, [
+                  createElementVNode("div", _hoisted_9, [
                     renderSlot(_ctx.$slots, "expand", {
                       row: row.__EXPANDED_ROW__,
                       col: row.__EXPANDED_COL__
@@ -2282,7 +2288,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ];
                     })
                   ])
-                ], 8, _hoisted_10)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
+                ], 8, _hoisted_8)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
                   return openBlock(), createElementBlock("td", {
                     key: colKeyGen.value(col),
                     "data-cell-key": cellKeyGen(row, col),
@@ -2298,10 +2304,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         "drag-row-cell": col.type === "dragRow"
                       }
                     ]),
-                    onClick: (e) => {
-                      col.type === "expand" && toggleExpandRow(row, col);
-                      onCellClick(e, row, col);
-                    },
+                    onClick: (e) => onCellClick(e, row, col),
+                    onMousedown: (e) => onCellMouseDown(e, row, col),
                     onMouseenter: (e) => onCellMouseEnter(e, row, col),
                     onMouseleave: (e) => onCellMouseLeave(e, row, col),
                     onMouseover: (e) => onCellMouseOver(e, row, col)
@@ -2322,7 +2326,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, [
                       col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                         createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex + 1), 1)
-                      ], 64)) : col.type === "expand" ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                      ], 64)) : col.type === "expand" ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                         createVNode(DragHandle, {
                           onDragstart: (e) => unref(onTrDragStart)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
                         }, null, 8, ["onDragstart"]),
@@ -2330,19 +2334,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
                         createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
                       ], 64))
-                    ], 10, _hoisted_13))
-                  ], 46, _hoisted_12);
+                    ], 10, _hoisted_11))
+                  ], 46, _hoisted_10);
                 }), 128))
-              ], 46, _hoisted_8);
+              ], 46, _hoisted_6);
             }), 128)),
-            unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
+            unref(virtual_on) && !props.scrollRowByRow ? (openBlock(), createElementBlock("tr", {
               key: 1,
               style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
             }, null, 4)) : createCommentVNode("", true)
           ], 32)
         ], 6),
         (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
-          key: 1,
+          key: 2,
           class: normalizeClass(["stk-table-no-data", { "no-data-full": _ctx.noDataFull }])
         }, [
           renderSlot(_ctx.$slots, "empty", {}, () => [