vxe-table 3.14.0-beta.2 → 3.14.0-beta.21

package/es/table/module/filter/panel.js

@@ -54,14 +54,24 @@ export default {
             if (filterSlot) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template'
+                        class: 'vxe-table--filter-template',
+                        style: maxHeight
+                            ? {
+                                maxHeight: `${maxHeight}px`
+                            }
+                            : {}
                     }, $xeTable.callSlot(filterSlot, params, h))
                 ];
             }
             else if (rtFilter) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template'
+                        class: 'vxe-table--filter-template',
+                        style: maxHeight
+                            ? {
+                                maxHeight: `${maxHeight}px`
+                            }
+                            : {}
                     }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
                 ];
             }

package/es/table/module/keyboard/mixin.js

@@ -99,13 +99,22 @@ export default {
     methods: {
         // 处理 Tab 键移动
         moveTabSelected(args, isLeft, evnt) {
-            const { afterFullData, visibleColumn, editConfig, editOpts } = this;
+            const $xeTable = this;
+            const props = $xeTable;
+            const internalData = $xeTable;
+            const { editConfig } = props;
+            const { afterFullData, visibleColumn } = internalData;
+            const editOpts = $xeTable.computeEditOpts;
+            const rowOpts = $xeTable.computeRowOpts;
+            const currentRowOpts = $xeTable.computeCurrentRowOpts;
+            const columnOpts = $xeTable.computeColumnOpts;
+            const currentColumnOpts = $xeTable.computeCurrentColumnOpts;
             let targetRow;
             let targetRowIndex;
             let targetColumnIndex;
             const params = Object.assign({}, args);
-            const _rowIndex = this.getVTRowIndex(params.row);
-            const _columnIndex = this.getVTColumnIndex(params.column);
+            const _rowIndex = $xeTable.getVTRowIndex(params.row);
+            const _columnIndex = $xeTable.getVTColumnIndex(params.column);
             evnt.preventDefault();
             if (isLeft) {
                 // 向左
@@ -145,30 +154,46 @@ export default {
                 }
                 params.columnIndex = targetColumnIndex;
                 params.column = targetColumn;
-                params.cell = this.getCellElement(params.row, params.column);
+                params.cell = $xeTable.getCellElement(params.row, params.column);
+                if (rowOpts.isCurrent && currentRowOpts.isFollowSelected) {
+                    $xeTable.triggerCurrentRowEvent(evnt, params);
+                }
+                if (columnOpts.isCurrent && currentColumnOpts.isFollowSelected) {
+                    $xeTable.triggerCurrentColumnEvent(evnt, params);
+                }
                 if (editConfig) {
                     if (editOpts.trigger === 'click' || editOpts.trigger === 'dblclick') {
                         if (editOpts.mode === 'row') {
-                            this.handleEdit(params, evnt);
+                            $xeTable.handleEdit(params, evnt);
                         }
                         else {
-                            this.scrollToRow(params.row, params.column)
-                                .then(() => this.handleSelected(params, evnt));
+                            $xeTable.scrollToRow(params.row, params.column)
+                                .then(() => {
+                                $xeTable.handleSelected(params, evnt);
+                            });
                         }
                     }
                 }
                 else {
-                    this.scrollToRow(params.row, params.column)
-                        .then(() => this.handleSelected(params, evnt));
+                    $xeTable.scrollToRow(params.row, params.column)
+                        .then(() => {
+                        $xeTable.handleSelected(params, evnt);
+                    });
                 }
             }
         },
         // 处理当前行方向键移动
         moveCurrentRow(isUpArrow, isDwArrow, evnt) {
-            const { currentRow, treeConfig, treeOpts, afterFullData } = this;
+            const $xeTable = this;
+            const props = $xeTable;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
+            const { treeConfig } = props;
+            const { currentRow } = reactData;
+            const { afterFullData } = internalData;
+            const treeOpts = $xeTable.computeTreeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             let targetRow;
-            evnt.preventDefault();
             if (currentRow) {
                 if (treeConfig) {
                     const { index, items } = XEUtils.findTree(afterFullData, item => item === currentRow, { children: childrenField });
@@ -180,7 +205,7 @@ export default {
                     }
                 }
                 else {
-                    const _rowIndex = this.getVTRowIndex(currentRow);
+                    const _rowIndex = $xeTable.getVTRowIndex(currentRow);
                     if (isUpArrow && _rowIndex > 0) {
                         targetRow = afterFullData[_rowIndex - 1];
                     }
@@ -193,17 +218,57 @@ export default {
                 targetRow = afterFullData[0];
             }
             if (targetRow) {
-                const params = { $table: this, row: targetRow };
-                this.scrollToRow(targetRow)
-                    .then(() => this.triggerCurrentRowEvent(evnt, params));
+                evnt.preventDefault();
+                const params = {
+                    $table: $xeTable,
+                    row: targetRow,
+                    rowIndex: $xeTable.getRowIndex(targetRow),
+                    $rowIndex: $xeTable.getVMRowIndex(targetRow)
+                };
+                $xeTable.scrollToRow(targetRow)
+                    .then(() => $xeTable.triggerCurrentRowEvent(evnt, params));
+            }
+        },
+        // 处理当前列方向键移动
+        moveCurrentColumn(isLeftArrow, isRightArrow, evnt) {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
+            const { currentColumn } = reactData;
+            const { visibleColumn } = internalData;
+            let targetCol = null;
+            if (currentColumn) {
+                const _columnIndex = $xeTable.getVTColumnIndex(currentColumn);
+                if (isLeftArrow && _columnIndex > 0) {
+                    targetCol = visibleColumn[_columnIndex - 1];
+                }
+                else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
+                    targetCol = visibleColumn[_columnIndex + 1];
+                }
+            }
+            else {
+                targetCol = visibleColumn[0];
+            }
+            if (targetCol) {
+                evnt.preventDefault();
+                const params = {
+                    $table: $xeTable,
+                    column: targetCol,
+                    columnIndex: $xeTable.getColumnIndex(targetCol),
+                    $columnIndex: $xeTable.getVMColumnIndex(targetCol)
+                };
+                $xeTable.scrollToColumn(targetCol)
+                    .then(() => $xeTable.triggerCurrentColumnEvent(evnt, params));
             }
         },
         // 处理可编辑方向键移动
         moveSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
-            const { afterFullData, visibleColumn } = this;
+            const $xeTable = this;
+            const internalData = $xeTable;
+            const { afterFullData, visibleColumn } = internalData;
             const params = Object.assign({}, args);
-            const _rowIndex = this.getVTRowIndex(params.row);
-            const _columnIndex = this.getVTColumnIndex(params.column);
+            const _rowIndex = $xeTable.getVTRowIndex(params.row);
+            const _columnIndex = $xeTable.getVTColumnIndex(params.column);
             evnt.preventDefault();
             if (isUpArrow && _rowIndex > 0) {
                 // 移动到上一行
@@ -225,9 +290,9 @@ export default {
                 params.columnIndex = _columnIndex + 1;
                 params.column = visibleColumn[params.columnIndex];
             }
-            this.scrollToRow(params.row, params.column).then(() => {
-                params.cell = this.getCellElement(params.row, params.column);
-                this.handleSelected(params, evnt);
+            $xeTable.scrollToRow(params.row, params.column).then(() => {
+                params.cell = $xeTable.getCellElement(params.row, params.column);
+                $xeTable.handleSelected(params, evnt);
             });
         },
         handleCellMousedownEvent(evnt, params) {

package/es/table/module/validator/mixin.js

@@ -153,8 +153,8 @@ export default {
             const internalData = $xeTable;
             const validRest = {};
             const { editRules, treeConfig } = props;
-            const { editStore, pendingRowMaps } = reactData;
-            const { afterFullData } = internalData;
+            const { editStore } = reactData;
+            const { afterFullData, pendingRowMaps } = internalData;
             const { removeMaps } = editStore;
             const treeOpts = $xeTable.computeTreeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;

package/es/table/render/index.js

@@ -4,7 +4,7 @@ import { getCellValue, setCellValue } from '../src/util';
 import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils';
 import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn';
 import { errLog } from '../../ui/src/log';
-const { getConfig, renderer, getI18n } = VxeUI;
+const { getConfig, renderer, getI18n, getComponent } = VxeUI;
 const componentDefaultModelProp = 'value';
 const defaultCompProps = {};
 function handleDefaultValue(value, defaultVal, initVal) {
@@ -35,7 +35,7 @@ function getOldComponent({ name }) {
     return getOldComponentName(name);
 }
 function getDefaultComponent({ name }) {
-    return name;
+    return getComponent(name) || name;
 }
 function handleConfirmFilter(params, checked, option) {
     const { $panel } = params;
@@ -556,6 +556,63 @@ function handleExportTreeSelectMethod(params) {
     const { row, column, options } = params;
     return options.original ? getCellValue(row, column) : getTreeSelectCellValue(column.editRender || column.cellRender, params);
 }
+function handleNumberCell(h, renderOpts, params) {
+    const { props = {}, showNegativeStatus } = renderOpts;
+    const { row, column } = params;
+    const { type } = props;
+    let cellValue = XEUtils.get(row, column.field);
+    let isNegative = false;
+    if (!isEmptyValue(cellValue)) {
+        const numberInputConfig = getConfig().numberInput || {};
+        if (type === 'float') {
+            const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true);
+            const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 1);
+            cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits);
+            if (!autoFill) {
+                cellValue = XEUtils.toNumber(cellValue);
+            }
+            if (showNegativeStatus) {
+                if (cellValue < 0) {
+                    isNegative = true;
+                }
+            }
+        }
+        else if (type === 'amount') {
+            const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true);
+            const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 2);
+            const showCurrency = handleDefaultValue(props.showCurrency, numberInputConfig.showCurrency, false);
+            cellValue = XEUtils.toNumber(cellValue);
+            if (showNegativeStatus) {
+                if (cellValue < 0) {
+                    isNegative = true;
+                }
+            }
+            cellValue = XEUtils.commafy(cellValue, { digits });
+            if (!autoFill) {
+                const [iStr, dStr] = cellValue.split('.');
+                if (dStr) {
+                    const dRest = dStr.replace(/0+$/, '');
+                    cellValue = dRest ? [iStr, '.', dRest].join('') : iStr;
+                }
+            }
+            if (showCurrency) {
+                cellValue = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${cellValue}`;
+            }
+        }
+        else {
+            if (showNegativeStatus) {
+                if (XEUtils.toNumber(cellValue) < 0) {
+                    isNegative = true;
+                }
+            }
+        }
+    }
+    return getCellLabelVNs(h, renderOpts, params, cellValue, isNegative
+        ? {
+            class: 'is--negative'
+        }
+        : {});
+}
 /**
  * 表格 - 渲染器
  */
@@ -620,66 +677,19 @@ renderer.mixin({
         renderTableFilter: defaultFilterRender,
         tableFilterDefaultMethod: handleInputFilterMethod
     },
+    FormatNumberInput: {
+        renderTableDefault: handleNumberCell,
+        tableFilterDefaultMethod: handleInputFilterMethod,
+        tableExportMethod(params) {
+            const { row, column } = params;
+            const cellValue = XEUtils.get(row, column.field);
+            return cellValue;
+        }
+    },
     VxeNumberInput: {
         tableAutoFocus: 'input',
         renderTableEdit: defaultEditRender,
-        renderTableCell(h, renderOpts, params) {
-            const { props = {}, showNegativeStatus } = renderOpts;
-            const { row, column } = params;
-            const { type } = props;
-            let cellValue = XEUtils.get(row, column.field);
-            let isNegative = false;
-            if (!isEmptyValue(cellValue)) {
-                const numberInputConfig = getConfig().numberInput || {};
-                if (type === 'float') {
-                    const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true);
-                    const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 1);
-                    cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits);
-                    if (!autoFill) {
-                        cellValue = XEUtils.toNumber(cellValue);
-                    }
-                    if (showNegativeStatus) {
-                        if (cellValue < 0) {
-                            isNegative = true;
-                        }
-                    }
-                }
-                else if (type === 'amount') {
-                    const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true);
-                    const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 2);
-                    const showCurrency = handleDefaultValue(props.showCurrency, numberInputConfig.showCurrency, false);
-                    cellValue = XEUtils.toNumber(cellValue);
-                    if (showNegativeStatus) {
-                        if (cellValue < 0) {
-                            isNegative = true;
-                        }
-                    }
-                    cellValue = XEUtils.commafy(cellValue, { digits });
-                    if (!autoFill) {
-                        const [iStr, dStr] = cellValue.split('.');
-                        if (dStr) {
-                            const dRest = dStr.replace(/0+$/, '');
-                            cellValue = dRest ? [iStr, '.', dRest].join('') : iStr;
-                        }
-                    }
-                    if (showCurrency) {
-                        cellValue = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${cellValue}`;
-                    }
-                }
-                else {
-                    if (showNegativeStatus) {
-                        if (XEUtils.toNumber(cellValue) < 0) {
-                            isNegative = true;
-                        }
-                    }
-                }
-            }
-            return getCellLabelVNs(h, renderOpts, params, cellValue, isNegative
-                ? {
-                    class: 'is--negative'
-                }
-                : {});
-        },
+        renderTableCell: handleNumberCell,
         renderTableFooter(h, renderOpts, params) {
             const { props = {} } = renderOpts;
             const { row, column, _columnIndex } = params;
@@ -784,11 +794,22 @@ renderer.mixin({
         tableFilterDefaultMethod: handleFilterMethod,
         tableExportMethod: handleExportSelectMethod
     },
+    /**
+     * 已废弃，被 FormatSelect 替换
+     * @deprecated
+     */
     formatOption: {
         renderTableDefault(h, renderOpts, params) {
             return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params));
         }
     },
+    FormatSelect: {
+        renderTableDefault(h, renderOpts, params) {
+            return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params));
+        },
+        tableFilterDefaultMethod: handleFilterMethod,
+        tableExportMethod: handleExportSelectMethod
+    },
     VxeTreeSelect: {
         tableAutoFocus: 'input',
         renderTableEdit: defaultTableOrTreeSelectEditRender,
@@ -805,11 +826,21 @@ renderer.mixin({
         },
         tableExportMethod: handleExportTreeSelectMethod
     },
+    /**
+     * 已废弃，被 FormatTreeSelect 替换
+     * @deprecated
+     */
     formatTree: {
         renderTableDefault(h, renderOpts, params) {
             return getCellLabelVNs(h, renderOpts, params, getTreeSelectCellValue(renderOpts, params));
         }
     },
+    FormatTreeSelect: {
+        renderTableDefault(h, renderOpts, params) {
+            return getCellLabelVNs(h, renderOpts, params, getTreeSelectCellValue(renderOpts, params));
+        },
+        tableExportMethod: handleExportTreeSelectMethod
+    },
     VxeColorPicker: {
         tableAutoFocus: 'input',
         renderTableEdit(h, renderOpts, params) {

package/es/table/src/body.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { isEnableConf, getClass } from '../../ui/src/utils';
-import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid } from './util';
+import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid, createHandleGetRowId } from './util';
 import { updateCellTitle } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
 const { getI18n, renderer, renderEmptyElement } = VxeUI;
@@ -14,7 +14,7 @@ const isVMScrollProcess = ($xeTable) => {
     const { lastScrollTime, isDragResize } = tableReactData;
     return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + delayHover));
 };
-function renderLine(h, _vm, params, cellHeight) {
+function renderLine(h, _vm, rowid, params, cellHeight) {
     const $xeTable = _vm.$parent;
     const tableProps = $xeTable;
     const tableInternalData = $xeTable;
@@ -27,7 +27,6 @@ function renderLine(h, _vm, params, cellHeight) {
     if (slots && slots.line) {
         return $xeTable.callSlot(slots.line, params, h);
     }
-    const rowid = getRowid($xeTable, row);
     const rest = fullAllDataRowIdData[rowid];
     let rLevel = 0;
     let prevRow = null;
@@ -189,6 +188,7 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     tdOns.dblclick = (evnt) => {
         $xeTable.triggerCellDblclickEvent(evnt, cellParams);
     };
+    let isMergeCell = false;
     // 合并行或列
     if (mergeList.length) {
         const spanRest = mergeBodyMethod(mergeList, _rowIndex, _columnIndex);
@@ -198,9 +198,11 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
                 return null;
             }
             if (rowspan > 1) {
+                isMergeCell = true;
                 tdAttrs.rowspan = rowspan;
             }
             if (colspan > 1) {
+                isMergeCell = true;
                 tdAttrs.colspan = colspan;
             }
         }
@@ -233,12 +235,14 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     const isLastColumn = $columnIndex === columns.length - 1;
     const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
     let isVNPreEmptyStatus = false;
-    if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-        if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
-            isVNPreEmptyStatus = true;
-        }
-        else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-            isVNPreEmptyStatus = true;
+    if (!isMergeCell) {
+        if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
+            if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+                isVNPreEmptyStatus = true;
+            }
+            else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                isVNPreEmptyStatus = true;
+            }
         }
     }
     const tcStyle = {};
@@ -262,7 +266,7 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     }
     else {
         // 渲染单元格
-        tdVNs.push(...renderLine(h, _vm, cellParams, cellHeight), h('div', {
+        tdVNs.push(...renderLine(h, _vm, rowid, cellParams, cellHeight), h('div', {
             key: 'tc',
             class: ['vxe-cell', {
                     'c--title': showTitle,
@@ -383,8 +387,8 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
     const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps;
-    const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove, rowExpandHeightFlag } = tableReactData;
-    const { fullAllDataRowIdData } = tableInternalData;
+    const { hasFixedColumn, treeExpandedFlag, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, isDragColMove, rowExpandHeightFlag } = tableReactData;
+    const { fullAllDataRowIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData;
     const checkboxOpts = $xeTable.computeCheckboxOpts;
     const radioOpts = $xeTable.computeRadioOpts;
     const treeOpts = $xeTable.computeTreeOpts;
@@ -395,6 +399,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     const { transform, seqMode } = treeOpts;
     const childrenField = treeOpts.children || treeOpts.childrenField;
     const rows = [];
+    const { handleGetRowId } = createHandleGetRowId($xeTable);
     tableData.forEach((row, $rowIndex) => {
         const trOn = {};
         let rowIndex = $rowIndex;
@@ -415,7 +420,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
                 $xeTable.clearHoverRow();
             };
         }
-        const rowid = getRowid($xeTable, row);
+        const rowid = handleGetRowId(row);
         const rowRest = fullAllDataRowIdData[rowid];
         let rowLevel = 0;
         let seq = -1;
@@ -432,7 +437,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
         }
         const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex };
         // 行是否被展开
-        const isExpandRow = expandColumn && !!rowExpandedMaps[rowid];
+        const isExpandRow = expandColumn && !!rowExpandedFlag && !!rowExpandedMaps[rowid];
         // 树节点是否被展开
         let isExpandTree = false;
         let rowChildren = [];
@@ -443,7 +448,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
         }
         if (treeConfig && !scrollYLoad && !transform) {
             rowChildren = row[childrenField];
-            isExpandTree = rowChildren && rowChildren.length && !!treeExpandedMaps[rowid];
+            isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
         }
         // 拖拽行事件
         if (rowOpts.drag && (!treeConfig || transform)) {
@@ -462,7 +467,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
                 'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
                 'row--radio': radioOpts.highlight && selectRadioRow === row,
                 'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-                'row--pending': !!pendingRowMaps[rowid]
+                'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
             },
             rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
         ];
@@ -632,7 +637,7 @@ export default {
                 isOptimizeMode = true;
             }
         }
-        if (fixedType || !overflowX) {
+        if (!isColLoading && (fixedType || !overflowX)) {
             renderColumnList = visibleColumn;
         }
         if (fixedType) {