@oracle/oraclejet 18.0.5 → 18.1.0

package/dist/js/libs/oj/debug_esm/ojdatagrid.js

@@ -4578,6 +4578,20 @@ DvtDataGrid.prototype.createSubId = function (subId) {
   return [id, subId].join(':');
 };
 
+/**
+ * Method to update the max row/column count known yet
+ */
+DvtDataGrid.prototype.updateMaxYet = function () {
+  let maxBottom = this._getMaxBottom();
+  let maxRight = this._getMaxRight();
+  if (this.m_maxRowYet < maxBottom) {
+    this.m_maxRowYet = maxBottom;
+  }
+  if (this.m_maxColYet < maxRight) {
+    this.m_maxColYet = maxRight;
+  }
+};
+
 /**
  * Checks whether header fetching is completed
  * @return {boolean} true if header fetching completed, else false
@@ -4818,7 +4832,9 @@ DvtDataGrid.prototype.resetInternal = function () {
   this.m_startRow = null;
   this.m_startCol = null;
   this.m_endRow = null;
+  this.m_maxRowYet = null;
   this.m_endCol = null;
+  this.m_maxColYet = null;
   this.m_startRowPixel = null;
   this.m_startColPixel = null;
   this.m_endRowPixel = null;
@@ -4974,7 +4990,9 @@ DvtDataGrid.prototype.render = function (root) {
   this.m_startRow = 0;
   this.m_startCol = 0;
   this.m_endRow = -1;
+  this.m_maxRowYet = -1;
   this.m_endCol = -1;
+  this.m_maxColYet = -1;
   this.m_startRowPixel = 0;
   this.m_startColPixel = 0;
   this.m_endRowPixel = 0;
@@ -5723,10 +5741,10 @@ DvtDataGrid.prototype.resizeGrid = function () {
       emptyWidth = this.getElementWidth(empty);
       databodyScroller = databody.firstChild;
       if (emptyHeight > this.getElementHeight(databodyScroller)) {
-        this.setElementHeight(databodyScroller, Math.max(emptyHeight, availableHeight));
+        this._setAllScrollableRegions('height', Math.max(emptyHeight, availableHeight));
       }
       if (emptyWidth > this.getElementWidth(databodyScroller)) {
-        this.setElementWidth(databodyScroller, Math.max(emptyWidth, availableWidth));
+        this._setAllScrollableRegions('width', Math.max(emptyWidth, availableWidth));
       }
       this.m_databody.firstChild.appendChild(empty); // @HTMLUpdateOK
     } else {
@@ -6083,22 +6101,60 @@ DvtDataGrid.prototype._sizeDatabodyScroller = function () {
   }
 
   this._setScrollerDimension(scroller, endRowPixel, endColPixel);
+};
 
-  if (this.m_initialized) {
-    this.m_scrollWidth =
-      this.getElementWidth(scroller) -
-      Math.min(
-        this.getElementWidth(scroller),
-        this.getElementWidth(databody) -
-          (this.m_hasVerticalScroller ? this.m_utils.getScrollbarSize() : 0)
-      );
-    this.m_scrollHeight =
-      this.getElementHeight(scroller) -
-      Math.min(
-        this.getElementHeight(scroller),
-        this.getElementHeight(databody) -
-          (this.m_hasHorizontalScroller ? this.m_utils.getScrollbarSize() : 0)
-      );
+/**
+ * Helper function that sets databodyScroller and syncs other scrollable regions
+ * @private
+ */
+DvtDataGrid.prototype._setAllScrollableRegions = function (dimension, newValue) {
+  const databodyScroller = this.m_databody.firstElementChild;
+  if (dimension === 'height') {
+    this.setElementHeight(databodyScroller, newValue);
+    if (this.m_hasRowHeader) {
+      const rowScroller = this.m_rowHeader.firstElementChild;
+      this.setElementHeight(rowScroller, newValue);
+    }
+    if (this.m_hasRowEndHeader) {
+      const rowEndScroller = this.m_rowEndHeader.firstElementChild;
+      this.setElementHeight(rowEndScroller, newValue);
+    }
+    if (this._hasFrozenColumns()) {
+      const frozenColScroller = this.m_databodyFrozenCol.firstElementChild;
+      this.setElementHeight(frozenColScroller, newValue);
+    }
+    if (this.m_initialized) {
+      this.m_scrollHeight =
+        this.getElementHeight(databodyScroller) -
+        Math.min(
+          this.getElementHeight(databodyScroller),
+          this.getElementHeight(this.m_databody) -
+            (this.m_hasHorizontalScroller ? this.m_utils.getScrollbarSize() : 0)
+        );
+    }
+  } else if (dimension === 'width') {
+    this.setElementWidth(databodyScroller, newValue);
+    if (this.m_hasColHeader) {
+      const colScroller = this.m_colHeader.firstElementChild;
+      this.setElementWidth(colScroller, newValue);
+    }
+    if (this.m_hasColEndHeader) {
+      const colEndScroller = this.m_colEndHeader.firstElementChild;
+      this.setElementWidth(colEndScroller, newValue);
+    }
+    if (this._hasFrozenRows()) {
+      const frozenRowScroller = this.m_databodyFrozenRow.firstElementChild;
+      this.setElementWidth(frozenRowScroller, newValue);
+    }
+    if (this.m_initialized) {
+      this.m_scrollWidth =
+        this.getElementWidth(databodyScroller) -
+        Math.min(
+          this.getElementWidth(databodyScroller),
+          this.getElementWidth(this.m_databody) -
+            (this.m_hasVerticalScroller ? this.m_utils.getScrollbarSize() : 0)
+        );
+    }
   }
 };
 
@@ -6106,16 +6162,33 @@ DvtDataGrid.prototype._setScrollerDimension = function (scroller, endRowPixel, e
   let isHWS = this._isHighWatermarkScrolling();
   let maxHeight = this.m_utils._getMaxDivHeightForScrolling();
   let maxWidth = this.m_utils._getMaxDivWidthForScrolling();
-  let rowCount = this.getDataSource().getCount('row');
-  let colCount = this.getDataSource().getCount('column');
+  let rowCount = this.getDataSource().getCount('row') - this.m_hiddenRows.length;
+  let colCount = this.getDataSource().getCount('column') - this.m_hiddenColumns.length;
+  let maxRowKnownCount =
+    this.m_maxRowYet - this._getHiddenCountBeforeIndex(this.m_maxRowYet, 'row');
+  let maxColKnownCount =
+    this.m_maxColYet - this._getHiddenCountBeforeIndex(this.m_maxColYet, 'column');
   let totalHeight = 0;
   let totalWidth = 0;
 
-  totalHeight = rowCount !== -1 && !isHWS ? rowCount * this.m_avgRowHeight : endRowPixel;
-  totalWidth = colCount !== -1 && !isHWS ? colCount * this.m_avgColWidth : endColPixel;
+  if (!this._isCountUnknown('row') && !isHWS) {
+    totalHeight = rowCount * this.m_avgRowHeight; // Known row count & virtual scrolling
+  } else if (this._isCountUnknown('column') && !isHWS) {
+    totalHeight = maxRowKnownCount * this.m_avgRowHeight; // Unknown row count & virtual scrolling
+  } else {
+    totalHeight = endRowPixel; // HWS
+  }
+
+  if (!this._isCountUnknown('column') && !isHWS) {
+    totalWidth = colCount * this.m_avgColWidth; // Known column count & virtual scrolling
+  } else if (this._isCountUnknown('column') && !isHWS) {
+    totalWidth = maxColKnownCount * this.m_avgColWidth; // Unknown column count & virtual scrolling
+  } else {
+    totalWidth = endColPixel; // HWS
+  }
 
-  this.setElementHeight(scroller, Math.min(maxHeight, totalHeight));
-  this.setElementWidth(scroller, Math.min(maxWidth, totalWidth));
+  this._setAllScrollableRegions('height', Math.min(maxHeight, totalHeight));
+  this._setAllScrollableRegions('width', Math.min(maxWidth, totalWidth));
 };
 
 /**
@@ -7131,7 +7204,8 @@ DvtDataGrid.prototype._getPositionEstimate = function (
     } else if (isHighWatermark) {
       newScrollPos = max;
     } else if (indexFromKey != null) {
-      newScrollPos = average * indexFromKey + offset;
+      let hiddenCount = this._getHiddenCountBeforeIndex(indexFromKey, axis);
+      newScrollPos = average * (indexFromKey - hiddenCount) + offset;
     }
 
     if (newScrollPos != null) {
@@ -7148,7 +7222,8 @@ DvtDataGrid.prototype._getPositionEstimate = function (
     } else if (isHighWatermark) {
       newScrollPos = max;
     } else {
-      newScrollPos = average * index;
+      let count = this._getHiddenCountBeforeIndex(index, axis);
+      newScrollPos = average * (index - count);
     }
   } else if (pos != null) {
     newScrollPos = pos;
@@ -7972,6 +8047,7 @@ DvtDataGrid.prototype.handleHeadersFetchSuccess = function (
       this._buildHeaderLabels('rowEnd', endResults);
     }
   }
+  this.updateMaxYet();
 
   if (this.isFetchComplete()) {
     this.hideStatusText();
@@ -8474,7 +8550,10 @@ DvtDataGrid.prototype.buildColumnHeaders = function (
   }
 
   if (!this.m_initialized && this.m_startColHeader > 0) {
-    var newStartEstimate = Math.round(this.m_avgColWidth * this.m_startColHeader);
+    let hiddenTillIndexCount = this._getHiddenCountBeforeIndex(this.m_startColHeader, 'column');
+    var newStartEstimate = Math.round(
+      this.m_avgColWidth * (this.m_startColHeader - hiddenTillIndexCount)
+    );
     this._shiftHeadersAlongAxisInContainer(
       headerRoot.firstChild,
       this.m_startColHeader,
@@ -8615,7 +8694,13 @@ DvtDataGrid.prototype.buildColumnEndHeaders = function (
   }
 
   if (!this.m_initialized && this.m_startColEndHeader > 0) {
-    var newStartEstimate = Math.round(this.m_avgColWidth * this.m_startColEndHeader);
+    let hiddenTillIndexCount = this._getHiddenCountBeforeIndex(
+      this.m_startColEndHeader,
+      'columnEnd'
+    );
+    var newStartEstimate = Math.round(
+      this.m_avgColWidth * (this.m_startColEndHeader - hiddenTillIndexCount)
+    );
     this._shiftHeadersAlongAxisInContainer(
       headerRoot.firstChild,
       this.m_startColEndHeader,
@@ -8778,7 +8863,10 @@ DvtDataGrid.prototype.buildRowHeaders = function (
   }
 
   if (!this.m_initialized && this.m_startRowHeader > 0) {
-    var newStartEstimate = Math.round(this.m_avgRowHeight * this.m_startRowHeader);
+    let hiddenTillIndexCount = this._getHiddenCountBeforeIndex(this.m_startRowHeader, 'row');
+    var newStartEstimate = Math.round(
+      this.m_avgRowHeight * (this.m_startRowHeader - hiddenTillIndexCount)
+    );
     this._shiftHeadersAlongAxisInContainer(
       headerRoot.firstChild,
       this.m_startRowHeader,
@@ -8947,7 +9035,10 @@ DvtDataGrid.prototype.buildRowEndHeaders = function (
   }
 
   if (!this.m_initialized && this.m_startRowEndHeader > 0) {
-    var newStartEstimate = Math.round(this.m_avgRowHeight * this.m_startRowEndHeader);
+    let hiddenTillIndexCount = this._getHiddenCountBeforeIndex(this.m_startRowEndHeader, 'rowEnd');
+    var newStartEstimate = Math.round(
+      this.m_avgRowHeight * (this.m_startRowEndHeader - hiddenTillIndexCount)
+    );
     this._shiftHeadersAlongAxisInContainer(
       headerRoot.firstChild,
       this.m_startRowEndHeader,
@@ -10241,6 +10332,24 @@ DvtDataGrid.prototype._createDatabodyElement = function (id) {
   return root;
 };
 
+DvtDataGrid.prototype._getIndexFromPosition = function (axis, position) {
+  let dimension;
+  let direction;
+  if (axis === 'row') {
+    dimension = this.getDefaultRowHeight();
+    direction = { down: true };
+  } else {
+    dimension = this.getDefaultColumnWidth();
+    direction = { right: true };
+  }
+  // estimated index at the scroll position
+  let estimatedIndex = Math.round(position / dimension);
+  // adjust index to account for hidden columns before estimated index
+  estimatedIndex += this._getHiddenCountBeforeIndex(estimatedIndex, axis);
+  // if updated estimatedIndex is hidden, get the next visible index
+  return this.getVisibleCellIndexInDirection(axis, estimatedIndex, direction);
+};
+
 DvtDataGrid.prototype._getIndexFromKeyPromise = function (rowKey, columnKey) {
   var self = this;
   return new Promise(function (resolve) {
@@ -10260,23 +10369,34 @@ DvtDataGrid.prototype._getIndexesFromScrollPosition = function (scrollPosition)
   var columnKey = scrollPosition.columnKey;
   var indexFromKeyPromise = this._getIndexFromKeyPromise(rowKey, columnKey);
   return indexFromKeyPromise.then(function (indexesFromKey) {
+    // NOTE: For all cases, if the index is hidden, we get the next visible index to scroll to, to reduce num of fetches
     var returnObj = {};
     if (indexesFromKey.rowIndexFromKey != null && indexesFromKey.rowIndexFromKey > 0) {
-      returnObj.row = indexesFromKey.rowIndexFromKey;
+      returnObj.row = self.getVisibleCellIndexInDirection('row', indexesFromKey.rowIndexFromKey, {
+        down: true
+      });
     } else if (scrollPosition.rowIndex != null) {
-      returnObj.row = scrollPosition.rowIndex;
+      returnObj.row = self.getVisibleCellIndexInDirection('row', scrollPosition.rowIndex, {
+        down: true
+      });
     } else if (scrollPosition.y != null) {
-      returnObj.row = Math.round(scrollPosition.y / self.getDefaultRowHeight());
+      returnObj.row = self._getIndexFromPosition('row', scrollPosition.y);
     } else {
       returnObj.row = 0;
     }
 
     if (indexesFromKey.columnIndexFromKey != null && indexesFromKey.columnIndexFromKey > 0) {
-      returnObj.column = indexesFromKey.columnIndexFromKey;
+      returnObj.column = self.getVisibleCellIndexInDirection(
+        'column',
+        indexesFromKey.columnIndexFromKey,
+        { right: true }
+      );
     } else if (scrollPosition.columnIndex != null) {
-      returnObj.column = scrollPosition.columnIndex;
+      returnObj.column = self.getVisibleCellIndexInDirection('column', scrollPosition.columnIndex, {
+        right: true
+      });
     } else if (scrollPosition.x != null) {
-      returnObj.column = Math.round(scrollPosition.x / self.getDefaultColumnWidth());
+      returnObj.column = self._getIndexFromPosition('column', scrollPosition.x);
     } else {
       returnObj.column = 0;
     }
@@ -10808,6 +10928,7 @@ DvtDataGrid.prototype.handleCellsFetchSuccess = function (cellSet, cellRange, ro
       this.m_endColPixel += totalColumnWidth;
     }
   }
+  this.updateMaxYet();
 
   this._sizeDatabodyScroller();
 
@@ -10832,7 +10953,8 @@ DvtDataGrid.prototype.handleCellsFetchSuccess = function (cellSet, cellRange, ro
 
   var newStartEstimate;
   if (!this.m_initialized && this.m_startCol > 0) {
-    newStartEstimate = Math.round(this.m_avgColWidth * this.m_startCol);
+    let hiddenTillIndexCount = this._getHiddenCountBeforeIndex(this.m_startCol, 'column');
+    newStartEstimate = Math.round(this.m_avgColWidth * (this.m_startCol - hiddenTillIndexCount));
     this._shiftCellsAlongAxis(
       'column',
       newStartEstimate - this.m_startColPixel,
@@ -10843,7 +10965,8 @@ DvtDataGrid.prototype.handleCellsFetchSuccess = function (cellSet, cellRange, ro
     this.m_startColPixel = newStartEstimate;
   }
   if (!this.m_initialized && this.m_startRow > 0) {
-    newStartEstimate = Math.round(this.m_avgRowHeight * this.m_startRow);
+    let hiddenTillIndexCount = this._getHiddenCountBeforeIndex(this.m_startRow, 'row');
+    newStartEstimate = Math.round(this.m_avgRowHeight * (this.m_startRow - hiddenTillIndexCount));
     this._shiftCellsAlongAxis(
       'row',
       newStartEstimate - this.m_startRowPixel,
@@ -11176,6 +11299,7 @@ DvtDataGrid.prototype._insertRowsWithAnimation = function (
 
   // need to resize first in order to ensure visible region is big enough to handle new rows
   this.m_endRow += rowCount;
+  this.m_maxRowYet += rowCount;
   this.m_endRowPixel += totalRowHeight;
   if (rowHeaderSupport) {
     this.m_endRowHeader += rowHeaderFragment.childNodes.length;
@@ -11203,7 +11327,7 @@ DvtDataGrid.prototype._insertRowsWithAnimation = function (
       rowEndHeaderContent.insertBefore(rowEndHeaderFragment, referenceRowEndHeader.nextSibling); // @HTMLUpdateOK
     }
   }
-  this.setElementHeight(databodyContent, this.getElementHeight(databodyContent) + totalRowHeight);
+  this._setAllScrollableRegions('height', this.getElementHeight(databodyContent) + totalRowHeight);
   this.resizeGrid();
   this.updateRowBanding();
   this._refreshDatabodyMap();
@@ -12763,8 +12887,8 @@ DvtDataGrid.prototype._adjustScrollerSize = function () {
       !this._isCountUnknown('row') &&
       this._getMaxBottom() > -1)
   ) {
-    this.setElementHeight(
-      scrollerContent,
+    this._setAllScrollableRegions(
+      'height',
       Math.max(this._getMaxBottomPixel(), emptyBodyContentHeight)
     );
   }
@@ -12777,8 +12901,8 @@ DvtDataGrid.prototype._adjustScrollerSize = function () {
       !this._isCountUnknown('column') &&
       this._getMaxRight() > -1)
   ) {
-    this.setElementWidth(
-      scrollerContent,
+    this._setAllScrollableRegions(
+      'width',
       Math.max(this._getMaxRightPixel(), emptyBodyContentWidth)
     );
   }
@@ -12800,6 +12924,8 @@ DvtDataGrid.prototype._getLongScrollStart = function (scrollDir, prevScrollDir,
   var start;
   var startPixel;
   var total;
+  var hiddenItems;
+  let direction;
 
   // totals must be 0 or higher for long scroll
   if (prevScrollDir !== scrollDir) {
@@ -12808,29 +12934,67 @@ DvtDataGrid.prototype._getLongScrollStart = function (scrollDir, prevScrollDir,
       maxDimension = this.m_utils._getMaxDivHeightForScrolling();
       maxScroll = this._getMaxScrollHeight();
       avgDimension = this.m_avgRowHeight;
+      hiddenItems = this.m_hiddenRows;
       scrollbarSize = this.m_hasHorizontalScroller ? this.m_utils.getScrollbarSize() : 0;
-      total = Math.max(Math.max(this.getDataSource().getCount(axis), this.m_endRow), 0);
+      total = Math.max(
+        this.getDataSource().getCount(axis) - hiddenItems.length,
+        this.m_endRow,
+        this.m_maxRowYet,
+        0
+      );
+      direction = { down: true };
     } else if (axis === 'column') {
       scrollerDimension = this.getElementWidth(this.m_databody.firstChild);
       maxDimension = this.m_utils._getMaxDivWidthForScrolling();
       maxScroll = this._getMaxScrollWidth();
       avgDimension = this.m_avgColWidth;
+      hiddenItems = this.m_hiddenColumns;
       scrollbarSize = this.m_hasVerticalScroller ? this.m_utils.getScrollbarSize() : 0;
-      total = Math.max(Math.max(this.getDataSource().getCount(axis), this.m_endCol), 0);
+      total = Math.max(
+        this.getDataSource().getCount(axis) - hiddenItems.length,
+        this.m_endCol,
+        this.m_maxColYet,
+        0
+      );
+      direction = { right: true };
     }
 
     var oversizeRatio = Math.max(Math.min(scrollDir / scrollerDimension, 1), 0);
     var fetchSize = this.getFetchSize(axis);
-    start = Math.floor(total * oversizeRatio);
-    startPixel =
-      maxDimension <= scrollerDimension ? Math.min(scrollDir, maxScroll) : start * avgDimension;
+
+    if (maxDimension > scrollerDimension) {
+      let currentIndex = Math.floor(scrollDir / avgDimension);
+      hiddenItems.forEach((index) => {
+        if (index < currentIndex) {
+          currentIndex += 1;
+        }
+      });
+      start = this.getVisibleCellIndexInDirection(axis, currentIndex, direction);
+    } else if (maxDimension <= scrollerDimension) {
+      start = Math.floor(total * oversizeRatio);
+    }
+    startPixel = Math.min(scrollDir, maxScroll);
 
     if (
       oversizeRatio === 1 ||
       scrollDir + fetchSize * avgDimension > scrollerDimension - scrollbarSize
     ) {
-      start = Math.max(total - fetchSize, 0);
-      startPixel = Math.max(scrollerDimension - fetchSize * avgDimension, 0);
+      let lastIndex =
+        axis === 'column'
+          ? Math.max(this.getDataSource().getCount(axis), this.m_endCol, this.m_maxColYet, 0)
+          : Math.max(this.getDataSource().getCount(axis), this.m_endRow, this.m_maxRowYet, 0);
+      let startIndex = lastIndex - fetchSize;
+      let hiddenCount = hiddenItems.filter(
+        (index) => index >= startIndex && index < lastIndex
+      ).length;
+      let newStart = startIndex - hiddenCount;
+      // if newStart is hidden
+      while (newStart > 0 && hiddenItems.includes(newStart)) {
+        newStart -= 1; // till we find a visible index
+      }
+      start = Math.max(newStart, 0);
+      let hiddenTillIndex = this._getHiddenCountBeforeIndex(start, axis);
+      startPixel = Math.max((start - hiddenTillIndex) * avgDimension, 0);
     }
   } else if (axis === 'row') {
     start = this.m_longScrollRow != null ? this.m_longScrollRow : this.m_startRow;
@@ -13323,6 +13487,7 @@ DvtDataGrid.prototype._removeCellsAlongAxis = function (axis, threshold, isFromE
     dir = this.getResources().isRTLMode() ? 'right' : 'left';
     j = isFromEnd ? axisEnd : axisStart;
   }
+  let deleteArray = [];
 
   while (j <= axisEnd && j >= axisStart) {
     var key = this._getKey(this._getHeaderByIndex(j, axis, axisLevelCount - 1), axis);
@@ -13337,9 +13502,14 @@ DvtDataGrid.prototype._removeCellsAlongAxis = function (axis, threshold, isFromE
       );
     }
 
-    var dimensionValue = this.isHidden(axis, j)
-      ? 0
-      : this._getCellDimension(null, j, key, axis, dimension);
+    var dimensionValue;
+    if (this.isHidden(axis, j)) {
+      dimensionValue = 0;
+      deleteArray.push(j);
+    } else {
+      dimensionValue = this._getCellDimension(null, j, key, axis, dimension);
+    }
+
     if (
       isFromEnd
         ? axisEndPixel - dimensionValue - totalDimensionChange > threshold
@@ -13356,10 +13526,6 @@ DvtDataGrid.prototype._removeCellsAlongAxis = function (axis, threshold, isFromE
 
         if (axisExtent === 1) {
           this._remove(cell);
-          // remove hidden indicator div belonging to cell (if any) along the axis
-          if (this.isHidden(axis, j)) {
-            this._remove(this.getHiddenIndicatorByIndex(j, this.m_databody.firstChild, false));
-          }
         } else {
           cellContext.extents[axis] -= 1;
           this.setElementDir(cell, this.getElementDir(cell, dimension) - dimensionValue, dimension);
@@ -13381,6 +13547,7 @@ DvtDataGrid.prototype._removeCellsAlongAxis = function (axis, threshold, isFromE
       break;
     }
   }
+  this.deleteHiddenIndicators(deleteArray, this.m_databody.firstChild);
 
   return { dimensionChange: totalDimensionChange, extentChange: totalCountChange };
 };
@@ -13430,6 +13597,7 @@ DvtDataGrid.prototype.removeHeadersFromStartOfContainer = function (
   var isHeader = this.m_utils.containsCSSClassName(element, className);
   var header = isHeader ? element : element.firstChild;
   var dimensionValue = this.getElementDir(header, dimension);
+  let deleteArray = [];
 
   while (startPixel + dimensionValue < scrollPosition - threshold) {
     this._remove(element);
@@ -13439,7 +13607,7 @@ DvtDataGrid.prototype.removeHeadersFromStartOfContainer = function (
       // remove header/endHeader hidden indicator div belonging to element (if any)
       // along the axis from start on scroll
       if (this.isHidden(axis, elementIndex)) {
-        this._remove(this.getHiddenIndicatorByIndex(elementIndex, headersContainer, true));
+        deleteArray.push(elementIndex);
       }
     }
 
@@ -13458,6 +13626,7 @@ DvtDataGrid.prototype.removeHeadersFromStartOfContainer = function (
     header = isHeader ? element : element.firstChild;
     dimensionValue = this.getElementDir(header, dimension);
   }
+  this.deleteHiddenIndicators(deleteArray, headersContainer);
 
   if (!isHeader) {
     var returnVal = this.removeHeadersFromStartOfContainer(
@@ -13532,6 +13701,7 @@ DvtDataGrid.prototype.removeHeadersFromEndOfContainer = function (
   var isHeader = this.m_utils.containsCSSClassName(element, className);
   var header = isHeader ? element : element.firstChild;
   var dimensionValue = this.getElementDir(header, dimension);
+  let deleteArray = [];
 
   while (endPixel - dimensionValue > threshold) {
     this._remove(element);
@@ -13540,7 +13710,7 @@ DvtDataGrid.prototype.removeHeadersFromEndOfContainer = function (
       let axis = element[context].axis;
       let elementIndex = element[context].index;
       if (this.isHidden(axis, elementIndex)) {
-        this._remove(this.getHiddenIndicatorByIndex(elementIndex, headersContainer, true));
+        deleteArray.push(elementIndex);
       }
     }
     /* eslint-disable no-loop-func */
@@ -13556,6 +13726,7 @@ DvtDataGrid.prototype.removeHeadersFromEndOfContainer = function (
     header = isHeader ? element : element.firstChild;
     dimensionValue = this.getElementDir(header, dimension);
   }
+  this.deleteHiddenIndicators(deleteArray, headersContainer);
 
   if (!isHeader) {
     var returnVal = this.removeHeadersFromEndOfContainer(
@@ -17153,6 +17324,9 @@ DvtDataGrid.prototype._handleInsertRangeEvent = function (eventDetail) {
         this.m_startRowEndHeaderPixel += total;
         this.m_endRowEndHeaderPixel += total;
       }
+      if (this.m_endRow >= 0 || this.m_endRowHeader >= 0 || this.m_endRowEndHeader >= 0) {
+        this.m_maxRowYet += count;
+      }
     } else {
       avg = this.m_avgColWidth;
       total = avg * count;
@@ -17176,6 +17350,9 @@ DvtDataGrid.prototype._handleInsertRangeEvent = function (eventDetail) {
         this.m_startColEndHeaderPixel += total;
         this.m_endColEndHeaderPixel += total;
       }
+      if (this.m_endCol >= 0 || this.m_endColHeader >= 0 || this.m_endColEndHeader >= 0) {
+        this.m_maxColYet += count;
+      }
     }
 
     let indexes = new Array(count).fill(start).map((x, y) => x + y);
@@ -17895,6 +18072,9 @@ DvtDataGrid.prototype._handleInsertRangeCellFetchSuccess = function (
       }
       this.m_stopRowEndHeaderFetch = false;
     }
+    if (hasData || hasHeaders || hasEndHeaders) {
+      this.m_maxRowYet += count;
+    }
 
     if (this._hasFrozenRows() && offset < this.m_frozenRowIndex + 1) {
       let frozenDatabodyContentHeight =
@@ -17907,10 +18087,9 @@ DvtDataGrid.prototype._handleInsertRangeCellFetchSuccess = function (
       let databodyContentHeight = databodyFrozenColContent
         ? this.getElementHeight(databodyFrozenColContent) + totalDimension
         : this.getElementHeight(databodyContent) + totalDimension;
-      this.setElementHeight(databodyContent, databodyContentHeight);
+      this._setAllScrollableRegions('height', databodyContentHeight);
       if (databodyFrozenColContent) {
         this.setElementHeight(databodyFrozenColContent.parentElement, databodyContentHeight);
-        this.setElementHeight(databodyFrozenColContent, databodyContentHeight);
       }
     }
     this.updateRowBanding();
@@ -17945,6 +18124,9 @@ DvtDataGrid.prototype._handleInsertRangeCellFetchSuccess = function (
       }
       this.m_stopColumnEndHeaderFetch = false;
     }
+    if (hasData || hasHeaders || hasEndHeaders) {
+      this.m_maxColYet += count;
+    }
     if (this._hasFrozenColumns() && offset < this.m_frozenColIndex + 1) {
       let frozenDatabodyContentWidth =
         this.getElementWidth(this.m_databodyFrozenCol) + totalDimension;
@@ -17956,10 +18138,9 @@ DvtDataGrid.prototype._handleInsertRangeCellFetchSuccess = function (
       let databodyContentWidth = databodyFrozenRowContent
         ? this.getElementWidth(databodyFrozenRowContent) + totalDimension
         : this.getElementWidth(databodyContent) + totalDimension;
-      this.setElementWidth(databodyContent, databodyContentWidth);
+      this._setAllScrollableRegions('width', databodyContentWidth);
       if (databodyFrozenRowContent) {
         this.setElementWidth(databodyFrozenRowContent.parentElement, databodyContentWidth);
-        this.setElementWidth(databodyFrozenRowContent, databodyContentWidth);
       }
     }
     this.updateColumnBanding();
@@ -18264,6 +18445,7 @@ DvtDataGrid.prototype._handleModelInsertEvent = function (indexes, keys) {
       this.m_startRow += 1;
       this.m_startRowHeader += 1;
       this.m_endRow += 1;
+      this.m_maxRowYet += 1;
       this.m_endRowHeader += 1;
       this.m_startRowPixel += this.m_avgRowHeight;
       this.m_startRowHeaderPixel += this.m_avgRowHeight;
@@ -18297,12 +18479,15 @@ DvtDataGrid.prototype._handleCellInsertsFetchSuccess = function (cellSet, cellRa
   // so that grid will be resize
   // this.m_initialized = false;
   this.m_resizeRequired = true;
+  var rowStart = cellRanges[0].start;
 
+  if (rowStart < this.m_maxRowYet) {
+    this.m_maxRowYet += 1;
+  }
   // insert the row
   this.handleCellsFetchSuccess(cellSet, cellRanges, this.m_endRow >= cellRanges[0].start);
 
   // make sure the new row is in range
-  var rowStart = cellRanges[0].start;
   this._scrollRowIntoViewport(rowStart);
 
   // clean up rows outside of viewport (for non high-water mark scrolling only)
@@ -19079,6 +19264,7 @@ DvtDataGrid.prototype._handleDeleteRangeEvent = function (eventDetail, isFromUpd
         beforeDeletedCount += 1;
         dimension = avgDimension;
         beforeDeletedDimension += dimension;
+        databodyDimension += dimension;
       } else if (flag === DvtDataGrid.INSIDE) {
         insideDeletedCount += 1;
         dimension = this.getElementDir(
@@ -19271,8 +19457,11 @@ DvtDataGrid.prototype._handleDeleteRangeEvent = function (eventDetail, isFromUpd
         this.m_endRowEndHeaderPixel - beforeDeletedDimension - insideDeletedDimension;
       this.m_stopRowEndHeaderFetch = false;
     }
+    if (hasData || hasHeaders || hasEndHeaders) {
+      this.m_maxRowYet = this.m_maxRowYet - beforeDeletedCount - insideDeletedCount;
+    }
     var databodyContentHeight = this.getElementHeight(databodyContent) - databodyDimension;
-    this.setElementHeight(databodyContent, databodyContentHeight);
+    this._setAllScrollableRegions('height', databodyContentHeight);
     if (this.m_databodyFrozenCol) {
       this.setElementHeight(this.m_databodyFrozenCol, databodyContentHeight);
     }
@@ -19310,8 +19499,11 @@ DvtDataGrid.prototype._handleDeleteRangeEvent = function (eventDetail, isFromUpd
         this.m_endColEndHeaderPixel - beforeDeletedDimension - insideDeletedDimension;
       this.m_stopColumnEndHeaderFetch = false;
     }
+    if (hasData || hasHeaders || hasEndHeaders) {
+      this.m_maxColYet = this.m_maxColYet - beforeDeletedCount - insideDeletedCount;
+    }
     var databodyContentWidth = this.getElementWidth(databodyContent) - databodyDimension;
-    this.setElementWidth(databodyContent, databodyContentWidth);
+    this._setAllScrollableRegions('width', databodyContentWidth);
     if (this.m_databodyFrozenRow) {
       this.setElementWidth(this.m_databodyFrozenRow, databodyContentWidth);
     }
@@ -19390,7 +19582,6 @@ DvtDataGrid.prototype._collapseRowsWithAnimation = function (event, keys) {
   var totalRowHeight = 0;
   var rowHeaderSupport = this.m_endRowHeader !== -1;
   var rowEndHeaderSupport = this.m_endRowEndHeader !== -1;
-  var databodyContent = this.m_databody.firstChild;
 
   var referenceCellsIndex =
     this._getIndex(this._getAxisCellsByKey(keys[0].row, 'row')[0], 'row') - 1;
@@ -19570,6 +19761,7 @@ DvtDataGrid.prototype._collapseRowsWithAnimation = function (event, keys) {
 
     // clean up the variables no longer need because event animation handling
     self.m_endRow -= rowsToRemove.length;
+    self.m_maxRowYet -= rowsToRemove.length;
     self.m_endRowPixel -= totalRowHeight;
     self.m_stopRowFetch = false;
     if (rowHeaderSupport) {
@@ -19583,7 +19775,7 @@ DvtDataGrid.prototype._collapseRowsWithAnimation = function (event, keys) {
       self.m_stopRowEndHeaderFetch = false;
     }
 
-    self.setElementHeight(databodyContent, self.m_endRowPixel - self.m_startRowPixel);
+    self._setAllScrollableRegions('height', self.m_endRowPixel - self.m_startRowPixel);
     self.resizeGrid();
     self.updateRowBanding();
     if (self.m_modelEvents != null && self.m_modelEvents.length === 0 && !self.m_moveActive) {
@@ -19827,6 +20019,7 @@ DvtDataGrid.prototype._handleModelSyncEvent = function (event) {
   // reset ranges
   this.m_startRow = startRow;
   this.m_endRow = -1;
+  this.m_maxRowYet = -1;
   this.m_startRowHeader = startRow;
   this.m_endRowHeader = -1;
   this.m_startRowEndHeader = startRow;
@@ -19839,6 +20032,7 @@ DvtDataGrid.prototype._handleModelSyncEvent = function (event) {
   this.m_endRowEndHeaderPixel = startRowPixel;
   this.m_startCol = startCol;
   this.m_endCol = -1;
+  this.m_maxColYet = -1;
 
   this.m_startColHeader = startCol;
   this.m_endColHeader = -1;
@@ -28117,7 +28311,7 @@ DvtDataGrid.prototype.resizeColWidth = function (oldElementWidth, newElementWidt
     if (this.m_databody.firstChild != null && !isFrozenSectionResize) {
       let oldScrollerWidth = this.getElementWidth(this.m_databody.firstChild);
       newScrollerWidth = oldScrollerWidth + widthChange;
-      this.setElementWidth(this.m_databody.firstChild, newScrollerWidth);
+      this._setAllScrollableRegions('width', newScrollerWidth);
       if (this.m_databodyFrozenRow) {
         this.setElementWidth(this.m_databodyFrozenRow.firstChild, newScrollerWidth);
       }
@@ -28132,10 +28326,8 @@ DvtDataGrid.prototype.resizeColWidth = function (oldElementWidth, newElementWidt
       }
       newScrollerWidth = oldScrollerWidth + widthChange;
       this.setElementWidth(this.m_databodyFrozenCol, newScrollerWidth);
-      this.setElementWidth(this.m_databodyFrozenCol, newScrollerWidth);
       if (this.m_databodyFrozenCorner) {
         this.setElementWidth(this.m_databodyFrozenCorner, newScrollerWidth);
-        this.setElementWidth(this.m_databodyFrozenCorner, newScrollerWidth);
       }
     }
 
@@ -28181,7 +28373,7 @@ DvtDataGrid.prototype.resizeRowHeight = function (oldElementHeight, newElementHe
     if (this.m_databody.firstChild != null && !isFrozenSectionResize) {
       let oldScrollerHeight = this.getElementHeight(this.m_databody.firstChild);
       newScrollerHeight = oldScrollerHeight + heightChange;
-      this.setElementHeight(this.m_databody.firstChild, newScrollerHeight);
+      this._setAllScrollableRegions('height', newScrollerHeight);
     } else if (isFrozenSectionResize && this.m_databodyFrozenRow) {
       let oldScrollerHeight = this.getElementHeight(this.m_databodyFrozenRow);
       let scrollerDir = this.getElementDir(this.m_databodyFrozenRow, dir);
@@ -28195,10 +28387,8 @@ DvtDataGrid.prototype.resizeRowHeight = function (oldElementHeight, newElementHe
       }
       newScrollerHeight = oldScrollerHeight + heightChange;
       this.setElementHeight(this.m_databodyFrozenRow, newScrollerHeight);
-      this.setElementHeight(this.m_databodyFrozenRow, newScrollerHeight);
       if (this.m_databodyFrozenCorner) {
         this.setElementHeight(this.m_databodyFrozenCorner, newScrollerHeight);
-        this.setElementHeight(this.m_databodyFrozenCorner, newScrollerHeight);
       }
     }
 
@@ -28978,10 +29168,10 @@ DvtDataGrid.prototype.manageResizeScrollbars = function () {
       var emptyHeight = this.getElementHeight(empty);
       var emptyWidth = this.getElementWidth(empty);
       if (emptyHeight > this.getElementHeight(databodyScroller)) {
-        this.setElementHeight(databodyScroller, emptyHeight);
+        this._setAllScrollableRegions('height', emptyHeight);
       }
       if (emptyWidth > this.getElementWidth(databodyScroller)) {
-        this.setElementWidth(databodyScroller, emptyWidth);
+        this._setAllScrollableRegions('width', emptyWidth);
       }
       this.m_databody.firstChild.appendChild(empty);
     } else {
@@ -29345,7 +29535,7 @@ DvtDataGrid.prototype._shiftCellsAlongAxis = function (
           );
         }
         if (forHideShow) {
-          if (this.isHidden(axis, startAxisChange)) {
+          if (this.isCellHidden(cell)) {
             cell.style.display = 'none';
           } else {
             cell.style.display = '';
@@ -29429,7 +29619,7 @@ DvtDataGrid.prototype._shiftFrozenCellsAlongAxis = function (
     if (!(tempArray[i] && tempArray[i][startAxisChange]) && shiftOnly !== true) {
       this.setElementDir(cell, this.getElementDir(cell, dimension) + dimensionDelta, dimension);
       if (forHideShow) {
-        if (this.isHidden(axis, startAxisChange)) {
+        if (this.isCellHidden(cell)) {
           cell.style.display = 'none';
         } else {
           cell.style.display = '';
@@ -47146,7 +47336,7 @@ DvtDataGrid.prototype._appendCellsToFrozenColumnContainer = function (index, hea
 
   if (this.m_databodyFrozenCorner) {
     frozenCornerCells = this._getFrozenAxisCells(axis, endIndex);
-    if (calculateWidthFromCorner) {
+    if (calculateWidthFromCorner && cells.length > 0) {
       let lastCell = frozenCornerCells[frozenCornerCells.length - 1];
       cellsWidthToAdjust = this.getElementDir(lastCell, dir) + this.getElementWidth(lastCell);
     }
@@ -47163,7 +47353,7 @@ DvtDataGrid.prototype._appendCellsToFrozenColumnContainer = function (index, hea
 
   let dirValueInit = dirValue;
 
-  if (cells.length) {
+  if (cells.length !== 0) {
     dirValue = this._appendElementsToFrozenContainer(
       axis,
       cells,
@@ -47173,9 +47363,16 @@ DvtDataGrid.prototype._appendCellsToFrozenColumnContainer = function (index, hea
       this.getMappedStyle('frozenCell'),
       newStartIndex
     );
+  } else if (headers.length !== 0) {
+    headers.forEach((frozenHeader) => {
+      cellsWidthToAdjust += this.getElementWidth(frozenHeader);
+    });
   } else {
-    dirValue += cellsWidthToAdjust;
+    endHeaders.forEach((frozenHeader) => {
+      cellsWidthToAdjust += this.getElementWidth(frozenHeader);
+    });
   }
+
   this._appendElementsToFrozenContainer(
     axis,
     headers,
@@ -47197,10 +47394,10 @@ DvtDataGrid.prototype._appendCellsToFrozenColumnContainer = function (index, hea
     );
   }
 
-  if (endIndex + 1 <= this.m_endCol) {
+  if (endIndex + 1 <= this._getMaxRight()) {
     this._shiftCellsAlongAxis(axis, -cellsWidthToAdjust, endIndex + 1, true);
 
-    if (this.m_databodyFrozenRow && this._hasFrozenRows()) {
+    if (this.m_databodyFrozenRow && this._hasFrozenRows() && cells.length > 0) {
       this._shiftFrozenCellsAlongAxis(axis, -cellsWidthToAdjust, endIndex + 1, true);
     }
 
@@ -47225,8 +47422,19 @@ DvtDataGrid.prototype._appendCellsToFrozenColumnContainer = function (index, hea
   this.m_endColHeaderPixel -= cellsWidthToAdjust;
   this.m_endColEndHeaderPixel -= cellsWidthToAdjust;
 
-  let newFrozenColWidth = databodyFrozenColDirValue + dirValue;
-  let newColWidth = databodyFrozenRowWidth - cellsWidthToAdjust;
+  let newFrozenColWidth;
+  let newColWidth;
+  if (cells.length !== 0) {
+    newFrozenColWidth = databodyFrozenColDirValue + dirValue;
+    newColWidth = databodyFrozenRowWidth - cellsWidthToAdjust;
+  } else {
+    const currentFrozenRegionWidth = this.m_colHeaderFrozen
+      ? this.getElementWidth(this.m_colHeaderFrozen)
+      : this.getElementWidth(this.m_colEndHeaderFrozen);
+    newFrozenColWidth = cellsWidthToAdjust + databodyFrozenColDirValue + currentFrozenRegionWidth;
+    dirValue = newFrozenColWidth - databodyFrozenColDirValue;
+    newColWidth = this._getViewportRight() - this._getViewportLeft() - cellsWidthToAdjust;
+  }
 
   // ensures endHeaders have the space assigned for them.
   newColWidth = newColWidth < 0 ? 0 : newColWidth;
@@ -47368,7 +47576,7 @@ DvtDataGrid.prototype._appendCellsToFrozenRowContainer = function (index, header
 
   let topValueInit = frozenRowHeight;
 
-  if (cells.length) {
+  if (cells.length !== 0) {
     topValue = this._appendElementsToFrozenContainer(
       axis,
       cells,
@@ -47378,7 +47586,16 @@ DvtDataGrid.prototype._appendCellsToFrozenRowContainer = function (index, header
       this.getMappedStyle('frozenCell'),
       newStartIndex
     );
+  } else if (headers.length !== 0) {
+    headers.forEach((frozenHeader) => {
+      cellsHeightToAdjust += this.getElementHeight(frozenHeader);
+    });
+  } else {
+    endHeaders.forEach((frozenHeader) => {
+      cellsHeightToAdjust += this.getElementHeight(frozenHeader);
+    });
   }
+
   this._appendElementsToFrozenContainer(
     axis,
     headers,
@@ -47400,9 +47617,9 @@ DvtDataGrid.prototype._appendCellsToFrozenRowContainer = function (index, header
     );
   }
 
-  if (endIndex + 1 <= this.m_endRow) {
+  if (endIndex + 1 <= this._getMaxBottom()) {
     this._shiftCellsAlongAxis(axis, -cellsHeightToAdjust, endIndex + 1, true);
-    if (this.m_databodyFrozenCol && this._hasFrozenColumns()) {
+    if (this.m_databodyFrozenCol && this._hasFrozenColumns() && cells.length > 0) {
       this._shiftFrozenCellsAlongAxis(axis, -cellsHeightToAdjust, endIndex + 1, true);
     }
     this._shiftHeadersAlongAxisInContainer(
@@ -47424,12 +47641,24 @@ DvtDataGrid.prototype._appendCellsToFrozenRowContainer = function (index, header
   this.m_endRowHeaderPixel -= cellsHeightToAdjust;
   this.m_endRowEndHeaderPixel -= cellsHeightToAdjust;
 
-  let newFrozenRowHeight = databodyFrozenRowTop + topValue;
-  let newRowHeight = databodyFrozenColHeight - cellsHeightToAdjust;
+  let newFrozenRowHeight;
+  let newRowHeight;
+
+  if (cells.length !== 0) {
+    newFrozenRowHeight = databodyFrozenRowTop + topValue;
+    newRowHeight = databodyFrozenColHeight - cellsHeightToAdjust;
+  } else {
+    const currentFrozenRegionHeight = this.m_rowHeaderFrozen
+      ? this.getElementHeight(this.m_rowHeaderFrozen)
+      : this.getElementHeight(this.m_rowEndHeaderFrozen);
+    newFrozenRowHeight = cellsHeightToAdjust + databodyFrozenRowTop + currentFrozenRegionHeight;
+    topValue = newFrozenRowHeight - databodyFrozenRowTop;
+    newRowHeight = this._getViewportBottom() - this._getViewportTop() - cellsHeightToAdjust;
+  }
 
   // ensures endHeaders have the space assigned for them.
   newRowHeight = newRowHeight < 0 ? 0 : newRowHeight;
-  if (this.m_endColEndHeader) {
+  if (this.m_endColEndHeader !== -1) {
     const colEndHeaderTop = this.getElementDir(this.m_colEndHeader, 'top');
     const colEndHeaderDimension = colEndHeaderTop;
     topValue =
@@ -47734,8 +47963,10 @@ DvtDataGrid.prototype._removeCellsFromFrozenColumnContainer = function (index) {
 
   let totalFrozenCellsWidth = cellsWidthToAdjust;
   for (let i = startLoop, j = 0; j <= index; j++) {
-    let indexCell = this._getFrozenCellByIndex(this.createIndex(i, j), 'row');
-    totalFrozenCellsWidth += this.getElementWidth(indexCell);
+    const indexCell = this._getFrozenCellByIndex(this.createIndex(i, j), 'row');
+    if (indexCell) {
+      totalFrozenCellsWidth += this.getElementWidth(indexCell);
+    }
   }
 
   // if no cells beyond the current frozen section then calculate width from corner.
@@ -47775,15 +48006,28 @@ DvtDataGrid.prototype._removeCellsFromFrozenColumnContainer = function (index) {
 
   dirValue = 0;
   let referenceDatabodyNode = this.m_databody.firstChild.firstChild;
-  for (let i = 0; i < cells.length; i++) {
-    this.setElementDir(cells[i], dirValue, dir);
-    this.m_utils.removeCSSClassName(cells[i], this.getMappedStyle('frozenCell'));
-    this.m_databody.firstChild.insertBefore(cells[i], referenceDatabodyNode);
-    if (i % indexDifference === indexDifference - 1) {
-      dirValue = 0;
+  if (cells.length !== 0) {
+    for (let i = 0; i < cells.length; i++) {
+      this.setElementDir(cells[i], dirValue, dir);
+      this.m_utils.removeCSSClassName(cells[i], this.getMappedStyle('frozenCell'));
+      this.m_databody.firstChild.insertBefore(cells[i], referenceDatabodyNode);
+      if (i % indexDifference === indexDifference - 1) {
+        dirValue = 0;
+      } else {
+        dirValue += this.getElementWidth(cells[i]);
+      }
+    }
+  } else {
+    if (headers.length !== 0) {
+      headers.forEach((frozenHeader) => {
+        totalFrozenCellsWidth += this.getElementWidth(frozenHeader);
+      });
     } else {
-      dirValue += this.getElementWidth(cells[i]);
+      endHeaders.forEach((frozenHeader) => {
+        totalFrozenCellsWidth += this.getElementWidth(frozenHeader);
+      });
     }
+    cellsWidthToAdjust = totalFrozenCellsWidth;
   }
 
   let referenceHeaderNode = this.m_colHeader.firstChild.firstChild;
@@ -47848,10 +48092,22 @@ DvtDataGrid.prototype._removeCellsFromFrozenColumnContainer = function (index) {
   this.m_endColHeaderPixel += cellsWidthToAdjust;
   this.m_endColEndHeaderPixel += cellsWidthToAdjust;
 
-  let newColDir = frozenSectionWidth + databodyFrozenColDirValue;
-  let newColWidth = databodyFrozenRowWidth + cellsWidthToAdjust;
+  let newColDir;
+  let newColWidth;
+  if (cells.length !== 0) {
+    newColDir = frozenSectionWidth + databodyFrozenColDirValue;
+    newColWidth = databodyFrozenRowWidth + cellsWidthToAdjust;
+  } else {
+    const currentFrozenRegionWidth = this.m_colHeaderFrozen
+      ? this.getElementWidth(this.m_colHeaderFrozen)
+      : this.getElementWidth(this.m_colEndHeaderFrozen);
+    newColDir = currentFrozenRegionWidth - cellsWidthToAdjust + databodyFrozenColDirValue;
+    frozenSectionWidth = newColDir - databodyFrozenColDirValue;
+    newColWidth =
+      this._getViewportRight() - this._getViewportLeft() + currentFrozenRegionWidth + newColDir;
+  }
 
-  if (this.m_endRowEndHeader) {
+  if (this.m_endRowEndHeader !== -1) {
     const rowEndHeaderDir = this.getElementDir(this.m_rowEndHeader, dir);
     const rowEndHeaderDimension = rowEndHeaderDir;
     newColWidth =
@@ -47972,13 +48228,26 @@ DvtDataGrid.prototype._removeCellsFromFrozenRowContainer = function (index) {
 
   dirValue = 0;
   let referenceDatabodyNode = this.m_databody.firstChild.firstChild;
-  for (let i = 0; i < cells.length; i++) {
-    this.setElementDir(cells[i], dirValue, 'top');
-    this.m_utils.removeCSSClassName(cells[i], this.getMappedStyle('frozenCell'));
-    this.m_databody.firstChild.insertBefore(cells[i], referenceDatabodyNode);
-    if ((i + 1) % Math.floor(cells.length / indexDifference) === 0) {
-      dirValue += this.getElementHeight(cells[i]);
+  if (cells.length !== 0) {
+    for (let i = 0; i < cells.length; i++) {
+      this.setElementDir(cells[i], dirValue, 'top');
+      this.m_utils.removeCSSClassName(cells[i], this.getMappedStyle('frozenCell'));
+      this.m_databody.firstChild.insertBefore(cells[i], referenceDatabodyNode);
+      if ((i + 1) % Math.floor(cells.length / indexDifference) === 0) {
+        dirValue += this.getElementHeight(cells[i]);
+      }
+    }
+  } else {
+    if (headers.length !== 0) {
+      headers.forEach((frozenHeader) => {
+        totalFrozenCellsHeight += this.getElementHeight(frozenHeader);
+      });
+    } else {
+      endHeaders.forEach((frozenHeader) => {
+        totalFrozenCellsHeight += this.getElementHeight(frozenHeader);
+      });
     }
+    cellsHeightToAdjust = totalFrozenCellsHeight;
   }
 
   let referenceHeaderNode = this.m_rowHeader.firstChild.firstChild;
@@ -48040,10 +48309,22 @@ DvtDataGrid.prototype._removeCellsFromFrozenRowContainer = function (index) {
     this.getMappedStyle('rowendheadercell')
   );
 
-  let newRowTop = frozenSectionHeight + databodyFrozenRowTop;
-  let newRowHeight = databodyFrozenColHeight + cellsHeightToAdjust;
+  let newRowTop;
+  let newRowHeight;
+  if (cells.length !== 0) {
+    newRowTop = frozenSectionHeight + databodyFrozenRowTop;
+    newRowHeight = databodyFrozenColHeight + cellsHeightToAdjust;
+  } else {
+    const currentFrozenRegionHeight = this.m_rowHeaderFrozen
+      ? this.getElementHeight(this.m_rowHeaderFrozen)
+      : this.getElementHeight(this.m_rowEndHeaderFrozen);
+    newRowTop = currentFrozenRegionHeight - cellsHeightToAdjust + databodyFrozenRowTop;
+    frozenSectionHeight = newRowTop - databodyFrozenRowTop;
+    newRowHeight =
+      this._getViewportBottom() - this._getViewportTop() + currentFrozenRegionHeight + newRowTop;
+  }
 
-  if (this.m_endColEndHeader) {
+  if (this.m_endColEndHeader !== -1) {
     const colEndHeaderTop = this.getElementDir(this.m_colEndHeader, 'top');
     const colEndHeaderDimension = colEndHeaderTop;
     newRowHeight =
@@ -49281,7 +49562,10 @@ DvtDataGrid.prototype.loadSkeletons = function (
     (!this.m_stopColumnHeaderFetch || !this.m_stopColumnEndHeaderFetch || !this.m_stopColumnFetch)
   ) {
     // scroll to right of data region or currently rendered skeletons
-    if (this._isHighWatermarkScrolling()) {
+    if (
+      this._isHighWatermarkScrolling() ||
+      (this._isCountUnknown('column') && this.m_maxColYet === this._getMaxRight())
+    ) {
       rowCount = this._getMaxBottom() - this._getMaxTop() + 1;
       columnCount = DvtDataGrid.SKELETON_DEFAULT_COUNT;
       row = this._getMaxTop();
@@ -49315,10 +49599,15 @@ DvtDataGrid.prototype.loadSkeletons = function (
     (!this.m_stopRowHeaderFetch || !this.m_stopRowEndHeaderFetch || !this.m_stopRowFetch)
   ) {
     // scroll below the data region or currently rendered skeletons
-    if (this._isHighWatermarkScrolling()) {
+    if (
+      this._isHighWatermarkScrolling() ||
+      (this._isCountUnknown('row') && this.m_maxRowYet === this._getMaxBottom())
+    ) {
       row = this._getMaxBottom() + 1;
       column = this._getMaxLeft();
-      rowAppend = rowStart >= this._getMaxTop();
+      rowAppend =
+        rowStart + this.hiddenItemsInRange(rowStart, this._getMaxBottom(), 'row') >=
+        this._getMaxTop();
       top = rowAppend ? this._getMaxBottomPixel() : this._getMaxTopPixel();
       left = this._getMaxLeftPixel();
       rowCount = DvtDataGrid.SKELETON_DEFAULT_COUNT;
@@ -50422,39 +50711,18 @@ DvtDataGrid.prototype.setHiddenRows = function (hiddenRows) {
 };
 
 /**
- * Returns hidden indicator div belonging to the region
- * @param {number} index
- * @param {Object} databody/header/endHeader
- * @param {boolean} isHeader
+ * Deletes hidden indicators
+ * @param {Array} deleteArray
+ * @param {Element} container
  */
-DvtDataGrid.prototype.getHiddenIndicatorByIndex = function (index, container, isHeader) {
-  let hiddenIndicators;
-
-  if (isHeader) {
-    hiddenIndicators = container.querySelectorAll(
-      `.${this.getResources().getMappedStyle('colHeaderHiddenIndicator')},
-      .${this.getResources().getMappedStyle('rowHeaderHiddenIndicator')}`
-    );
-  } else {
-    hiddenIndicators = container.querySelectorAll(
-      `.${this.getResources().getMappedStyle('colHiddenIndicator')},
-      .${this.getResources().getMappedStyle('rowHiddenIndicator')}`
-    );
-  }
-
-  hiddenIndicators = Array.from(hiddenIndicators);
-
-  if (hiddenIndicators.length > 0) {
-    const hiddenIndicatorNode = hiddenIndicators.find(
-      (node) => this._getAttribute(node, 'hiddenIndicatorIndex', true) === index
-    );
-
-    if (hiddenIndicatorNode) {
-      return hiddenIndicatorNode;
+DvtDataGrid.prototype.deleteHiddenIndicators = function (deleteArray, container) {
+  const hideIndexAttribute = this.getResources().getMappedAttribute('hiddenIndicatorIndex');
+  deleteArray.forEach((index) => {
+    const node = container.querySelector(`[${hideIndexAttribute}="${index}"]`);
+    if (node && node.parentNode) {
+      node.parentNode.removeChild(node);
     }
-  }
-
-  return null;
+  });
 };
 
 // returns active databody indicators
@@ -50504,21 +50772,35 @@ DvtDataGrid.prototype.applyHiddenIndicatorToRange = function (
   let hiddenItems;
   let headerLevelCount;
   let dimension;
+  let axisHeader;
+  let axisEndHeader;
+  let frozenHeader;
+  let frozenEndHeader;
 
   if (axis === 'column') {
     hiddenItems = this.m_hiddenColumns;
     headerLevelCount = this.m_columnHeaderLevelCount;
     dimension = 'width';
+    axisHeader = this.m_colHeader;
+    axisEndHeader = this.m_colEndHeader;
+    frozenHeader = this.m_colHeaderFrozen;
+    frozenEndHeader = this.m_colEndHeaderFrozen;
   } else if (axis === 'row') {
     hiddenItems = this.m_hiddenRows;
     headerLevelCount = this.m_rowHeaderLevelCount;
     dimension = 'height';
+    axisHeader = this.m_rowHeader;
+    axisEndHeader = this.m_rowEndHeader;
+    frozenHeader = this.m_rowHeaderFrozen;
+    frozenEndHeader = this.m_rowEndHeaderFrozen;
   }
 
   hiddenItems.sort((a, b) => a - b);
 
   let hiddenItemsCopy = axis === 'column' ? this.m_hiddenColumns : this.m_hiddenRows;
 
+  let fragments = {};
+
   for (let i = startAxis; i <= endAxis; i++) {
     if (hiddenItemsCopy.includes(i)) {
       let adjustedAxisIndex = i === -1 ? 0 : i;
@@ -50536,13 +50818,14 @@ DvtDataGrid.prototype.applyHiddenIndicatorToRange = function (
             axis === 'column' ? this.getElementDir(header, dir) : this.getElementDir(header, 'top');
           indicatorDirPosition += i === -1 ? 0 : this.getElementDir(header, dimension);
 
-          this.renderHiddenAxisVisualIndicator(
+          fragments = this.renderHiddenAxisVisualIndicator(
             axis,
             axis === 'column' ? 0 : indicatorDirPosition,
             dir,
             axis === 'column' ? indicatorDirPosition : 0,
             adjustedAxisIndex,
-            databodyIndicator
+            databodyIndicator,
+            fragments
           );
         }
       } else {
@@ -50556,13 +50839,14 @@ DvtDataGrid.prototype.applyHiddenIndicatorToRange = function (
             let headerTop = this.getElementDir(currentHeader, 'top');
             let indicatorDirPosition = this.getElementDir(currentHeader, dir);
             indicatorDirPosition += j === -1 ? 0 : this.getElementDir(currentHeader, dimension);
-            this.renderHiddenAxisVisualIndicator(
+            fragments = this.renderHiddenAxisVisualIndicator(
               axis,
               headerTop,
               dir,
               indicatorDirPosition,
               adjustedAxisIndex,
-              databodyIndicator
+              databodyIndicator,
+              fragments
             );
             // filtering to avoid multiple loops for the same nested header for each header
             /* eslint-disable  no-loop-func */
@@ -50572,6 +50856,33 @@ DvtDataGrid.prototype.applyHiddenIndicatorToRange = function (
       }
     }
   }
+
+  // Append hidden indicators
+  if (fragments.header) {
+    axisHeader.firstChild.appendChild(fragments.header); // @HTMLUpdateOK
+  }
+  if (fragments.endHeader) {
+    axisEndHeader.firstChild.appendChild(fragments.endHeader); // @HTMLUpdateOK
+  }
+  if (fragments.frozenHeader) {
+    frozenHeader.firstChild.appendChild(fragments.frozenHeader); // @HTMLUpdateOK
+  }
+  if (fragments.frozenEndHeader) {
+    frozenEndHeader.firstChild.appendChild(fragments.frozenEndHeader); // @HTMLUpdateOK
+  }
+  if (fragments.databody) {
+    this.m_databody.firstChild.appendChild(fragments.databody); // @HTMLUpdateOK
+  }
+  if (fragments.frozenCornerDatabody) {
+    this.m_databodyFrozenCorner.firstChild.appendChild(fragments.frozenCornerDatabody); // @HTMLUpdateOK
+  }
+  if (fragments.frozenDatabody) {
+    let databodyElem = axis === 'column' ? this.m_databodyFrozenCol : this.m_databodyFrozenRow;
+    databodyElem.firstChild.appendChild(fragments.frozenDatabody); // @HTMLUpdateOK
+  }
+  if (fragments.frozenRowDatabody) {
+    this.m_databodyFrozenRow.firstChild.appendChild(fragments.frozenRowDatabody); // @HTMLUpdateOK
+  }
 };
 
 /**
@@ -50582,24 +50893,22 @@ DvtDataGrid.prototype.applyHiddenIndicatorToRange = function (
  * @param {number} index
  * @param {Array} databodyIndicatorArray
  */
+/* eslint-disable no-param-reassign */
 DvtDataGrid.prototype.renderHiddenAxisVisualIndicator = function (
   axis,
   top,
   dir,
   dirValue,
   index,
-  databodyIndicatorArray
+  databodyIndicatorArray,
+  fragments
 ) {
-  let headerElem;
-  let endHeaderElem;
-  let databodyElem;
-
   const isFrozen =
     (axis === 'column' && this._hasFrozenColumns() && index <= this.m_frozenColIndex) ||
     (axis === 'row' && this._hasFrozenRows() && index <= this.m_frozenRowIndex);
 
   /* eslint-disable no-nested-ternary */
-  headerElem =
+  let headerElem =
     axis === 'column'
       ? isFrozen
         ? this.m_colHeaderFrozen
@@ -50608,7 +50917,7 @@ DvtDataGrid.prototype.renderHiddenAxisVisualIndicator = function (
       ? this.m_rowHeaderFrozen
       : this.m_rowHeader;
 
-  endHeaderElem =
+  let endHeaderElem =
     axis === 'column'
       ? isFrozen
         ? this.m_colEndHeaderFrozen
@@ -50617,15 +50926,6 @@ DvtDataGrid.prototype.renderHiddenAxisVisualIndicator = function (
       ? this.m_rowEndHeaderFrozen
       : this.m_rowEndHeader;
 
-  databodyElem =
-    axis === 'column'
-      ? isFrozen
-        ? this.m_databodyFrozenCol
-        : this.m_databody
-      : isFrozen
-      ? this.m_databodyFrozenRow
-      : this.m_databody;
-
   let headerVisualIndicatorDimension;
   let databodyVisualIndicatorDimension;
   let headerClassName;
@@ -50690,7 +50990,17 @@ DvtDataGrid.prototype.renderHiddenAxisVisualIndicator = function (
       headerVisualIndicatorDimensionValue,
       headerVisualIndicatorDimension
     );
-    headerElem.firstChild.appendChild(headerIndicator); // @HTMLUpdateOK
+    if (isFrozen) {
+      if (!fragments.frozenHeader) {
+        fragments.frozenHeader = document.createDocumentFragment();
+      }
+      fragments.frozenHeader.appendChild(headerIndicator); // @HTMLUpdateOK
+    } else {
+      if (!fragments.header) {
+        fragments.header = document.createDocumentFragment();
+      }
+      fragments.header.appendChild(headerIndicator); // @HTMLUpdateOK
+    }
   }
 
   if (hasEndHeader) {
@@ -50706,7 +51016,17 @@ DvtDataGrid.prototype.renderHiddenAxisVisualIndicator = function (
       endHeaderVisualIndicatorDimensionValue,
       headerVisualIndicatorDimension
     );
-    endHeaderElem.firstChild.appendChild(endHeaderIndicator); // @HTMLUpdateOK
+    if (isFrozen) {
+      if (!fragments.frozenEndHeader) {
+        fragments.frozenEndHeader = document.createDocumentFragment();
+      }
+      fragments.frozenEndHeader.appendChild(endHeaderIndicator); // @HTMLUpdateOK
+    } else {
+      if (!fragments.endHeader) {
+        fragments.endHeader = document.createDocumentFragment();
+      }
+      fragments.endHeader.appendChild(endHeaderIndicator); // @HTMLUpdateOK
+    }
   }
 
   if (databodyIndicatorArray && databodyIndicatorArray.includes(index)) {
@@ -50723,7 +51043,17 @@ DvtDataGrid.prototype.renderHiddenAxisVisualIndicator = function (
       databodyVisualIndicatorDimensionValue,
       databodyVisualIndicatorDimension
     );
-    databodyElem.firstChild.appendChild(databodyIndicator); // @HTMLUpdateOK
+    if (isFrozen) {
+      if (!fragments.frozenDatabody) {
+        fragments.frozenDatabody = document.createDocumentFragment();
+      }
+      fragments.frozenDatabody.appendChild(databodyIndicator); // @HTMLUpdateOK
+    } else {
+      if (!fragments.databody) {
+        fragments.databody = document.createDocumentFragment();
+      }
+      fragments.databody.appendChild(databodyIndicator); // @HTMLUpdateOK
+    }
 
     let crossAxisFrozenCheck = axis === 'column' ? this._hasFrozenRows() : this._hasFrozenColumns();
     let frozenCheck =
@@ -50751,8 +51081,10 @@ DvtDataGrid.prototype.renderHiddenAxisVisualIndicator = function (
           databodyFrozenCornerVisualIndicatorDimensionValue,
           databodyVisualIndicatorDimension
         );
-
-        databodyFrozenCornerElem.firstChild.appendChild(databodyFrozenCornerIndicator); // @HTMLUpdateOK
+        if (!fragments.frozenCornerDatabody) {
+          fragments.frozenCornerDatabody = document.createDocumentFragment();
+        }
+        fragments.frozenCornerDatabody.appendChild(databodyFrozenCornerIndicator); // @HTMLUpdateOK
       } else {
         // appending indicator to the frozen row
         let databodyFrozenRowIndicator = document.createElement('div');
@@ -50773,10 +51105,30 @@ DvtDataGrid.prototype.renderHiddenAxisVisualIndicator = function (
           databodyFrozenRowVisualIndicatorDimensionValue,
           databodyVisualIndicatorDimension
         );
-        databodyFrozenRowElem.firstChild.appendChild(databodyFrozenRowIndicator); // @HTMLUpdateOK
+        if (!fragments.frozenRowDatabody) {
+          fragments.frozenRowDatabody = document.createDocumentFragment();
+        }
+        fragments.frozenRowDatabody.appendChild(databodyFrozenRowIndicator); // @HTMLUpdateOK
       }
     }
   }
+  return fragments;
+};
+/* eslint-enable no-param-reassign */
+
+/**
+ * Returns true if the given cell is hidden
+ * @param {Element} cell
+ */
+DvtDataGrid.prototype.isCellHidden = function (cell) {
+  let indexes = this.getCellIndexes(cell);
+  let rowIndex = indexes.row;
+  let columnIndex = indexes.column;
+  if (this.isHidden('column', columnIndex) || this.isHidden('row', rowIndex)) {
+    return true;
+  }
+
+  return false;
 };
 
 /**
@@ -50883,6 +51235,22 @@ DvtDataGrid.prototype.hiddenColumnsInDirection = function (index, arrow) {
   return hiddenColumnsInDirection;
 };
 
+/**
+ * Returns hiddden count till index
+ * @param {Number} index
+ */
+DvtDataGrid.prototype._getHiddenCountBeforeIndex = function (index, axis) {
+  let count = 0;
+  let hiddenItems =
+    axis === 'column' || axis === 'columnEnd' ? this.m_hiddenColumns : this.m_hiddenRows;
+  hiddenItems.forEach((hiddenIndex) => {
+    if (hiddenIndex < index) {
+      count += 1;
+    }
+  });
+  return count;
+};
+
 /**
  * returns true if given index is the first visible index by checking if all indices before that are hidden
  * @param {Number} index
@@ -50971,26 +51339,35 @@ DvtDataGrid.prototype.isLastOrLastNonHiddenIndex = function (index, axis) {
  * @param {Object} direction
  */
 DvtDataGrid.prototype.getVisibleCellIndexInDirection = function (axis, index, direction) {
-  let newIndex = index;
-  let hiddenArray;
+  let rowCount = this.getDataSource().getCount('row');
+  let colCount = this.getDataSource().getCount('column');
+  let newStartIndex = index;
+  let hiddenItems;
+  let maxIndex;
 
   if (axis === 'column' || axis === 'columnEnd') {
-    hiddenArray = this.m_hiddenColumns;
+    hiddenItems = this.m_hiddenColumns;
+    maxIndex = colCount !== -1 ? colCount : Number.MAX_VALUE;
   } else if (axis === 'row' || axis === 'rowEnd') {
-    hiddenArray = this.m_hiddenRows;
+    hiddenItems = this.m_hiddenRows;
+    maxIndex = rowCount !== -1 ? rowCount : Number.MAX_VALUE;
   }
 
-  if (direction.right || direction.down) {
-    while (hiddenArray.includes(newIndex)) {
-      newIndex += 1;
-    }
-  } else if (direction.left || direction.up) {
-    while (hiddenArray.includes(newIndex)) {
-      newIndex -= 1;
+  if (hiddenItems.length) {
+    if (direction.right || direction.down) {
+      while (hiddenItems.includes(newStartIndex) && newStartIndex >= 0) {
+        newStartIndex += 1;
+        if (newStartIndex >= maxIndex) {
+          return index;
+        }
+      }
+    } else if (direction.left || direction.up) {
+      while (hiddenItems.includes(newStartIndex) && newStartIndex >= 0) {
+        newStartIndex -= 1;
+      }
     }
   }
-
-  return newIndex;
+  return newStartIndex;
 };
 
 /**
@@ -51228,6 +51605,11 @@ DvtDataGrid.prototype.containsHiddenItems = function (selectedArray, axis) {
   return commonHiddenItems;
 };
 
+DvtDataGrid.prototype.hiddenItemsInRange = function (lowerRangeIndex, upperRangeIndex, axis) {
+  let hiddenItems = axis === 'column' ? this.m_hiddenColumns : this.m_hiddenRows;
+  return hiddenItems.filter((index) => index >= lowerRangeIndex && index <= upperRangeIndex).length;
+};
+
 /**
  * Unhide and shift cells and headers when column is hidden
  * @param event
@@ -51429,7 +51811,7 @@ DvtDataGrid.prototype.shiftAxisForHidability = function (index, hide, axis) {
     let dimensionChange;
 
     currentElementDimension =
-        axis === 'column' ? this.getElementWidth(cell) : this.getElementHeight(cell);
+      axis === 'column' ? this.getElementWidth(cell) : this.getElementHeight(cell);
     oldElementDimension = this.m_sizingManager.getSize(axis, axisKey);
 
     if (hide) {
@@ -51486,10 +51868,7 @@ DvtDataGrid.prototype.shiftAxisForHidability = function (index, hide, axis) {
       if (this.m_databody.firstChild != null && !isHideFrozenSection) {
         let oldScrollerDimension = this.getElementDir(this.m_databody.firstChild, dimension);
         newScrollerDimension = oldScrollerDimension + dimensionChange;
-        this.setElementDir(this.m_databody.firstChild, newScrollerDimension, dimension);
-        if (this.m_databodyFrozenRow) {
-          this.setElementWidth(this.m_databodyFrozenRow.firstChild, newScrollerDimension);
-        }
+        this._setAllScrollableRegions(dimension, newScrollerDimension);
       } else if (isHideFrozenSection && databodyFrozenSection) {
         let oldScrollerDimension = this.getElementDir(databodyFrozenSection, dimension);
         let scrollerDir = this.getElementDir(databodyFrozenSection, dir);
@@ -51498,9 +51877,9 @@ DvtDataGrid.prototype.shiftAxisForHidability = function (index, hide, axis) {
           let endHeaderDir = this.getElementDir(crossAxisEndHeader, dir);
           let newDimension = scrollerDir + oldScrollerDimension + dimensionChange;
           dimensionChange =
-              newDimension > endHeaderDir
-                  ? endHeaderDir - (scrollerDir + oldScrollerDimension)
-                  : dimensionChange;
+            newDimension > endHeaderDir
+              ? endHeaderDir - (scrollerDir + oldScrollerDimension)
+              : dimensionChange;
         }
         newScrollerDimension = oldScrollerDimension + dimensionChange;
         this.setElementDir(databodyFrozenSection, newScrollerDimension, dimension);
@@ -51514,70 +51893,73 @@ DvtDataGrid.prototype.shiftAxisForHidability = function (index, hide, axis) {
       // shifting start/end headers and set display to none for single headers
       if (hasHeader) {
         this._shiftHeadersAlongAxisInContainer(
-            headerRoot.firstChild,
-            axisIndex,
-            dimensionChange,
-            dir,
-            headerCellClass,
-            axis,
-            true
+          headerRoot.firstChild,
+          axisIndex,
+          dimensionChange,
+          dir,
+          headerCellClass,
+          axis,
+          true
         );
         if (!isHideFrozenSection) {
           // eslint-disable-next-line no-unused-expressions
           axis === 'column'
-              ? (this.m_endColHeaderPixel += dimensionChange)
-              : (this.m_endRowHeaderPixel += dimensionChange);
+            ? (this.m_endColHeaderPixel += dimensionChange)
+            : (this.m_endRowHeaderPixel += dimensionChange);
         }
       }
       if (hasEndHeader) {
         this._shiftHeadersAlongAxisInContainer(
-            endHeaderRoot.firstChild,
-            axisIndex,
-            dimensionChange,
-            dir,
-            endHeaderCellClass,
-            axis,
-            true
+          endHeaderRoot.firstChild,
+          axisIndex,
+          dimensionChange,
+          dir,
+          endHeaderCellClass,
+          axis,
+          true
         );
         if (!isHideFrozenSection) {
           // eslint-disable-next-line no-unused-expressions
           axis === 'column'
-              ? (this.m_endColEndHeaderPixel += dimensionChange)
-              : (this.m_endRowEndHeaderPixel += dimensionChange);
+            ? (this.m_endColEndHeaderPixel += dimensionChange)
+            : (this.m_endRowEndHeaderPixel += dimensionChange);
         }
       }
 
       // shift the cells widths and left/right values in the databody
       if (!isHideFrozenSection) {
         this._shiftCellsAlongAxis(
-            axis,
-            dimensionChange,
-            axisIndex,
-            false,
-            undefined,
-            undefined,
-            true
+          axis,
+          dimensionChange,
+          axisIndex,
+          false,
+          undefined,
+          undefined,
+          true
         );
-        if ((axis === 'column' && this.m_databodyFrozenRow) || (axis === 'row' && this.m_databodyFrozenCol)) {
+        if (
+          (axis === 'column' && this.m_databodyFrozenRow) ||
+          (axis === 'row' && this.m_databodyFrozenCol)
+        ) {
           this._shiftFrozenCellsAlongAxis(axis, dimensionChange, axisIndex, false, true);
         }
         // eslint-disable-next-line no-unused-expressions
         axis === 'column'
-            ? (this.m_endColPixel += dimensionChange)
-            : (this.m_endRowPixel += dimensionChange);
+          ? (this.m_endColPixel += dimensionChange)
+          : (this.m_endRowPixel += dimensionChange);
       } else if (
-          (axis === 'column' && this.m_databodyFrozenCol) ||
-          (axis === 'row' && this.m_databodyFrozenRow)
+        (axis === 'column' && this.m_databodyFrozenCol) ||
+        (axis === 'row' && this.m_databodyFrozenRow)
       ) {
         corner = true;
         this._shiftCellsAlongAxis(
-            axis,
-            dimensionChange,
-            axisIndex,
-            null,
-            frozenAxisIndex,
-            corner,
-            true
+          axis,
+          dimensionChange,
+          axisIndex,
+          null,
+          frozenAxisIndex,
+          corner,
+          true
         );
       }
     }