stk-table-vue 0.4.15 → 0.5.0

package/lib/stk-table-vue.js

@@ -1,5 +1,57 @@
-import { watch, onMounted, onBeforeUnmount, ref, shallowRef, computed, defineComponent, nextTick, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode } from "vue";
+import { openBlock, createElementBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, shallowRef, computed, defineComponent, nextTick, toRaw, normalizeClass, unref, normalizeStyle, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createVNode, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$2 = {};
+const _hoisted_1$2 = {
+  class: "drag-row-handle",
+  draggable: "true"
+};
+const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("svg", {
+  viewBox: "0 0 1024 1024",
+  width: "16",
+  height: "16",
+  fill: "currentColor"
+}, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M640 853.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3zM384 341.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z" })
+], -1);
+const _hoisted_3$2 = [
+  _hoisted_2$2
+];
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("span", _hoisted_1$2, _hoisted_3$2);
+}
+const DragHandle = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
+const _sfc_main$1 = {};
+const _hoisted_1$1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16px",
+  height: "16px",
+  viewBox: "0 0 16 16"
+};
+const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("polygon", {
+  class: "arrow-up",
+  fill: "#757699",
+  points: "8 2 4.8 6 11.2 6"
+}, null, -1);
+const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("polygon", {
+  class: "arrow-down",
+  transform: "translate(8, 12) rotate(-180) translate(-8, -12) ",
+  points: "8 10 4.8 14 11.2 14"
+}, null, -1);
+const _hoisted_4$1 = [
+  _hoisted_2$1,
+  _hoisted_3$1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_4$1);
+}
+const SortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
 function isEmptyValue(val, isNumber) {
   let isEmpty = val === null || val === "" || val === void 0;
   if (isNumber) {
@@ -174,6 +226,7 @@ const _firefoxVersion = getBrowsersVersion("firefox");
 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-";
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
   TagType2[TagType2["TD"] = 1] = "TD";
@@ -859,62 +912,187 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
       isMouseOver = true;
   }
 }
-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 useThDrag({ props, emits, colKeyGen }) {
+  const findParentTH = (e) => e.target.closest("th");
+  const dragConfig = computed(() => {
+    const headerDrag = props.headerDrag;
+    const draggable = headerDrag !== false;
+    return {
+      draggable,
+      mode: "insert",
+      disabled: () => !draggable,
+      ...headerDrag
+    };
+  });
   function onThDragStart(e) {
-    const th = findParentTH(e.target);
+    const th = findParentTH(e);
     if (!th)
       return;
-    dragStartKey = th.dataset.colKey;
+    const dragStartKey = th.dataset.colKey || "";
+    const dt = e.dataTransfer;
+    if (dt) {
+      dt.effectAllowed = "move";
+      dt.setData("text/plain", dragStartKey);
+    }
     emits("th-drag-start", dragStartKey);
   }
   function onThDragOver(e) {
-    const th = findParentTH(e.target);
+    const th = findParentTH(e);
     if (!th)
       return;
-    const isHeaderDraggable2 = th.getAttribute("draggable") === "true";
-    if (!isHeaderDraggable2) {
+    const isHeaderDraggable = th.getAttribute("draggable") === "true";
+    if (!isHeaderDraggable)
       return;
+    const dt = e.dataTransfer;
+    if (dt) {
+      dt.dropEffect = "move";
     }
     e.preventDefault();
   }
   function onThDrop(e) {
-    const th = findParentTH(e.target);
+    var _a;
+    const th = findParentTH(e);
     if (!th)
       return;
+    const dragStartKey = (_a = e.dataTransfer) == null ? void 0 : _a.getData("text");
     if (dragStartKey !== th.dataset.colKey) {
-      emits("col-order-change", dragStartKey, th.dataset.colKey);
+      handleColOrderChange(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;
+  function handleColOrderChange(dragStartKey, dragEndKey) {
+    if (!dragStartKey || !dragEndKey)
+      return;
+    if (dragConfig.value.mode !== "none") {
+      const columns = [...props.columns];
+      const dragStartIndex = columns.findIndex((col) => colKeyGen.value(col) === dragStartKey);
+      const dragEndIndex = columns.findIndex((col) => colKeyGen.value(col) === dragEndKey);
+      if (dragStartIndex === -1 || dragEndIndex === -1)
+        return;
+      const dragStartCol = columns[dragStartIndex];
+      if (dragConfig.value.mode === "swap") {
+        columns[dragStartIndex] = columns[dragEndIndex];
+        columns[dragEndIndex] = dragStartCol;
+      } else {
+        columns.splice(dragStartIndex, 1);
+        columns.splice(dragEndIndex, 0, dragStartCol);
+      }
+      emits("update:columns", columns);
     }
+    emits("col-order-change", dragStartKey, dragEndKey);
   }
   return {
     onThDragStart,
     onThDragOver,
     onThDrop,
-    isHeaderDraggable
+    /** 是否可拖拽 */
+    isHeaderDraggable: dragConfig.value.disabled
+  };
+}
+const TR_DRAGGING_CLASS = "tr-dragging";
+const TR_DRAG_OVER_CLASS = "tr-dragging-over";
+const DATA_TRANSFER_FORMAT = "text/plain";
+function useTrDrag({ props, emits, dataSourceCopy }) {
+  let trDragFlag = false;
+  const dragRowConfig = computed(() => {
+    return { mode: "insert", ...props.dragRowConfig };
+  });
+  function getClosestTr(e) {
+    const target = e.target;
+    const tr = target == null ? void 0 : target.closest("tr");
+    return tr;
+  }
+  function onTrDragStart(e, rowIndex) {
+    var _a;
+    const tr = getClosestTr(e);
+    if (tr) {
+      const trRect = tr.getBoundingClientRect();
+      const x = e.clientX - (trRect.left ?? 0);
+      (_a = e.dataTransfer) == null ? void 0 : _a.setDragImage(tr, x, trRect.height / 2);
+      tr.classList.add(TR_DRAGGING_CLASS);
+    }
+    const dt = e.dataTransfer;
+    if (dt) {
+      dt.effectAllowed = "move";
+      dt.setData(DATA_TRANSFER_FORMAT, String(rowIndex));
+    }
+    trDragFlag = true;
+  }
+  function onTrDragOver(e) {
+    if (!trDragFlag)
+      return;
+    e.preventDefault();
+    const dt = e.dataTransfer;
+    if (dt) {
+      dt.dropEffect = "move";
+    }
+  }
+  let oldTr = null;
+  function onTrDragEnter(e) {
+    if (!trDragFlag)
+      return;
+    e.preventDefault();
+    const tr = getClosestTr(e);
+    if (oldTr && oldTr !== tr) {
+      oldTr.classList.remove(TR_DRAG_OVER_CLASS);
+    }
+    if (tr) {
+      oldTr = tr;
+      tr.classList.add(TR_DRAG_OVER_CLASS);
+    }
+  }
+  function onTrDragEnd(e) {
+    if (!trDragFlag)
+      return;
+    const tr = getClosestTr(e);
+    if (tr) {
+      tr.classList.remove(TR_DRAGGING_CLASS);
+    }
+    if (oldTr) {
+      oldTr.classList.remove(TR_DRAG_OVER_CLASS);
+      oldTr = null;
+    }
+    trDragFlag = false;
+  }
+  function onTrDrop(e, rowIndex) {
+    if (!trDragFlag)
+      return;
+    const dt = e.dataTransfer;
+    if (!dt)
+      return;
+    const mode = dragRowConfig.value.mode;
+    const sourceIndex = Number(dt.getData(DATA_TRANSFER_FORMAT));
+    dt.clearData(DATA_TRANSFER_FORMAT);
+    const endIndex = rowIndex;
+    if (sourceIndex === endIndex)
+      return;
+    if (mode !== "none") {
+      const dataSourceTemp = [...dataSourceCopy.value];
+      const sourceRow = dataSourceTemp[sourceIndex];
+      if (mode === "swap") {
+        dataSourceTemp[sourceIndex] = dataSourceTemp[endIndex];
+        dataSourceTemp[endIndex] = sourceRow;
+      } else {
+        dataSourceTemp.splice(sourceIndex, 1);
+        dataSourceTemp.splice(endIndex, 0, sourceRow);
+      }
+      dataSourceCopy.value = [...dataSourceTemp];
+    }
+    emits("row-order-change", sourceIndex, endIndex);
+  }
+  return {
+    dragRowConfig,
+    onTrDragStart,
+    onTrDragEnter,
+    onTrDragOver,
+    onTrDrop,
+    onTrDragEnd
   };
 }
 const VUE2_SCROLL_TIMEOUT_MS = 200;
 function useVirtualScroll({
   props,
   tableContainerRef,
-  theadRef,
   dataSourceCopy,
   tableHeaderLast,
   tableHeaders
@@ -1146,40 +1324,22 @@ const _hoisted_4 = {
   key: 3,
   class: "table-header-sorter"
 };
-const _hoisted_5 = /* @__PURE__ */ createElementVNode("svg", {
-  xmlns: "http://www.w3.org/2000/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_6 = [
-  _hoisted_5
-];
-const _hoisted_7 = ["onMousedown"];
-const _hoisted_8 = ["onMousedown"];
-const _hoisted_9 = { class: "stk-tbody-main" };
-const _hoisted_10 = {
+const _hoisted_5 = ["onMousedown"];
+const _hoisted_6 = ["onMousedown"];
+const _hoisted_7 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_11 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
-const _hoisted_12 = {
+const _hoisted_8 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover", "onDrop"];
+const _hoisted_9 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_13 = ["data-index", "cell-key", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
-const _hoisted_14 = ["title"];
+const _hoisted_10 = ["colspan"];
+const _hoisted_11 = { class: "table-cell-wrapper" };
+const _hoisted_12 = ["data-index", "cell-key", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_13 = ["title"];
+const _hoisted_14 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -1211,7 +1371,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     cellHover: { type: Boolean, default: false },
     cellActive: { type: Boolean, default: false },
     selectedCellRevokable: { type: Boolean, default: true },
-    headerDrag: { type: [Boolean, Function], default: false },
+    headerDrag: { default: false },
     rowClassName: { type: Function, default: () => "" },
     colResizable: { type: Boolean, default: false },
     colMinWidth: { default: 10 },
@@ -1226,10 +1386,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     hideHeaderTitle: { type: [Boolean, Array], default: false },
     highlightConfig: { default: () => ({}) },
     seqConfig: { default: () => ({}) },
+    expandConfig: { default: () => ({}) },
+    dragRowConfig: { default: () => ({}) },
     cellFixedMode: { default: "sticky" },
     smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL }
   },
-  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", "col-resize", "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", "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;
@@ -1253,7 +1415,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (typeof props.colKey === "function") {
         return (col) => props.colKey(col);
       } else {
-        return (col) => col[props.colKey];
+        return (col) => col ? col[props.colKey] : null;
       }
     });
     const getEmptyCellText = computed(() => {
@@ -1264,7 +1426,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
-    const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits });
+    const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
+    const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
     const {
       virtualScroll,
       virtualScrollX,
@@ -1279,7 +1442,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       initVirtualScrollX,
       updateVirtualScrollY,
       updateVirtualScrollX
-    } = useVirtualScroll({ tableContainerRef, theadRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
+    } = useVirtualScroll({ tableContainerRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
     const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeaders });
     const getFixedStyle = useFixedStyle({
       props,
@@ -1457,7 +1620,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return row;
       let key = rowKeyGenStore.get(row);
       if (!key) {
-        key = typeof props.rowKey === "function" ? props.rowKey(row) : row[props.rowKey];
+        if (row.__ROW_KEY__) {
+          key = row.__ROW_KEY__;
+        } else {
+          key = typeof props.rowKey === "function" ? props.rowKey(row) : row[props.rowKey];
+        }
         if (key === void 0) {
           key = Math.random().toString();
         }
@@ -1568,7 +1735,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits("row-menu", e, row);
     }
     function onCellClick(e, row, col) {
-      if (props.rowActive) {
+      if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
         if (props.selectedCellRevokable && currentSelectedCellKey.value === cellKey) {
           currentSelectedCellKey.value = void 0;
@@ -1734,6 +1901,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return [];
       return [{ dataIndex: sortCol.value, order: sortOrder }];
     }
+    function toggleExpandRow(row, col) {
+      const isExpand = (row == null ? void 0 : row.__EXPANDED__) === col ? !(row == null ? void 0 : row.__EXPANDED__) : true;
+      setRowExpand(row, isExpand, { col });
+    }
+    function setRowExpand(rowKeyOrRow, expand, data) {
+      let rowKey;
+      if (typeof rowKeyOrRow === "string") {
+        rowKey = rowKeyOrRow;
+      } else {
+        rowKey = rowKeyGen(rowKeyOrRow);
+      }
+      const tempData = [...dataSourceCopy.value];
+      const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
+      if (index === -1) {
+        console.warn("expandRow failed.rowKey:", rowKey);
+        return;
+      }
+      for (let i = index + 1; i < tempData.length; i++) {
+        const item = tempData[i];
+        const rowKey2 = item.__ROW_KEY__;
+        if (rowKey2 == null ? void 0 : rowKey2.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
+          tempData.splice(i, 1);
+          i--;
+        } else {
+          break;
+        }
+      }
+      const row = tempData[index];
+      const col = (data == null ? void 0 : data.col) || null;
+      if (expand) {
+        const newExpandRow = {
+          __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
+          __EXPANDED_ROW__: row,
+          __EXPANDED_COL__: col
+        };
+        tempData.splice(index + 1, 0, newExpandRow);
+      }
+      if (row) {
+        row.__EXPANDED__ = expand ? col : null;
+      }
+      dataSourceCopy.value = tempData;
+      if (!(data == null ? void 0 : data.silent)) {
+        emits("toggle-row-expand", { expanded: Boolean(expand), row, col });
+      }
+    }
     __expose({
       /** @see {@link initVirtualScroll} */
       initVirtualScroll,
@@ -1760,7 +1972,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       /** @see {@link scrollTo} */
       scrollTo,
       /** @see {@link getTableData} */
-      getTableData
+      getTableData,
+      /** @see {@link setRowExpand} */
+      setRowExpand
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -1851,7 +2065,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, [
                     createElementVNode("div", {
                       class: "table-header-cell-wrapper",
-                      style: normalizeStyle(`--row-span:${unref(virtualX_on) ? 1 : col.rowSpan}`)
+                      style: normalizeStyle({ "--row-span": unref(virtualX_on) ? 1 : col.rowSpan })
                     }, [
                       col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
                         key: 0,
@@ -1864,17 +2078,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }, () => [
                         createElementVNode("span", _hoisted_3, toDisplayString(col.title), 1)
                       ]),
-                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_4, _hoisted_6)) : createCommentVNode("", true),
+                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_4, [
+                        createVNode(SortIcon)
+                      ])) : createCommentVNode("", true),
                       _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
                         key: 4,
                         class: "table-header-resizer left",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
-                      }, null, 40, _hoisted_7)) : createCommentVNode("", true),
+                      }, null, 40, _hoisted_5)) : createCommentVNode("", true),
                       _ctx.colResizable ? (openBlock(), createElementBlock("div", {
                         key: 5,
                         class: "table-header-resizer right",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
-                      }, null, 40, _hoisted_8)) : createCommentVNode("", true)
+                      }, null, 40, _hoisted_6)) : createCommentVNode("", true)
                     ], 4)
                   ], 46, _hoisted_1);
                 }), 128)),
@@ -1886,13 +2102,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ], 32);
             }), 128))
           ], 512)) : createCommentVNode("", true),
-          createElementVNode("tbody", _hoisted_9, [
+          createElementVNode("tbody", {
+            class: "stk-tbody-main",
+            onDragover: _cache[4] || (_cache[4] = //@ts-ignore
+            (...args) => unref(onTrDragOver) && unref(onTrDragOver)(...args)),
+            onDragenter: _cache[5] || (_cache[5] = //@ts-ignore
+            (...args) => unref(onTrDragEnter) && unref(onTrDragEnter)(...args)),
+            onDragend: _cache[6] || (_cache[6] = //@ts-ignore
+            (...args) => unref(onTrDragEnd) && unref(onTrDragEnd)(...args))
+          }, [
             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),
+              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_7)) : createCommentVNode("", true),
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: col.dataIndex,
@@ -1901,22 +2125,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }), 128)) : createCommentVNode("", true)
             ], 4)) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
+              var _a, _b;
               return openBlock(), createElementBlock("tr", {
-                id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : rowIndex),
-                key: _ctx.rowKey ? rowKeyGen(row) : rowIndex,
-                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : rowIndex,
+                id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : unref(virtualScroll).startIndex + rowIndex),
+                key: _ctx.rowKey ? rowKeyGen(row) : unref(virtualScroll).startIndex + rowIndex,
+                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : unref(virtualScroll).startIndex + rowIndex,
                 class: normalizeClass({
                   active: _ctx.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
                   hover: props.showTrHoverClass && (_ctx.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
-                  [_ctx.rowClassName(row, rowIndex)]: true
+                  [_ctx.rowClassName(row, unref(virtualScroll).startIndex + rowIndex)]: true,
+                  expanded: row == null ? void 0 : row.__EXPANDED__,
+                  "expanded-row": row && row.__EXPANDED_ROW__
+                }),
+                style: normalizeStyle({
+                  "--row-height": row && row.__EXPANDED_ROW__ && unref(virtual_on) && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
                 }),
                 onClick: (e) => onRowClick(e, row),
                 onDblclick: (e) => onRowDblclick(e, row),
                 onContextmenu: (e) => onRowMenu(e, row),
-                onMouseover: (e) => onTrMouseOver(e, row)
+                onMouseover: (e) => onTrMouseOver(e, row),
+                onDrop: (e) => unref(onTrDrop)(e, unref(virtualScroll).startIndex + rowIndex)
               }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col, colIndex) => {
+                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_9)) : createCommentVNode("", true),
+                row && row.__EXPANDED_ROW__ ? (openBlock(), createElementBlock("td", {
+                  key: 1,
+                  colspan: unref(virtualX_columnPart).length
+                }, [
+                  createElementVNode("div", _hoisted_11, [
+                    renderSlot(_ctx.$slots, "expand", {
+                      row: row.__EXPANDED_ROW__,
+                      col: row.__EXPANDED_COL__
+                    }, () => {
+                      var _a2;
+                      return [
+                        createTextVNode(toDisplayString(((_a2 = row.__EXPANDED_ROW__) == null ? void 0 : _a2[row.__EXPANDED_COL__.dataIndex]) ?? ""), 1)
+                      ];
+                    })
+                  ])
+                ], 8, _hoisted_10)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
                     "data-index": col.dataIndex,
@@ -1927,41 +2173,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       unref(fixedColClassMap).get(colKeyGen.value(col)),
                       {
                         "seq-column": col.type === "seq",
-                        active: currentSelectedCellKey.value === cellKeyGen(row, col)
+                        active: currentSelectedCellKey.value === cellKeyGen(row, col),
+                        "expand-cell": col.type === "expand",
+                        expanded: col.type === "expand" && colKeyGen.value(row == null ? void 0 : row.__EXPANDED__) === colKeyGen.value(col),
+                        "drag-row-cell": col.type === "dragRow"
                       }
                     ]),
-                    onClick: (e) => onCellClick(e, row, col),
+                    onClick: (e) => {
+                      col.type === "expand" && toggleExpandRow(row, col);
+                      onCellClick(e, row, col);
+                    },
                     onMouseenter: (e) => onCellMouseEnter(e, row, col),
                     onMouseleave: (e) => onCellMouseLeave(e, row, col),
                     onMouseover: (e) => onCellMouseOver(e, row, col)
                   }, [
                     col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
                       key: 0,
+                      class: "table-cell-wrapper",
                       col,
                       row,
-                      rowIndex,
+                      rowIndex: unref(virtualScroll).startIndex + rowIndex,
                       colIndex,
-                      cellValue: row == null ? void 0 : row[col.dataIndex]
-                    }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
+                      cellValue: row == null ? void 0 : row[col.dataIndex],
+                      expanded: (row == null ? void 0 : row.__EXPANDED__) || null
+                    }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded"])) : (openBlock(), createElementBlock("div", {
                       key: 1,
-                      class: "table-cell-wrapper",
-                      title: !col.type ? row == null ? void 0 : row[col.dataIndex] : ""
+                      class: normalizeClass(["table-cell-wrapper", { "expanded-cell-wrapper": col.type === "expand" }]),
+                      title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""
                     }, [
                       col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                        createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + rowIndex + 1), 1)
-                      ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + unref(virtualScroll).startIndex + 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 }, [
+                        createVNode(DragHandle, {
+                          onDragstart: (e) => unref(onTrDragStart)(e, unref(virtualScroll).startIndex + rowIndex)
+                        }, null, 8, ["onDragstart"]),
+                        createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
+                      ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
                         createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
                       ], 64))
-                    ], 8, _hoisted_14))
-                  ], 46, _hoisted_13);
+                    ], 10, _hoisted_13))
+                  ], 46, _hoisted_12);
                 }), 128))
-              ], 42, _hoisted_11);
+              ], 46, _hoisted_8);
             }), 128)),
             unref(virtual_on) ? (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,