@oracle/oraclejet 11.1.5 → 11.1.8

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

@@ -26,7 +26,7 @@ import { __getTemplateEngine, getDeviceRenderMode } from 'ojs/ojconfig';
 import { applyParameters } from 'ojs/ojtranslation';
 import { getCachedCSSVarValues, parseJSONFromFontFamily } from 'ojs/ojthemeutils';
 import { _OJ_CONTAINER_ATTR, subtreeAttached, subtreeDetached, __GetWidgetConstructor, setDefaultOptions, createDynamicPropertyGetter } from 'ojs/ojcomponentcore';
-import { disableAllFocusableElements, isMobileTouchDevice, isRequestIdleCallbackSupported, getDefaultScrollBarWidth, containsKey, getAddEventKeysResult, applyMergedInlineStyles, getLogicalChildPopup, isEscapeKeyEvent, isEnterKeyEvent, isF2KeyEvent, isTabKeyEvent, isArrowUpKeyEvent, isArrowDownKeyEvent, isArrowLeftKeyEvent, isArrowRightKeyEvent, isHomeKeyEvent, isEndKeyEvent, isSpaceBarKeyEvent, isEventClickthroughDisabled, isFromDefaultSelector, getFocusableElementsInNode, enableAllFocusableElements, KEYBOARD_KEYS, areKeySetsEqual, disableDefaultBrowserStyling } from 'ojs/ojdatacollection-common';
+import { disableAllFocusableElements, isMobileTouchDevice, isRequestIdleCallbackSupported, getDefaultScrollBarWidth, containsKey, isIterateAfterDoneNotAllowed, getAddEventKeysResult, applyMergedInlineStyles, getLogicalChildPopup, isEscapeKeyEvent, isEnterKeyEvent, isF2KeyEvent, isTabKeyEvent, isArrowUpKeyEvent, isArrowDownKeyEvent, isArrowLeftKeyEvent, isArrowRightKeyEvent, isHomeKeyEvent, isEndKeyEvent, isSpaceBarKeyEvent, isEventClickthroughDisabled, isFromDefaultSelector, getFocusableElementsInNode, enableAllFocusableElements, KEYBOARD_KEYS, areKeySetsEqual, disableDefaultBrowserStyling } from 'ojs/ojdatacollection-common';
 import { startAnimation } from 'ojs/ojanimation';
 import DomScroller from 'ojs/ojdomscroller';
 import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
@@ -1588,6 +1588,11 @@ Table._BATCH_PROCESS_SIZE_WHEN_IDLE = 5;
  */
 Table.RESIZE_OFFSET = 10;
 
+/**
+ * @private
+ */
+Table.SIZING_ERROR_MARGIN = 0.05;
+
 /**
  * @private
  */
@@ -2569,14 +2574,15 @@ Table.prototype._isDefaultSelectorEnabled = function () {
  * Refresh the row at a particular index with the row data
  * @param {number} rowIdx  row index relative to the start of the table
  * @param {Object} row  row and key object
- * @param {Object} tableBodyRow tr element
- * @param {Object} docFrag  document fragment
- * @param {number} docFragStartIdx  document fragment row start index
+ * @param {Object=} tableBodyRow tr element
+ * @param {Object=} docFrag  document fragment
+ * @param {number=} docFragStartIdx  document fragment row start index
+ * @param {boolean=} isRefresh whether this is a specific row refresh
  * @return {Element|null} tableBodyRow  DOM element
  * @private
  */
 Table.prototype._refreshTableBodyRow = function (rowIdx, row, tableBodyRow, docFrag,
-  docFragStartIdx) {
+  docFragStartIdx, isRefresh) {
   var rowRenderer = this._getRowRenderer();
 
   if (isNaN(rowIdx) || rowIdx < 0) {
@@ -2720,11 +2726,8 @@ Table.prototype._refreshTableBodyRow = function (rowIdx, row, tableBodyRow, docF
     }
     this._tableBodyRowDefaultRenderer(rowIdx, row, context);
   }
-  if (this._hasEditableRow() && this._getEditableRowIdx() === rowIdx) {
-    tableBodyRow.classList.add(Table.CSS_CLASSES._TABLE_DATA_ROW_EDIT_CLASS);
-  } else {
-    tableBodyRow.classList.remove(Table.CSS_CLASSES._TABLE_DATA_ROW_EDIT_CLASS);
-  }
+  // immediately apply styling to newly refreshed row when possible
+  this._getLayoutManager().handleRowRefresh(rowIdx, tableBodyRow, isRefresh);
 
   // eslint-disable-next-line no-param-reassign
   tableBodyRow[Table._ROW_ITEM_EXPANDO] = row;
@@ -2833,7 +2836,7 @@ Table.prototype._refreshRow = function (rowIdx, resetFocus) {
         metadata: rowResults.metadata,
         index: rowIdx,
         key: rowKey
-      });
+      }, null, null, null, true);
 
       // Give the focus back to the table if needed.  currentRow is retained after refresh.
       if (resetFocus) {
@@ -3223,10 +3226,11 @@ Table.prototype._registerResizeListener = function () {
   if (!this._resizeListener) {
     this._resizeListener = function () {
       var layoutManager = this._getLayoutManager();
-      var tableContainer = this._getTableContainer();
+      var containerStyle = window.getComputedStyle(this._getTableContainer());
       // Check if the width and height values should result in a sizing refresh
-      if (layoutManager.isSizingRefreshRequired(tableContainer.offsetWidth,
-                                                tableContainer.offsetHeight)) {
+      if (layoutManager.isSizingRefreshRequired(
+            layoutManager.getExactOffsetWidth(containerStyle),
+            layoutManager.getExactOffsetHeight(containerStyle))) {
         layoutManager.notifyTableUpdate(Table._UPDATE._RESIZE);
         // refresh dimensions if no tasks are pending since refresh dimensions runs during final task
         if (!this._hasPendingTasks()) {
@@ -3346,23 +3350,23 @@ Table.prototype._isTableHeaderColumnsRendered = function () {
  * Returns whether the table refresh is needed based on option change
  * @param {string} key option key
  * @param {Object} value option value
+ * @param {Object} flags object containing additional context (subkey, subproperty, etc...)
  * @return {boolean} true or false
  * @private
  */
-Table.prototype._isTableRefreshNeeded = function (key, value) {
-  var currentOptions = this._cachedOptions;
+Table.prototype._isTableRefreshNeeded = function (key, value, flags) {
+  var currentOptions = this.options;
   var refresh;
 
-  if (key === 'contextMenu' &&
-      value === '#' + this._getTableId() + '_contextmenu') {
-    refresh = false;
-  } else if (key === 'columns' && !this._isColumnMetadataUpdated()) {
-    // optimization for columns. Column re-order can change the columns options but we don't need to refresh
-    refresh = false;
-  } else if (key === 'scrollToKey') {
+  if ((key === 'contextMenu' && value === '#' + this._getTableId() + '_contextmenu') ||
+      (key === 'columns' && !this._isColumnMetadataUpdated(value)) ||
+      key === 'scrollToKey' || key === 'scrollPosition' ||
+      key === 'selection' || key === 'selected' || key === 'currentRow' || key === 'editRow' ||
+      (key === 'scrollPolicyOptions' && this._isStickyLayoutEnabled() && flags != null &&
+       (flags.subkey === 'scrollerOffsetTop' || flags.subkey === 'scrollerOffsetBottom' ||
+        flags.subkey === 'scrollerOffsetStart' || flags.subkey === 'scrollerOffsetEnd'))) {
     refresh = false;
-  } else if (key !== 'selection' && key !== 'currentRow' &&
-             !oj.Object.compareValues(value, currentOptions[key])) {
+  } else if (!oj.Object.compareValues(value, currentOptions[key])) {
     if (key === 'verticalGridVisible') {
       this._renderedTableHeaderColumns = false;
     }
@@ -3370,7 +3374,6 @@ Table.prototype._isTableRefreshNeeded = function (key, value) {
   } else {
     refresh = false;
   }
-  this._cachedOptions = $.extend(true, {}, this.options);
 
   return refresh;
 };
@@ -3718,9 +3721,9 @@ Table.prototype._getColumnDefs = function () {
  * @return {Array} array of column metadata Objects.
  * @private
  */
-Table.prototype._getColumnMetadata = function () {
+Table.prototype._getColumnMetadata = function (columnsOption) {
   // get the columns metadata
-  var columns = this.options.columns;
+  var columns = columnsOption != null ? columnsOption : this.options.columns;
   var columnsDefault = this.options.columnsDefault;
 
   if ((columns.length === 0 ||
@@ -4799,9 +4802,9 @@ Table.prototype._invokeDataSort = function (sortField, ascending, event) {
  * @return {boolean} true or false
  * @private
  */
-Table.prototype._isColumnMetadataUpdated = function () {
+Table.prototype._isColumnMetadataUpdated = function (columnOptions) {
   if (this._columnDefArray != null) {
-    var columnsMetadata = this._getColumnMetadata();
+    var columnsMetadata = this._getColumnMetadata(columnOptions);
     if (this._columnDefArray.length !== columnsMetadata.length) {
       return true;
     }
@@ -6088,8 +6091,6 @@ TableLayoutManager.prototype.refreshTableDimensions = function () { };
  * @private
  */
 TableLayoutManager.prototype._finalizeTableDimensions = function (scrollTop, scrollLeft) {
-  var tableContainer = this._table._getTableContainer();
-
   if (scrollTop != null) {
     var maxScrollTop = this.getScroller().scrollHeight - this.getScroller().clientHeight;
     var newScrollTop = scrollTop > maxScrollTop ? maxScrollTop : scrollTop;
@@ -6106,8 +6107,9 @@ TableLayoutManager.prototype._finalizeTableDimensions = function (scrollTop, scr
 
   // cache the final dimensions
   var sizingState = this._getSizingState();
-  sizingState.outerWidth = tableContainer.offsetWidth;
-  sizingState.outerHeight = tableContainer.offsetHeight;
+  var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+  sizingState.outerWidth = this.getExactOffsetWidth(containerStyle);
+  sizingState.outerHeight = this.getExactOffsetHeight(containerStyle);
 
   this._clearTableUpdates();
   this._enableTableVisibility();
@@ -6280,7 +6282,16 @@ TableLayoutManager.prototype.getScrollBarWidth = function () {
  * @return {Object} An object with boxSizing, borderWidth, and paddingWidth properties
  * @private
  */
-TableLayoutManager.prototype._getBoxStyle = function (style) {
+TableLayoutManager.prototype._getBoxStyle = function (style, isVert) {
+  if (isVert) {
+    return {
+      boxSizing: style[Table.CSS_PROP._BOX_SIZING],
+      borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_TOP_WIDTH]) || 0) +
+        (parseFloat(style[Table.CSS_PROP._BORDER_BOTTOM_WIDTH]) || 0),
+      paddingWidth: (parseFloat(style[Table.CSS_PROP._PADDING_TOP]) || 0) +
+        (parseFloat(style[Table.CSS_PROP._PADDING_BOTTOM]) || 0)
+    };
+  }
   return {
     boxSizing: style[Table.CSS_PROP._BOX_SIZING],
     borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_RIGHT_WIDTH]) || 0) +
@@ -6524,6 +6535,22 @@ TableLayoutManager.prototype._removeTableDimensionsStyling = function () {
   this._removeHeaderColumnAndCellColumnWidths();
 };
 
+/**
+ * @private
+ */
+TableLayoutManager.prototype._getBottomSlotHeight = function () {
+  var tableBottomSlot = this._table._getTableBottomSlot();
+
+  // find Table's bottom slot height to use when determining if overflow if present
+  if (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
+      tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) {
+    // offsetHeight does not include partial px values, so computed style should be used
+    var bottomSlotStyle = window.getComputedStyle(tableBottomSlot);
+    return this.getExactOffsetHeight(bottomSlotStyle);
+  }
+  return 0;
+};
+
 /**
  * Returns an array describing the table container's scrollable state.
  * Index 0 describes the vertical state, while index 1 describeds the horizontal state.
@@ -6533,17 +6560,23 @@ TableLayoutManager.prototype._removeTableDimensionsStyling = function () {
  * @private
  */
 TableLayoutManager.prototype._getTableContainerScrollableState = function (bottomSlotHeight) {
-  var tableContainer = this._table._getTableContainer();
-  var tableElem = this._table._getTable();
+  // clientHeight and clientWidth do not include partial px values, so computed style should be used
+  var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+  var containerClientHeight = this.getExactClientHeight(containerStyle);
+  var containerClientWidth = this.getExactClientWidth(containerStyle);
+
+  // offsetHeight and offsetWidth do not include partial px values, so computed style should be used
+  var tableElemStyle = window.getComputedStyle(this._table._getTable());
+  var tableElemHeight = this.getExactOffsetHeight(tableElemStyle);
+  var tableElemWidth = this.getExactOffsetWidth(tableElemStyle);
 
   var result = [];
-  if (tableContainer.clientHeight > 0) {
-    var innerHeight = tableElem.offsetHeight + bottomSlotHeight;
-    // don't use tableContainer[0].scrollHeight as it may not be accurate
-    if (innerHeight > tableContainer.clientHeight) {
+  if (containerClientHeight > 0) {
+    var innerHeight = tableElemHeight + bottomSlotHeight;
+    if (innerHeight - containerClientHeight > Table.SIZING_ERROR_MARGIN) {
       // overflow
       result[0] = 1;
-    } else if (tableContainer.clientHeight - innerHeight > 0) {
+    } else if (containerClientHeight - innerHeight > Table.SIZING_ERROR_MARGIN) {
       // underflow
       result[0] = -1;
     } else {
@@ -6553,11 +6586,11 @@ TableLayoutManager.prototype._getTableContainerScrollableState = function (botto
     result[0] = 0;
   }
 
-  if (tableContainer.clientWidth > 0) {
-    if (tableElem.offsetWidth > tableContainer.clientWidth) {
+  if (containerClientWidth > 0) {
+    if (tableElemWidth - containerClientWidth > Table.SIZING_ERROR_MARGIN) {
       // overflow
       result[1] = 1;
-    } else if (tableContainer.clientWidth - tableElem.offsetWidth > 0) {
+    } else if (containerClientWidth - tableElemWidth > Table.SIZING_ERROR_MARGIN) {
       // underflow
       result[1] = -1;
     } else {
@@ -6889,6 +6922,18 @@ TableLayoutManager.prototype.handleKeyDownEsc = function () { };
  */
 TableLayoutManager.prototype.handleFocusout = function () { };
 
+/**
+ * @private
+ */
+// eslint-disable-next-line no-unused-vars
+TableLayoutManager.prototype.handleRowRefresh = function (rowIdx, tableBodyRow, isRefresh) {
+  if (this._table._hasEditableRow() && this._table._getEditableRowIdx() === rowIdx) {
+    tableBodyRow.classList.add(Table.CSS_CLASSES._TABLE_DATA_ROW_EDIT_CLASS);
+  } else {
+    tableBodyRow.classList.remove(Table.CSS_CLASSES._TABLE_DATA_ROW_EDIT_CLASS);
+  }
+};
+
 /**
  * @private
  */
@@ -6914,6 +6959,42 @@ TableLayoutManager.prototype._getPageX = function (event) {
   return 0;
 };
 
+/**
+ * @private
+ */
+TableLayoutManager.prototype.getExactClientHeight = function (computedStyle) {
+  var boxStyle = this._getBoxStyle(computedStyle, true);
+  var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]) - boxStyle.borderWidth -
+    boxStyle.paddingWidth;
+  return Math.round((height + Number.EPSILON) * 1000) / 1000;
+};
+
+/**
+ * @private
+ */
+TableLayoutManager.prototype.getExactClientWidth = function (computedStyle) {
+  var boxStyle = this._getBoxStyle(computedStyle);
+  var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]) - boxStyle.borderWidth -
+    boxStyle.paddingWidth;
+  return Math.round((width + Number.EPSILON) * 1000) / 1000;
+};
+
+/**
+ * @private
+ */
+TableLayoutManager.prototype.getExactOffsetHeight = function (computedStyle) {
+  var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]);
+  return Math.round((height + Number.EPSILON) * 1000) / 1000;
+};
+
+/**
+ * @private
+ */
+TableLayoutManager.prototype.getExactOffsetWidth = function (computedStyle) {
+  var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]);
+  return Math.round((width + Number.EPSILON) * 1000) / 1000;
+};
+
 /**
  * @private
  */
@@ -7362,9 +7443,7 @@ TableLegacyLayoutManager.prototype.refreshTableDimensions = function () {
   this._verifyMinAndMaxWidths();
 
   // find Table's bottom slot height to use when determining if overflow if present
-  var bottomSlotHeight = (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
-                          tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) ?
-        tableBottomSlot.offsetHeight : 0;
+  var bottomSlotHeight = this._getBottomSlotHeight();
 
   var tableContainerScrollableState = this._getTableContainerScrollableState(bottomSlotHeight);
   sizingState.hasVerticalOverflow = (tableContainerScrollableState[0] === 1);
@@ -7498,12 +7577,9 @@ TableLegacyLayoutManager.prototype.refreshTableDimensions = function () {
       this._setColumnWidths(0);
     }
     // if bottom slot present, ensure bottom slot is pinned to bottom when underflow is present
-    if (bottomSlotHeight > 0) {
-      var availableHeight = tableContainer.clientHeight - bottomSlotHeight;
-      if (availableHeight !== tableElem.offsetHeight) {
-        tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
-        tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
-      }
+    if (bottomSlotHeight > 0 && tableContainerScrollableState[0] === -1) {
+      tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
+      tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
     }
   }
   if (this._table._isStatusMessageShown()) {
@@ -8231,7 +8307,6 @@ TableStickyLayoutManager.prototype.refreshTableDimensions = function () {
     this._clearColumnSizingCache();
   } else {
     if (tableUpdates.has(Table._UPDATE._ROWS_ADDED) ||
-        tableUpdates.has(Table._UPDATE._ROW_REFRESH) ||
         tableUpdates.has(Table._UPDATE._DATA_SORT)) {
       this._initializeFrozenColumns();
     }
@@ -8251,17 +8326,7 @@ TableStickyLayoutManager.prototype.refreshTableDimensions = function () {
     scrollLeft = this._table._scrollLeft;
   }
 
-  var tableBottomSlot = this._table._getTableBottomSlot();
-
-  // find Table's bottom slot height to use when determining if overflow if present
-  var bottomSlotHeight;
-  if (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
-      tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) {
-    bottomSlotHeight = tableBottomSlot.offsetHeight;
-  } else {
-    bottomSlotHeight = 0;
-  }
-
+  var bottomSlotHeight = this._getBottomSlotHeight();
   var tableContainer = this._table._getTableContainer();
   var tableElem = this._table._getTable();
 
@@ -8324,16 +8389,19 @@ TableStickyLayoutManager.prototype._initializeColumnLayouts = function () {
  * @private
  */
 TableStickyLayoutManager.prototype._setupTableHeight = function (bottomSlotHeight) {
-  var tableContainer = this._table._getTableContainer();
   var tableScroller = this._table._getTableScroller();
 
   // clear any previous table scroller styling
   tableScroller.removeAttribute(Table.DOM_ATTR._STYLE);
 
   // Size the table scroller to fit in the container height
-  var containerClientHeight = tableContainer.clientHeight;
+  var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+  var containerClientHeight = this.getExactClientHeight(containerStyle);
   var tableScrollerHeight = containerClientHeight - bottomSlotHeight;
-  if (tableScroller.offsetHeight !== tableScrollerHeight) {
+
+  var scrollerStyle = window.getComputedStyle(tableScroller);
+  var scrollerOffsetHeight = this.getExactOffsetHeight(scrollerStyle);
+  if (Math.abs(scrollerOffsetHeight - tableScrollerHeight) > Table.SIZING_ERROR_MARGIN) {
     tableScroller.style[Table.CSS_PROP._HEIGHT] = tableScrollerHeight + Table.CSS_VAL._PX;
   }
 
@@ -8482,7 +8550,7 @@ TableStickyLayoutManager.prototype._savePreferredColWidths = function () {
 /**
  * @private
  */
-TableStickyLayoutManager.prototype._initializeFrozenColumns = function () {
+TableStickyLayoutManager.prototype._initializeFrozenColumns = function (tableBodyRow) {
   var i;
   var frozenIndex;
   var frozenStartOffset;
@@ -8500,7 +8568,7 @@ TableStickyLayoutManager.prototype._initializeFrozenColumns = function () {
 
   var updateFrozenEdges = false;
   if (this._table._isDefaultSelectorEnabled()) {
-    this._applyFrozenOffset(-1, frozenStartOffset, true);
+    this._applyFrozenOffset(-1, frozenStartOffset, true, tableBodyRow);
     frozenStartOffset += this._selectorColWidth;
     updateFrozenEdges = true;
   }
@@ -8509,7 +8577,7 @@ TableStickyLayoutManager.prototype._initializeFrozenColumns = function () {
     updateFrozenEdges = true;
     for (i = 0; i < frozenStartColumns.length; i++) {
       frozenIndex = frozenStartColumns[i];
-      this._applyFrozenOffset(frozenIndex, frozenStartOffset, true);
+      this._applyFrozenOffset(frozenIndex, frozenStartOffset, true, tableBodyRow);
       frozenStartOffset += this._appliedColumnWidths[frozenIndex];
     }
   }
@@ -8519,13 +8587,13 @@ TableStickyLayoutManager.prototype._initializeFrozenColumns = function () {
     updateFrozenEdges = true;
     for (i = frozenEndColumns.length - 1; i > -1; i--) {
       frozenIndex = frozenEndColumns[i];
-      this._applyFrozenOffset(frozenIndex, frozenEndOffset, false);
+      this._applyFrozenOffset(frozenIndex, frozenEndOffset, false, tableBodyRow);
       frozenEndOffset += this._appliedColumnWidths[frozenIndex];
     }
   }
 
   if (updateFrozenEdges) {
-    this._updateFrozenEdges(this._scrollLeft, true);
+    this._updateFrozenEdges(this._scrollLeft, true, tableBodyRow);
   }
 };
 
@@ -8560,7 +8628,8 @@ TableStickyLayoutManager.prototype._getFrozenEndColumnIndexes = function () {
 /**
  * @private
  */
-TableStickyLayoutManager.prototype._applyFrozenOffset = function (columnIndex, offset, isStart) {
+TableStickyLayoutManager.prototype._applyFrozenOffset = function (columnIndex, offset, isStart,
+  targetRow) {
   var i;
   var styleProperty;
   var isRTL = (this._table._GetReadingDirection() === 'rtl');
@@ -8571,6 +8640,22 @@ TableStickyLayoutManager.prototype._applyFrozenOffset = function (columnIndex, o
   }
   var styleValue = offset + Table.CSS_VAL._PX;
 
+  // check if only a single row is being refreshed
+  if (targetRow != null) {
+    if (columnIndex === -1) {
+      var targetSelectorCell = this._table._getTableBodySelectorCell(targetRow);
+      if (targetSelectorCell != null) {
+        targetSelectorCell.style[styleProperty] = styleValue;
+      }
+    } else {
+      var targetCell = this._table._getTableBodyCell(null, columnIndex, targetRow);
+      if (targetCell != null) {
+        targetCell.style[styleProperty] = styleValue;
+      }
+    }
+    return;
+  }
+
   var tableBodyRows = this._table._getTableBodyRows();
   if (columnIndex === -1) {
     // update header cell
@@ -8615,7 +8700,7 @@ TableStickyLayoutManager.prototype._applyFrozenOffset = function (columnIndex, o
 /**
  * @private
  */
-TableStickyLayoutManager.prototype._updateFrozenEdges = function (scrollLeft, isForce) {
+TableStickyLayoutManager.prototype._updateFrozenEdges = function (scrollLeft, isForce, targetRow) {
   var i;
   var currIndex;
   var startIndex;
@@ -8638,7 +8723,7 @@ TableStickyLayoutManager.prototype._updateFrozenEdges = function (scrollLeft, is
       }
     }
   }
-  this._updateFrozenEdge(startIndex, true, isForce);
+  this._updateFrozenEdge(startIndex, true, isForce, targetRow);
 
   // update frozen end edge if present
   var scroller = this.getScroller();
@@ -8661,47 +8746,64 @@ TableStickyLayoutManager.prototype._updateFrozenEdges = function (scrollLeft, is
       }
     }
   }
-  this._updateFrozenEdge(endIndex, false, isForce);
+  this._updateFrozenEdge(endIndex, false, isForce, targetRow);
 };
 
 /**
  * @private
  */
-TableStickyLayoutManager.prototype._updateFrozenEdge = function (columnIndex, isStart, isForce) {
+TableStickyLayoutManager.prototype._updateFrozenEdge = function (columnIndex, isStart, isForce,
+  targetRow) {
   var appliedEdge = false;
   if (isStart) {
     if (this._frozenStartIndex !== columnIndex) {
       if (this._frozenStartIndex != null) {
-        this._removeFrozenEdge(this._frozenStartIndex);
+        this._removeFrozenEdge(this._frozenStartIndex, targetRow);
       }
       if (columnIndex != null) {
-        this._applyFrozenEdge(columnIndex);
+        this._applyFrozenEdge(columnIndex, targetRow);
         appliedEdge = true;
       }
       this._frozenStartIndex = columnIndex;
     }
   } else if (this._frozenEndIndex !== columnIndex) {
     if (this._frozenEndIndex != null) {
-      this._removeFrozenEdge(this._frozenEndIndex);
+      this._removeFrozenEdge(this._frozenEndIndex, targetRow);
     }
     if (columnIndex != null) {
-      this._applyFrozenEdge(columnIndex);
+      this._applyFrozenEdge(columnIndex, targetRow);
       appliedEdge = true;
     }
     this._frozenEndIndex = columnIndex;
   }
   if (isForce && !appliedEdge) {
-    this._applyFrozenEdge(columnIndex);
+    this._applyFrozenEdge(columnIndex, targetRow);
   }
 };
 
 /**
  * @private
  */
-TableStickyLayoutManager.prototype._applyFrozenEdge = function (columnIndex) {
+TableStickyLayoutManager.prototype._applyFrozenEdge = function (columnIndex, targetRow) {
   var i;
   var tableBodyRows = this._table._getTableBodyRows();
 
+  // check if only a single row is being refreshed
+  if (targetRow != null) {
+    if (columnIndex === -1) {
+      var targetSelectorCell = this._table._getTableBodySelectorCell(targetRow);
+      if (targetSelectorCell != null) {
+        targetSelectorCell.classList.add(Table.CSS_CLASSES._TABLE_FROZEN_EDGE);
+      }
+    } else {
+      var targetCell = this._table._getTableBodyCell(null, columnIndex, targetRow);
+      if (targetCell != null) {
+        targetCell.classList.add(Table.CSS_CLASSES._TABLE_FROZEN_EDGE);
+      }
+    }
+    return;
+  }
+
   if (columnIndex === -1) {
     // update header cell
     var headerSelector = this._table._getTableSelectorColumn();
@@ -8745,10 +8847,26 @@ TableStickyLayoutManager.prototype._applyFrozenEdge = function (columnIndex) {
 /**
  * @private
  */
-TableStickyLayoutManager.prototype._removeFrozenEdge = function (columnIndex) {
+TableStickyLayoutManager.prototype._removeFrozenEdge = function (columnIndex, targetRow) {
   var i;
   var tableBodyRows = this._table._getTableBodyRows();
 
+  // check if only a single row is being refreshed
+  if (targetRow != null) {
+    if (columnIndex === -1) {
+      var targetSelectorCell = this._table._getTableBodySelectorCell(targetRow);
+      if (targetSelectorCell != null) {
+        targetSelectorCell.classList.remove(Table.CSS_CLASSES._TABLE_FROZEN_EDGE);
+      }
+    } else {
+      var targetCell = this._table._getTableBodyCell(null, columnIndex, targetRow);
+      if (targetCell != null) {
+        targetCell.classList.remove(Table.CSS_CLASSES._TABLE_FROZEN_EDGE);
+      }
+    }
+    return;
+  }
+
   if (columnIndex === -1) {
     // update header cell
     var headerSelector = this._table._getTableSelectorColumn();
@@ -9069,6 +9187,17 @@ TableStickyLayoutManager.prototype._removeResizeIndicator = function () {
   });
 };
 
+/**
+ * @private
+ */
+TableStickyLayoutManager.prototype.handleRowRefresh = function (rowIdx, tableBodyRow, isRefresh) {
+  TableStickyLayoutManager.superclass.handleRowRefresh.call(this, rowIdx, tableBodyRow);
+  // apply frozen column states if refreshing a row that was already rendered
+  if (isRefresh) {
+    this._initializeFrozenColumns(tableBodyRow);
+  }
+};
+
 /**
  * Creates an accessibility-specific child DOM element that contains the
  * current context information for the Table.
@@ -9858,7 +9987,9 @@ Table.prototype._executeTableBodyRowsAdd = function (eventDetail) {
  */
 Table.prototype._getRowsFromEventDetailAdd = function (eventDetail) {
   var rowArray = [];
-  var isLoadAll = !this._isLoadMoreOnScroll();
+  var dataprovider = this._getData();
+  var isLoadAll = !this._isLoadMoreOnScroll() ||
+                  isIterateAfterDoneNotAllowed(dataprovider);
   var initialKeys = this._getLocalRowKeys();
   var initialKeyLength = initialKeys.length;
   // don't add rows if the component is empty and loadMoreOnScroll is set
@@ -9868,7 +9999,6 @@ Table.prototype._getRowsFromEventDetailAdd = function (eventDetail) {
   }
   var finalRowKeys = getAddEventKeysResult(initialKeys, eventDetail, isLoadAll);
 
-  var dataprovider = this._getData();
   var eventData = eventDetail[Table._CONST_DATA];
   var eventMetadata = eventDetail[Table._CONST_METADATA];
 
@@ -10004,7 +10134,7 @@ Table.prototype._executeTableBodyRowsChange = function (eventDetail) {
         staleRow[Table._ROW_ITEM_EXPANDO] = rows[i].row;
       }
 
-      var tableBodyRow = this._refreshTableBodyRow(row.rowIdx, row.row);
+      var tableBodyRow = this._refreshTableBodyRow(row.rowIdx, row.row, null, null, null, true);
       if (tableBodyRow) {
         updatedTableBodyRows.push(tableBodyRow);
         rowIdxArray.push(row.rowIdx);
@@ -13435,6 +13565,7 @@ Table.CSS_PROP = {
   _LEFT: 'left',
   _RIGHT: 'right',
   _PADDING_TOP: 'padding-top',
+  _PADDING_BOTTOM: 'padding-bottom',
   _PADDING_LEFT: 'padding-left',
   _PADDING_RIGHT: 'padding-right',
   _OVERFLOW: 'overflow',
@@ -13445,6 +13576,7 @@ Table.CSS_PROP = {
   _MIN_HEIGHT: 'min-height',
   _FLOAT: 'float',
   _BORDER_TOP: 'border-top',
+  _BORDER_TOP_WIDTH: 'border-top-width',
   _BORDER_BOTTOM_WIDTH: 'border-bottom-width',
   _BORDER_LEFT_WIDTH: 'border-left-width',
   _BORDER_RIGHT_WIDTH: 'border-right-width',
@@ -18630,7 +18762,7 @@ Table.prototype._selectedKeysChangedListener = function (event) {
     } else {
       let rowSelectedKeySet = this.option('selected').row;
       // header selector
-      if (!event.target.rowKey) {
+      if (event.target.rowKey == null) {
         this._setSelected({ row: new KeySetImpl(), column: new KeySetImpl() },
           false, true);
         return;
@@ -21020,8 +21152,6 @@ Table.prototype._ComponentCreate = function () {
     this._registerTouchEvents();
   }
   this._registerDomEventListeners();
-  // cache the options
-  this._cachedOptions = $.extend(true, {}, this.options);
   this._setEditableRowIdx(null);
 
   disableDefaultBrowserStyling(this.element[0]);
@@ -21260,11 +21390,48 @@ Table.prototype._NotifyContextMenuGesture = function (contextMenu, event, eventT
   this._OpenContextMenu(event, eventType, openOptions);
 };
 
+/**
+ * Sets multiple options
+ * @param {Object} options the options object
+ * @param {Object} flags additional flags for option
+ * @override
+ * @private
+ */
+// eslint-disable-next-line no-unused-vars
+Table.prototype._setOptions = function (options, flags) {
+  var requiresRefresh = false;
+  var requiresDataRefresh = false;
+  var requiresHeaderRefresh = false;
+  var keys = Object.keys(options);
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    var value = options[key];
+    if (this._isTableRefreshNeeded(key, value, flags)) {
+      if (key === 'columns' || (key === 'selectionMode' && value.row !== undefined)) {
+        requiresHeaderRefresh = true;
+      } else if (key === 'data') {
+        requiresDataRefresh = true;
+      }
+      requiresRefresh = true;
+    }
+  }
+  this._superApply(arguments);
+  if (requiresRefresh) {
+    if (requiresHeaderRefresh) {
+      this._clearCachedMetadata();
+      this._refreshTableHeader();
+    } if (requiresDataRefresh) {
+      this._beforeDataRefresh();
+    }
+    this._refresh();
+  }
+};
+
 /**
  * @override
  * @private
  */
-Table.prototype._setOption = function (key, value, subKeyValue) {
+Table.prototype._setOption = function (key, value, flags) {
   if (key === 'selection') {
     this._selectionSet = true;
     // update row index/key values in the 'selection' option
@@ -21291,31 +21458,19 @@ Table.prototype._setOption = function (key, value, subKeyValue) {
   } else if (key === 'editRow') {
     // setEditRow will update with all props within value
     this._setEditRow(value);
-  } else if (this._isStickyLayoutEnabled() && key === 'scrollPolicyOptions' &&
-             subKeyValue != null && (subKeyValue.subkey === 'scrollerOffsetTop' ||
-             subKeyValue.subkey === 'scrollerOffsetBottom' ||
-             subKeyValue.subkey === 'scrollerOffsetStart' ||
-             subKeyValue.subkey === 'scrollerOffsetEnd')) {
+  } else if (key === 'scrollPolicyOptions' && flags != null) {
     this._superApply(arguments);
-    if (subKeyValue.subkey === 'scrollerOffsetTop' ||
-        subKeyValue.subkey === 'scrollerOffsetBottom') {
-      this._styleTableContainer(this._getTableContainer());
-    } else {
-      this._getLayoutManager()._initializeFrozenColumns();
+    if (this._isStickyLayoutEnabled()) {
+      if (flags.subkey === 'scrollerOffsetTop' ||
+          flags.subkey === 'scrollerOffsetBottom') {
+        this._styleTableContainer(this._getTableContainer());
+      } else if (flags.subkey === 'scrollerOffsetStart' ||
+                 flags.subkey === 'scrollerOffsetEnd') {
+        this._getLayoutManager()._initializeFrozenColumns();
+      }
     }
   } else {
     this._superApply(arguments);
-    var shouldRefresh = this._isTableRefreshNeeded(key, value);
-    if (shouldRefresh) {
-      if (key === 'columns' ||
-        (key === 'selectionMode' && value.row !== undefined)) {
-        this._clearCachedMetadata();
-        this._refreshTableHeader();
-      } else if (key === 'data') {
-        this._beforeDataRefresh();
-      }
-      this._refresh();
-    }
   }
 };