stk-table-vue 0.4.15 → 0.5.0

package/lib/style.css

@@ -32,6 +32,7 @@
   --col-resize-indicator-color:#87879c;
   --fixed-col-shadow-color-from:rgba(0, 0, 0, 0.1);
   --fixed-col-shadow-color-to:rgba(0, 0, 0, 0);
+  --drag-handle-hover-color:#d0d1e0;
   position:relative;
   overflow:auto;
   display:flex;
@@ -61,6 +62,7 @@
   --col-resize-indicator-color:#5d6064;
   --fixed-col-shadow-color-from:rgba(135, 135, 156, 0.1);
   --fixed-col-shadow-color-to:rgba(135, 135, 156, 0);
+  --drag-handle-hover-color:#5d6064;
   color:#d1d1e0;
 }
 .stk-table.headless{
@@ -134,7 +136,8 @@
 }
 .stk-table.virtual .table-header-cell-wrapper{
   overflow:hidden;
-  max-height:calc(var(--header-row-height) * var(--row-span));
+  max-height:calc(var(--header-row-height) * 1);
+  max-height:calc(var(--header-row-height) * var(--row-span, 1));
 }
 .stk-table.virtual tbody td{
   height:var(--row-height);
@@ -146,6 +149,9 @@
 .stk-table.virtual .padding-top-tr td{
   height:0;
 }
+.stk-table.virtual .expand-cell .table-cell-wrapper{
+  white-space:nowrap;
+}
 .stk-table.fixed-relative-mode th{
   position:relative;
 }
@@ -236,6 +242,49 @@
 .stk-table .seq-column{
   text-align:center;
 }
+.stk-table .expand-cell{
+  cursor:pointer;
+}
+.stk-table .expand-cell .table-cell-wrapper.expanded-cell-wrapper::before{
+  content:'';
+  display:inline-block;
+  margin:0 2px;
+  width:0;
+  height:0;
+  border-left:5px solid #757699;
+  border-top:4px solid transparent;
+  border-bottom:4px solid transparent;
+  transition:transform 0.2s ease;
+}
+.stk-table .expand-cell .table-cell-wrapper.expanded-cell-wrapper > span{
+  margin-left:var(--cell-padding-x);
+}
+.stk-table .expand-cell.expanded .table-cell-wrapper::before{
+  transform:rotate(90deg);
+}
+.stk-table .drag-row-cell .table-cell-wrapper{
+  display:inline-flex;
+  align-items:center;
+}
+.stk-table .drag-row-cell .drag-row-handle{
+  cursor:grab;
+  border-radius:4px;
+}
+.stk-table .drag-row-cell .drag-row-handle:hover{
+  background-color:var(--drag-handle-hover-color);
+}
+.stk-table .drag-row-cell .drag-row-handle:active{
+  cursor:grabbing;
+}
+.stk-table .drag-row-cell .drag-row-handle > svg{
+  vertical-align:-2px;
+}
+.stk-table .tr-dragging{
+  opacity:0.5;
+}
+.stk-table .tr-dragging-over{
+  background-color:var(--tr-hover-bgc);
+}
 .stk-table .fixed-cell--left{
   --shadow-rotate:90deg;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.4.15",
+    "version": "0.5.0",
     "description": "Simple realtime virtual table for vue3 and vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -84,7 +84,7 @@
                         @drop="onThDrop"
                         @dragover="onThDragOver"
                     >
-                        <div class="table-header-cell-wrapper" :style="`--row-span:${virtualX_on ? 1 : col.rowSpan}`">
+                        <div class="table-header-cell-wrapper" :style="{ '--row-span': virtualX_on ? 1 : col.rowSpan }">
                             <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" :colIndex="colIndex" :rowIndex="rowIndex" />
                             <template v-else-if="col.type === 'seq'">
                                 <span class="table-header-title">{{ col.title }}</span>
@@ -97,14 +97,7 @@
 
                             <!-- 排序图图标 -->
                             <span v-if="col.sorter" class="table-header-sorter">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
-                                    <polygon class="arrow-up" fill="#757699" points="8 2 4.8 6 11.2 6"></polygon>
-                                    <polygon
-                                        class="arrow-down"
-                                        transform="translate(8, 12) rotate(-180) translate(-8, -12) "
-                                        points="8 10 4.8 14 11.2 14"
-                                    ></polygon>
-                                </svg>
+                                <SortIcon />
                             </span>
                             <!-- 列宽拖动handler -->
                             <div
@@ -123,7 +116,7 @@
             <!-- 用于虚拟滚动表格内容定位 @deprecated 有兼容问题-->
             <!-- <tbody v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }"></tbody> -->
             <!-- <tbody :style="{ transform: `translateY(${virtualScroll.offsetTop}px)` }"> -->
-            <tbody class="stk-tbody-main">
+            <tbody class="stk-tbody-main" @dragover="onTrDragOver" @dragenter="onTrDragEnter" @dragend="onTrDragEnd">
                 <tr v-if="virtual_on" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on && fixedMode && headless" class="vt-x-left"></td>
@@ -133,58 +126,103 @@
                 </tr>
                 <tr
                     v-for="(row, rowIndex) in virtual_dataSourcePart"
-                    :id="stkTableId + '-' + (rowKey ? rowKeyGen(row) : rowIndex)"
-                    :key="rowKey ? rowKeyGen(row) : rowIndex"
-                    :data-row-key="rowKey ? rowKeyGen(row) : rowIndex"
+                    :id="stkTableId + '-' + (rowKey ? rowKeyGen(row) : virtualScroll.startIndex + rowIndex)"
+                    :key="rowKey ? rowKeyGen(row) : virtualScroll.startIndex + rowIndex"
+                    :data-row-key="rowKey ? rowKeyGen(row) : virtualScroll.startIndex + rowIndex"
                     :class="{
                         active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
                         hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
-                        [rowClassName(row, rowIndex)]: true,
+                        [rowClassName(row, virtualScroll.startIndex + rowIndex)]: true,
+                        expanded: row?.__EXPANDED__,
+                        'expanded-row': row && (row as ExpandedRow).__EXPANDED_ROW__,
+                    }"
+                    :style="{
+                        '--row-height':
+                            row &&
+                            (row as ExpandedRow).__EXPANDED_ROW__ &&
+                            virtual_on &&
+                            props.expandConfig?.height &&
+                            props.expandConfig?.height + 'px',
                     }"
                     @click="e => onRowClick(e, row)"
                     @dblclick="e => onRowDblclick(e, row)"
                     @contextmenu="e => onRowMenu(e, row)"
                     @mouseover="e => onTrMouseOver(e, row)"
+                    @drop="e => onTrDrop(e, virtualScroll.startIndex + rowIndex)"
                 >
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on" class="vt-x-left"></td>
-                    <td
-                        v-for="(col, colIndex) in virtualX_columnPart"
-                        :key="col.dataIndex"
-                        :data-index="col.dataIndex"
-                        :cell-key="rowKeyGen(row) + '--' + colKeyGen(col)"
-                        :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
-                        :class="[
-                            col.className,
-                            fixedColClassMap.get(colKeyGen(col)),
-                            {
-                                'seq-column': col.type === 'seq',
-                                active: currentSelectedCellKey === cellKeyGen(row, col),
-                            },
-                        ]"
-                        @click="e => onCellClick(e, row, col)"
-                        @mouseenter="e => onCellMouseEnter(e, row, col)"
-                        @mouseleave="e => onCellMouseLeave(e, row, col)"
-                        @mouseover="e => onCellMouseOver(e, row, col)"
-                    >
-                        <component
-                            :is="col.customCell"
-                            v-if="col.customCell"
-                            :col="col"
-                            :row="row"
-                            :rowIndex="rowIndex"
-                            :colIndex="colIndex"
-                            :cellValue="row?.[col.dataIndex]"
-                        />
-                        <div v-else class="table-cell-wrapper" :title="!col.type ? row?.[col.dataIndex] : ''">
-                            <template v-if="col.type === 'seq'">
-                                {{ (props.seqConfig.startIndex || 0) + rowIndex + 1 }}
-                            </template>
-                            <template v-else>
-                                {{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
-                            </template>
+                    <td v-if="row && (row as ExpandedRow).__EXPANDED_ROW__" :colspan="virtualX_columnPart.length">
+                        <!-- TODO: support wheel -->
+                        <div class="table-cell-wrapper">
+                            <slot name="expand" :row="(row as ExpandedRow).__EXPANDED_ROW__" :col="(row as ExpandedRow).__EXPANDED_COL__">
+                                {{ (row as ExpandedRow).__EXPANDED_ROW__?.[(row as ExpandedRow).__EXPANDED_COL__.dataIndex] ?? '' }}
+                            </slot>
                         </div>
                     </td>
+                    <template v-else>
+                        <td
+                            v-for="(col, colIndex) in virtualX_columnPart"
+                            :key="col.dataIndex"
+                            :data-index="col.dataIndex"
+                            :cell-key="rowKeyGen(row) + '--' + colKeyGen(col)"
+                            :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
+                            :class="[
+                                col.className,
+                                fixedColClassMap.get(colKeyGen(col)),
+                                {
+                                    'seq-column': col.type === 'seq',
+                                    active: currentSelectedCellKey === cellKeyGen(row, col),
+                                    'expand-cell': col.type === 'expand',
+                                    expanded: col.type === 'expand' && colKeyGen(row?.__EXPANDED__) === colKeyGen(col),
+                                    'drag-row-cell': col.type === 'dragRow',
+                                },
+                            ]"
+                            @click="
+                                e => {
+                                    col.type === 'expand' && toggleExpandRow(row, col);
+                                    onCellClick(e, row, col);
+                                }
+                            "
+                            @mouseenter="e => onCellMouseEnter(e, row, col)"
+                            @mouseleave="e => onCellMouseLeave(e, row, col)"
+                            @mouseover="e => onCellMouseOver(e, row, col)"
+                        >
+                            <component
+                                :is="col.customCell"
+                                v-if="col.customCell"
+                                class="table-cell-wrapper"
+                                :col="col"
+                                :row="row"
+                                :rowIndex="virtualScroll.startIndex + rowIndex"
+                                :colIndex="colIndex"
+                                :cellValue="row?.[col.dataIndex]"
+                                :expanded="row?.__EXPANDED__ || null"
+                            />
+                            <div
+                                v-else
+                                class="table-cell-wrapper"
+                                :class="{ 'expanded-cell-wrapper': col.type === 'expand' }"
+                                :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''"
+                            >
+                                <template v-if="col.type === 'seq'">
+                                    {{ (props.seqConfig.startIndex || 0) + virtualScroll.startIndex + rowIndex + 1 }}
+                                </template>
+                                <span v-else-if="col.type === 'expand'">
+                                    {{ row?.[col.dataIndex] ?? '' }}
+                                </span>
+                                <template v-else-if="col.type === 'dragRow'">
+                                    <DragHandle @dragstart="e => onTrDragStart(e, virtualScroll.startIndex + rowIndex)" />
+                                    <span>
+                                        {{ row?.[col.dataIndex] ?? '' }}
+                                    </span>
+                                </template>
+                                <template v-else>
+                                    {{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
+                                </template>
+                            </div>
+                        </td>
+                    </template>
                 </tr>
                 <tr v-if="virtual_on" :style="`height: ${virtual_offsetBottom}px`"></tr>
             </tbody>
@@ -197,13 +235,29 @@
 
 <script setup lang="ts">
 /**
- * @author JA+
- * TODO:存在的问题：
- * [] column.dataIndex 作为唯一键，不能重复
+ * @author japlus
  */
 import { CSSProperties, computed, nextTick, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
-import { DEFAULT_ROW_HEIGHT, IS_LEGACY_MODE, DEFAULT_SMOOTH_SCROLL } from './const';
-import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKeyProp } from './types/index';
+import DragHandle from './components/DragHandle.vue';
+import SortIcon from './components/SortIcon.vue';
+import { DEFAULT_ROW_HEIGHT, DEFAULT_SMOOTH_SCROLL, EXPANDED_ROW_KEY_PREFIX, IS_LEGACY_MODE } from './const';
+import {
+    DragRowConfig,
+    ExpandConfig,
+    ExpandedRow,
+    HeaderDragConfig,
+    HighlightConfig,
+    Order,
+    PrivateRowDT,
+    PrivateStkTableColumn,
+    SeqConfig,
+    SortConfig,
+    SortOption,
+    SortState,
+    StkTableColumn,
+    TagType,
+    UniqKeyProp,
+} from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -212,15 +266,18 @@ import { useGetFixedColPosition } from './useGetFixedColPosition';
 import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
 import { useThDrag } from './useThDrag';
+import { useTrDrag } from './useTrDrag';
 import { useVirtualScroll } from './useVirtualScroll';
 import { createStkTableId, getCalculatedColWidth, getColWidth, howDeepTheHeader, tableSort, transformWidthToStr } from './utils/index';
 
 /** Generic stands for DataType */
-type DT = any;
-/** 自己生成实例id */
+type DT = any & PrivateRowDT;
+
+/** generate table instance id */
 const stkTableId = createStkTableId();
+
 /**
- * props 不能放在单独的文件中。vue2.7 compiler 构建会出错。
+ * props cannot be placed in a separate file. It will cause compilation errors with vue 2.7 compiler.
  */
 const props = withDefaults(
     defineProps<{
@@ -280,16 +337,17 @@ const props = withDefaults(
         /** 单元格再次点击否可以取消选中 (cellActive=true)*/
         selectedCellRevokable?: boolean;
         /** 表头是否可拖动。支持回调函数。 */
-        headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
+        headerDrag?: HeaderDragConfig;
         /**
          * 给行附加className<br>
          * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
          */
         rowClassName?: (row: DT, i: number) => string;
         /**
-         * 列宽是否可拖动<br>
+         * 列宽是否可拖动(需要设置v-model:columns)<br>
          * **不要设置**列minWidth，**必须**设置width<br>
          * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
+         * - 会自动更新props.columns中的with属性
          */
         colResizable?: boolean;
         /** 可拖动至最小的列宽 */
@@ -320,6 +378,10 @@ const props = withDefaults(
         highlightConfig?: HighlightConfig;
         /** 序号列配置 */
         seqConfig?: SeqConfig;
+        /** 展开行配置 */
+        expandConfig?: ExpandConfig;
+        /** 列拖动配置 */
+        dragRowConfig?: DragRowConfig;
         /**
          * 固定头，固定列实现方式。(非响应式)
          *
@@ -381,6 +443,8 @@ const props = withDefaults(
         hideHeaderTitle: false,
         highlightConfig: () => ({}),
         seqConfig: () => ({}),
+        expandConfig: () => ({}),
+        dragRowConfig: () => ({}),
         cellFixedMode: 'sticky',
         smoothScroll: DEFAULT_SMOOTH_SCROLL,
     },
@@ -472,11 +536,24 @@ const emits = defineEmits<{
      * ```(targetColKey: string)```
      */
     (e: 'th-drop', targetColKey: string): void;
+    /**
+     * 行拖动事件
+     * ```(dragStartKey: string, targetRowKey: string)```
+     */
+    (e: 'row-order-change', dragStartKey: string, targetRowKey: string): void;
     /**
      * 列宽变动时触发
+     *  ```(cols: StkTableColumn<DT>)```
      */
     (e: 'col-resize', cols: StkTableColumn<DT>): void;
-    /** v-model:columns col resize 时更新宽度*/
+    /**
+     * 展开行触发
+     * ```( data: { expanded: boolean; row: DT; col: StkTableColumn<DT> })```
+     */
+    (e: 'toggle-row-expand', data: { expanded: boolean; row: DT; col: StkTableColumn<DT> | null }): void;
+    /**
+     * v-model:columns col resize 时更新宽度
+     */
     (e: 'update:columns', cols: StkTableColumn<DT>[]): void;
 }>();
 
@@ -542,17 +619,14 @@ const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
  * 列唯一键
  * @param col
  */
-const colKeyGen = computed(() => {
+const colKeyGen = computed<(col: StkTableColumn<DT>) => string>(() => {
     if (typeof props.colKey === 'function') {
-        return (col: StkTableColumn<DT>) => (props.colKey as (col: StkTableColumn<DT>) => string)(col);
+        return col => (props.colKey as (col: StkTableColumn<DT>) => string)(col);
     } else {
-        return (col: StkTableColumn<DT>) => (col as any)[props.colKey as string];
+        return col => (col ? (col as any)[props.colKey as string] : null);
     }
 });
 
-/**高亮帧间隔 
-const highlightStepDuration = Highlight_Color_Change_Freq / 1000 + 's';*/
-
 /** 空单元格占位字符 */
 const getEmptyCellText = computed(() => {
     if (typeof props.emptyCellText === 'string') {
@@ -565,7 +639,9 @@ const getEmptyCellText = computed(() => {
 /** rowKey缓存 */
 const rowKeyGenStore = 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,
@@ -581,7 +657,7 @@ const {
     initVirtualScrollX,
     updateVirtualScrollY,
     updateVirtualScrollX,
-} = useVirtualScroll({ tableContainerRef, theadRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
+} = useVirtualScroll({ tableContainerRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
 
 /** 获取固定列的位置 */
 const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeaders });
@@ -753,7 +829,11 @@ function dealColumns() {
      * @param parent 父节点引用，用于构建双向链表。
      * @param parentFixed 父节点固定列继承。
      */
-    function flat(arr: StkTableColumn<DT>[], parent: StkTableColumn<DT> | null, depth = 0 /* , parentFixed: 'left' | 'right' | null = null */) {
+    function flat(
+        arr: PrivateStkTableColumn<DT>[],
+        parent: PrivateStkTableColumn<DT> | null,
+        depth = 0 /* , parentFixed: 'left' | 'right' | null = null */,
+    ) {
         if (!tableHeadersTemp[depth]) {
             tableHeadersTemp[depth] = [];
         }
@@ -810,7 +890,11 @@ function rowKeyGen(row: DT | null | undefined) {
     if (!row) return row;
     let key = rowKeyGenStore.get(row);
     if (!key) {
-        key = typeof props.rowKey === 'function' ? props.rowKey(row) : row[props.rowKey];
+        if ((row as PrivateRowDT).__ROW_KEY__) {
+            key = (row as PrivateRowDT).__ROW_KEY__;
+        } else {
+            key = typeof props.rowKey === 'function' ? props.rowKey(row) : row[props.rowKey];
+        }
 
         if (key === void 0) {
             // key为undefined时，不应该高亮行。因此重新生成key
@@ -1069,7 +1153,7 @@ function onTableScroll(e: Event) {
     }
 }
 
-/** tr hover事件 */
+/** tr hover */
 function onTrMouseOver(_e: MouseEvent, row: DT) {
     if (currentHoverRow === row) return;
     currentHoverRow = row;
@@ -1079,7 +1163,7 @@ function onTrMouseOver(_e: MouseEvent, row: DT) {
 /**
  * 选中一行
  * @param {string} rowKeyOrRow selected rowKey, undefined to unselect
- * @param {boolean} option.silent if emit current-change. default:false(not emit `current-change`)
+ * @param {boolean} option.silent if set true not emit `current-change`. default:false
  */
 function setCurrentRow(rowKeyOrRow: string | undefined | DT, option = { silent: false }) {
     if (!dataSourceCopy.value.length) return;
@@ -1142,7 +1226,6 @@ function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortO
     return dataSourceCopy.value;
 }
 
-/** 重置排序 */
 function resetSorter() {
     sortCol.value = void 0;
     sortOrderIndex.value = 0;
@@ -1150,9 +1233,9 @@ function resetSorter() {
 }
 
 /**
- * 设置滚动条位置
- * @param top 传null 则不变动位置
- * @param left 传null 则不变动位置
+ * set scroll bar position
+ * @param top null to not change
+ * @param left null to not change
  */
 function scrollTo(top: number | null = 0, left: number | null = 0) {
     if (!tableContainerRef.value) return;
@@ -1160,18 +1243,80 @@ function scrollTo(top: number | null = 0, left: number | null = 0) {
     if (left !== null) tableContainerRef.value.scrollLeft = left;
 }
 
-/** 获取当前状态的表格数据 */
+/** get current table data */
 function getTableData() {
     return toRaw(dataSourceCopy.value);
 }
 
-/** 获取当前排序列的信息 */
+/** get current sort info */
 function getSortColumns(): Partial<SortState<DT>>[] {
     const sortOrder = sortSwitchOrder[sortOrderIndex.value];
     if (!sortOrder) return [];
     return [{ dataIndex: sortCol.value, order: sortOrder }];
 }
 
+/** click expended icon to toggleg expand row */
+function toggleExpandRow(row: DT, col: StkTableColumn<DT>) {
+    const isExpand = row?.__EXPANDED__ === col ? !row?.__EXPANDED__ : true;
+    setRowExpand(row, isExpand, { col });
+}
+
+/**
+ *
+ * @param rowKeyOrRow rowKey or row
+ * @param expand expand or collapse
+ * @param data { col?: StkTableColumn<DT> }
+ * @param data.silent if set true, not emit `toggle-row-expand`, default:false
+ */
+function setRowExpand(rowKeyOrRow: string | undefined | DT, expand?: boolean, data?: { col?: StkTableColumn<DT>; silent?: boolean }) {
+    let rowKey: string;
+    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;
+    }
+
+    // delete other expanded row below the target row
+    for (let i = index + 1; i < tempData.length; i++) {
+        const item: PrivateRowDT = tempData[i];
+        const rowKey = item.__ROW_KEY__;
+        if (rowKey?.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
+            tempData.splice(i, 1);
+            i--;
+        } else {
+            break;
+        }
+    }
+
+    const row = tempData[index];
+    const col = data?.col || null;
+
+    if (expand) {
+        // insert new expanded row
+        const newExpandRow: ExpandedRow = {
+            __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?.silent) {
+        emits('toggle-row-expand', { expanded: Boolean(expand), row, col });
+    }
+}
+
 defineExpose({
     /** @see {@link initVirtualScroll} */
     initVirtualScroll,
@@ -1199,5 +1344,7 @@ defineExpose({
     scrollTo,
     /** @see {@link getTableData} */
     getTableData,
+    /** @see {@link setRowExpand} */
+    setRowExpand,
 });
 </script>

package/src/StkTable/components/DragHandle.vue

@@ -0,0 +1,9 @@
+<template>
+    <span class="drag-row-handle" draggable="true">
+        <svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
+            <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"
+            ></path>
+        </svg>
+    </span>
+</template>

package/src/StkTable/components/SortIcon.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
+        <polygon class="arrow-up" fill="#757699" points="8 2 4.8 6 11.2 6"></polygon>
+        <polygon class="arrow-down" transform="translate(8, 12) rotate(-180) translate(-8, -12) " points="8 10 4.8 14 11.2 14"></polygon>
+    </svg>
+</template>

package/src/StkTable/const.ts

@@ -6,29 +6,29 @@ export const DEFAULT_TABLE_HEIGHT = 100;
 export const DEFAULT_TABLE_WIDTH = 200;
 export const DEFAULT_ROW_HEIGHT = 28;
 
-/** 高亮背景色 */
+/** highlight background */
 export const HIGHLIGHT_COLOR = {
     light: { from: '#71a2fd', to: '#fff' },
     dark: { from: '#1e4c99', to: '#181c21' },
 };
-/** 高亮持续时间 */
 export const HIGHLIGHT_DURATION = 2000;
 
-/** 高亮变更频率 */
+/** highlight change frequency 1000/30 -> 30FPS */
 export const HIGHLIGHT_FREQ = 1000 / 30;
 
-/** 高亮行class */
 export const HIGHLIGHT_ROW_CLASS = 'highlight-row';
-/** 高连单元格class */
 export const HIGHLIGHT_CELL_CLASS = 'highlight-cell';
 
 const _chromeVersion = getBrowsersVersion('chrome');
 const _firefoxVersion = getBrowsersVersion('firefox');
 
-/** 低版本sticky兼容模式  */
+/** legacy sticky compatible mode  */
 export const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
 
-/** 默认props.smoothDefault */
+/** default props.smoothDefault */
 export const DEFAULT_SMOOTH_SCROLL = _chromeVersion < 85;
 
 export const STK_ID_PREFIX = 'stk';
+
+/** expanded row key prefix */
+export const EXPANDED_ROW_KEY_PREFIX = 'expanded-';