stk-table-vue 0.4.1 → 0.4.3

package/lib/src/StkTable/useKeyboardArrowScroll.d.ts

@@ -1,6 +1,7 @@
 import { ComputedRef, Ref, ShallowRef } from 'vue';
 import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+
 type Options<DT extends Record<string, any>> = {
     props: any;
     scrollTo: (y: number | null, x: number | null) => void;

package/lib/src/StkTable/useThDrag.d.ts

@@ -1,4 +1,5 @@
 import { StkTableColumn } from './types';
+
 type Params = {
     props: any;
     emits: any;

package/lib/src/StkTable/useVirtualScroll.d.ts

@@ -1,8 +1,10 @@
 import { Ref, ShallowRef } from 'vue';
 import { StkTableColumn } from './types';
+
 type Option<DT extends Record<string, any>> = {
     props: any;
     tableContainerRef: Ref<HTMLElement | undefined>;
+    theadRef: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
     tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
     tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
@@ -23,6 +25,8 @@ export type VirtualScrollStore = {
     offsetTop: number;
     /** 纵向滚动条位置，用于判断是横向滚动还是纵向 */
     scrollTop: number;
+    /** 总滚动高度 */
+    scrollHeight: number;
 };
 /** 暂存横向虚拟滚动的数据 */
 export type VirtualScrollXStore = {
@@ -44,7 +48,7 @@ export type VirtualScrollXStore = {
  * @param param0
  * @returns
  */
-export declare function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainerRef, dataSourceCopy, tableHeaderLast, tableHeaders, }: Option<DT>): {
+export declare function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainerRef, theadRef, dataSourceCopy, tableHeaderLast, tableHeaders, }: Option<DT>): {
     virtualScroll: Ref<{
         containerHeight: number;
         pageSize: number;
@@ -53,6 +57,7 @@ export declare function useVirtualScroll<DT extends Record<string, any>>({ props
         rowHeight: number;
         offsetTop: number;
         scrollTop: number;
+        scrollHeight: number;
     }>;
     virtualScrollX: Ref<{
         containerWidth: number;
@@ -62,12 +67,12 @@ export declare function useVirtualScroll<DT extends Record<string, any>>({ props
         offsetLeft: number;
         scrollLeft: number;
     }>;
-    virtual_on: import("vue").ComputedRef<any>;
-    virtual_dataSourcePart: import("vue").ComputedRef<DT[]>;
-    virtual_offsetBottom: import("vue").ComputedRef<number>;
-    virtualX_on: import("vue").ComputedRef<any>;
-    virtualX_columnPart: import("vue").ComputedRef<StkTableColumn<DT>[]>;
-    virtualX_offsetRight: import("vue").ComputedRef<number>;
+    virtual_on: import('vue').ComputedRef<any>;
+    virtual_dataSourcePart: import('vue').ComputedRef<DT[]>;
+    virtual_offsetBottom: import('vue').ComputedRef<number>;
+    virtualX_on: import('vue').ComputedRef<any>;
+    virtualX_columnPart: import('vue').ComputedRef<StkTableColumn<DT>[]>;
+    virtualX_offsetRight: import('vue').ComputedRef<number>;
     initVirtualScroll: (height?: number) => void;
     initVirtualScrollY: (height?: number) => void;
     initVirtualScrollX: () => void;

package/lib/src/StkTable/utils/index.d.ts

@@ -1,4 +1,5 @@
 import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../types';
+
 /**
  * 对有序数组插入新数据
  * @param sortState
@@ -7,8 +8,9 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../typ
  * @param sortState.sortType 排序方式
  * @param newItem 要插入的数据
  * @param targetArray 表格数据
+ * @return targetArray 的浅拷贝
  */
-export declare function insertToOrderedArray<T extends object>(sortState: SortState<keyof T>, newItem: any, targetArray: T[], sortConfig?: SortConfig<T>): T[];
+export declare function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: any, targetArray: T[], sortConfig?: SortConfig<T>): T[];
 /**
  * 表格排序抽离
  * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。

package/lib/src/StkTable/utils/useTriggerRef.d.ts

@@ -1,4 +1,5 @@
 import { Ref } from 'vue';
+
 type UseTriggerRef<T> = {
     getRef: () => Ref<T>;
     getValue: () => T;

package/lib/stk-table-vue.js

@@ -400,11 +400,19 @@ function useFixedCol({
     const fixedShadowColsTemp = [];
     let clientWidth, scrollLeft;
     if (virtualScrollX == null ? void 0 : virtualScrollX.value) {
-      const { containerWidth: cw, scrollWidth: sw, scrollLeft: sl } = virtualScrollX.value;
+      const {
+        containerWidth: cw,
+        /* scrollWidth: sw, */
+        scrollLeft: sl
+      } = virtualScrollX.value;
       clientWidth = cw;
       scrollLeft = sl;
     } else {
-      const { clientWidth: cw, scrollWidth: sw, scrollLeft: sl } = tableContainerRef.value;
+      const {
+        clientWidth: cw,
+        /* scrollWidth: sw, */
+        scrollLeft: sl
+      } = tableContainerRef.value;
       clientWidth = cw;
       scrollLeft = sl;
     }
@@ -852,10 +860,12 @@ const VUE2_SCROLL_TIMEOUT_MS = 200;
 function useVirtualScroll({
   props,
   tableContainerRef,
+  theadRef,
   dataSourceCopy,
   tableHeaderLast,
   tableHeaders
 }) {
+  const tableHeaderHeight = ref(props.headerRowHeight ?? props.rowHeight);
   const virtualScroll = ref({
     containerHeight: 0,
     rowHeight: props.rowHeight,
@@ -863,7 +873,8 @@ function useVirtualScroll({
     startIndex: 0,
     endIndex: 0,
     offsetTop: 0,
-    scrollTop: 0
+    scrollTop: 0,
+    scrollHeight: 0
   });
   const virtualScrollX = ref({
     containerWidth: 0,
@@ -925,23 +936,35 @@ function useVirtualScroll({
     }
     return width;
   });
+  function getTableHeaderHeight() {
+    const { headerRowHeight } = props;
+    return headerRowHeight * tableHeaders.value.length;
+  }
   function initVirtualScrollY(height) {
+    var _a;
     if (height !== void 0 && typeof height !== "number") {
       console.warn("initVirtualScrollY: height must be a number");
       height = 0;
     }
     if (!virtual_on.value)
       return;
-    const { offsetHeight, scrollTop } = tableContainerRef.value || {};
+    const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
+    let scrollTop = ((_a = tableContainerRef.value) == null ? void 0 : _a.scrollTop) || 0;
     const { rowHeight } = virtualScroll.value;
     const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
-    const { headless, headerRowHeight } = props;
+    const { headless } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
+    const headerHeight = getTableHeaderHeight();
+    tableHeaderHeight.value = headerHeight;
     if (!headless) {
-      const headerToBodyRowHeightCount = Math.floor(tableHeaders.value.length * (headerRowHeight || rowHeight) / rowHeight);
+      const headerToBodyRowHeightCount = Math.floor(headerHeight) / rowHeight;
       pageSize -= headerToBodyRowHeightCount;
     }
-    Object.assign(virtualScroll.value, { containerHeight, pageSize });
+    const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
+    if (scrollTop > maxScrollTop) {
+      scrollTop = maxScrollTop;
+    }
+    Object.assign(virtualScroll.value, { containerHeight, pageSize, scrollHeight });
     updateVirtualScrollY(scrollTop);
   }
   function initVirtualScrollX() {
@@ -958,8 +981,9 @@ function useVirtualScroll({
   function updateVirtualScrollY(sTop = 0) {
     const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
     virtualScroll.value.scrollTop = sTop;
-    if (!virtual_on.value)
+    if (!virtual_on.value) {
       return;
+    }
     let startIndex = Math.floor(sTop / rowHeight);
     if (startIndex < 0) {
       startIndex = 0;
@@ -974,11 +998,14 @@ function useVirtualScroll({
     if (props.stripe) {
       endIndex += 1;
     }
-    const offsetTop = startIndex * rowHeight;
     endIndex = Math.min(endIndex, dataSourceCopy.value.length);
+    if (startIndex >= endIndex) {
+      startIndex = endIndex - pageSize;
+    }
     if (vue2ScrollYTimeout) {
       window.clearTimeout(vue2ScrollYTimeout);
     }
+    const offsetTop = startIndex * rowHeight;
     if (!props.optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
       Object.assign(virtualScroll.value, {
         startIndex,
@@ -1062,19 +1089,18 @@ function useVirtualScroll({
     updateVirtualScrollX
   };
 }
-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 = {
+const _hoisted_1 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
+const _hoisted_2 = { class: "table-header-cell-wrapper" };
+const _hoisted_3 = {
   key: 1,
   class: "table-header-title"
 };
-const _hoisted_5 = { class: "table-header-title" };
-const _hoisted_6 = {
+const _hoisted_4 = { class: "table-header-title" };
+const _hoisted_5 = {
   key: 3,
   class: "table-header-sorter"
 };
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16px",
   height: "16px",
@@ -1091,28 +1117,28 @@ const _hoisted_7 = /* @__PURE__ */ createElementVNode("svg", {
     points: "8 10 4.8 14 11.2 14"
   })
 ], -1);
-const _hoisted_8 = [
-  _hoisted_7
+const _hoisted_7 = [
+  _hoisted_6
 ];
+const _hoisted_8 = ["onMousedown"];
 const _hoisted_9 = ["onMousedown"];
-const _hoisted_10 = ["onMousedown"];
-const _hoisted_11 = {
+const _hoisted_10 = {
   key: 1,
   class: "virtual-top"
 };
-const _hoisted_12 = {
+const _hoisted_11 = {
   key: 0,
   class: "virtual-x-left"
 };
-const _hoisted_13 = { class: "stk-tbody-main" };
-const _hoisted_14 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
-const _hoisted_15 = {
+const _hoisted_12 = { class: "stk-tbody-main" };
+const _hoisted_13 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
+const _hoisted_14 = {
   key: 0,
   class: "virtual-x-left"
 };
-const _hoisted_16 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
-const _hoisted_17 = ["title"];
-const _hoisted_18 = {
+const _hoisted_15 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_16 = ["title"];
+const _hoisted_17 = {
   key: 2,
   class: "virtual-bottom"
 };
@@ -1127,6 +1153,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     headless: { type: Boolean, default: false },
     theme: { default: "light" },
     rowHeight: { default: DEFAULT_ROW_HEIGHT },
+    rowHover: { type: Boolean, default: true },
+    rowActive: { type: Boolean, default: true },
+    rowCurrentRevokable: { type: Boolean, default: true },
     headerRowHeight: { default: null },
     virtual: { type: Boolean, default: false },
     virtualX: { type: Boolean, default: false },
@@ -1165,9 +1194,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const tableContainerRef = ref();
+    const theadRef = ref();
     const colResizeIndicatorRef = ref();
     const isRelativeMode = ref(IS_LEGACY_MODE ? true : props.cellFixedMode === "relative");
-    const currentRow = ref(null);
+    const currentRow = shallowRef();
     const currentRowKey = ref(null);
     let currentHoverRow = null;
     const currentHoverRowKey = ref(null);
@@ -1215,7 +1245,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       initVirtualScrollX,
       updateVirtualScrollY,
       updateVirtualScrollX
-    } = useVirtualScroll({ tableContainerRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
+    } = useVirtualScroll({ tableContainerRef, theadRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
     const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeaders });
     const getFixedStyle = useFixedStyle({
       props,
@@ -1278,8 +1308,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           needInitVirtualScrollY = true;
         }
         dataSourceCopy.value = [...val];
-        if (needInitVirtualScrollY)
-          initVirtualScrollY();
+        if (needInitVirtualScrollY) {
+          nextTick(() => initVirtualScrollY());
+        }
         if (sortCol.value) {
           const column = tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
           onColumnSort(column, false);
@@ -1372,10 +1403,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function rowKeyGen(row) {
       if (!row)
-        return;
+        return row;
       let key = rowKeyGenStore.get(row);
       if (!key) {
         key = typeof props.rowKey === "function" ? props.rowKey(row) : row[props.rowKey];
+        if (key === void 0) {
+          key = Math.random().toString();
+        }
         rowKeyGenStore.set(row, key);
       }
       return key;
@@ -1448,9 +1482,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function onRowClick(e, row) {
       emits("row-click", e, row);
-      if (props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row) {
-        currentRow.value = null;
-        currentRowKey.value = null;
+      const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
+      if (isCurrentRow) {
+        if (!props.rowCurrentRevokable) {
+          return;
+        }
+        currentRow.value = void 0;
+        currentRowKey.value = void 0;
         emits("current-change", e, row, { select: false });
       } else {
         currentRow.value = row;
@@ -1483,7 +1521,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits("cell-mouseover", e, row, col);
     }
     function onTableWheel(e) {
-      e.preventDefault();
       if (isColResizing.value) {
         e.stopPropagation();
         return;
@@ -1491,11 +1528,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const dom = tableContainerRef.value;
       if (!dom)
         return;
+      const { containerHeight, scrollTop, scrollHeight, rowHeight } = virtualScroll.value;
+      const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
+      const isScrollBottom = scrollHeight - containerHeight - scrollTop < rowHeight;
+      const isScrollRight = scrollWidth - containerWidth - scrollLeft < 100;
       const { deltaY, deltaX } = e;
-      if (deltaY)
+      if (virtual_on && deltaY) {
+        if (deltaY > 0 && !isScrollBottom || deltaY < 0 && scrollTop > 0) {
+          e.preventDefault();
+        }
         dom.scrollTop += deltaY;
-      if (deltaX)
+      }
+      if (virtualX_on && deltaX) {
+        if (deltaX > 0 && !isScrollRight || deltaX < 0 && scrollLeft > 0) {
+          e.preventDefault();
+        }
         dom.scrollLeft += deltaX;
+      }
     }
     function onTableScroll(e) {
       if (!(e == null ? void 0 : e.target))
@@ -1561,7 +1610,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return dataSourceCopy.value;
     }
     function resetSorter() {
-      sortCol.value = null;
+      sortCol.value = void 0;
       sortOrderIndex.value = 0;
       dataSourceCopy.value = [...props.dataSource];
     }
@@ -1625,6 +1674,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "border-body-v": props.bordered === "body-v",
           stripe: props.stripe,
           "cell-hover": props.cellHover,
+          "row-hover": props.rowHover,
+          "row-active": props.rowActive,
           "text-overflow": props.showOverflow,
           "header-text-overflow": props.showHeaderOverflow,
           "fixed-relative-mode": isRelativeMode.value
@@ -1650,7 +1701,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }]),
           style: normalizeStyle({ width: _ctx.width, minWidth: _ctx.minWidth, maxWidth: _ctx.maxWidth })
         }, [
-          !_ctx.headless ? (openBlock(), createElementBlock("thead", _hoisted_1, [
+          !_ctx.headless ? (openBlock(), createElementBlock("thead", {
+            key: 0,
+            ref_key: "theadRef",
+            ref: theadRef
+          }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
               return openBlock(), createElementBlock("tr", {
                 key: rowIndex,
@@ -1690,29 +1745,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     onDragover: _cache[2] || (_cache[2] = //@ts-ignore
                     (...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
                   }, [
-                    createElementVNode("div", _hoisted_3, [
+                    createElementVNode("div", _hoisted_2, [
                       col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
                         key: 0,
-                        col
-                      }, null, 8, ["col"])) : col.type === "seq" ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(col.title), 1)) : renderSlot(_ctx.$slots, "tableHeader", {
+                        col,
+                        colIndex,
+                        rowIndex
+                      }, null, 8, ["col", "colIndex", "rowIndex"])) : col.type === "seq" ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(col.title), 1)) : renderSlot(_ctx.$slots, "tableHeader", {
                         key: 2,
                         col
                       }, () => [
-                        createElementVNode("span", _hoisted_5, toDisplayString(col.title), 1)
+                        createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
                       ]),
-                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_6, _hoisted_8)) : createCommentVNode("", true),
+                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : 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_9)) : createCommentVNode("", true),
+                      }, null, 40, _hoisted_8)) : createCommentVNode("", true),
                       _ctx.colResizable ? (openBlock(), createElementBlock("div", {
                         key: 5,
                         class: "table-header-resizer right",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
-                      }, null, 40, _hoisted_10)) : createCommentVNode("", true)
+                      }, null, 40, _hoisted_9)) : createCommentVNode("", true)
                     ])
-                  ], 46, _hoisted_2);
+                  ], 46, _hoisted_1);
                 }), 128)),
                 unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
                   key: 1,
@@ -1724,13 +1781,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 4)) : createCommentVNode("", true)
               ], 32);
             }), 128))
-          ])) : createCommentVNode("", true),
-          unref(virtual_on) ? (openBlock(), createElementBlock("tbody", _hoisted_11, [
+          ], 512)) : createCommentVNode("", true),
+          unref(virtual_on) ? (openBlock(), createElementBlock("tbody", _hoisted_10, [
             createElementVNode("tr", {
               style: normalizeStyle({ height: `${unref(virtualScroll).offsetTop}px` }),
               class: "padding-top-tr"
             }, [
-              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true),
+              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_11)) : createCommentVNode("", true),
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: col.dataIndex,
@@ -1739,7 +1796,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }), 128)) : createCommentVNode("", true)
             ], 4)
           ])) : createCommentVNode("", true),
-          createElementVNode("tbody", _hoisted_13, [
+          createElementVNode("tbody", _hoisted_12, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
               return openBlock(), createElementBlock("tr", {
                 id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : rowIndex),
@@ -1755,7 +1812,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onContextmenu: (e) => onRowMenu(e, row),
                 onMouseover: (e) => onTrMouseOver(e, row)
               }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_15)) : createCommentVNode("", true),
+                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_14)) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col, colIndex) => {
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
@@ -1773,24 +1830,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       row,
                       rowIndex,
                       colIndex,
-                      cellValue: row[col.dataIndex]
+                      cellValue: row == null ? void 0 : row[col.dataIndex]
                     }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
                       key: 1,
                       class: "table-cell-wrapper",
-                      title: !col.type ? row[col.dataIndex] : ""
+                      title: !col.type ? 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(row[col.dataIndex] ?? getEmptyCellText.value(col, row)), 1)
+                        createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
                       ], 64))
-                    ], 8, _hoisted_17))
-                  ], 46, _hoisted_16);
+                    ], 8, _hoisted_16))
+                  ], 46, _hoisted_15);
                 }), 128))
-              ], 42, _hoisted_14);
+              ], 42, _hoisted_13);
             }), 128))
           ]),
-          unref(virtual_on) ? (openBlock(), createElementBlock("tbody", _hoisted_18, [
+          unref(virtual_on) ? (openBlock(), createElementBlock("tbody", _hoisted_17, [
             createElementVNode("tr", {
               style: normalizeStyle({ height: `${unref(virtual_offsetBottom)}px` })
             }, null, 4)

package/lib/style.css

@@ -94,6 +94,12 @@
 .stk-table.stripe tbody tr:nth-child(even){
   background-color:var(--stripe-bgc);
 }
+.stk-table.row-hover tbody tr:hover{
+  background-color:var(--tr-hover-bgc);
+}
+.stk-table.row-active tbody tr.active{
+  background-color:var(--tr-active-bgc);
+}
 .stk-table.cell-hover tbody td:hover{
   box-shadow:inset 0 0 0 2px var(--td-hover-color);
 }
@@ -177,16 +183,10 @@
   background-color:var(--th-bgc);
   height:var(--header-row-height);
 }
-.stk-table .stk-table-main tbody tr{
+.stk-table tbody tr{
   background-color:var(--td-bgc);
   height:var(--row-height);
 }
-.stk-table .stk-table-main tbody tr:hover{
-  background-color:var(--tr-hover-bgc);
-}
-.stk-table .stk-table-main tbody tr.active{
-  background-color:var(--tr-active-bgc);
-}
 .stk-table .virtual-x-left,
 .stk-table .virtual-x-right{
   padding:0;