stk-table-vue 0.3.3 → 0.3.4

package/README.md

@@ -16,7 +16,7 @@ repo:
   - [x] 虚拟滚动默认通过js计算行高亮背景色，可通过 `useCss` 设置为css @keyframe实现 。
   - [x] 支持配置高亮参数（持续时间，颜色，频率（虚拟滚动））。(`v0.2.9`)
   - [x] `setHighlightDimRow`/`setHighlightCellRow`支持自定义高亮css类名。(`v0.2.9`)
-  - [x] 使用 `Web Animations API` 实现高亮。
+  - [x] 使用 `Web Animations API` 实现高亮。(`v0.3.4` 变更为默认值)
 * [x] 虚拟滚动。
   - [x] 纵向。
   - [x] 横向（必须设置列宽）。
@@ -223,7 +223,7 @@ export type StkProps = {
   highlightConfig?: {
     /** 高亮持续时间(s) */
     duration?: number;
-    /** 高亮帧率(虚拟滚动生效) */
+    /** 高亮帧率*/
     fps?: number;
   };
   /** 序号列配置 */
@@ -549,13 +549,20 @@ export type SortConfig<T extends Record<string, any>> = {
 ### 鼠标悬浮表头时，不展示title
 * 将 `StkTableColumn` 中的 `title` 字段置为 "" 空字符串。这样th中就没有title了。
 * 使用 `StkTableColumn` 中的 `customHeaderCell` 属性中，自定义表头渲染。
-### 高亮性能
-* 在虚拟滚动下高亮强制使用css @keyframes 实现动画。`setHighlightDimRow`/`setHighlightCellRow` 最后一个参数传入 `{method: 'css'}` 即可。（滚动后动画会中断） 
-* 指定 `{method:'animation'}` 在虚拟滚动下使用animation api实现动画。好处是动画流畅，且滚动后动画不中断。
-* 配置 `props.highlightConfig.fps` 指定高亮帧率。降低帧率有利于性能。
 ### 性能
-* 配置 `props.cellFixedMode` 为 `relative` 时，将使用相对定位实现固定列与固定表头，相较于`sticky`的实现，渲染合成层更少，性能更好。
+#### highlight
+* 在虚拟滚动下高亮强制使用 `css @keyframes` 实现动画。`setHighlightDimRow`/`setHighlightCellRow` 最后一个参数传入 `{method: 'css'}` 即可。（滚动后动画会中断） 
+* 指定 `{method:'animation'}` 在虚拟滚动下使用animation api实现动画。好处是动画流畅，且滚动后动画不中断。坏处是不支持帧率配置。
+* 配置 `props.highlightConfig.fps` 指定高亮帧率。降低帧率有利于性能。
+#### relative fixed
+* 配置 `props.cellFixedMode` 为 `relative` 时，将使用相对定位实现固定列与固定表头，相较于`sticky`的实现，渲染合成层更少。
 * 问题：若开启了纵向虚拟滚动，不开启横向虚拟滚动，且不设置某些列宽时。如果纵向滚动导致某些列宽变化，则会导致右侧固定列计算错误。
+#### tr 分层
+* 通过css选择器将 stk-table tbody tr 配置 `transform:translateZ(0)` 对每行 tr 进行分层。在 `customCell` 较多且复杂时，尝试开启此功能可能对性能有帮助。
 
 ## Other
 * `$*$` 兼容注释
+
+
+### Planed removal APi
+* `setHighlightDimRow` 中的 `method="js"`。观察animation Api 是否足够满足使用场景。若足够满足计划在后期移除，并且可以移除 `d3-interpolate` 依赖。

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

@@ -186,13 +186,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 设置高亮渐暗单元格 */
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
         className?: string | undefined;
-        method?: "css" | "animation" | undefined;
+        method?: "animation" | "css" | undefined;
         keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;
         duration?: number | undefined;
     }) => void;
     /** 设置高亮渐暗行 */
     setHighlightDimRow: (rowKeyValues: UniqKey[], option?: {
-        method?: "css" | "animation" | "js" | undefined;
+        method?: "animation" | "css" | "js" | undefined;
         useCss?: boolean | undefined;
         className?: string | undefined;
         keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;

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

@@ -9,9 +9,9 @@ type Params = {
  * 高亮单元格，行
  */
 export declare function useHighlight({ props, stkTableId, tableContainerRef }: Params): {
-    highlightSteps: number;
+    highlightSteps: number | null;
     setHighlightDimRow: (rowKeyValues: UniqKey[], option?: {
-        method?: 'css' | 'animation' | 'js';
+        method?: 'animation' | 'css' | 'js';
         /** @deprecated 请使用method */
         useCss?: boolean;
         className?: string;
@@ -20,7 +20,7 @@ export declare function useHighlight({ props, stkTableId, tableContainerRef }: P
     }) => void;
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
         className?: string;
-        method?: 'css' | 'animation';
+        method?: 'animation' | 'css';
         keyframe?: Parameters<Animatable['animate']>['0'];
         duration?: number;
     }) => void;

package/lib/stk-table-vue.js

@@ -510,13 +510,13 @@ function useFixedStyle({
 }
 function useHighlight({ props, stkTableId, tableContainerRef }) {
   const config = props.highlightConfig;
-  const highlightDuration = config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION;
-  const highlightFrequency = config.fps ? 1e3 / config.fps : HIGHLIGHT_FREQ;
   const highlightColor = {
     light: HIGHLIGHT_COLOR.light,
     dark: HIGHLIGHT_COLOR.dark
   };
-  const highlightSteps = highlightDuration / highlightFrequency;
+  const highlightDuration = config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION;
+  const highlightFrequency = config.fps && config.fps > 0 ? 1e3 / config.fps : null;
+  const highlightSteps = highlightFrequency ? Math.round(highlightDuration / highlightFrequency) : null;
   const highlightFrom = computed(() => highlightColor[props.theme].from);
   const highlightTo = computed(() => highlightColor[props.theme].to);
   const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
@@ -526,6 +526,13 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
   let calcHighlightDimLoopAnimation = false;
   const highlightDimRowsTimeout = /* @__PURE__ */ new Map();
   const highlightDimCellsTimeout = /* @__PURE__ */ new Map();
+  const defaultHighlightDimOption = (() => {
+    const keyframe = { backgroundColor: [highlightFrom.value, highlightTo.value] };
+    if (highlightSteps) {
+      keyframe.easing = `steps(${highlightSteps})`;
+    }
+    return { duration: highlightDuration, keyframe };
+  })();
   function calcRowHighlightLoop() {
     if (calcHighlightDimLoopAnimation)
       return;
@@ -577,20 +584,16 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
           calcHighlightDimLoopJs = false;
           highlightDimRowsJs.clear();
         }
-      }, highlightFrequency);
+      }, highlightFrequency || HIGHLIGHT_FREQ);
     };
     recursion();
   }
-  const defaultHighlightDimOption = {
-    keyframe: [{ backgroundColor: highlightFrom.value }, { backgroundColor: highlightTo.value }],
-    duration: highlightDuration
-  };
   function setHighlightDimCell(rowKeyValue, dataIndex, option = {}) {
     var _a;
     const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
     const { className, method, duration, keyframe } = {
       className: HIGHLIGHT_CELL_CLASS,
-      method: "css",
+      method: "animation",
       ...defaultHighlightDimOption,
       ...option
     };
@@ -607,7 +610,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
       rowKeyValues = [rowKeyValues];
     const { className, method, useCss, keyframe, duration } = {
       className: HIGHLIGHT_ROW_CLASS,
-      method: props.virtual ? "js" : "css",
+      method: "animation",
       ...defaultHighlightDimOption,
       ...option
     };
@@ -910,12 +913,7 @@ function useVirtualScroll({
       return;
     const { offsetHeight, scrollTop } = tableContainerRef.value || {};
     const { rowHeight } = virtualScroll.value;
-    let containerHeight;
-    if (typeof height === "number") {
-      containerHeight = height;
-    } else {
-      containerHeight = offsetHeight || DEFAULT_TABLE_HEIGHT;
-    }
+    const containerHeight = height ?? (offsetHeight || DEFAULT_TABLE_HEIGHT);
     const { headless, headerRowHeight } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
     if (!headless) {
@@ -942,17 +940,12 @@ function useVirtualScroll({
     if (!virtual_on.value)
       return;
     let startIndex = Math.floor(sTop / rowHeight);
-    if (props.stripe) {
-      startIndex -= 1;
-    }
     if (startIndex < 0) {
       startIndex = 0;
     }
     if (props.stripe && startIndex !== 0) {
       const scrollRows = Math.abs(oldStartIndex - startIndex);
-      if (scrollRows < 2) {
-        return;
-      } else if (scrollRows % 2) {
+      if (scrollRows % 2) {
         startIndex -= 1;
       }
     }
@@ -984,17 +977,18 @@ function useVirtualScroll({
     if (!props.virtualX)
       return;
     const headerLength = (_a = tableHeaderLast.value) == null ? void 0 : _a.length;
-    const { scrollLeft } = virtualScrollX.value;
     if (!headerLength)
       return;
+    const { scrollLeft } = virtualScrollX.value;
     let startIndex = 0;
     let offsetLeft = 0;
     let colWidthSum = 0;
     let leftColWidthSum = 0;
+    let leftFirstColRestWidth = 0;
     for (let colIndex = 0; colIndex < headerLength; colIndex++) {
-      startIndex++;
       const col = tableHeaderLast.value[colIndex];
       const colWidth = getCalculatedColWidth(col);
+      startIndex++;
       if (col.fixed === "left") {
         leftColWidthSum += colWidth;
         continue;
@@ -1003,10 +997,11 @@ function useVirtualScroll({
       if (colWidthSum >= sLeft) {
         offsetLeft = colWidthSum - colWidth;
         startIndex--;
+        leftFirstColRestWidth = colWidthSum - sLeft;
         break;
       }
     }
-    colWidthSum = 0;
+    colWidthSum = leftFirstColRestWidth;
     const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
     let endIndex = headerLength;
     for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
@@ -1570,16 +1565,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "text-overflow": props.showOverflow,
           "header-text-overflow": props.showHeaderOverflow
         }]),
-        style: normalizeStyle([
-          _ctx.virtual && {
-            "--row-height": unref(virtualScroll).rowHeight + "px",
-            "--header-row-height": (props.headerRowHeight || props.rowHeight) + "px"
-          },
-          {
-            "--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s",
-            "--highlight-timing-function": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : ""
-          }
-        ]),
+        style: normalizeStyle({
+          "--row-height": unref(virtualScroll).rowHeight + "px",
+          "--header-row-height": (props.headerRowHeight || props.rowHeight) + "px",
+          "--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s",
+          "--highlight-timing-function": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : ""
+        }),
         onScroll: onTableScroll,
         onWheel: onTableWheel
       }, [

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "stk-table-vue",
-    "version": "0.3.3",
-    "description": "Simple realtime virtual table for vue3&vue2.7",
+    "version": "0.3.4",
+    "description": "Simple realtime virtual table for vue3 and vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",
     "packageManager": "pnpm@8.14.3",
@@ -17,8 +17,13 @@
     "keywords": [
         "virtual table",
         "vue",
+        "vue2",
+        "vue3",
         "highlight",
-        "sticky"
+        "sticky",
+        "virtual",
+        "table",
+        "list"
     ],
     "files": [
         "lib",

package/src/StkTable/StkTable.vue

@@ -18,16 +18,12 @@
             'text-overflow': props.showOverflow,
             'header-text-overflow': props.showHeaderOverflow,
         }"
-        :style="[
-            virtual && {
-                '--row-height': virtualScroll.rowHeight + 'px',
-                '--header-row-height': (props.headerRowHeight || props.rowHeight) + 'px',
-            },
-            {
-                '--highlight-duration': props.highlightConfig.duration && props.highlightConfig.duration + 's',
-                '--highlight-timing-function': highlightSteps ? `steps(${highlightSteps})` : '',
-            },
-        ]"
+        :style="{
+            '--row-height': virtualScroll.rowHeight + 'px',
+            '--header-row-height': (props.headerRowHeight || props.rowHeight) + 'px',
+            '--highlight-duration': props.highlightConfig.duration && props.highlightConfig.duration + 's',
+            '--highlight-timing-function': highlightSteps ? `steps(${highlightSteps})` : '',
+        }"
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >

package/src/StkTable/const.ts

@@ -11,6 +11,7 @@ export const HIGHLIGHT_COLOR = {
 };
 /** 高亮持续时间 */
 export const HIGHLIGHT_DURATION = 2000;
+
 /** 高亮变更频率 */
 export const HIGHLIGHT_FREQ = 1000 / 30;
 

package/src/StkTable/useHighlight.ts

@@ -26,18 +26,17 @@ type HighlightDimRowStore = {
 export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     const config: HighlightConfig = props.highlightConfig;
 
-    /** 持续时间 */
-    const highlightDuration = config.duration ? config.duration * 1000 : HIGHLIGHT_DURATION;
-    /** 高亮频率（仅虚拟滚动生效） */
-    const highlightFrequency = config.fps ? 1000 / config.fps : HIGHLIGHT_FREQ;
     /** 高亮颜色 */
     const highlightColor = {
         light: HIGHLIGHT_COLOR.light,
         dark: HIGHLIGHT_COLOR.dark,
     };
-
-    /** css 高亮的次数，用于css animation steps() */
-    const highlightSteps = highlightDuration / highlightFrequency;
+    /** 持续时间 */
+    const highlightDuration = config.duration ? config.duration * 1000 : HIGHLIGHT_DURATION;
+    /** 高亮频率*/
+    const highlightFrequency = config.fps && config.fps > 0 ? 1000 / config.fps : null;
+    /** 高亮帧数（非帧率），用于 timing-function: steps() */
+    const highlightSteps = highlightFrequency ? Math.round(highlightDuration / highlightFrequency) : null;
     /** 高亮开始 */
     const highlightFrom = computed(() => highlightColor[props.theme as 'light' | 'dark'].from);
     /** 高亮结束 */
@@ -66,6 +65,15 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     /** 高亮后渐暗的单元格定时器 */
     const highlightDimCellsTimeout = new Map();
 
+    /** 高亮函数的默认参数 */
+    const defaultHighlightDimOption = (() => {
+        const keyframe: PropertyIndexedKeyframes = { backgroundColor: [highlightFrom.value, highlightTo.value] };
+        if (highlightSteps) {
+            keyframe.easing = `steps(${highlightSteps})`;
+        }
+        return { duration: highlightDuration, keyframe };
+    })();
+
     /**
      * 计算高亮渐暗颜色的循环
      */
@@ -130,22 +138,16 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
                     calcHighlightDimLoopJs = false;
                     highlightDimRowsJs.clear(); // TODO: 是否需要 清除
                 }
-            }, highlightFrequency);
+            }, highlightFrequency || HIGHLIGHT_FREQ);
         };
         recursion();
     }
 
-    /** 高亮函数的默认参数 */
-    const defaultHighlightDimOption = {
-        keyframe: [{ backgroundColor: highlightFrom.value }, { backgroundColor: highlightTo.value }],
-        duration: highlightDuration,
-    };
-
     /**
-     *  高亮一个单元格
+     * 高亮一个单元格。暂不支持虚拟滚动高亮状态记忆。
      * @param rowKeyValue 一行的key
      * @param dataIndex 列key
-     * @param options.method css-使用css渲染，animation-使用animation api。默认css;
+     * @param options.method css-使用css渲染，animation-使用animation api。默认animation;
      * @param option.className 自定义css动画的class。
      * @param option.keyframe 同Keyframe https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
      * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。
@@ -153,13 +155,12 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     function setHighlightDimCell(
         rowKeyValue: string,
         dataIndex: string,
-        option: { className?: string; method?: 'css' | 'animation'; keyframe?: Parameters<Animatable['animate']>['0']; duration?: number } = {},
+        option: { className?: string; method?: 'animation' | 'css'; keyframe?: Parameters<Animatable['animate']>['0']; duration?: number } = {},
     ) {
-        // TODO: 支持动态计算高亮颜色。不易实现。需记录每一个单元格的颜色情况。
         const cellEl = tableContainerRef.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
         const { className, method, duration, keyframe } = {
             className: HIGHLIGHT_CELL_CLASS,
-            method: 'css',
+            method: 'animation',
             ...defaultHighlightDimOption,
             ...option,
         };
@@ -174,15 +175,15 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     /**
      * 高亮一行
      * @param rowKeyValues 行唯一键的数组
-     * @param option.method css-使用css渲染，animation-使用animation api，js-使用js计算颜色
+     * @param option.method css-使用css渲染，animation-使用animation api，js-使用js计算颜色。默认animation
      * @param option.className 自定义css动画的class。
-     * @param option.keyframe 同Keyframe,无法控制帧率。 https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
+     * @param option.keyframe 同Keyframe。 https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
      * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。。
      */
     function setHighlightDimRow(
         rowKeyValues: UniqKey[],
         option: {
-            method?: 'css' | 'animation' | 'js';
+            method?: 'animation' | 'css' | 'js';
             /** @deprecated 请使用method */
             useCss?: boolean;
             className?: string;
@@ -193,7 +194,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
         if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
         const { className, method, useCss, keyframe, duration } = {
             className: HIGHLIGHT_ROW_CLASS,
-            method: props.virtual ? 'js' : 'css',
+            method: 'animation',
             ...defaultHighlightDimOption,
             ...option,
         };
@@ -234,7 +235,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
 
     /**
      * 使用css @keyframes动画，实现高亮行动画
-     * 此方案作为兼容方式。v0.3.0 将使用Element.animate 接口实现动画。
+     * 此方案作为兼容方式。v0.3.4 将使用Element.animate 接口实现动画。
      */
     function highlightRowsInCssKeyframe(rowKeyValues: UniqKey[], className: string, duration: number) {
         /**是否需要重绘 */
@@ -267,7 +268,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
 
     /**
      * 使用css @keyframes动画，实现高亮单元格动画
-     * 此方案作为兼容方式。v0.3.0 将使用Element.animate 接口实现动画。
+     * 此方案作为兼容方式。v0.3.4 将使用Element.animate 接口实现动画。
      */
     function highlightCellsInCssKeyFrame(cellEl: HTMLElement, rowKeyValue: UniqKey, className: string, duration: number) {
         if (cellEl.classList.contains(className)) {

package/src/StkTable/useVirtualScroll.ts

@@ -146,13 +146,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (!virtual_on.value) return;
         const { offsetHeight, scrollTop } = tableContainerRef.value || {};
         const { rowHeight } = virtualScroll.value;
-        let containerHeight: number;
-        // FIXME: 可能多次获取offsetHeight 会导致浏览器频繁重排
-        if (typeof height === 'number') {
-            containerHeight = height;
-        } else {
-            containerHeight = offsetHeight || DEFAULT_TABLE_HEIGHT;
-        }
+        const containerHeight = height ?? (offsetHeight || DEFAULT_TABLE_HEIGHT);
         const { headless, headerRowHeight } = props;
         let pageSize = Math.ceil(containerHeight / rowHeight);
         if (!headless) {
@@ -191,25 +185,19 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (!virtual_on.value) return;
 
         let startIndex = Math.floor(sTop / rowHeight);
-        if (props.stripe) {
-            startIndex -= 1; //预渲染1行
-        }
         if (startIndex < 0) {
             startIndex = 0;
         }
         if (props.stripe && startIndex !== 0) {
             const scrollRows = Math.abs(oldStartIndex - startIndex);
             // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
-            if (scrollRows < 2) {
-                return;
-            } else if (scrollRows % 2) {
+            if (scrollRows % 2) {
                 startIndex -= 1; // 奇数-1变成偶数
             }
         }
         let endIndex = startIndex + pageSize;
         if (props.stripe) {
-            // 由于stripe上方预渲染-1行，这里也要预渲染1+1行
-            endIndex += 1;
+            endIndex += 1; // 斑马纹下多渲染一些
         }
         const offsetTop = startIndex * rowHeight; // startIndex之前的高度
         endIndex = Math.min(endIndex, dataSourceCopy.value.length); // 溢出index修正
@@ -241,17 +229,22 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     function updateVirtualScrollX(sLeft = 0) {
         if (!props.virtualX) return;
         const headerLength = tableHeaderLast.value?.length;
-        const { scrollLeft } = virtualScrollX.value;
         if (!headerLength) return;
+
+        const { scrollLeft } = virtualScrollX.value;
         let startIndex = 0;
         let offsetLeft = 0;
-
+        /** 列宽累加 */
         let colWidthSum = 0;
+        /** 固定左侧列宽 */
         let leftColWidthSum = 0;
+        /** 横向滚动时，第一列的剩余宽度 */
+        let leftFirstColRestWidth = 0;
+
         for (let colIndex = 0; colIndex < headerLength; colIndex++) {
-            startIndex++;
             const col = tableHeaderLast.value[colIndex];
             const colWidth = getCalculatedColWidth(col);
+            startIndex++;
             // fixed left 不进入计算列宽
             if (col.fixed === 'left') {
                 leftColWidthSum += colWidth;
@@ -262,11 +255,12 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             if (colWidthSum >= sLeft) {
                 offsetLeft = colWidthSum - colWidth;
                 startIndex--;
+                leftFirstColRestWidth = colWidthSum - sLeft;
                 break;
             }
         }
         // -----
-        colWidthSum = 0;
+        colWidthSum = leftFirstColRestWidth;
         const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
         let endIndex = headerLength;
         for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {