stk-table-vue 0.2.0 → 0.2.2

package/lib/style.css

@@ -1,4 +1,4 @@
-@keyframes stkTableDim{
+@keyframes stk-table-dim{
   from{
     background-color:var(--highlight-color);
   }
@@ -32,8 +32,11 @@
   overflow:auto;
   display:flex;
   flex-direction:column;
+  box-sizing:border-box;
   border-left:1px solid #e8e8f4;
   border-left:1px solid var(--border-color);
+  background-image:linear-gradient(180deg, #e8e8f4 1px, transparent 1px), linear-gradient(270deg, #e8e8f4 1px, transparent 1px), linear-gradient(0deg, #e8e8f4 1px, transparent 1px);
+  background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
 .stk-table.dark{
   --th-bgc:#202029;
@@ -56,6 +59,7 @@
 }
 .stk-table.headless{
   border-top:1px solid var(--border-color);
+  background-image:var(--bg-border-right), var(--bg-border-bottom);
 }
 .stk-table.col-resizable .stk-table-main{
   width:-moz-fit-content !important;
@@ -144,7 +148,7 @@
   background-color:inherit;
 }
 .stk-table .stk-table-main td.highlight-cell{
-  animation:stkTableDim 2s linear;
+  animation:stk-table-dim 2s linear;
 }
 .stk-table .stk-table-main td.text-overflow .table-cell-wrapper{
   white-space:nowrap;
@@ -243,7 +247,7 @@
   height:var(--row-height);
 }
 .stk-table .stk-table-main tbody tr.highlight-row{
-  animation:stkTableDim 2s linear;
+  animation:stk-table-dim 2s linear;
 }
 .stk-table .stk-table-main tbody tr.hover,
 .stk-table .stk-table-main tbody tr:hover{

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "stk-table-vue",
-    "version": "0.2.0",
-    "description": "simple realtime virtual table for vue3",
+    "version": "0.2.2",
+    "description": "Simple realtime virtual table for vue3&vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/StkTable/index.d.ts",
     "packageManager": "pnpm@8.14.3",

package/src/StkTable/StkTable.vue

@@ -57,7 +57,7 @@
                         v-for="(col, colIndex) in virtualX_on && rowIndex === tableHeaders.length - 1 ? virtualX_columnPart : row"
                         :key="col.dataIndex"
                         :data-col-key="colKeyGen(col)"
-                        :draggable="headerDrag ? 'true' : 'false'"
+                        :draggable="isHeaderDraggable(col) ? 'true' : 'false'"
                         :rowspan="virtualX_on ? 1 : col.rowSpan"
                         :colspan="col.colSpan"
                         :style="getCellStyle(1, col, rowIndex)"
@@ -180,7 +180,7 @@
     </div>
 </template>
 
-<script setup lang="tsx">
+<script setup lang="ts">
 /**
  * @author JA+
  * 不支持低版本浏览器非虚拟滚动表格的表头固定，列固定，因为会卡。
@@ -191,7 +191,7 @@
  */
 import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Row_Height } from './const';
-import { Order, SortOption, StkTableColumn, UniqKey } from './types/index';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKey } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -252,8 +252,8 @@ const props = withDefaults(
         showOverflow?: boolean;
         /** 是否增加行hover class */
         showTrHoverClass?: boolean;
-        /** 表头是否可拖动 */
-        headerDrag?: boolean;
+        /** 表头是否可拖动。支持回调函数。 */
+        headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
         /**
          * 给行附加className<br>
          * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -285,6 +285,8 @@ const props = withDefaults(
         fixedColShadow?: boolean;
         /** 优化vue2 滚动 */
         optimizeVue2Scroll?: boolean;
+        /** 排序配置 */
+        sortConfig?: SortConfig;
     }>(),
     {
         width: '',
@@ -317,6 +319,9 @@ const props = withDefaults(
         autoResize: true,
         fixedColShadow: false,
         optimizeVue2Scroll: false,
+        sortConfig: () => ({
+            emptyToBottom: false,
+        }),
     },
 );
 
@@ -325,7 +330,7 @@ const emits = defineEmits<{
      * 排序变更触发
      * ```(col: StkTableColumn<DT>, order: Order, data: DT[])```
      */
-    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[]): void;
+    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[], sortConfig: SortConfig): void;
     /**
      * 一行点击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -449,7 +454,7 @@ const { isColResizing, onThResizeMouseDown } = useColResize({
     tableHeaderLast,
 });
 
-const { onThDragStart, onThDragOver, onThDrop } = useThDrag({ emits });
+const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits });
 
 const {
     virtualScroll,
@@ -482,7 +487,7 @@ const { getFixedStyle } = useFixedStyle({
 const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
 
 if (props.autoResize) {
-    useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs: 500 });
+    useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });
 }
 
 /** 键盘箭头滚动 */
@@ -627,7 +632,7 @@ function rowKeyGen(row: DT) {
  * 列唯一键
  * @param col
  */
-function colKeyGen(col: StkTableColumn<any>) {
+function colKeyGen(col: StkTableColumn<DT>) {
     return typeof props.colKey === 'function' ? props.colKey(col) : (col as any)[props.colKey];
 }
 
@@ -690,13 +695,13 @@ function onColumnSort(col?: StkTableColumn<any>, click = true, options: { force?
     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);
     }
 }
 
@@ -769,6 +774,9 @@ function onTableScroll(e: Event) {
         updateFixedShadow();
         if (virtualX_on.value) {
             updateVirtualScrollX(scrollLeft);
+        } else {
+            // 非虚拟滚动也记录一下滚动条位置。用于判断isXScroll
+            virtualScrollX.value.scrollLeft = scrollLeft;
         }
     }
 
@@ -848,6 +856,13 @@ function getTableData() {
     return toRaw(dataSourceCopy.value);
 }
 
+/** 获取当前排序列的信息 */
+function getSortColumns(): SortState<DT>[] {
+    const sortOrder = sortSwitchOrder[sortOrderIndex.value];
+    if (!sortOrder) return [];
+    return [{ dataIndex: sortCol.value, order: sortOrder }];
+}
+
 defineExpose({
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll,
@@ -863,6 +878,8 @@ defineExpose({
     setHighlightDimRow,
     /** 表格排序列dataIndex */
     sortCol,
+    /** 获取当前排序状态 */
+    getSortColumns,
     /** 设置排序 */
     setSorter,
     /** 重置排序 */

package/src/StkTable/style.less

@@ -1,5 +1,5 @@
 /**高亮渐暗 */
-@keyframes stkTableDim {
+@keyframes stk-table-dim {
     from {
         background-color: var(--highlight-color);
     }
@@ -41,9 +41,11 @@
     overflow: auto;
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
     /* border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left*/
     border-left: 1px solid var(--border-color);
-
+    /* 下面border用于表格内容不满高度时，绘制表格边界线 */
+    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
     /**深色模式 */
     &.dark {
         --th-bgc: #202029;
@@ -75,6 +77,7 @@
 
     &.headless {
         border-top: 1px solid var(--border-color);
+        background-image: var(--bg-border-right), var(--bg-border-bottom);
     }
 
     /* 调整列宽的话，表格宽度应当自适应 */
@@ -112,7 +115,6 @@
             tr {
                 &:first-child th {
                     background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-
                 }
 
             }
@@ -209,7 +211,7 @@
             }
 
             &.highlight-cell {
-                animation: stkTableDim 2s linear;
+                animation: stk-table-dim 2s linear;
             }
 
             &.text-overflow {
@@ -349,7 +351,7 @@
 
                 /* td inherit tr bgc*/
                 &.highlight-row {
-                    animation: stkTableDim 2s linear;
+                    animation: stk-table-dim 2s linear;
                 }
 
                 /* &.highlight-row-transition {

package/src/StkTable/types/index.ts

@@ -21,11 +21,11 @@ export type StkTableColumn<T extends Record<string, any>> = {
     /** 筛选 */
     sorter?: Sorter<T>;
     /** 列宽。横向虚拟滚动时必须设置。 */
-    width?: string;
+    width?: string | number;
     /** 最小列宽。非x虚拟滚动生效。 */
-    minWidth?: string;
+    minWidth?: string | number;
     /** 最大列宽。非x虚拟滚动生效。 */
-    maxWidth?: string;
+    maxWidth?: string | number;
     /**th class */
     headerClassName?: string;
     /** td class */
@@ -68,3 +68,9 @@ export type SortState<T> = {
 };
 
 export type UniqKey = string | ((param: any) => string);
+
+/** 排序配置 */
+export type SortConfig = {
+    /** 空值始终排在列表末尾 */
+    emptyToBottom?: boolean;
+};

package/src/StkTable/useAutoResize.ts

@@ -1,10 +1,9 @@
 import { Ref, onBeforeUnmount, onMounted, watch } from 'vue';
 
 type Options = {
+    props: any;
     tableContainer: Ref<HTMLElement | undefined>;
     initVirtualScroll: () => void;
-    scrollTo: () => void;
-    props: any;
     /** 防抖延时 */
     debounceMs: number;
 };
@@ -12,7 +11,7 @@ type Options = {
  * 窗口变化自动重置虚拟滚动
  * @param param0
  */
-export function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }: Options) {
+export function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs }: Options) {
     let resizeObserver: ResizeObserver | null = null;
 
     onMounted(() => {

package/src/StkTable/useColResize.ts

@@ -1,6 +1,6 @@
 import { Ref, onBeforeUnmount, onMounted, ref } from 'vue';
-import { Default_Col_Width } from './const';
 import { StkTableColumn } from './types';
+import { getColWidth } from './utils';
 
 type ColResizeState<DT extends Record<string, any>> = {
     /** 当前被拖动的列*/
@@ -115,7 +115,7 @@ export function useColResize<DT extends Record<string, any>>({
         const { lastCol, startX, startOffsetTableX } = colResizeState;
         const { clientX } = e;
         let moveX = clientX - startX;
-        const currentColWidth = parseInt(lastCol?.width || Default_Col_Width);
+        const currentColWidth = getColWidth(lastCol);
         // 移动量不小于最小列宽
         if (currentColWidth + moveX < props.colMinWidth) {
             moveX = -currentColWidth;
@@ -136,7 +136,7 @@ export function useColResize<DT extends Record<string, any>>({
         const moveX = clientX - startX;
 
         // 移动量不小于最小列宽
-        let width = parseInt(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));

package/src/StkTable/useFixedCol.ts

@@ -31,7 +31,7 @@ export function useFixedCol<DT extends Record<string, any>>({ props, tableHeader
         fixedShadowCols = [];
         // 找到最右边的固定列 findLast
         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;

package/src/StkTable/useFixedStyle.ts

@@ -1,7 +1,8 @@
 import { CSSProperties, Ref, computed } from 'vue';
-import { Default_Col_Width, Is_Legacy_Mode } from './const';
+import { Is_Legacy_Mode } from './const';
 import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+import { getColWidth } from './utils';
 
 type Options = {
     props: any;
@@ -27,7 +28,7 @@ export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualSc
             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;
@@ -38,7 +39,7 @@ export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualSc
             const item = cols[i];
             if (item.fixed === 'right') {
                 store[item.dataIndex] = right;
-                right += parseInt(item.width || Default_Col_Width);
+                right += getColWidth(item);
             }
         }
 

package/src/StkTable/useHighlight.ts

@@ -47,6 +47,7 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
                     //     void rowEl.offsetHeight; // reflow
                     //     rowEl.classList.add('highlight-row-transition');
                     //   }
+
                     /** 经过的时间 ÷ 高亮持续时间 计算出 颜色过渡进度 (0-1) */
                     const progress = (nowTs - row._bgc_progress_ms) / Highlight_Duration;
                     //   row._bgc_progress = progress;
@@ -58,6 +59,7 @@ export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
                     }
                 });
                 needDeleteRows.forEach((row: any) => highlightDimRows.delete(row));
+                // TODO: shallowRef 时，需要手动更新
 
                 if (highlightDimRows.size > 0) {
                     // 还有高亮的行,则下一次循环

package/src/StkTable/useThDrag.ts

@@ -1,4 +1,7 @@
+import { StkTableColumn } from './types';
+
 type Params = {
+    props: any;
     emits: any;
 };
 /**
@@ -6,28 +9,43 @@ type Params = {
  * @param param0
  * @returns
  */
-export function useThDrag({ emits }: Params) {
+export function useThDrag<DT extends Record<string, any>>({ props, emits }: Params) {
     let dragStartKey: string | undefined = void 0;
 
+    function findParentTH(el: HTMLElement | Node) {
+        let n: any = el;
+        while (n) {
+            if (n.tagName === 'TH') return n;
+            n = n.parentElement;
+        }
+    }
     /** 开始拖动记录th位置 */
     function onThDragStart(e: MouseEvent) {
         // const i = Array.prototype.indexOf.call(e.target.parentNode.children, e.target); // 得到是第几个子元素
-        dragStartKey = (e.target as HTMLElement).dataset.colKey;
+        const th = findParentTH(e.target as HTMLElement | Node);
+        if (!th) return;
+
+        dragStartKey = th.dataset.colKey;
         emits('th-drag-start', dragStartKey);
     }
 
     function onThDragOver(e: MouseEvent) {
+        const th = findParentTH(e.target as HTMLElement | Node);
+        if (!th) return;
+
+        const isHeaderDraggable = th.getAttribute('draggable') === 'true';
+        if (!isHeaderDraggable) {
+            // 不可drag的表头不可被覆盖
+            return;
+        }
         e.preventDefault();
     }
 
     /** th拖动释放时 */
     function onThDrop(e: MouseEvent) {
-        let th = e.target as HTMLElement;
-        // 找到th元素
-        while (th) {
-            if (th.tagName === 'TH') break;
-            th = th.parentNode as HTMLElement;
-        }
+        const th = findParentTH(e.target as HTMLElement | Node);
+        if (!th) return;
+
         // const i = Array.prototype.indexOf.call(th.parentNode.children, th); // 得到是第几个子元素
         if (dragStartKey !== th.dataset.colKey) {
             emits('col-order-change', dragStartKey, th.dataset.colKey);
@@ -35,9 +53,20 @@ export function useThDrag({ emits }: Params) {
         emits('th-drop', th.dataset.colKey);
     }
 
+    const isHeaderDragFun = typeof props.headerDrag === 'function';
+    /** 是否可拖拽 */
+    function isHeaderDraggable(col: StkTableColumn<DT>) {
+        if (isHeaderDragFun) {
+            return props.headerDrag(col);
+        } else {
+            return props.headerDrag;
+        }
+    }
+
     return {
         onThDragStart,
         onThDragOver,
         onThDrop,
+        isHeaderDraggable,
     };
 }

package/src/StkTable/useVirtualScroll.ts

@@ -1,6 +1,7 @@
 import { Ref, ShallowRef, computed, ref } from 'vue';
-import { Default_Col_Width, Default_Table_Height, Default_Table_Width } from './const';
+import { Default_Table_Height, Default_Table_Width } from './const';
 import { StkTableColumn } from './types';
+import { getColWidth } from './utils';
 
 type Option<DT extends Record<string, any>> = {
     tableContainer: Ref<HTMLElement | undefined>;
@@ -40,11 +41,6 @@ export type VirtualScrollXStore = {
     scrollLeft: number;
 };
 
-/**获取计算宽度 */
-function getCalcWidth<DT extends Record<string, any>>(col: StkTableColumn<DT>) {
-    return parseInt(col.minWidth || col.width || Default_Col_Width);
-}
-
 /** vue2 优化滚动回收延时 */
 const VUE2_SCROLL_TIMEOUT_MS = 200;
 
@@ -90,9 +86,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
     });
 
     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(() => {
@@ -125,7 +119,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
         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;
@@ -219,7 +213,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
             const col = tableHeaderLast.value[colIndex];
             // fixed left 不进入计算列宽
             if (col.fixed === 'left') continue;
-            const colWidth = getCalcWidth(col);
+            const colWidth = getColWidth(col);
             colWidthSum += colWidth;
             // 列宽（非固定列）加到超过scrollLeft的时候，表示startIndex从上一个开始下标
             if (colWidthSum >= sLeft) {
@@ -233,7 +227,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
         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; // TODO:预渲染的列数

package/src/StkTable/utils.ts

@@ -1,4 +1,5 @@
-import { Order, SortOption, SortState, StkTableColumn } from './types';
+import { Default_Col_Width } from './const';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './types';
 
 /**
  * 对有序数组插入新数据
@@ -62,6 +63,34 @@ function strCompare(a: string, b: string, type: 'number' | 'string'): number {
     }
 }
 
+/**
+ * 分离出空数据和非空数据成两个数组
+ * @param sortOption
+ * @param targetDataSource
+ * @param isNumber 1 数组
+ * @return [值数组,空数组]
+ */
+function separatedData(sortOption: SortOption, targetDataSource: any[], isNumber?: boolean) {
+    const emptyArr: any[] = [];
+    const valueArr: any[] = [];
+
+    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 ||= typeof row[sortField] === 'boolean' || Number.isNaN(+row[sortField]);
+        }
+
+        if (isEmpty) {
+            emptyArr.push(row);
+        } else {
+            valueArr.push(row);
+        }
+    }
+    return [valueArr, emptyArr] as const;
+}
+
 /**
  * 表格排序抽离
  * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
@@ -71,9 +100,11 @@ function strCompare(a: string, b: string, type: 'number' | 'string'): number {
  * @param order 排序方式
  * @param dataSource 排序的数组
  */
-export function tableSort(sortOption: SortOption, order: Order, dataSource: any[]): any[] {
+export function tableSort(sortOption: SortOption, order: Order, dataSource: any[], sortConfig: SortConfig = {}): any[] {
     if (!dataSource?.length) return dataSource || [];
+    sortConfig = Object.assign({ emptyToBottom: false } as SortConfig, sortConfig);
     let targetDataSource = [...dataSource];
+
     if (typeof sortOption.sorter === 'function') {
         const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
         if (customSorterData) targetDataSource = customSorterData;
@@ -82,36 +113,32 @@ export function tableSort(sortOption: SortOption, order: Order, dataSource: any[
         let { sortType } = sortOption;
         if (!sortType) sortType = typeof dataSource[0][sortField] as 'number' | 'string';
 
+        const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, sortType === 'number');
+
         if (sortType === 'number') {
             // 按数字类型排序
-            const nanArr: any[] = []; // 非数字
-            const numArr: any[] = []; // 数字
-
-            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];
+                valueArr.sort((a, b) => +a[sortField] - +b[sortField]);
+                targetDataSource = [...emptyArr, ...valueArr];
             } else {
-                numArr.sort((a, b) => +b[sortField] - +a[sortField]);
-                targetDataSource = [...numArr, ...nanArr];
+                valueArr.sort((a, b) => +b[sortField] - +a[sortField]);
+                targetDataSource = [...valueArr, ...emptyArr];
             }
-            // targetDataSource = [...numArr, ...nanArr]; // 非数字不进入排序，一直排在最后
         } else {
             // 按string 排序
             if (order === 'asc') {
-                targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
+                valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
+                targetDataSource = [...emptyArr, ...valueArr];
             } else {
-                targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
+                valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
+                targetDataSource = [...valueArr, ...emptyArr];
             }
         }
+
+        if (sortConfig.emptyToBottom) {
+            targetDataSource = [...valueArr, ...emptyArr];
+        }
     }
     return targetDataSource;
 }
@@ -126,3 +153,11 @@ export function howDeepTheHeader(arr: StkTableColumn<any>[], level = 1) {
     });
     return Math.max(...levels);
 }
+
+/** 获取列宽 */
+export function getColWidth(col: StkTableColumn<any> | null): number {
+    if (typeof col?.width === 'number') {
+        return Math.floor(col.width ?? Default_Col_Width);
+    }
+    return parseInt(col?.width ?? Default_Col_Width);
+}