stk-table-vue 0.0.1-beta.5 → 0.0.1-beta.7

package/README.md

@@ -1,7 +1,7 @@
-# StkTable
+# StkTable (Sticky Table)
 
 Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
-js体积(38kb)
+js体积(未压缩41kb)
 
 ## 功能
 * [x] 高亮行，单元格。
@@ -11,7 +11,8 @@ js体积(38kb)
 * [x] 表头列宽拖动。
 * [x] 多级表头。（不支持横向虚拟滚动）
 * [x] 支持table-layout: fixed 配置。
-* [] 鼠标点击后，键盘上下滚动表格
+* [x] 鼠标悬浮在表格上，键盘上下左右滚动虚拟表格
+* [] 列固定阴影
 
 ## Usage
 > npm install stk-table-vue
@@ -36,80 +37,57 @@ const stkTable = ref<InstanceType<typeof StkTable>>();
 ```ts
 export type StkProps = Partial<{
     width: string;
-
     /** 最小表格宽度 */
     minWidth: string;
-
     /** 表格最大宽度*/
     maxWidth: string;
-
     /** 是否使用 table-layout:fixed */
     fixedMode: boolean;
-
     /** 是否隐藏表头 */
     headless: boolean;
-
     /** 主题，亮、暗 */
     theme: 'light' | 'dark';
-
     /** 虚拟滚动 */
     virtual: boolean;
-
     /** x轴虚拟滚动 */
     virtualX: boolean;
-
     /** 表格列配置 */
     columns: StkTableColumn<any>[];
-
     /** 表格数据源 */
     dataSource: any[];
-
     /** 行唯一键 */
     rowKey: UniqKey;
-
     /** 列唯一键 */
     colKey: UniqKey;
-
     /** 空值展示文字 */
     emptyCellText: string;
-
     /** 暂无数据兜底高度是否撑满 */
     noDataFull: boolean;
-
     /** 是否展示暂无数据 */
     showNoData: boolean;
-
     /** 是否服务端排序，true则不排序数据 */
     sortRemote: boolean;
-
     /** 表头是否溢出展示... */
     showHeaderOverflow: boolean;
-
     /** 表体溢出是否展示... */
     showOverflow: boolean;
-
     /** 是否增加行hover class */
     showTrHoverClass: boolean;
-
     /** 表头是否可拖动 */
     headerDrag: boolean;
-
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
      */
     rowClassName: (row: any, i: number) => string;
-
     /**
      * 列宽是否可拖动<br>
      * **不要设置**列minWidth，**必须**设置width<br>
      * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
      */
     colResizable: boolean;
-
     /** 可拖动至最小的列宽 */
     colMinWidth: number;
-
     /**
      * 单元格分割线。
      * 默认横竖都有
@@ -118,7 +96,6 @@ export type StkProps = Partial<{
      * "body-v" - 仅表体展示竖线
      */
     bordered: boolean | 'h' | 'v' | 'body-v';
-
     /** 自动重新计算虚拟滚动高度宽度。默认true */
     autoResize: boolean;
 }>;
@@ -126,7 +103,7 @@ export type StkProps = Partial<{
 
 ### StkTableColumn
 ``` ts
-type Sorter = boolean | Function;
+type Sorter<T> = boolean | ((data: T[], option: { order: Order; column: any }) => T[]);
 /** 表格列配置 */
 export type StkTableColumn<T extends Record<string, any>> = {
     /** 取值id */
@@ -138,7 +115,7 @@ export type StkTableColumn<T extends Record<string, any>> = {
     /** 表头内容对齐方式 */
     headerAlign?: 'right' | 'left' | 'center';
     /** 筛选 */
-    sorter?: Sorter;
+    sorter?: Sorter<T>;
     /** 列宽。横向虚拟滚动时必须设置。 */
     width?: string;
     /** 最小列宽。非x虚拟滚动生效。 */

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

@@ -1,9 +1,4 @@
 import { SortOption, StkTableColumn } from './types/index';
-/**
- * 初始化虚拟滚动参数
- * @param {number} [height] 虚拟滚动的高度
- */
-declare function initVirtualScroll(height?: number): void;
 /**
  * 选中一行，
  * @param {string} rowKey
@@ -40,10 +35,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minWidth: string;
     maxWidth: string;
     fixedMode: boolean;
-    headless: boolean; /** 排序切换顺序 */
+    headless: boolean;
     theme: "light" | "dark";
     virtual: boolean;
     virtualX: boolean;
+    /** 排序切换顺序 */
     columns: StkTableColumn<any>[];
     dataSource: any[];
     rowKey: import("./types/index").UniqKey;
@@ -60,6 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
+    autoResize: boolean;
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -85,13 +82,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean;
+    autoResize: boolean;
 }>, {
-    initVirtualScroll: typeof initVirtualScroll;
+    initVirtualScroll: (height?: number | undefined) => void;
     initVirtualScrollX: () => void;
     initVirtualScrollY: (height?: number | undefined) => void;
     setCurrentRow: typeof setCurrentRow;
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
     setHighlightDimRow: (rowKeyValues: (string | number)[]) => void;
+    sortCol: import("vue").Ref<string | null | undefined>;
     setSorter: typeof setSorter;
     resetSorter: typeof resetSorter;
     scrollTo: typeof scrollTo;
@@ -115,10 +114,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minWidth: string;
     maxWidth: string;
     fixedMode: boolean;
-    headless: boolean; /** 排序切换顺序 */
+    headless: boolean;
     theme: "light" | "dark";
     virtual: boolean;
     virtualX: boolean;
+    /** 排序切换顺序 */
     columns: StkTableColumn<any>[];
     dataSource: any[];
     rowKey: import("./types/index").UniqKey;
@@ -135,6 +135,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
+    autoResize: boolean;
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -160,6 +161,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean;
+    autoResize: boolean;
 }>>> & {
     onScroll?: ((...args: any[]) => any) | undefined;
     "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
@@ -199,6 +201,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
+    autoResize: boolean;
 }, {}>, {
     tableHeader?(_: {
         column: StkTableColumn<any>;

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

@@ -1,10 +1,10 @@
 import { Component, VNode } from 'vue';
 /** 排序方式，asc-正序，desc-倒序，null-默认顺序 */
 export type Order = null | 'asc' | 'desc';
-type Sorter = boolean | ((data: any[], option: {
+type Sorter<T> = boolean | ((data: T[], option: {
     order: Order;
     column: any;
-}) => any[]);
+}) => T[]);
 export type CustomCellFunc<T extends Record<string, any>> = (props: {
     row: T;
     col: StkTableColumn<T>;
@@ -24,7 +24,7 @@ export type StkTableColumn<T extends Record<string, any>> = {
     /** 表头内容对齐方式 */
     headerAlign?: 'right' | 'left' | 'center';
     /** 筛选 */
-    sorter?: Sorter;
+    sorter?: Sorter<T>;
     /** 列宽。横向虚拟滚动时必须设置。 */
     width?: string;
     /** 最小列宽。非x虚拟滚动生效。 */
@@ -118,5 +118,10 @@ export type StkProps = Partial<{
      * "body-v" - 仅表体展示竖线
      */
     bordered: boolean | 'h' | 'v' | 'body-v';
+    /**
+     * 自动重新计算虚拟滚动高度宽度。默认true
+     * [非响应式]
+     */
+    autoResize: boolean;
 }>;
 export {};

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

@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+type Options = {
+    tableContainer: Ref<HTMLElement | undefined>;
+    initVirtualScroll: () => void;
+    scrollTo: () => void;
+    props: any;
+    /** 防抖延时 */
+    debounceMs: number;
+};
+/**
+ * 窗口变化自动重置虚拟滚动
+ * @param param0
+ */
+export declare function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }: Options): void;
+export {};

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

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+type Options = {
+    scrollTo: (x: number | null, y: number | null) => void;
+    virtualScroll: Ref<VirtualScrollStore>;
+    virtualScrollX: Ref<VirtualScrollXStore>;
+};
+/**
+ * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
+ *
+ * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
+ */
+export declare function useKeyboardArrowScroll(targetElement: Ref<HTMLElement | undefined>, { scrollTo, virtualScroll, virtualScrollX }: Options): void;
+export {};

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

@@ -6,6 +6,37 @@ type Option = {
     dataSourceCopy: ShallowRef<any[]>;
     tableHeaderLast: Ref<StkTableColumn<any>[]>;
 };
+/** 暂存纵向虚拟滚动的数据 */
+export type VirtualScrollStore = {
+    /** 容器高度 */
+    containerHeight: number;
+    /** 数组开始位置 */
+    startIndex: number;
+    /** 行高 */
+    rowHeight: number;
+    /** 表格定位上边距 */
+    offsetTop: number;
+    /** 纵向滚动条位置，用于判断是横向滚动还是纵向 */
+    scrollTop: number;
+};
+/** 暂存横向虚拟滚动的数据 */
+export type VirtualScrollXStore = {
+    /** 容器宽度 */
+    containerWidth: number;
+    /** 开始位置 */
+    startIndex: number;
+    /** 结束始位置 */
+    endIndex: number;
+    /** 表格定位左边距 */
+    offsetLeft: number;
+    /** 横向滚动位置，用于判断是横向滚动还是纵向 */
+    scrollLeft: number;
+};
+/**
+ * 虚拟滚动
+ * @param param0
+ * @returns
+ */
 export declare function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast }: Option): {
     virtualScroll: Ref<{
         containerHeight: number;
@@ -27,6 +58,7 @@ export declare function useVirtualScroll({ tableContainer, props, dataSourceCopy
     virtualX_on: import("vue").ComputedRef<any>;
     virtualX_columnPart: import("vue").ComputedRef<StkTableColumn<any>[]>;
     virtualX_offsetRight: import("vue").ComputedRef<number>;
+    initVirtualScroll: (height?: number) => void;
     initVirtualScrollY: (height?: number) => void;
     initVirtualScrollX: () => void;
     updateVirtualScrollY: (sTop?: number) => void;

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { ref, onMounted, onBeforeUnmount, computed, defineComponent, shallowRef, watch, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode } from "vue";
+import { onMounted, onBeforeUnmount, watch, ref, computed, defineComponent, shallowRef, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 const Default_Col_Width = "100";
 const Default_Table_Height = 100;
@@ -19,6 +19,54 @@ try {
   console.error("Cannot get Chrome version", e);
 }
 const Is_Legacy_Mode = _chromeVersion < 56;
+function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }) {
+  let resizeObserver = null;
+  onMounted(() => {
+    initResizeObserver();
+  });
+  onBeforeUnmount(() => {
+    removeResizeObserver();
+  });
+  function initResizeObserver() {
+    if (window.ResizeObserver) {
+      if (!tableContainer.value) {
+        const watchDom = watch(
+          () => tableContainer,
+          () => {
+            initResizeObserver();
+            watchDom();
+          }
+        );
+        return;
+      }
+      resizeObserver = new ResizeObserver(resizeCallback);
+      resizeObserver.observe(tableContainer.value);
+    } else {
+      window.addEventListener("resize", resizeCallback);
+    }
+  }
+  function removeResizeObserver() {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    } else {
+      window.removeEventListener("resize", resizeCallback);
+    }
+  }
+  let debounceTime = 0;
+  function resizeCallback() {
+    if (debounceTime) {
+      window.clearTimeout(debounceTime);
+    }
+    debounceTime = window.setTimeout(() => {
+      if (props.autoResize) {
+        scrollTo();
+        initVirtualScroll();
+      }
+      debounceTime = 0;
+    }, debounceMs);
+  }
+}
 function useColResize({ tableContainer, tableHeaderLast, colResizeIndicator, props, emit, colKeyGen }) {
   const isColResizing = ref(false);
   let colResizeState = {
@@ -232,6 +280,52 @@ function useHighlight({ props, tableContainer, rowKeyGen }) {
     setHighlightDimCell
   };
 }
+const ARROW_CODES = ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"];
+function useKeyboardArrowScroll(targetElement, { scrollTo, virtualScroll, virtualScrollX }) {
+  let isMouseOver = false;
+  onMounted(() => {
+    var _a, _b, _c;
+    window.addEventListener("keydown", handleKeydown);
+    (_a = targetElement.value) == null ? void 0 : _a.addEventListener("mouseenter", handleMouseEnter);
+    (_b = targetElement.value) == null ? void 0 : _b.addEventListener("mouseleave", handleMouseLeave);
+    (_c = targetElement.value) == null ? void 0 : _c.addEventListener("mousedown", handleMouseDown);
+  });
+  onBeforeUnmount(() => {
+    var _a, _b, _c;
+    window.removeEventListener("keydown", handleKeydown);
+    (_a = targetElement.value) == null ? void 0 : _a.removeEventListener("mouseenter", handleMouseEnter);
+    (_b = targetElement.value) == null ? void 0 : _b.removeEventListener("mouseleave", handleMouseLeave);
+    (_c = targetElement.value) == null ? void 0 : _c.removeEventListener("mousedown", handleMouseDown);
+  });
+  function handleKeydown(e) {
+    if (!ARROW_CODES.includes(e.code))
+      return;
+    if (!isMouseOver)
+      return;
+    e.preventDefault();
+    const { scrollTop, rowHeight } = virtualScroll.value;
+    const { scrollLeft } = virtualScrollX.value;
+    if (e.code === ARROW_CODES[0]) {
+      scrollTo(scrollTop - rowHeight, null);
+    } else if (e.code === ARROW_CODES[1]) {
+      scrollTo(null, scrollLeft + rowHeight);
+    } else if (e.code === ARROW_CODES[2]) {
+      scrollTo(scrollTop + rowHeight, null);
+    } else if (e.code === ARROW_CODES[3]) {
+      scrollTo(null, scrollLeft - rowHeight);
+    }
+  }
+  function handleMouseEnter() {
+    isMouseOver = true;
+  }
+  function handleMouseLeave() {
+    isMouseOver = false;
+  }
+  function handleMouseDown() {
+    if (!isMouseOver)
+      isMouseOver = true;
+  }
+}
 function useThDrag({ emit }) {
   let dragStartKey = void 0;
   function onThDragStart(e) {
@@ -263,12 +357,9 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
   const virtualScroll = ref({
     containerHeight: 0,
     startIndex: 0,
-    // 数组开始位置
     rowHeight: 28,
     offsetTop: 0,
-    // 表格定位上边距
     scrollTop: 0
-    // 纵向滚动条位置，用于判断是横向滚动还是纵向
   });
   const virtualScrollX = ref({
     containerWidth: 0,
@@ -276,7 +367,6 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
     endIndex: 0,
     offsetLeft: 0,
     scrollLeft: 0
-    // 横向滚动位置，用于判断是横向滚动还是纵向
   });
   const virtual_on = computed(() => {
     return props.virtual && dataSourceCopy.value.length > virtual_pageSize.value * 2;
@@ -327,18 +417,26 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
     return width;
   });
   function initVirtualScrollY(height) {
-    var _a, _b;
-    if (virtual_on.value) {
-      virtualScroll.value.containerHeight = typeof height === "number" ? height : ((_a = tableContainer.value) == null ? void 0 : _a.offsetHeight) || Default_Table_Height;
-      updateVirtualScrollY((_b = tableContainer.value) == null ? void 0 : _b.scrollTop);
+    if (!virtual_on.value)
+      return;
+    const { offsetHeight, scrollTop } = tableContainer.value || {};
+    if (typeof height === "number") {
+      virtualScroll.value.containerHeight = height;
+    } else {
+      virtualScroll.value.containerHeight = offsetHeight || Default_Table_Height;
     }
+    updateVirtualScrollY(scrollTop);
   }
   function initVirtualScrollX() {
-    if (props.virtualX) {
-      const { offsetWidth, scrollLeft } = tableContainer.value || {};
-      virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
-      updateVirtualScrollX(scrollLeft);
-    }
+    if (!props.virtualX)
+      return;
+    const { offsetWidth, scrollLeft } = tableContainer.value || {};
+    virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
+    updateVirtualScrollX(scrollLeft);
+  }
+  function initVirtualScroll(height) {
+    initVirtualScrollY(height);
+    initVirtualScrollX();
   }
   function updateVirtualScrollY(sTop = 0) {
     const { rowHeight } = virtualScroll.value;
@@ -390,6 +488,7 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
     virtualX_on,
     virtualX_columnPart,
     virtualX_offsetRight,
+    initVirtualScroll,
     initVirtualScrollY,
     initVirtualScrollX,
     updateVirtualScrollY,
@@ -444,6 +543,8 @@ function strCompare(a, b, type) {
   }
 }
 function tableSort(sortOption, order, dataSource) {
+  if (!(dataSource == null ? void 0 : dataSource.length))
+    return dataSource || [];
   let targetDataSource = [...dataSource];
   if (typeof sortOption.sorter === "function") {
     const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
@@ -563,7 +664,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     rowClassName: { type: Function, default: () => "" },
     colResizable: { type: Boolean, default: false },
     colMinWidth: { default: 10 },
-    bordered: { type: [Boolean, String], default: true }
+    bordered: { type: [Boolean, String], default: true },
+    autoResize: { type: Boolean, default: true }
   },
   emits: [
     "sort-change",
@@ -607,15 +709,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const store = {};
       const cols = [...tableHeaderLast.value];
       let left = 0;
+      let rightStartIndex = 0;
       for (let i = 0; i < cols.length; i++) {
         const item = cols[i];
         if (item.fixed === "left") {
           store[item.dataIndex] = left;
           left += parseInt(item.width || Default_Col_Width);
         }
+        if (!rightStartIndex && item.fixed === "right") {
+          rightStartIndex = i;
+        }
       }
       let right = 0;
-      for (let i = cols.length - 1; i >= 0; i--) {
+      for (let i = cols.length - 1; i >= rightStartIndex; i--) {
         const item = cols[i];
         if (item.fixed === "right") {
           store[item.dataIndex] = right;
@@ -642,12 +748,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       virtualX_on,
       virtualX_columnPart,
       virtualX_offsetRight,
+      initVirtualScroll,
       initVirtualScrollY,
       initVirtualScrollX,
       updateVirtualScrollY,
       updateVirtualScrollX
     } = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast });
     const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
+    if (props.autoResize) {
+      useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs: 500 });
+    }
+    useKeyboardArrowScroll(tableContainer, {
+      scrollTo,
+      virtualScroll,
+      virtualScrollX
+    });
     watch(
       () => props.columns,
       () => {
@@ -659,6 +774,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => props.dataSource,
       (val) => {
+        if (!val) {
+          console.warn("invalid dataSource");
+          return;
+        }
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
           needInitVirtualScrollY = true;
@@ -678,10 +797,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       initVirtualScroll();
     });
-    function initVirtualScroll(height) {
-      initVirtualScrollY(height);
-      initVirtualScrollX();
-    }
     function getFixedStyle(tagType, col) {
       const style = {};
       if (Is_Legacy_Mode) {
@@ -909,6 +1024,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setCurrentRow,
       setHighlightDimCell,
       setHighlightDimRow,
+      sortCol,
       setSorter,
       resetSorter,
       scrollTo,
@@ -974,7 +1090,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
                       _ctx.showHeaderOverflow ? "text-overflow" : "",
                       col.headerClassName,
-                      col.fixed ? "fixed-cell" : ""
+                      col.fixed ? "fixed-cell" : "",
+                      col.fixed ? "fixed-cell--" + col.fixed : ""
                     ]),
                     onClick: (e) => {
                       onColumnSort(col);
@@ -1057,7 +1174,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
                     "data-index": col.dataIndex,
-                    class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", col.fixed ? "fixed-cell" : ""]),
+                    class: normalizeClass([
+                      col.className,
+                      _ctx.showOverflow ? "text-overflow" : "",
+                      col.fixed ? "fixed-cell" : "",
+                      col.fixed ? "fixed-cell--" + col.fixed : ""
+                    ]),
                     style: normalizeStyle(getCellStyle(2, col)),
                     onClick: (e) => onCellClick(e, row, col)
                   }, [