stk-table-vue 0.2.0 → 0.2.2

package/lib/stk-table-vue.js

@@ -20,7 +20,7 @@ try {
   console.error("Cannot get Chrome version", e);
 }
 const Is_Legacy_Mode = _chromeVersion < 56;
-function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }) {
+function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs }) {
   let resizeObserver = null;
   onMounted(() => {
     initResizeObserver();
@@ -70,6 +70,125 @@ function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, deb
     }, debounceMs);
   }
 }
+function insertToOrderedArray(sortState, newItem, targetArray) {
+  const { dataIndex, order } = sortState;
+  let { sortType } = sortState;
+  if (!sortType)
+    sortType = typeof newItem[dataIndex];
+  const data = [...targetArray];
+  if (!order) {
+    data.unshift(newItem);
+    return data;
+  }
+  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);
+    if (compareRes === 0) {
+      sIndex = midIndex;
+      break;
+    } else if (compareRes === -1) {
+      if (order === "asc")
+        sIndex = midIndex + 1;
+      else
+        eIndex = midIndex - 1;
+    } else {
+      if (order === "asc")
+        eIndex = midIndex - 1;
+      else
+        sIndex = midIndex + 1;
+    }
+  }
+  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 {
+    return String(a).localeCompare(b);
+  }
+}
+function separatedData(sortOption, targetDataSource, isNumber) {
+  const emptyArr = [];
+  const valueArr = [];
+  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]));
+    }
+    if (isEmpty) {
+      emptyArr.push(row);
+    } else {
+      valueArr.push(row);
+    }
+  }
+  return [valueArr, emptyArr];
+}
+function tableSort(sortOption, order, dataSource, sortConfig = {}) {
+  if (!(dataSource == null ? void 0 : dataSource.length))
+    return dataSource || [];
+  sortConfig = Object.assign({ emptyToBottom: false }, sortConfig);
+  let targetDataSource = [...dataSource];
+  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];
+      }
+    } 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];
+      }
+    }
+    if (sortConfig.emptyToBottom) {
+      targetDataSource = [...valueArr, ...emptyArr];
+    }
+  }
+  return targetDataSource;
+}
+function howDeepTheHeader(arr, level = 1) {
+  const levels = [level];
+  arr.forEach((item) => {
+    var _a;
+    if ((_a = item.children) == null ? void 0 : _a.length) {
+      levels.push(howDeepTheHeader(item.children, 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);
+  }
+  return parseInt((col == null ? void 0 : col.width) ?? Default_Col_Width);
+}
 function useColResize({
   tableContainer,
   tableHeaderLast,
@@ -137,7 +256,7 @@ function useColResize({
     const { lastCol, startX, startOffsetTableX } = colResizeState;
     const { clientX } = e;
     let moveX = clientX - startX;
-    const currentColWidth = parseInt((lastCol == null ? void 0 : lastCol.width) || Default_Col_Width);
+    const currentColWidth = getColWidth(lastCol);
     if (currentColWidth + moveX < props.colMinWidth) {
       moveX = -currentColWidth;
     }
@@ -152,7 +271,7 @@ function useColResize({
     const { startX, lastCol } = colResizeState;
     const { clientX } = e;
     const moveX = clientX - startX;
-    let width = parseInt((lastCol == null ? void 0 : lastCol.width) || Default_Col_Width) + moveX;
+    let width = getColWidth(lastCol) + moveX;
     if (width < props.colMinWidth)
       width = props.colMinWidth;
     const curCol = tableHeaderLast.value.find((it) => colKeyGen(it) === colKeyGen(lastCol));
@@ -201,7 +320,7 @@ function useFixedCol({ props, tableHeaderLast, tableContainer }) {
       return;
     fixedShadowCols = [];
     let lastLeftCol = null;
-    for (let i = tableHeaderLast.value.length - 1; i > 0; i--) {
+    for (let i = tableHeaderLast.value.length - 1; i >= 0; i--) {
       const col = tableHeaderLast.value[i];
       if (col.fixed === "left") {
         lastLeftCol = col;
@@ -258,7 +377,7 @@ function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX,
       const item = cols[i];
       if (item.fixed === "left") {
         store[item.dataIndex] = left;
-        left += parseInt(item.width || Default_Col_Width);
+        left += getColWidth(item);
       }
       if (!rightStartIndex && item.fixed === "right") {
         rightStartIndex = i;
@@ -269,7 +388,7 @@ function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX,
       const item = cols[i];
       if (item.fixed === "right") {
         store[item.dataIndex] = right;
-        right += parseInt(item.width || Default_Col_Width);
+        right += getColWidth(item);
       }
     }
     return store;
@@ -471,36 +590,57 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
       isMouseOver = true;
   }
 }
-function useThDrag({ emits }) {
+function useThDrag({ props, emits }) {
   let dragStartKey = void 0;
+  function findParentTH(el) {
+    let n = el;
+    while (n) {
+      if (n.tagName === "TH")
+        return n;
+      n = n.parentElement;
+    }
+  }
   function onThDragStart(e) {
-    dragStartKey = e.target.dataset.colKey;
+    const th = findParentTH(e.target);
+    if (!th)
+      return;
+    dragStartKey = th.dataset.colKey;
     emits("th-drag-start", dragStartKey);
   }
   function onThDragOver(e) {
+    const th = findParentTH(e.target);
+    if (!th)
+      return;
+    const isHeaderDraggable2 = th.getAttribute("draggable") === "true";
+    if (!isHeaderDraggable2) {
+      return;
+    }
     e.preventDefault();
   }
   function onThDrop(e) {
-    let th = e.target;
-    while (th) {
-      if (th.tagName === "TH")
-        break;
-      th = th.parentNode;
-    }
+    const th = findParentTH(e.target);
+    if (!th)
+      return;
     if (dragStartKey !== th.dataset.colKey) {
       emits("col-order-change", dragStartKey, th.dataset.colKey);
     }
     emits("th-drop", th.dataset.colKey);
   }
+  const isHeaderDragFun = typeof props.headerDrag === "function";
+  function isHeaderDraggable(col) {
+    if (isHeaderDragFun) {
+      return props.headerDrag(col);
+    } else {
+      return props.headerDrag;
+    }
+  }
   return {
     onThDragStart,
     onThDragOver,
-    onThDrop
+    onThDrop,
+    isHeaderDraggable
   };
 }
-function getCalcWidth(col) {
-  return parseInt(col.minWidth || col.width || Default_Col_Width);
-}
 const VUE2_SCROLL_TIMEOUT_MS = 200;
 function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLast }) {
   const virtualScroll = ref({
@@ -535,7 +675,7 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
     return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
   });
   const virtualX_on = computed(() => {
-    return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getCalcWidth(col), 0) > virtualScrollX.value.containerWidth + 100;
+    return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getColWidth(col), 0) > virtualScrollX.value.containerWidth + 100;
   });
   const virtualX_columnPart = computed(() => {
     if (virtualX_on.value) {
@@ -564,7 +704,7 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
     for (let i = virtualScrollX.value.endIndex; i < tableHeaderLast.value.length; i++) {
       const col = tableHeaderLast.value[i];
       if (col.fixed !== "right") {
-        width += getCalcWidth(col);
+        width += getColWidth(col);
       }
     }
     return width;
@@ -639,7 +779,7 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
       const col = tableHeaderLast.value[colIndex];
       if (col.fixed === "left")
         continue;
-      const colWidth = getCalcWidth(col);
+      const colWidth = getColWidth(col);
       colWidthSum += colWidth;
       if (colWidthSum >= sLeft) {
         offsetLeft = colWidthSum - colWidth;
@@ -651,7 +791,7 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
     let endIndex = headerLength;
     for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
       const col = tableHeaderLast.value[colIndex];
-      colWidthSum += getCalcWidth(col);
+      colWidthSum += getColWidth(col);
       if (colWidthSum >= virtualScrollX.value.containerWidth) {
         endIndex = colIndex + 1;
         break;
@@ -688,114 +828,10 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
     updateVirtualScrollX
   };
 }
-function insertToOrderedArray(sortState, newItem, targetArray) {
-  const { dataIndex, order } = sortState;
-  let { sortType } = sortState;
-  if (!sortType)
-    sortType = typeof newItem[dataIndex];
-  const data = [...targetArray];
-  if (!order) {
-    data.unshift(newItem);
-    return data;
-  }
-  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);
-    if (compareRes === 0) {
-      sIndex = midIndex;
-      break;
-    } else if (compareRes === -1) {
-      if (order === "asc")
-        sIndex = midIndex + 1;
-      else
-        eIndex = midIndex - 1;
-    } else {
-      if (order === "asc")
-        eIndex = midIndex - 1;
-      else
-        sIndex = midIndex + 1;
-    }
-  }
-  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 {
-    return String(a).localeCompare(b);
-  }
-}
-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 });
-    if (customSorterData)
-      targetDataSource = customSorterData;
-  } else if (order) {
-    const sortField = sortOption.sortField || sortOption.dataIndex;
-    let { sortType } = sortOption;
-    if (!sortType)
-      sortType = typeof dataSource[0][sortField];
-    if (sortType === "number") {
-      const nanArr = [];
-      const numArr = [];
-      for (let i = 0; i < targetDataSource.length; i++) {
-        const row = targetDataSource[i];
-        if (row[sortField] === null || row[sortField] === "" || typeof row[sortField] === "boolean" || Number.isNaN(+row[sortField])) {
-          nanArr.push(row);
-        } else {
-          numArr.push(row);
-        }
-      }
-      if (order === "asc") {
-        numArr.sort((a, b) => +a[sortField] - +b[sortField]);
-        targetDataSource = [...nanArr, ...numArr];
-      } else {
-        numArr.sort((a, b) => +b[sortField] - +a[sortField]);
-        targetDataSource = [...numArr, ...nanArr];
-      }
-    } else {
-      if (order === "asc") {
-        targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
-      } else {
-        targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
-      }
-    }
-  }
-  return targetDataSource;
-}
-function howDeepTheHeader(arr, level = 1) {
-  const levels = [level];
-  arr.forEach((item) => {
-    var _a;
-    if ((_a = item.children) == null ? void 0 : _a.length) {
-      levels.push(howDeepTheHeader(item.children, level + 1));
-    }
-  });
-  return Math.max(...levels);
-}
-const _hoisted_1 = {
-  key: 0
-};
+const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
-const _hoisted_3 = {
-  class: "table-header-cell-wrapper"
-};
-const _hoisted_4 = {
-  class: "table-header-title"
-};
+const _hoisted_3 = { class: "table-header-cell-wrapper" };
+const _hoisted_4 = { class: "table-header-title" };
 const _hoisted_5 = {
   key: 2,
   class: "table-header-sorter"
@@ -805,154 +841,75 @@ const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
   width: "16px",
   height: "16px",
   viewBox: "0 0 16 16"
-}, [/* @__PURE__ */ createElementVNode("polygon", {
-  class: "arrow-up",
-  fill: "#757699",
-  points: "8 2 4.8 6 11.2 6"
-}), /* @__PURE__ */ createElementVNode("polygon", {
-  class: "arrow-down",
-  transform: "translate(8, 12) rotate(-180) translate(-8, -12) ",
-  points: "8 10 4.8 14 11.2 14"
-})], -1);
-const _hoisted_7 = [_hoisted_6];
+}, [
+  /* @__PURE__ */ createElementVNode("polygon", {
+    class: "arrow-up",
+    fill: "#757699",
+    points: "8 2 4.8 6 11.2 6"
+  }),
+  /* @__PURE__ */ createElementVNode("polygon", {
+    class: "arrow-down",
+    transform: "translate(8, 12) rotate(-180) translate(-8, -12) ",
+    points: "8 10 4.8 14 11.2 14"
+  })
+], -1);
+const _hoisted_7 = [
+  _hoisted_6
+];
 const _hoisted_8 = ["onMousedown"];
 const _hoisted_9 = ["onMousedown"];
 const _hoisted_10 = {
   key: 0,
   class: "virtual-x-left",
-  style: {
-    "padding": "0"
-  }
+  style: { "padding": "0" }
 };
 const _hoisted_11 = ["data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
 const _hoisted_12 = {
   key: 0,
   class: "virtual-x-left",
-  style: {
-    "padding": "0"
-  }
+  style: { "padding": "0" }
 };
 const _hoisted_13 = ["data-index", "onClick"];
 const _hoisted_14 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
-    width: {
-      default: ""
-    },
-    minWidth: {
-      default: ""
-    },
-    maxWidth: {
-      default: ""
-    },
-    stripe: {
-      type: Boolean,
-      default: false
-    },
-    fixedMode: {
-      type: Boolean,
-      default: false
-    },
-    headless: {
-      type: Boolean,
-      default: false
-    },
-    theme: {
-      default: "light"
-    },
-    rowHeight: {
-      default: Default_Row_Height
-    },
-    headerRowHeight: {
-      default: null
-    },
-    virtual: {
-      type: Boolean,
-      default: false
-    },
-    virtualX: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      default: () => []
-    },
-    dataSource: {
-      default: () => []
-    },
-    rowKey: {
-      type: [String, Function],
-      default: ""
-    },
-    colKey: {
-      type: [String, Function],
-      default: "dataIndex"
-    },
-    emptyCellText: {
-      default: "--"
-    },
-    noDataFull: {
-      type: Boolean,
-      default: false
-    },
-    showNoData: {
-      type: Boolean,
-      default: true
-    },
-    sortRemote: {
-      type: Boolean,
-      default: false
-    },
-    showHeaderOverflow: {
-      type: Boolean,
-      default: false
-    },
-    showOverflow: {
-      type: Boolean,
-      default: false
-    },
-    showTrHoverClass: {
-      type: Boolean,
-      default: false
-    },
-    headerDrag: {
-      type: Boolean,
-      default: false
-    },
-    rowClassName: {
-      type: Function,
-      default: () => ""
-    },
-    colResizable: {
-      type: Boolean,
-      default: false
-    },
-    colMinWidth: {
-      default: 10
-    },
-    bordered: {
-      type: [Boolean, String],
-      default: true
-    },
-    autoResize: {
-      type: [Boolean, Function],
-      default: true
-    },
-    fixedColShadow: {
-      type: Boolean,
-      default: false
-    },
-    optimizeVue2Scroll: {
-      type: Boolean,
-      default: false
-    }
+    width: { default: "" },
+    minWidth: { default: "" },
+    maxWidth: { default: "" },
+    stripe: { type: Boolean, default: false },
+    fixedMode: { type: Boolean, default: false },
+    headless: { type: Boolean, default: false },
+    theme: { default: "light" },
+    rowHeight: { default: Default_Row_Height },
+    headerRowHeight: { default: null },
+    virtual: { type: Boolean, default: false },
+    virtualX: { type: Boolean, default: false },
+    columns: { default: () => [] },
+    dataSource: { default: () => [] },
+    rowKey: { type: [String, Function], default: "" },
+    colKey: { type: [String, Function], default: "dataIndex" },
+    emptyCellText: { default: "--" },
+    noDataFull: { type: Boolean, default: false },
+    showNoData: { type: Boolean, default: true },
+    sortRemote: { type: Boolean, default: false },
+    showHeaderOverflow: { type: Boolean, default: false },
+    showOverflow: { type: Boolean, default: false },
+    showTrHoverClass: { type: Boolean, default: false },
+    headerDrag: { type: [Boolean, Function], default: false },
+    rowClassName: { type: Function, default: () => "" },
+    colResizable: { type: Boolean, default: false },
+    colMinWidth: { default: 10 },
+    bordered: { type: [Boolean, String], default: true },
+    autoResize: { type: [Boolean, Function], default: true },
+    fixedColShadow: { type: Boolean, default: false },
+    optimizeVue2Scroll: { type: Boolean, default: false },
+    sortConfig: { default: () => ({
+      emptyToBottom: false
+    }) }
   },
   emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
-  setup(__props, {
-    expose: __expose,
-    emit: __emit
-  }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const tableContainer = ref();
@@ -967,10 +924,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tableHeaderLast = ref([]);
     const dataSourceCopy = shallowRef([...props.dataSource]);
     const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
-    const {
-      isColResizing,
-      onThResizeMouseDown
-    } = useColResize({
+    const { isColResizing, onThResizeMouseDown } = useColResize({
       props,
       emits,
       colKeyGen,
@@ -978,13 +932,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableContainer,
       tableHeaderLast
     });
-    const {
-      onThDragStart,
-      onThDragOver,
-      onThDrop
-    } = useThDrag({
-      emits
-    });
+    const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits });
     const {
       virtualScroll,
       virtualScrollX,
@@ -999,15 +947,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       initVirtualScrollX,
       updateVirtualScrollY,
       updateVirtualScrollX
-    } = useVirtualScroll({
-      tableContainer,
-      props,
-      dataSourceCopy,
-      tableHeaderLast
-    });
-    const {
-      getFixedStyle
-    } = useFixedStyle({
+    } = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast });
+    const { getFixedStyle } = useFixedStyle({
       props,
       tableHeaderLast,
       virtualScroll,
@@ -1015,22 +956,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       virtualX_on,
       virtualX_offsetRight
     });
-    const {
-      setHighlightDimCell,
-      setHighlightDimRow
-    } = useHighlight({
-      props,
-      tableContainer,
-      rowKeyGen
-    });
+    const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
     if (props.autoResize) {
-      useAutoResize({
-        tableContainer,
-        initVirtualScroll,
-        scrollTo,
-        props,
-        debounceMs: 500
-      });
+      useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });
     }
     useKeyboardArrowScroll(tableContainer, {
       props,
@@ -1039,40 +967,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       virtualScrollX,
       tableHeaders
     });
-    const {
-      getFixedColClass,
-      dealFixedColShadow,
-      updateFixedShadow
-    } = useFixedCol({
+    const { getFixedColClass, dealFixedColShadow, updateFixedShadow } = useFixedCol({
       props,
       tableContainer,
       tableHeaderLast
     });
-    watch(() => props.columns, () => {
-      dealColumns();
-      initVirtualScrollX();
-    });
-    dealColumns();
-    watch(() => props.dataSource, (val) => {
-      if (!val) {
-        console.warn("invalid dataSource");
-        return;
+    watch(
+      () => props.columns,
+      () => {
+        dealColumns();
+        initVirtualScrollX();
       }
-      let needInitVirtualScrollY = false;
-      if (dataSourceCopy.value.length !== val.length) {
-        needInitVirtualScrollY = true;
-      }
-      dataSourceCopy.value = [...val];
-      if (needInitVirtualScrollY)
-        initVirtualScrollY();
-      if (sortCol.value) {
-        const column = tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
-        onColumnSort(column, false);
+    );
+    dealColumns();
+    watch(
+      () => props.dataSource,
+      (val) => {
+        if (!val) {
+          console.warn("invalid dataSource");
+          return;
+        }
+        let needInitVirtualScrollY = false;
+        if (dataSourceCopy.value.length !== val.length) {
+          needInitVirtualScrollY = true;
+        }
+        dataSourceCopy.value = [...val];
+        if (needInitVirtualScrollY)
+          initVirtualScrollY();
+        if (sortCol.value) {
+          const column = tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
+          onColumnSort(column, false);
+        }
+        updateFixedShadow();
+      },
+      {
+        deep: false
       }
-      updateFixedShadow();
-    }, {
-      deep: false
-    });
+    );
     watch(() => props.fixedColShadow, dealFixedColShadow);
     onMounted(() => {
       initVirtualScroll();
@@ -1165,11 +1096,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onColumnSort(col, click = true, options = {}) {
       if (!(col == null ? void 0 : col.sorter))
         return;
-      options = {
-        force: false,
-        emit: false,
-        ...options
-      };
+      options = { force: false, emit: false, ...options };
       if (sortCol.value !== col.dataIndex) {
         sortCol.value = col.dataIndex;
         sortOrderIndex.value = 0;
@@ -1178,11 +1105,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         sortOrderIndex.value++;
       sortOrderIndex.value = sortOrderIndex.value % 3;
       const order = sortSwitchOrder[sortOrderIndex.value];
+      const sortConfig = props.sortConfig;
       if (!props.sortRemote || options.force) {
-        dataSourceCopy.value = tableSort(col, order, props.dataSource);
+        dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);
       }
       if (click || options.emit) {
-        emits("sort-change", col, order, toRaw(dataSourceCopy.value));
+        emits("sort-change", col, order, toRaw(dataSourceCopy.value), sortConfig);
       }
     }
     function onRowClick(e, row) {
@@ -1218,16 +1146,9 @@ 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 {
-        scrollLeft: vScrollLeft
-      } = virtualScrollX.value;
+      const { scrollTop, scrollLeft } = e.target;
+      const { scrollTop: vScrollTop } = virtualScroll.value;
+      const { scrollLeft: vScrollLeft } = virtualScrollX.value;
       const isYScroll = scrollTop !== vScrollTop;
       const isXScroll = scrollLeft !== vScrollLeft;
       if (isYScroll && virtual_on.value) {
@@ -1237,16 +1158,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         updateFixedShadow();
         if (virtualX_on.value) {
           updateVirtualScrollX(scrollLeft);
+        } else {
+          virtualScrollX.value.scrollLeft = scrollLeft;
         }
       }
-      const {
-        startIndex,
-        endIndex
-      } = virtualScroll.value;
-      const data = {
-        startIndex,
-        endIndex
-      };
+      const { startIndex, endIndex } = virtualScroll.value;
+      const data = { startIndex, endIndex };
       if (isYScroll) {
         emits("scroll", e, data);
       }
@@ -1259,9 +1176,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         currentHover.value = rowKeyGen(row);
       }
     }
-    function setCurrentRow(rowKey, option = {
-      silent: false
-    }) {
+    function setCurrentRow(rowKey, option = { silent: false }) {
       if (!dataSourceCopy.value.length)
         return;
       currentItem.value = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
@@ -1272,21 +1187,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function setSorter(dataIndex, order, option = {}) {
       var _a;
-      const newOption = {
-        silent: true,
-        sortOption: null,
-        sort: true,
-        ...option
-      };
+      const newOption = { silent: true, sortOption: null, sort: true, ...option };
       sortCol.value = dataIndex;
       sortOrderIndex.value = sortSwitchOrder.findIndex((it) => it === order);
       if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
         const column = newOption.sortOption || tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
         if (column)
-          onColumnSort(column, false, {
-            force: true,
-            emit: !newOption.silent
-          });
+          onColumnSort(column, false, { force: true, emit: !newOption.silent });
         else
           console.warn("Can not find column by dataIndex:", sortCol.value);
       }
@@ -1308,6 +1215,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function getTableData() {
       return toRaw(dataSourceCopy.value);
     }
+    function getSortColumns() {
+      const sortOrder = sortSwitchOrder[sortOrderIndex.value];
+      if (!sortOrder)
+        return [];
+      return [{ dataIndex: sortCol.value, order: sortOrder }];
+    }
     __expose({
       /** 初始化横向纵向虚拟滚动 */
       initVirtualScroll,
@@ -1323,6 +1236,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setHighlightDimRow,
       /** 表格排序列dataIndex */
       sortCol,
+      /** 获取当前排序状态 */
+      getSortColumns,
       /** 设置排序 */
       setSorter,
       /** 重置排序 */
@@ -1349,137 +1264,173 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "border-body-v": props.bordered === "body-v",
           stripe: props.stripe
         }]),
-        style: normalizeStyle(_ctx.virtual && {
-          "--row-height": unref(virtualScroll).rowHeight + "px",
-          "--header-row-height": (props.headerRowHeight || props.rowHeight) + "px"
-        }),
+        style: normalizeStyle(
+          _ctx.virtual && {
+            "--row-height": unref(virtualScroll).rowHeight + "px",
+            "--header-row-height": (props.headerRowHeight || props.rowHeight) + "px"
+          }
+        ),
         onScroll: onTableScroll,
         onWheel: onTableWheel
-      }, [withDirectives(createElementVNode("div", {
-        ref_key: "colResizeIndicator",
-        ref: colResizeIndicator,
-        class: "column-resize-indicator"
-      }, null, 512), [[vShow, _ctx.colResizable]]), createElementVNode("table", {
-        class: normalizeClass(["stk-table-main", {
-          "fixed-mode": props.fixedMode
-        }]),
-        style: normalizeStyle({
-          width: _ctx.width,
-          minWidth: _ctx.minWidth,
-          maxWidth: _ctx.maxWidth
-        })
-      }, [!_ctx.headless ? (openBlock(), createElementBlock("thead", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
-        return openBlock(), createElementBlock("tr", {
-          key: rowIndex,
-          onContextmenu: _cache[3] || (_cache[3] = (e) => onHeaderMenu(e))
-        }, [unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
+      }, [
+        withDirectives(createElementVNode("div", {
+          ref_key: "colResizeIndicator",
+          ref: colResizeIndicator,
+          class: "column-resize-indicator"
+        }, null, 512), [
+          [vShow, _ctx.colResizable]
+        ]),
+        createElementVNode("table", {
+          class: normalizeClass(["stk-table-main", {
+            "fixed-mode": props.fixedMode
+          }]),
+          style: normalizeStyle({ width: _ctx.width, minWidth: _ctx.minWidth, maxWidth: _ctx.maxWidth })
+        }, [
+          !_ctx.headless ? (openBlock(), createElementBlock("thead", _hoisted_1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
+              return openBlock(), createElementBlock("tr", {
+                key: rowIndex,
+                onContextmenu: _cache[3] || (_cache[3] = (e) => onHeaderMenu(e))
+              }, [
+                unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
+                  key: 0,
+                  class: "virtual-x-left",
+                  style: normalizeStyle({
+                    minWidth: unref(virtualScrollX).offsetLeft + "px",
+                    width: unref(virtualScrollX).offsetLeft + "px"
+                  })
+                }, null, 4)) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) && rowIndex === tableHeaders.value.length - 1 ? unref(virtualX_columnPart) : row, (col, colIndex) => {
+                  return openBlock(), createElementBlock("th", {
+                    key: col.dataIndex,
+                    "data-col-key": colKeyGen(col),
+                    draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
+                    rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
+                    colspan: col.colSpan,
+                    style: normalizeStyle(getCellStyle(1, col, rowIndex)),
+                    title: col.title,
+                    class: normalizeClass([
+                      col.sorter ? "sortable" : "",
+                      col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
+                      _ctx.showHeaderOverflow ? "text-overflow" : "",
+                      col.headerClassName,
+                      unref(getFixedColClass)(col)
+                    ]),
+                    onClick: (e) => {
+                      onColumnSort(col);
+                      onHeaderCellClick(e, col);
+                    },
+                    onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
+                    (...args) => unref(onThDragStart) && unref(onThDragStart)(...args)),
+                    onDrop: _cache[1] || (_cache[1] = //@ts-ignore
+                    (...args) => unref(onThDrop) && unref(onThDrop)(...args)),
+                    onDragover: _cache[2] || (_cache[2] = //@ts-ignore
+                    (...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
+                  }, [
+                    createElementVNode("div", _hoisted_3, [
+                      col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
+                        key: 0,
+                        col
+                      }, null, 8, ["col"])) : renderSlot(_ctx.$slots, "tableHeader", {
+                        key: 1,
+                        col
+                      }, () => [
+                        createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
+                      ]),
+                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true),
+                      _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
+                        key: 3,
+                        class: "table-header-resizer left",
+                        onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
+                      }, null, 40, _hoisted_8)) : createCommentVNode("", true),
+                      _ctx.colResizable ? (openBlock(), createElementBlock("div", {
+                        key: 4,
+                        class: "table-header-resizer right",
+                        onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
+                      }, null, 40, _hoisted_9)) : createCommentVNode("", true)
+                    ])
+                  ], 46, _hoisted_2);
+                }), 128)),
+                unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
+                  key: 1,
+                  class: "virtual-x-right",
+                  style: normalizeStyle({
+                    minWidth: unref(virtualX_offsetRight) + "px",
+                    width: unref(virtualX_offsetRight) + "px"
+                  })
+                }, null, 4)) : createCommentVNode("", true)
+              ], 32);
+            }), 128))
+          ])) : createCommentVNode("", true),
+          createElementVNode("tbody", null, [
+            unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
+              key: 0,
+              style: normalizeStyle({ height: `${unref(virtualScroll).offsetTop}px` }),
+              class: "padding-top-tr"
+            }, [
+              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
+              _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
+                return openBlock(), createElementBlock("td", {
+                  key: col.dataIndex,
+                  style: normalizeStyle(getCellStyle(2, col))
+                }, null, 4);
+              }), 128)) : createCommentVNode("", true)
+            ], 4)) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, i) => {
+              return openBlock(), createElementBlock("tr", {
+                key: _ctx.rowKey ? rowKeyGen(row) : i,
+                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : i,
+                class: normalizeClass({
+                  active: _ctx.rowKey ? rowKeyGen(row) === rowKeyGen(currentItem.value) : row === currentItem.value,
+                  hover: _ctx.rowKey ? rowKeyGen(row) === currentHover.value : row === currentHover.value,
+                  [_ctx.rowClassName(row, i)]: true
+                }),
+                style: normalizeStyle({
+                  backgroundColor: row._bgc
+                }),
+                onClick: (e) => onRowClick(e, row),
+                onDblclick: (e) => onRowDblclick(e, row),
+                onContextmenu: (e) => onRowMenu(e, row),
+                onMouseover: (e) => onTrMouseOver(e, row)
+              }, [
+                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
+                  return openBlock(), createElementBlock("td", {
+                    key: col.dataIndex,
+                    "data-index": col.dataIndex,
+                    class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", unref(getFixedColClass)(col)]),
+                    style: normalizeStyle(getCellStyle(2, col)),
+                    onClick: (e) => onCellClick(e, row, col)
+                  }, [
+                    col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
+                      key: 0,
+                      col,
+                      row,
+                      "cell-value": row[col.dataIndex]
+                    }, null, 8, ["col", "row", "cell-value"])) : (openBlock(), createElementBlock("div", {
+                      key: 1,
+                      class: "table-cell-wrapper",
+                      title: row[col.dataIndex]
+                    }, toDisplayString(row[col.dataIndex] ?? _ctx.emptyCellText), 9, _hoisted_14))
+                  ], 14, _hoisted_13);
+                }), 128))
+              ], 46, _hoisted_11);
+            }), 128)),
+            unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
+              key: 1,
+              style: normalizeStyle({ height: `${unref(virtual_offsetBottom)}px` })
+            }, null, 4)) : createCommentVNode("", true)
+          ])
+        ], 6),
+        (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: "virtual-x-left",
-          style: normalizeStyle({
-            minWidth: unref(virtualScrollX).offsetLeft + "px",
-            width: unref(virtualScrollX).offsetLeft + "px"
-          })
-        }, null, 4)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) && rowIndex === tableHeaders.value.length - 1 ? unref(virtualX_columnPart) : row, (col, colIndex) => {
-          return openBlock(), createElementBlock("th", {
-            key: col.dataIndex,
-            "data-col-key": colKeyGen(col),
-            draggable: _ctx.headerDrag ? "true" : "false",
-            rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
-            colspan: col.colSpan,
-            style: normalizeStyle(getCellStyle(1, col, rowIndex)),
-            title: col.title,
-            class: normalizeClass([col.sorter ? "sortable" : "", col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)], _ctx.showHeaderOverflow ? "text-overflow" : "", col.headerClassName, unref(getFixedColClass)(col)]),
-            onClick: (e) => {
-              onColumnSort(col);
-              onHeaderCellClick(e, col);
-            },
-            onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
-            (...args) => unref(onThDragStart) && unref(onThDragStart)(...args)),
-            onDrop: _cache[1] || (_cache[1] = //@ts-ignore
-            (...args) => unref(onThDrop) && unref(onThDrop)(...args)),
-            onDragover: _cache[2] || (_cache[2] = //@ts-ignore
-            (...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
-          }, [createElementVNode("div", _hoisted_3, [col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
-            key: 0,
-            col
-          }, null, 8, ["col"])) : renderSlot(_ctx.$slots, "tableHeader", {
-            key: 1,
-            col
-          }, () => [createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)]), col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true), _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
-            key: 3,
-            class: "table-header-resizer left",
-            onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
-          }, null, 40, _hoisted_8)) : createCommentVNode("", true), _ctx.colResizable ? (openBlock(), createElementBlock("div", {
-            key: 4,
-            class: "table-header-resizer right",
-            onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
-          }, null, 40, _hoisted_9)) : createCommentVNode("", true)])], 46, _hoisted_2);
-        }), 128)), unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
-          key: 1,
-          class: "virtual-x-right",
-          style: normalizeStyle({
-            minWidth: unref(virtualX_offsetRight) + "px",
-            width: unref(virtualX_offsetRight) + "px"
-          })
-        }, null, 4)) : createCommentVNode("", true)], 32);
-      }), 128))])) : createCommentVNode("", true), createElementVNode("tbody", null, [unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
-        key: 0,
-        style: normalizeStyle({
-          height: `${unref(virtualScroll).offsetTop}px`
-        }),
-        class: "padding-top-tr"
-      }, [unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true), _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, {
-        key: 1
-      }, renderList(unref(virtualX_columnPart), (col) => {
-        return openBlock(), createElementBlock("td", {
-          key: col.dataIndex,
-          style: normalizeStyle(getCellStyle(2, col))
-        }, null, 4);
-      }), 128)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, i) => {
-        return openBlock(), createElementBlock("tr", {
-          key: _ctx.rowKey ? rowKeyGen(row) : i,
-          "data-row-key": _ctx.rowKey ? rowKeyGen(row) : i,
-          class: normalizeClass({
-            active: _ctx.rowKey ? rowKeyGen(row) === rowKeyGen(currentItem.value) : row === currentItem.value,
-            hover: _ctx.rowKey ? rowKeyGen(row) === currentHover.value : row === currentHover.value,
-            [_ctx.rowClassName(row, i)]: true
-          }),
-          style: normalizeStyle({
-            backgroundColor: row._bgc
-          }),
-          onClick: (e) => onRowClick(e, row),
-          onDblclick: (e) => onRowDblclick(e, row),
-          onContextmenu: (e) => onRowMenu(e, row),
-          onMouseover: (e) => onTrMouseOver(e, row)
-        }, [unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
-          return openBlock(), createElementBlock("td", {
-            key: col.dataIndex,
-            "data-index": col.dataIndex,
-            class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", unref(getFixedColClass)(col)]),
-            style: normalizeStyle(getCellStyle(2, col)),
-            onClick: (e) => onCellClick(e, row, col)
-          }, [col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
-            key: 0,
-            col,
-            row,
-            "cell-value": row[col.dataIndex]
-          }, null, 8, ["col", "row", "cell-value"])) : (openBlock(), createElementBlock("div", {
-            key: 1,
-            class: "table-cell-wrapper",
-            title: row[col.dataIndex]
-          }, toDisplayString(row[col.dataIndex] ?? _ctx.emptyCellText), 9, _hoisted_14))], 14, _hoisted_13);
-        }), 128))], 46, _hoisted_11);
-      }), 128)), unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
-        key: 1,
-        style: normalizeStyle({
-          height: `${unref(virtual_offsetBottom)}px`
-        })
-      }, null, 4)) : createCommentVNode("", true)])], 6), (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: normalizeClass(["stk-table-no-data", {
-          "no-data-full": _ctx.noDataFull
-        }])
-      }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode("暂无数据")])], 2)) : createCommentVNode("", true)], 38);
+          class: normalizeClass(["stk-table-no-data", { "no-data-full": _ctx.noDataFull }])
+        }, [
+          renderSlot(_ctx.$slots, "empty", {}, () => [
+            createTextVNode("暂无数据")
+          ])
+        ], 2)) : createCommentVNode("", true)
+      ], 38);
     };
   }
 });