@oracle/oraclejet 15.0.4 → 15.1.0

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

@@ -274,6 +274,10 @@ var __oj_data_grid_metadata =
               ],
               "value": "disable"
             },
+            "hidable": {
+              "type": "string",
+              "value": "disable"
+            },
             "label": {
               "type": "object",
               "properties": {
@@ -492,6 +496,10 @@ var __oj_data_grid_metadata =
         }
       }
     },
+    "hiddenColumns": {
+      "type": "object",
+      "writeback": true
+    },
     "scrollPolicy": {
       "type": "string",
       "enumValues": [
@@ -758,6 +766,9 @@ var __oj_data_grid_metadata =
         "labelFreezeRow": {
           "type": "string"
         },
+        "labelHideColumn": {
+          "type": "string"
+        },
         "labelPaste": {
           "type": "string"
         },
@@ -824,6 +835,9 @@ var __oj_data_grid_metadata =
         "labelUnfreezeRow": {
           "type": "string"
         },
+        "labelUnhideColumn": {
+          "type": "string"
+        },
         "msgFetchingData": {
           "type": "string"
         },
@@ -1042,6 +1056,8 @@ const DataGridResources = function (
   this.styles.skeletonCell = 'oj-datagrid-skeleton-cell';
   this.styles.skeleton = 'oj-datagrid-skeleton';
   this.styles.skeletonAnimation = 'oj-animation-skeleton';
+  this.styles.databodyHiddenIndicator = 'oj-datagrid-databody-hidden-indicator';
+  this.styles.headerHiddenIndicator = 'oj-datagrid-header-hidden-indicator';
 
   this.commands = {};
   this.commands.sortCol = 'oj-datagrid-sortCol';
@@ -1065,6 +1081,8 @@ const DataGridResources = function (
   this.commands.freezeRow = 'oj-datagrid-freezeRow';
   this.commands.unfreezeCol = 'oj-datagrid-unfreezeCol';
   this.commands.unfreezeRow = 'oj-datagrid-unfreezeRow';
+  this.commands.hideCol = 'oj-datagrid-hideCol';
+  this.commands.unhideCol = 'oj-datagrid-unhideCol';
 
   this.attributes = {};
   this.attributes.busyContext = Context._OJ_CONTEXT_ATTRIBUTE; // 'data-oj-context'
@@ -1080,6 +1098,7 @@ const DataGridResources = function (
   this.attributes.depth = 'data-oj-depth';
   this.attributes.level = 'data-oj-level';
   this.attributes.metadata = 'data-oj-metaData';
+  this.attributes.hiddenIndicatorIndex = 'data-oj-hiddenIndicatorIndex';
 };
 
 oj._registerLegacyNamespaceProp('DataGridResources', DataGridResources);
@@ -2426,6 +2445,29 @@ DvtDataGridOptions.prototype._getFreezeIndex = function (axis) {
   return freezeIndex;
 };
 
+/**
+ * Is hide enabled
+ * @param {string} axis - axis to check if hide enabled
+ * @return {string} enable, disable
+ */
+DvtDataGridOptions.prototype.isHideEnabled = function (axis) {
+  let isEnabled = false;
+  let hide = this.extract('header', axis, 'hidable');
+  if (hide === 'enable') {
+    isEnabled = true;
+  }
+  return isEnabled;
+};
+
+DvtDataGridOptions.prototype._getHiddenColumnIndices = function (axis) {
+  let hiddenIndices;
+
+  if (axis === 'column') {
+    hiddenIndices = this.getProperty('hiddenColumns');
+  }
+
+  return hiddenIndices;
+};
 /**
  * Get the inline style property on an object
  * @param {string} axis - axis to get style of
@@ -3189,6 +3231,10 @@ DvtDataGrid.prototype._updateDataGrid = function (option, flags) {
       obj = this.m_options._getFreezeIndex('row');
       this._updateFrozenSection(obj, 'row');
       break;
+    case 'hiddenColumns':
+      obj = this.m_options._getHiddenColumnIndices('column');
+      this._updateHiddenSection(Array.from(obj));
+      break;
     // just refresh
     default:
       return false;
@@ -4119,7 +4165,6 @@ DvtDataGrid.prototype.getDefaultColumnWidth = function () {
  * @param {string|null} key the row or column key
  * @param {string} axis row or column
  * @param {string} dimension width ro height
- * @returns {number}
  */
 DvtDataGrid.prototype._getHeaderDimension = function (elem, key, axis, dimension) {
   var value = this.m_sizingManager.getSize(axis, key);
@@ -7189,11 +7234,13 @@ DvtDataGrid.prototype.handleHeadersFetchSuccess = function (
 
   // remove fetching message
   this.m_fetching[axis] = false;
+  let hiddenColumns = this.m_hiddenColumns;
 
   var root = headerRange.header;
   var endRoot = headerRange.endHeader;
   var start = headerRange.start;
-  var count = this.getDataSource().getCount(axis);
+  // subtracting hidden columns length to render only visible columns
+  var count = this.getDataSource().getCount(axis) - hiddenColumns.length;
 
   if (axis === 'column') {
     if (this.m_frozenColIndex === null) {
@@ -7683,7 +7730,8 @@ DvtDataGrid.prototype.buildColumnHeaders = function (
   if (totalColumnWidth !== 0 && (this.m_avgColWidth === 0 || this.m_avgColWidth == null)) {
     // the average column width should only be set once, it will only change when the column width varies between columns, but
     // in such case the new average column width would not be any more precise than previous one.
-    this.m_avgColWidth = totalColumnWidth / count;
+    // Also, hidden columns are not included in calculating average column width
+    this.m_avgColWidth = totalColumnWidth / returnObj.visibleHeaderCount;
   }
 
   if (!this.m_colHeaderHeight) {
@@ -7824,7 +7872,7 @@ DvtDataGrid.prototype.buildColumnEndHeaders = function (
   if (totalColumnWidth !== 0 && (this.m_avgColWidth === 0 || this.m_avgColWidth == null)) {
     // the average column width should only be set once, it will only change when the column width varies between columns, but
     // in such case the new average column width would not be any more precise than previous one.
-    this.m_avgColWidth = totalColumnWidth / count;
+    this.m_avgColWidth = totalColumnWidth / returnObj.visibleHeaderCount;
   }
 
   if (!this.m_colEndHeaderHeight) {
@@ -8263,6 +8311,7 @@ DvtDataGrid.prototype.buildAxisHeaders = function (
   var top = 0;
   var scroller;
   var index;
+  let hiddenInRangeCount = 0;
 
   if (!returnAsFragment) {
     // if unknown count and there's no more column, mark it so we won't try to fetch again
@@ -8299,6 +8348,10 @@ DvtDataGrid.prototype.buildAxisHeaders = function (
       top = columns ? 0 : atPixel - totalHeaderDimension;
     }
 
+    if (this.isHidden(axis, index)) {
+      hiddenInRangeCount += 1;
+    }
+
     var returnVal = this.buildLevelHeaders(
       fragment,
       index,
@@ -8339,10 +8392,13 @@ DvtDataGrid.prototype.buildAxisHeaders = function (
 
   this.m_subtreeAttachedCallback(scroller);
 
+  let visibleHeaderCount = count - hiddenInRangeCount;
+
   return {
     totalHeaderDimension: totalHeaderDimension,
     totalLevelDimension: totalLevelDimension,
-    stopFetch: stopFetch
+    stopFetch: stopFetch,
+    visibleHeaderCount
   };
 };
 
@@ -8454,6 +8510,7 @@ DvtDataGrid.prototype.buildLevelHeaders = function (
   var header;
   var i;
   var returnVal;
+  let hidden;
 
   if (axis === 'row') {
     dimensionAxis = 'row';
@@ -8500,6 +8557,7 @@ DvtDataGrid.prototype.buildLevelHeaders = function (
     if (this._hasFrozenColumns() && index <= this.m_frozenColIndex && this.m_colHeaderFrozen) {
       groupingRoot = this.m_colHeaderFrozen;
     }
+    hidden = this.isHidden(axis, index);
   } else {
     dimensionAxis = 'column';
     groupingRoot = this.m_colEndHeader;
@@ -8515,6 +8573,7 @@ DvtDataGrid.prototype.buildLevelHeaders = function (
     if (this._hasFrozenColumns() && index <= this.m_frozenColIndex && this.m_colEndHeaderFrozen) {
       groupingRoot = this.m_colEndHeaderFrozen;
     }
+    hidden = this.isHidden(axis, index);
   }
 
   // get the extent info
@@ -8593,6 +8652,10 @@ DvtDataGrid.prototype.buildLevelHeaders = function (
       this.getElementDir(header, headerDimension) + totalHeaderDimensionValue,
       headerDimension
     );
+    if (header.style.display === 'none' && totalHeaderDimensionValue !== 0) {
+      header.style.display = '';
+      this.deleteAndApplyHiddenIndicators();
+    }
   } else if (patchAfter && index === start - 1) {
     // if the data source says to patch after this header
     // and the index is 1 less than what is currently in the viewport
@@ -8665,6 +8728,10 @@ DvtDataGrid.prototype.buildLevelHeaders = function (
       this.getElementDir(header, headerDimension) + totalHeaderDimensionValue,
       headerDimension
     );
+    if (header.style.display === 'none' && totalHeaderDimensionValue !== 0) {
+      header.style.display = '';
+      this.deleteAndApplyHiddenIndicators();
+    }
     this.setElementDir(header, dimensionToAdjustValue, dimensionToAdjust);
   } else {
     // get the information from the headers
@@ -8749,6 +8816,10 @@ DvtDataGrid.prototype.buildLevelHeaders = function (
 
     if (level + headerDepth === totalLevels) {
       // set the px width on the header regardless of unit type currently on it
+      if (hidden) {
+        headerDimensionValue = 0;
+        header.style.display = 'none';
+      }
       this.setElementDir(header, headerDimensionValue, headerDimension);
       totalHeaderDimensionValue += headerDimensionValue;
       headerCount += 1;
@@ -8808,6 +8879,10 @@ DvtDataGrid.prototype.buildLevelHeaders = function (
         this.setElementDir(header, dimensionToAdjustValue, dimensionToAdjust);
       }
       this.setElementDir(header, totalHeaderDimensionValue, headerDimension);
+      // if all children headers of a nested header is hidden, hide parent header too
+      if (this.isHeaderHidden(header)) {
+        header.style.display = 'none';
+      }
     }
 
     if (axis === 'columnEnd' && this.m_addBorderBottom) {
@@ -9081,9 +9156,14 @@ DvtDataGrid.prototype._getHeaderContainer = function (
   levelCount
 ) {
   var i;
+  var nonSkeletonHeaders;
   if (headers == null) {
     // eslint-disable-next-line no-param-reassign
-    headers = this._getAllNonSkeletonContainerNodes(root.firstChild);
+    nonSkeletonHeaders = Array.from(this._getAllNonSkeletonContainerNodes(root.firstChild));
+    // eslint-disable-next-line no-param-reassign
+    headers = nonSkeletonHeaders.filter(
+      (header) => !header.classList.contains(this.getMappedStyle('headerHiddenIndicator'))
+    );
     // if we are on the scroller children there is no first header so start at the first header in the list
     i = 0;
   } else {
@@ -9118,6 +9198,66 @@ DvtDataGrid.prototype._getHeaderContainer = function (
   return null;
 };
 
+DvtDataGrid.prototype._getChildElementCountByClassName = function (element, className) {
+  if (element == null) {
+    return 0;
+  }
+
+  let count = 0;
+  if (className) {
+    count += Array.from(element.children).filter((child) =>
+      this.m_utils.containsCSSClassName(child, className)
+    ).length;
+  }
+
+  return count;
+};
+
+DvtDataGrid.prototype._getHeaderPreviousSibling = function (element) {
+  if (!element || !element.previousSibling) {
+    return null;
+  }
+
+  const headerStyle = this.getMappedStyle('headercell');
+  const endHeaderStyle = this.getMappedStyle('endheadercell');
+  const groupingContainerStyle = this.getMappedStyle('groupingcontainer');
+
+  const prevSibling = element.previousSibling;
+
+  if (
+    prevSibling.classList.contains(headerStyle) ||
+    prevSibling.classList.contains(endHeaderStyle) ||
+    prevSibling.classList.contains(groupingContainerStyle)
+  ) {
+    return prevSibling;
+  }
+  return this._getHeaderPreviousSibling(prevSibling);
+};
+
+DvtDataGrid.prototype._getHeaderLastChild = function (headersContainer) {
+  let lastChild = headersContainer.lastChild;
+  const headerStyle = this.getMappedStyle('headercell');
+  const endHeaderStyle = this.getMappedStyle('endheadercell');
+  const groupingContainerStyle = this.getMappedStyle('groupingcontainer');
+
+  if (!lastChild) {
+    return null;
+  }
+
+  while (
+    lastChild &&
+    !(
+      lastChild.classList.contains(headerStyle) ||
+      lastChild.classList.contains(endHeaderStyle) ||
+      lastChild.classList.contains(groupingContainerStyle)
+    )
+  ) {
+    lastChild = lastChild.previousSibling;
+  }
+
+  return lastChild;
+};
+
 DvtDataGrid.prototype._getHeaderCellByIndex = function (index, axis, level) {
   let root;
   let totalLevels;
@@ -9212,9 +9352,12 @@ DvtDataGrid.prototype._getHeaderByIndex = function (index, level, root, totalLev
 
   // if there is only one level just get the header by index in the row ehader
   if (totalLevels === 1) {
-    var headerContent = this._getAllNonSkeletonContainerNodes(root.firstChild);
+    var headerContent = Array.from(this._getAllNonSkeletonContainerNodes(root.firstChild));
+    let allHeaders = headerContent.filter(
+      (header) => !header.classList.contains(this.getMappedStyle('headerHiddenIndicator'))
+    );
     relativeIndex = index - startIndex;
-    return headerContent[relativeIndex];
+    return allHeaders[relativeIndex];
   }
   // otherwise get the column header container
   var headerContainer = this._getHeaderContainer(index, level, 0, null, root, totalLevels);
@@ -9884,7 +10027,7 @@ DvtDataGrid.prototype.handleCellsFetchSuccess = function (cellSet, cellRange, ro
       const lastChild = this.m_databodyFrozenRow.firstChild.lastChild;
       left = this.getElementDir(lastChild, dir) + this.getElementWidth(lastChild);
     }
-    if (this.m_frozenRowIndex !== null && this.m_rowHeaderFrozen !== null) {
+    if (this._hasFrozenRows() && this.m_rowHeaderFrozen !== null) {
       this._populateFrozenContainer(
         this.m_databodyFrozenRow.firstChild,
         cellSet,
@@ -10094,6 +10237,12 @@ DvtDataGrid.prototype.handleCellsFetchSuccess = function (cellSet, cellRange, ro
     this._resetHeaderHighLight();
   }
 
+  // for the databody hidden indicator on vertical scroll for newly fetched cells
+  let databodyIndicatorIndex = this.getActiveDatabodyIndicators();
+
+  // applying visual indicator for default hidden columns
+  this.deleteAndApplyHiddenIndicators(databodyIndicatorIndex);
+
   // end fetch
   this._signalTaskEnd();
   // this.dumpRanges();
@@ -10399,6 +10548,8 @@ DvtDataGrid.prototype._addCellsToFragment = function (
 ) {
   var dir = this.getResources().isRTLMode() ? 'right' : 'left';
 
+  let hiddenItemsInRange = 0;
+
   var renderer = this.getRendererOrTemplate('cell');
   var columnBandingInterval = this.m_options.getColumnBandingInterval();
   var rowBandingInterval = this.m_options.getRowBandingInterval();
@@ -10572,6 +10723,12 @@ DvtDataGrid.prototype._addCellsToFragment = function (
             width += this._getCellDimension(cell, columnIndex, columnKey, 'column', 'width');
           }
 
+          if (this.isHidden('column', columnIndex)) {
+            width = 0;
+            cell.style.display = 'none';
+            hiddenItemsInRange += 1;
+          }
+
           // set the px width on the cell regardless of unit type currently on it
           this.setElementWidth(cell, width);
 
@@ -10646,7 +10803,7 @@ DvtDataGrid.prototype._addCellsToFragment = function (
   totalHeight = heights.reduce(function (total, num) {
     return total + num;
   }, 0);
-  var avgWidth = totalWidth / columnCount;
+  var avgWidth = totalWidth / (columnCount - hiddenItemsInRange);
   return { avgWidth: avgWidth, totalRowHeight: totalHeight, totalColumnWidth: totalWidth };
 };
 
@@ -12461,7 +12618,10 @@ DvtDataGrid.prototype._removeCellsAlongAxis = function (axis, threshold, isFromE
         axis
       );
     }
-    var dimensionValue = this._getCellDimension(null, j, key, axis, dimension);
+
+    var dimensionValue = this.isHidden(axis, j)
+      ? 0
+      : this._getCellDimension(null, j, key, axis, dimension);
     if (
       isFromEnd
         ? axisEndPixel - dimensionValue - totalDimensionChange > threshold
@@ -12478,6 +12638,10 @@ 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);
@@ -12530,7 +12694,15 @@ DvtDataGrid.prototype.removeHeadersFromStartOfContainer = function (
 ) {
   var removedHeaders = 0;
   var removedDimensionValue = 0;
-  var element = firstChild == null ? headersContainer.firstChild : firstChild.nextSibling;
+  // To make sure we don't get other children divs (like visual indicator)
+  // get elements with the header class name
+  let headerElements = Array.from(headersContainer.children).filter((element) => {
+    return (
+      this.m_utils.containsCSSClassName(element, className) ||
+      this.m_utils.containsCSSClassName(element, this.getMappedStyle('groupingcontainer'))
+    );
+  });
+  var element = firstChild == null ? headerElements[0] : firstChild.nextSibling;
 
   if (element == null) {
     return { extentChange: 0, dimensionChange: 0 };
@@ -12542,12 +12714,25 @@ DvtDataGrid.prototype.removeHeadersFromStartOfContainer = function (
 
   while (startPixel + dimensionValue < scrollPosition - threshold) {
     this._remove(element);
+    if (isHeader) {
+      const context = this.getResources().getMappedAttribute('context');
+      let axis = element[context].axis;
+      let elementIndex = element[context].index;
+      // 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));
+      }
+    }
+
+    /* eslint-disable no-loop-func */
+    headerElements.shift();
     removedDimensionValue += dimensionValue;
     removedHeaders += isHeader ? 1 : this._getAttribute(element, 'extent', true);
     // eslint-disable-next-line no-param-reassign
     startPixel += dimensionValue;
 
-    element = firstChild == null ? headersContainer.firstChild : firstChild.nextSibling;
+    element = firstChild == null ? headerElements[0] : firstChild.nextSibling;
     if (element == null) {
       return { extentChange: removedHeaders, dimensionChange: removedDimensionValue };
     }
@@ -12612,7 +12797,16 @@ DvtDataGrid.prototype.removeHeadersFromEndOfContainer = function (
 ) {
   var removedHeaders = 0;
   var removedHeadersDimension = 0;
-  var element = headersContainer.lastChild;
+  // for hidden columns, visual indicator is appended as a child to the header container, so to avoid having them as a last child,
+  // we are getting elements with the header class name
+  let headerElements = Array.from(headersContainer.children).filter((element) => {
+    return (
+      this.m_utils.containsCSSClassName(element, className) ||
+      this.m_utils.containsCSSClassName(element, this.getMappedStyle('groupingcontainer'))
+    );
+  });
+  // get the last child of all header elements.
+  let element = headerElements[headerElements.length - 1];
   var isHeader = this.m_utils.containsCSSClassName(element, className);
   var header = isHeader ? element : element.firstChild;
   var dimensionValue = this.getElementDir(header, dimension);
@@ -12620,13 +12814,23 @@ DvtDataGrid.prototype.removeHeadersFromEndOfContainer = function (
   while (endPixel - dimensionValue > threshold) {
     this._remove(element);
 
+    if (isHeader) {
+      const context = this.getResources().getMappedAttribute('context');
+      let axis = element[context].axis;
+      let elementIndex = element[context].index;
+      if (this.isHidden(axis, elementIndex)) {
+        this._remove(this.getHiddenIndicatorByIndex(elementIndex, headersContainer, true));
+      }
+    }
+    /* eslint-disable no-loop-func */
+    headerElements.pop();
     removedHeadersDimension += dimensionValue;
     removedHeaders += isHeader ? 1 : this._getAttribute(element, 'extent', true);
 
     // eslint-disable-next-line no-param-reassign
     endPixel -= dimensionValue;
 
-    element = headersContainer.lastChild;
+    element = headerElements[headerElements.length - 1];
     isHeader = this.m_utils.containsCSSClassName(element, className);
     header = isHeader ? element : element.firstChild;
     dimensionValue = this.getElementDir(header, dimension);
@@ -13122,7 +13326,9 @@ DvtDataGrid.prototype._getCellCapability = function (cell, actualCell) {
     freezeRow: disable,
     freezeCol: disable,
     unfreezeRow: disable,
-    unfreezeCol: disable
+    unfreezeCol: disable,
+    hideCol: disable,
+    unhideCol: disable
   };
 
   // if there is an actual cell that means we want the context relative to that cell,
@@ -13173,6 +13379,16 @@ DvtDataGrid.prototype._getCellCapability = function (cell, actualCell) {
     }
   }
 
+  if (this.m_options.isHideEnabled('column')) {
+    let returnObj = this._getCellHidabilityContextMenuCapability(cell);
+    if (returnObj.canHide) {
+      capabilities.hideCol = enable;
+    }
+    if (returnObj.canUnhide) {
+      capabilities.unhideCol = enable;
+    }
+  }
+
   if (this.m_options.isFreezeEnabled('row')) {
     capabilities.freezeRow = enable;
     if (cell[context].indexes.row === this.m_frozenRowIndex) {
@@ -13255,7 +13471,9 @@ DvtDataGrid.prototype._getHeaderCapability = function (header, actualCell) {
     freezeRow: disable,
     freezeCol: disable,
     unfreezeRow: disable,
-    unfreezeCol: disable
+    unfreezeCol: disable,
+    hideCol: disable,
+    unhideCol: disable
   };
 
   // if there is an actual cell that means we want the context relative to that cell,
@@ -13334,6 +13552,21 @@ DvtDataGrid.prototype._getHeaderCapability = function (header, actualCell) {
         }
       }
     }
+
+    if (this.m_options.isHideEnabled('column')) {
+      let returnObj = this._getHeaderHidabilityContextMenuCapability(header, actualCell);
+      if (returnObj.canHide) {
+        capabilities.hideCol = enable;
+      }
+      if (returnObj.canUnhide) {
+        capabilities.unhideCol = enable;
+      }
+    }
+
+    if (axis === 'row' && !actualCell) {
+      capabilities.hideCol = disable;
+      capabilities.unhideCol = disable;
+    }
   }
   capabilities.resize =
     capabilities.resizeHeight === enable || capabilities.resizeWidth === enable ? enable : disable;
@@ -13441,6 +13674,10 @@ DvtDataGrid.prototype.handleContextMenuReturn = function (event, id, value) {
     this._handleUnFreeze('column', event);
   } else if (id === this.m_resources.getMappedCommand('unfreezeRow')) {
     this._handleUnFreeze('row', event);
+  } else if (id === this.m_resources.getMappedCommand('hideCol')) {
+    this._handleHideColumn(event, target);
+  } else if (id === this.m_resources.getMappedCommand('unhideCol')) {
+    this._handleUnhideColumn(event, target);
   }
 };
 
@@ -13654,6 +13891,9 @@ DvtDataGrid.prototype.handleHeaderLabelMouseMove = function (event) {
  * @param {Event} event - mousedown event on the headers
  */
 DvtDataGrid.prototype.handleHeaderMouseDown = function (event) {
+  // removing hidden column indicator in databody after hiding a column
+  // on mousedown on headers
+  this.deleteDatabodyHiddenVisualIndicators();
   var processed;
 
   const header = this.findHeader(event.target);
@@ -13930,6 +14170,7 @@ DvtDataGrid.prototype.handleHeaderMouseUp = function (event) {
 };
 
 DvtDataGrid.prototype.handleCornerMouseDown = function (event) {
+  this.deleteDatabodyHiddenVisualIndicators();
   let target = /** @type {Element} */ (event.target);
   let end =
     this.m_utils.containsCSSClassName(target, this.getMappedStyle('rowendheaderlabel')) ||
@@ -14215,6 +14456,9 @@ DvtDataGrid.prototype._isSelectionAcrossAxis = function () {
  * @param {Event} event - mousedown event on the databody
  */
 DvtDataGrid.prototype.handleDatabodyMouseDown = function (event) {
+  // removing hidden column indicator in databody after hiding a column
+  // on mousedown elsewhere in databody
+  this.deleteDatabodyHiddenVisualIndicators();
   var target = /** @type {Element} */ (event.target);
   var cell = this.findCell(target);
   if (cell == null) {
@@ -16062,10 +16306,15 @@ DvtDataGrid.prototype._handleInsertRangeHeaderFetchSuccess = function (
 
   const dir = this.getResources().isRTLMode() ? 'right' : 'left';
   const start = headerRange.start;
+  const count = commonProps.range.count;
   const headerFragment = commonProps.headerFragment;
   const endHeaderFragment = commonProps.endHeaderFragment;
   const insertDimension = axis === 'row' ? 'top' : dir;
 
+  if (axis === 'column') {
+    this.updateHiddenColumnsForInsertion(start, count);
+  }
+
   let insertReference;
   let insertPixel;
   let headerCount;
@@ -16163,7 +16412,9 @@ DvtDataGrid.prototype._handleInsertRangeHeaderFetchSuccess = function (
       levelCount = this.m_columnEndHeaderLevelCount;
       className += ' ' + this.getMappedStyle('colendheadercell');
     }
+
     const endAxis = `${axis}End`;
+
     insertReference = this._getHeaderCellByIndex(start, endAxis, levelCount - 1);
     insertPixel = this.getElementDir(insertReference, insertDimension);
 
@@ -16544,7 +16795,7 @@ DvtDataGrid.prototype._handleInsertRangeCellFetchSuccess = function (
     }
     if (hasHeaders) {
       this.m_endRowHeader += count;
-      if (offset > this.m_frozenRowIndex + 1) {
+      if (!this._hasFrozenRows() || (this._hasFrozenRows() && offset > this.m_frozenRowIndex + 1)) {
         this.m_endRowHeaderPixel += totalDimension;
       }
       this.m_stopRowHeaderFetch = false;
@@ -16575,7 +16826,10 @@ DvtDataGrid.prototype._handleInsertRangeCellFetchSuccess = function (
     }
     if (hasHeaders) {
       this.m_endColHeader += count;
-      if (offset > this.m_frozenColIndex + 1) {
+      if (
+        !this._hasFrozenColumns() ||
+        (this._hasFrozenColumns() && offset > this.m_frozenColIndex + 1)
+      ) {
         this.m_endColHeaderPixel += totalDimension;
       }
       this.m_stopColumnHeaderFetch = false;
@@ -16599,6 +16853,9 @@ DvtDataGrid.prototype._handleInsertRangeCellFetchSuccess = function (
     this.updateColumnBanding();
   }
 
+  // this.setHiddenColumnsDisplayAndWidth();
+  this.deleteAndApplyHiddenIndicators();
+
   if (!dontModifySelection) {
     this.applySelection();
     this._resetHeaderHighLight();
@@ -17495,8 +17752,10 @@ DvtDataGrid.prototype._splitRange = function (cellSet, rowStart, rowEnd, colStar
     // eslint-disable-next-line no-param-reassign
     rowStart = this.m_frozenRowIndex + 1;
   }
+
   let frozenColExists = this.m_frozenColIndex !== null && this.m_frozenColIndex !== -1;
   let frozenRowExists = this.m_frozenRowIndex !== null && this.m_frozenRowIndex !== -1;
+
   if (
     (!frozenColExists && !frozenRowExists) ||
     ((frozenColExists || frozenRowExists) &&
@@ -17754,6 +18013,8 @@ DvtDataGrid.prototype._handleDeleteRangeEvent = function (eventDetail) {
     }
   }
 
+  this.updateHiddenColumnsForDeletion(indexes);
+
   // we want to walk indexes in order to push things up and modify their context objects
   indexes.reverse();
   // identify frozen section indexes and separate it out from regular indexes.
@@ -17941,6 +18202,8 @@ DvtDataGrid.prototype._handleDeleteRangeEvent = function (eventDetail) {
       }
     }
     this.resizeGrid();
+    // this.setHiddenColumnsDisplayAndWidth();
+    this.deleteAndApplyHiddenIndicators();
     this.m_resizeRequired = true;
     let self = this;
     Promise.resolve().then(() => {
@@ -18905,6 +19168,7 @@ DvtDataGrid.prototype._setActive = function (
         if (clearSelection && this._isSelectionEnabled()) {
           this._clearSelection(event);
         }
+        this.deleteDatabodyHiddenVisualIndicators();
         this._unhighlightActiveObject(this.m_prevActive);
         this._highlightActiveObject(this.m_active, this.m_prevActive, null, shouldNotScroll);
         this._manageMoveCursor();
@@ -19457,6 +19721,7 @@ DvtDataGrid.prototype.getHeaderCellIndex = function (header) {
   var start;
   var index;
   let frozenRoot;
+  let headerElement = header;
 
   var axis = this.getHeaderCellAxis(header);
   switch (axis) {
@@ -19506,17 +19771,25 @@ DvtDataGrid.prototype.getHeaderCellIndex = function (header) {
     index = start;
   }
 
-  while (header.previousSibling) {
+  // To get header Index, make sure we don't get other children divs (like visual indicator)
+  // check divs if they aren't hiddenIndicators by 'headerHiddenIndicator' class name
+  // eslint-disable-next-line no-param-reassign
+  headerElement = this._getHeaderPreviousSibling(headerElement);
+  while (headerElement) {
     index += 1;
     // eslint-disable-next-line no-param-reassign
-    header = header.previousSibling;
+    headerElement = this._getHeaderPreviousSibling(headerElement);
   }
+
   if (
     levelCount === 1 &&
     frozenRoot !== undefined &&
     frozenRoot.querySelector(`#${header.id}`) === null
   ) {
-    index += frozenRoot.firstChild.childElementCount;
+    index += this._getChildElementCountByClassName(
+      frozenRoot.firstChild,
+      this.getMappedStyle('headercell')
+    );
   }
 
   return index;
@@ -20602,10 +20875,12 @@ DvtDataGrid.prototype._applyBorderClassesAroundRange = function (
 
   // we use a different border for these
   let isFirstRow = rangeStartRow === 0;
-  let isFirstColumn = rangeStartColumn === 0;
+  let isFirstColumn = this.isFirstOrFirstNonHiddenIndex(rangeStartColumn);
   let startBorderRowIndex = isFirstRow ? 0 : rangeStartRow - 1;
   let endBorderRowIndex = rangeEndRow;
-  let startBorderColumnIndex = isFirstColumn ? 0 : rangeStartColumn - 1;
+  let startBorderColumnIndex = isFirstColumn
+    ? rangeStartColumn
+    : this.getVisibleCellIndexInDirection('column', rangeStartColumn - 1, { left: true });
   let endBorderColumnIndex = rangeEndColumn;
 
   for (let i = rangeStartRow; i <= rangeEndRow; i++) {
@@ -21057,6 +21332,9 @@ DvtDataGrid.prototype.handleLabelFocusChange = function (keyCode, event, isExten
           this._setActive(newElement, { type: 'label', level: level + 1, axis: axis }, event);
         } else if (level === levelCount - 1) {
           newIndex = axis === 'row' ? this.m_startColHeader : this.m_endColHeader;
+          while (this.isHidden('column', newIndex)) {
+            newIndex = axis === 'row' ? newIndex + 1 : newIndex - 1;
+          }
           newElement = this._getHeaderCellByIndex(
             newIndex,
             'column',
@@ -21082,7 +21360,19 @@ DvtDataGrid.prototype.handleLabelFocusChange = function (keyCode, event, isExten
         }
       }
       if (axis === 'column' || axis === 'columnEnd') {
-        newElement = this._getHeaderCellByIndex(start, axis, level);
+        newIndex = start;
+        newElement = this._getHeaderCellByIndex(newIndex, axis, level);
+        // iterate through headers to find the visible element to focus
+
+        while (newElement && this.isHeaderHidden(newElement)) {
+          newIndex =
+            level !== levelCount - 1
+              ? this._getAttribute(newElement.parentNode, 'start', true) +
+                this._getAttribute(newElement.parentNode, 'extent', true)
+              : newIndex + 1;
+          newElement = this._getHeaderCellByIndex(newIndex, axis, level);
+        }
+
         if (this._isSelectionEnabled() && !this.m_discontiguousSelection) {
           // unhighlight and clear selection
           this._clearSelection(event);
@@ -21138,6 +21428,7 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
   var levelCount;
   var stopFetch;
   let start;
+  let root;
 
   let emptyElement = this._getEmptyElement();
 
@@ -21198,6 +21489,7 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
   }
 
   if (axis === 'column') {
+    root = this.m_colHeader;
     end = this.m_endColHeader;
     levelCount = this.m_columnHeaderLevelCount;
     stopFetch = this.m_stopColumnHeaderFetch;
@@ -21217,6 +21509,7 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
       // eslint-disable-next-line no-param-reassign
       keyCode = this.keyCodes.DOWN_KEY;
     }
+    root = this.m_colEndHeader;
     end = this.m_endColEndHeader;
     levelCount = this.m_columnEndHeaderLevelCount;
     stopFetch = this.m_stopColumnEndHeaderFetch;
@@ -21278,7 +21571,7 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
   switch (keyCode) {
     case this.keyCodes.LEFT_KEY:
       if (axis === 'column' || axis === 'columnEnd') {
-        if (index > 0) {
+        if (index > 0 && !this.isFirstOrFirstNonHiddenIndex(index)) {
           if (jumpToHeaders && this.m_headerLabels[axis][level]) {
             this._setActive(
               this.m_headerLabels[axis][level],
@@ -21307,24 +21600,30 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
             );
             break;
           }
-          if (levelCount === 1) {
-            newIndex = index - 1;
-            newElement = elem != null ? elem.previousSibling : null;
-            if (elem.previousSibling === null && this._hasFrozenColumns()) {
-              newElement = this._getHeaderCellByIndex(index - 1, axis, level);
-            }
-            newLevel = level;
-          } else {
-            newElement = this._getHeaderCellByIndex(index - 1, axis, level);
-            newIndex =
-              newElement != null
-                ? this._getAttribute(newElement.parentNode, 'start', true)
-                : index - 1;
-            newLevel = newElement != null ? this.getHeaderCellLevel(newElement) : level;
-            if (newIndex < 0) {
-              break;
-            }
+
+          newElement = this._getHeaderByIndex(index - 1, level, root, levelCount, start);
+          newIndex =
+            newElement != null && level !== levelCount - 1
+              ? this._getAttribute(newElement.parentNode, 'start', true) -
+                this._getAttribute(newElement.parentNode, 'extent', true)
+              : index - 1;
+          // iterate through headers to find the visible element to focus
+          let i = 1;
+          while (this.isHeaderHidden(newElement)) {
+            newIndex = index - 1 - i;
+            newElement = this._getHeaderByIndex(newIndex, level, root, levelCount, start);
+            i += 1;
           }
+          newIndex =
+            newElement != null && level !== levelCount - 1
+              ? this._getAttribute(newElement.parentNode, 'start', true)
+              : newIndex;
+
+          newLevel = newElement != null ? this.getHeaderCellLevel(newElement) : level;
+          if (newIndex < 0) {
+            break;
+          }
+
           if (isExtend) {
             this.extendSelectionHeader(newElement, event, true);
           } else if (newIndex < start) {
@@ -21526,12 +21825,30 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
           } else if (emptyElement) {
             this._setActive(emptyElement, { type: 'empty' }, event, true);
           } else {
+            let lastVisibleIndex;
+            let firstVisibleIndex;
+
             if (axis === 'row') {
-              newCellIndex = this.createIndex(index, 0);
+              // gets the first visible cell of the current row
+              for (let i = 0; i <= this.getDataSource().getCount('column') - 1; i++) {
+                if (!this.isHidden('column', i)) {
+                  firstVisibleIndex = i;
+                  break;
+                }
+              }
+              newCellIndex = this.createIndex(index, firstVisibleIndex);
             } else if (this._isHighWatermarkScrolling()) {
-              newCellIndex = this.createIndex(index, this.m_endCol);
+              lastVisibleIndex = this.getVisibleCellIndexInDirection('column', this.m_endCol, {
+                left: true
+              });
+              newCellIndex = this.createIndex(index, lastVisibleIndex);
             } else {
-              newCellIndex = this.createIndex(index, this.getDataSource().getCount('column') - 1);
+              lastVisibleIndex = this.getVisibleCellIndexInDirection(
+                'column',
+                this.getDataSource().getCount('column') - 1,
+                { left: true }
+              );
+              newCellIndex = this.createIndex(index, lastVisibleIndex);
             }
             if (this._isSelectionEnabled()) {
               this.selectAndFocus(newCellIndex, event);
@@ -21583,26 +21900,23 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
           event
         );
       } else {
-        if (levelCount === 1) {
-          newIndex = index + 1;
-          newElement = elem != null ? elem.nextSibling : null;
-          if (elem.nextSibling === null && this._hasFrozenColumns()) {
-            newElement = this._getHeaderCellByIndex(newIndex, axis, level);
-          }
-          newLevel = level;
-        } else {
-          if (level === levelCount - 1) {
-            newIndex = index + 1;
-          } else {
-            newIndex =
-              elem != null
-                ? this._getAttribute(elem.parentNode, 'start', true) +
-                  this._getAttribute(elem.parentNode, 'extent', true)
-                : index + 1;
-          }
+        newIndex =
+          elem != null && level !== levelCount - 1
+            ? this._getAttribute(elem.parentNode, 'start', true) +
+              this._getAttribute(elem.parentNode, 'extent', true)
+            : index + 1;
+        newElement = this._getHeaderCellByIndex(newIndex, axis, level);
+
+        // iterate through headers to find the visible element to focus
+        while (newElement && this.isHeaderHidden(newElement)) {
+          newIndex =
+            level !== levelCount - 1
+              ? this._getAttribute(newElement.parentNode, 'start', true) +
+                this._getAttribute(newElement.parentNode, 'extent', true)
+              : newIndex + 1;
           newElement = this._getHeaderCellByIndex(newIndex, axis, level);
-          newLevel = newElement != null ? this.getHeaderCellLevel(newElement) : level;
         }
+        newLevel = newElement != null ? this.getHeaderCellLevel(newElement) : level;
 
         if (
           !(newIndex > end && stopFetch) &&
@@ -21931,7 +22245,8 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
             }
           }
         } else {
-          // moving down a level in the header
+          // moving down a level in the header, get the visible cell index to focus
+          index = this.getVisibleCellIndexInDirection('column', index, { down: true });
           newElement = this._getHeaderCellByIndex(index, axis, level + depth);
           newIndex = this._getAttribute(newElement.parentNode, 'start', true);
           newLevel = this.getHeaderCellLevel(newElement);
@@ -22053,22 +22368,45 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
       break;
     case this.keyCodes.HOME_KEY:
       if (axis === 'column' || axis === 'columnEnd') {
-        // selects the first cell of the current row
-        elem = this._getHeaderCellByIndex(0, axis, level);
-        this._setActive(elem, { type: 'header', index: 0, level: level, axis: axis }, event);
+        let firstVisibleIndex;
+        // gets the first visible cell of the current row
+        for (let i = 0; i <= index; i++) {
+          if (!this.isHidden(axis, i)) {
+            firstVisibleIndex = i;
+            break;
+          }
+        }
+        elem = this._getHeaderCellByIndex(firstVisibleIndex, axis, level);
+        this._setActive(
+          elem,
+          { type: 'header', index: firstVisibleIndex, level: level, axis: axis },
+          event
+        );
       }
       break;
     case this.keyCodes.END_KEY:
       if (axis === 'column' || axis === 'columnEnd') {
+        let lastColIndex;
         // selects the last cell of the current row
         if (!this._isCountUnknown('column') && !this._isHighWatermarkScrolling()) {
-          index = Math.max(0, this.getDataSource().getCount('column') - 1);
+          lastColIndex = Math.max(0, this.getDataSource().getCount('column') - 1);
         } else {
-          index = Math.max(0, end);
+          lastColIndex = Math.max(0, end);
+        }
+        // Check to get last visible index to focus on END keydown
+        for (let i = lastColIndex; i >= index; i--) {
+          if (!this.isHidden(axis, i)) {
+            lastColIndex = i;
+            break;
+          }
         }
         // selects the first cell of the current row
-        elem = this._getHeaderCellByIndex(index, axis, level);
-        this._setActive(elem, { type: 'header', index: index, level: level, axis: axis }, event);
+        elem = this._getHeaderCellByIndex(lastColIndex, axis, level);
+        this._setActive(
+          elem,
+          { type: 'header', index: lastColIndex, level: level, axis: axis },
+          event
+        );
       }
       break;
     default:
@@ -22260,12 +22598,23 @@ DvtDataGrid.prototype._isNeighborCellEmpty = function (cell, axis) {
   let columnIndex = this._getIndex(cell, 'column');
 
   if (axis === 'row') {
-    let previousCell = this._getCellByIndex({ row: rowIndex, column: columnIndex - 1 });
-    let nextCell = this._getCellByIndex({ row: rowIndex, column: columnIndex + 1 });
+    let prevColIndex = this.getVisibleCellIndexInDirection('column', columnIndex - 1, {
+      left: true
+    });
+    let nextColIndex = this.getVisibleCellIndexInDirection('column', columnIndex + 1, {
+      right: true
+    });
+    let previousCell = this._getCellByIndex({ row: rowIndex, column: prevColIndex });
+    let nextCell = this._getCellByIndex({ row: rowIndex, column: nextColIndex });
 
+    // On Ctrl arrow,
+    // to focus neighbor cell of empty cell, we are checking
+    // if current index prev/next cell is empty and current index cell not empty
+    // Also, if there are any empty hidden columns, we are not following Ctrl + Arrow behavior
     if (
       (this._isChildEmpty(previousCell) || this._isChildEmpty(nextCell)) &&
-      !this._isChildEmpty(cell)
+      !this._isChildEmpty(cell) &&
+      !this.isHidden('column', columnIndex)
     ) {
       return true;
     }
@@ -22637,8 +22986,45 @@ DvtDataGrid.prototype.handleFocusChange = function (
           } else if (column - 1 < this.m_startCol) {
             this._scrollSkeletonCellsIntoViewport(row, column, 'column', false);
           } else {
-            newCellIndex = this.createIndex(this.m_trueIndex.row, column - 1);
-            focusFunc(newCellIndex, event);
+            let visibleColumnIndex = column - 1;
+            let rowStartHeader = false;
+            while (this.isHidden('column', visibleColumnIndex)) {
+              if (visibleColumnIndex === 0) {
+                visibleColumnIndex = this.getVisibleCellIndexInDirection(
+                  'column',
+                  visibleColumnIndex,
+                  {
+                    right: true
+                  }
+                );
+                rowStartHeader = true;
+                break;
+              }
+              visibleColumnIndex -= 1;
+            }
+            if (rowStartHeader && changeRegions) {
+              header = this._getHeaderByIndex(
+                this.m_trueIndex.row,
+                this.m_rowHeaderLevelCount - 1,
+                this.m_rowHeader,
+                this.m_rowHeaderLevelCount,
+                this.m_startRowHeader
+              );
+              this._setActive(
+                header,
+                {
+                  type: 'header',
+                  index: this.m_trueIndex.row,
+                  level: this.m_rowHeaderLevelCount - 1,
+                  axis: 'row'
+                },
+                event,
+                true
+              );
+            } else {
+              newCellIndex = this.createIndex(this.m_trueIndex.row, visibleColumnIndex);
+              focusFunc(newCellIndex, event);
+            }
           }
 
           // announce to screen reader that we have reached first column
@@ -22731,8 +23117,45 @@ DvtDataGrid.prototype.handleFocusChange = function (
             newCellIndex = this.createIndex(row, column + 1);
             this.extendSelection(newCellIndex, event, keyCode);
           } else {
-            newCellIndex = this.createIndex(this.m_trueIndex.row, column + columnExtent);
-            focusFunc(newCellIndex, event);
+            let visibleColumnIndex = column + columnExtent;
+            let rowEndHeader = false;
+            while (this.isHidden('column', visibleColumnIndex)) {
+              if (this._isLastColumn(visibleColumnIndex)) {
+                visibleColumnIndex = this.getVisibleCellIndexInDirection(
+                  'column',
+                  visibleColumnIndex,
+                  {
+                    left: true
+                  }
+                );
+                rowEndHeader = true;
+                break;
+              }
+              visibleColumnIndex += 1;
+            }
+            if (rowEndHeader && this.m_endRowEndHeader !== -1) {
+              header = this._getHeaderByIndex(
+                this.m_trueIndex.row,
+                this.m_rowEndHeaderLevelCount - 1,
+                this.m_rowEndHeader,
+                this.m_rowEndHeaderLevelCount,
+                this.m_startRowEndHeader
+              );
+              this._setActive(
+                header,
+                {
+                  type: 'header',
+                  index: this.m_trueIndex.row,
+                  level: this.m_rowEndHeaderLevelCount - 1,
+                  axis: 'rowEnd'
+                },
+                event,
+                true
+              );
+            } else {
+              newCellIndex = this.createIndex(this.m_trueIndex.row, visibleColumnIndex);
+              focusFunc(newCellIndex, event);
+            }
           }
 
           // announce to screen reader that we have reached last column
@@ -22942,47 +23365,69 @@ DvtDataGrid.prototype.handleFocusChange = function (
         focusFunc(currentCellIndex, event);
       }
       break;
-    case this.keyCodes.HOME_KEY:
+    case this.keyCodes.HOME_KEY: {
+      let rowIndex = 0;
+      let colIndex = 0;
+      // Check to get first visible index to focus on HOME keydown
+      for (let i = 0; i <= column; i++) {
+        if (!this.isHidden('column', i)) {
+          colIndex = i;
+          break;
+        }
+      }
+
       if (cellExtreme) {
-        var firstCellIndex = this.createIndex(0, 0);
+        var firstCellIndex = this.createIndex(rowIndex, colIndex);
         focusFunc(firstCellIndex, event);
       } else {
         if (!this.m_trueIndex.row) {
           this.m_trueIndex = { row: row };
         }
         // selects the first cell of the current row
-        newCellIndex = this.createIndex(this.m_trueIndex.row, 0);
+        newCellIndex = this.createIndex(this.m_trueIndex.row, colIndex);
         focusFunc(newCellIndex, event);
       }
       break;
-    case this.keyCodes.END_KEY:
+    }
+    case this.keyCodes.END_KEY: {
       if (!this.m_trueIndex.row) {
         this.m_trueIndex = { row: row, column: column };
       }
+      let lastColIndex;
+      if (!this._isCountUnknown('column') && !this._isHighWatermarkScrolling()) {
+        lastColIndex = Math.max(0, this.getDataSource().getCount('column') - 1);
+      } else {
+        lastColIndex = Math.max(0, this.m_endCol);
+      }
+      // Check to get last visible index to focus on END keydown
+      for (let i = lastColIndex; i >= column; i--) {
+        if (!this.isHidden('column', i)) {
+          lastColIndex = i;
+          break;
+        }
+      }
       if (cellExtreme) {
         let lastCellIndex;
         if (!this._isCountUnknown('column') && !this._isHighWatermarkScrolling()) {
           lastCellIndex = this.createIndex(
             Math.max(0, this.getDataSource().getCount('row') - 1),
-            Math.max(0, this.getDataSource().getCount('column') - 1)
+            lastColIndex
           );
         } else {
-          lastCellIndex = this.createIndex(Math.max(0, this.m_endRow), Math.max(0, this.m_endCol));
+          lastCellIndex = this.createIndex(Math.max(0, this.m_endRow), lastColIndex);
         }
         focusFunc(lastCellIndex, event);
       } else {
         // selects the last cell of the current row
         if (!this._isCountUnknown('column') && !this._isHighWatermarkScrolling()) {
-          newCellIndex = this.createIndex(
-            this.m_trueIndex.row,
-            Math.max(0, this.getDataSource().getCount('column') - 1)
-          );
+          newCellIndex = this.createIndex(this.m_trueIndex.row, lastColIndex);
         } else {
-          newCellIndex = this.createIndex(this.m_trueIndex.row, Math.max(0, this.m_endCol));
+          newCellIndex = this.createIndex(this.m_trueIndex.row, Math.max(0, lastColIndex));
         }
         focusFunc(newCellIndex, event);
       }
       break;
+    }
     case this.keyCodes.PAGEUP_KEY:
       if (!this.m_trueIndex.column) {
         this.m_trueIndex = { column: column };
@@ -23100,10 +23545,17 @@ DvtDataGrid.prototype.scrollToIndex = function (index, ignoreHighlight, scrollTo
     // approximate scroll position
     if (column < this.m_startCol || column > this.m_endCol) {
       var scrollLeft;
+      let hiddenColumnsInDirection;
+      let hiddenLength;
       if (column < this.m_startCol) {
-        scrollLeft = this.m_avgColWidth * column;
+        hiddenColumnsInDirection = this.hiddenColumnsInDirection(column, { left: true });
+        hiddenLength = hiddenColumnsInDirection.length;
+        scrollLeft = this.m_avgColWidth * (column - hiddenLength);
       } else {
-        scrollLeft = this.m_avgColWidth * (column + 1) - viewportRight + viewportLeft;
+        hiddenColumnsInDirection = this.hiddenColumnsInDirection(column, { right: true });
+        hiddenLength = hiddenColumnsInDirection.length;
+        scrollLeft =
+          this.m_avgColWidth * (column - hiddenLength + 1) - viewportRight + viewportLeft;
       }
       deltaX = this.m_currentScrollLeft - scrollLeft;
 
@@ -24262,7 +24714,9 @@ DvtDataGrid.prototype.handleRootFocus = function (event, isPopupFocusin) {
         // no data slot
         this._setActive(emptyElement, { type: 'empty' }, event, null, null, shouldNotScroll, true);
       } else if (this.m_active == null && !this._databodyEmpty()) {
-        var newCellIndex = this.createIndex(0, 0);
+        var newCellIndex;
+        let firstVisibleColumn = this.getVisibleCellIndexInDirection('column', 0, { right: true });
+        newCellIndex = this.createIndex(0, firstVisibleColumn);
 
         if (!shouldNotScroll) {
           // make sure it's visible
@@ -25995,10 +26449,19 @@ DvtDataGrid.prototype._resizeSelectedHeaders = function (
   }
   if (selectedHeaders && selectedHeaders.length) {
     for (let i = 0; i < selectedHeaders.length; i++) {
+      let currentHeaderContext =
+        selectedHeaders[i][this.getResources().getMappedAttribute('context')];
+      let currentHeaderIndex = currentHeaderContext.index;
       if (resizingElement !== selectedHeaders[i]) {
         this.m_resizingElement = selectedHeaders[i];
         if (resizeHeaderMode === 'column') {
-          this.resizeColWidth(this.getElementDir(selectedHeaders[i], 'width'), newWidth);
+          if (this.isHidden('column', currentHeaderIndex)) {
+            let currentHeaderKey = currentHeaderContext.key;
+            this.m_sizingManager.setSize('column', currentHeaderKey, newWidth);
+            this.resizeColWidth(this.getElementDir(selectedHeaders[i], 'width'), 0);
+          } else {
+            this.resizeColWidth(this.getElementDir(selectedHeaders[i], 'width'), newWidth);
+          }
         } else {
           this.resizeRowHeight(this.getElementDir(selectedHeaders[i], 'height'), newHeight);
         }
@@ -26132,7 +26595,8 @@ DvtDataGrid.prototype.manageHeaderCursor = function (event, isLabel) {
     widthResizable = this._isDOMElementResizable(elem);
     // previous is the previous index same level
     if (!isLabel) {
-      sibling = this._getHeaderCellByIndex(index - 1, 'column', level);
+      let previousIndex = this.getVisibleCellIndexInDirection('column', index - 1, { left: true });
+      sibling = this._getHeaderCellByIndex(previousIndex, 'column', level);
       if (!sibling) {
         if (this.m_headerLabels.column.length) {
           sibling = this._getLabel('column', level);
@@ -26179,7 +26643,8 @@ DvtDataGrid.prototype.manageHeaderCursor = function (event, isLabel) {
     widthResizable = this._isDOMElementResizable(elem);
     // previous is the previous index same level
     if (!isLabel) {
-      sibling = this._getHeaderCellByIndex(index - 1, 'columnEnd', level);
+      let previousIndex = this.getVisibleCellIndexInDirection('column', index - 1, { left: true });
+      sibling = this._getHeaderCellByIndex(previousIndex, 'columnEnd', level);
       if (!sibling) {
         sibling = this._getLabel('columnEnd', level);
       }
@@ -26450,6 +26915,7 @@ DvtDataGrid.prototype.resizeColWidth = function (oldElementWidth, newElementWidt
 
     // helper to update all elements this effects
     this.resizeColumnWidthAndShift(widthChange);
+    this.deleteAndApplyHiddenIndicators();
     if (!isFrozenSectionResize) {
       this.m_endColPixel += widthChange;
       this.m_endColHeaderPixel += widthChange;
@@ -26562,6 +27028,7 @@ DvtDataGrid.prototype.resizeColHeight = function (newElementHeight, heightChange
       adjustLabel = false;
     }
     this.resizeColumnHeightsAndShift(heightChange, level, end, adjustLabel);
+    this.deleteAndApplyHiddenIndicators();
 
     if (!end) {
       this.m_colHeaderHeight += heightChange;
@@ -27064,8 +27531,12 @@ DvtDataGrid.prototype._getMinValue = function (dimension, axis, isHeaderLabel) {
 
   if (axis === 'column') {
     if (dimension === 'width') {
+      let visibleInnerIndex = index + (extent - 1);
+      while (this.isHidden('column', visibleInnerIndex)) {
+        visibleInnerIndex -= 1;
+      }
       inner = this._getHeaderCellByIndex(
-        index + (extent - 1),
+        visibleInnerIndex,
         axis,
         this.m_columnHeaderLevelCount - 1
       );
@@ -27412,6 +27883,9 @@ DvtDataGrid.prototype.resizeColumnWidthAndShift = function (widthChange) {
   ) {
     // has children
     index += this._getAttribute(this.m_resizingElement.parentNode, 'extent', true) - 1;
+    while (this.isHidden('column', index)) {
+      index -= 1;
+    }
   }
 
   var rangeIndex = this.createIndex(-1, index);
@@ -27494,7 +27968,8 @@ DvtDataGrid.prototype._shiftCellsAlongAxis = function (
   startAxisChange,
   shiftOnly,
   endAxisChange,
-  corner
+  corner,
+  forHideShow
 ) {
   var tempArray = [];
   var dimension;
@@ -27556,6 +28031,14 @@ DvtDataGrid.prototype._shiftCellsAlongAxis = function (
             axisExtent - extentWithinCellToIgnore
           );
         } else {
+          if (forHideShow) {
+            if (this.isHidden(axis, startAxisChange)) {
+              cell.style.display = 'none';
+            } else {
+              cell.style.display = '';
+            }
+          }
+
           this._updateTempArray(
             tempArray,
             true,
@@ -27605,7 +28088,8 @@ DvtDataGrid.prototype._shiftFrozenCellsAlongAxis = function (
   axis,
   dimensionDelta,
   startAxisChange,
-  shiftOnly
+  shiftOnly,
+  forHideShow
 ) {
   const tempArray = [];
   let dir;
@@ -27651,6 +28135,14 @@ DvtDataGrid.prototype._shiftFrozenCellsAlongAxis = function (
           axisExtent - extentWithinCellToIgnore
         );
       } else {
+        if (forHideShow) {
+          if (this.isHidden(axis, startAxisChange)) {
+            cell.style.display = 'none';
+          } else {
+            cell.style.display = '';
+          }
+        }
+
         this._updateTempArray(
           tempArray,
           true,
@@ -27800,7 +28292,8 @@ DvtDataGrid.prototype._shiftHeadersAlongAxisInContainer = function (
   dimensionChange,
   dir,
   className,
-  axis
+  axis,
+  forHideShow
 ) {
   var header;
   var groupingContainer;
@@ -27809,7 +28302,7 @@ DvtDataGrid.prototype._shiftHeadersAlongAxisInContainer = function (
   var newVal = 0;
 
   // get the last element in the container
-  var element = headersContainer.lastChild;
+  var element = this._getHeaderLastChild(headersContainer);
   if (element == null) {
     return;
   }
@@ -27834,7 +28327,7 @@ DvtDataGrid.prototype._shiftHeadersAlongAxisInContainer = function (
       newStart = this.getElementDir(header, dir) + dimensionChange;
       this.setElementDir(header, newStart, dir);
 
-      element = element.previousSibling;
+      element = this._getHeaderPreviousSibling(element);
       isHeader = this.m_utils.containsCSSClassName(element, className);
       groupingContainer = element.parentNode;
       header = element;
@@ -27847,13 +28340,14 @@ DvtDataGrid.prototype._shiftHeadersAlongAxisInContainer = function (
         this.setElementDir(headers[i], newStart, dir);
       }
 
-      element = element.previousSibling;
+      element = this._getHeaderPreviousSibling(element);
       isHeader = this.m_utils.containsCSSClassName(element, className);
       groupingContainer = element;
       header = element.firstChild;
       headerStart = this._getAttribute(groupingContainer, 'start', true);
     }
   }
+
   var resizingElementLevel;
   if (this.m_resizingElement) {
     resizingElementLevel = this.getHeaderCellLevel(this.m_resizingElement);
@@ -27870,7 +28364,15 @@ DvtDataGrid.prototype._shiftHeadersAlongAxisInContainer = function (
     this.setElementDir(header, newStart, dir);
   }
 
-  if (axis === 'row' || axis === 'column') {
+  if (forHideShow && axis === 'column') {
+    if (this.isHeaderHidden(header)) {
+      header.style.display = 'none';
+    } else {
+      header.style.display = '';
+    }
+  }
+
+  if ((axis === 'row' || axis === 'column') && !forHideShow) {
     let resizeClass = this.getResources().isRTLMode() ? ['startResized'] : ['endResized'];
     let classArray = axis === 'row' ? ['bottomResized'] : resizeClass;
     if (
@@ -27889,10 +28391,24 @@ DvtDataGrid.prototype._shiftHeadersAlongAxisInContainer = function (
   // if we aren't innermost then repeat for its children
   if (!isHeader && header.nextSibling != null) {
     // has children
-    this._shiftHeadersAlongAxisInContainer(element, index, dimensionChange, dir, className, axis);
-  } else if (axis != null) {
+    this._shiftHeadersAlongAxisInContainer(
+      element,
+      index,
+      dimensionChange,
+      dir,
+      className,
+      axis,
+      forHideShow
+    );
+  } else if (axis != null && !forHideShow) {
     // store the width/height change in the sizing manager, only care about innermost
-    this.m_sizingManager.setSize(axis, this._getKey(header), newVal);
+    if (axis === 'column') {
+      if (!this.isHidden('column', index)) {
+        this.m_sizingManager.setSize(axis, this._getKey(header), newVal);
+      }
+    } else {
+      this.m_sizingManager.setSize(axis, this._getKey(header), newVal);
+    }
   }
 };
 
@@ -28619,18 +29135,20 @@ DvtDataGrid.prototype.handleResizeFitToContent = function (event, target, resize
         this.m_columnEndHeaderLevelCount - 1
       );
     }
-    let rangeIndex = this.createIndex(-1, index);
-    cells = this.getElementsInRange(this.createRange(rangeIndex, rangeIndex));
-    cells.push(header);
+    if (!this.isHidden('column', index)) {
+      let rangeIndex = this.createIndex(-1, index);
+      cells = this.getElementsInRange(this.createRange(rangeIndex, rangeIndex));
+      cells.push(header);
 
-    oldElementWidth = this.calculateColumnHeaderWidth(this.m_resizingElement);
-    oldElementHeight = this.getElementHeight(this.m_resizingElement);
-    newElementWidth = this._calculateResizeFitToContentValue(cells, 'column');
-    newElementHeight = oldElementHeight;
-    size = newElementWidth;
-    fireEvent = oldElementWidth !== newElementWidth;
+      oldElementWidth = this.calculateColumnHeaderWidth(this.m_resizingElement);
+      oldElementHeight = this.getElementHeight(this.m_resizingElement);
+      newElementWidth = this._calculateResizeFitToContentValue(cells, 'column');
+      newElementHeight = oldElementHeight;
+      size = newElementWidth;
+      fireEvent = oldElementWidth !== newElementWidth;
 
-    this.resizeColWidth(oldElementWidth, newElementWidth);
+      this.resizeColWidth(oldElementWidth, newElementWidth);
+    }
   } else if (axis === 'row' || axis === 'rowEnd') {
     let index = headerCell
       ? this._getResizeNestedHeaderIndex(axis, endHeaderCell)
@@ -30742,7 +31260,6 @@ DvtDataGrid.prototype.selectAndFocus = function (index, event, augment) {
     // eslint-disable-next-line no-param-reassign
     augment = false;
   }
-
   // reset any focus properties set on frontier cell
   this._resetSelectionFrontierFocus();
 
@@ -33536,6 +34053,7 @@ function DataGridProviderDataGridDataSourceKeyMap() {
   };
 }
 
+// import { ImmutableKeySet } from 'ojs/ojkeyset';
 // import { DataGridProvider } from 'ojs/ojdatagridprovider';
 
 /**
@@ -33548,6 +34066,7 @@ function DataGridProviderDataGridDataSourceKeyMap() {
  * @ojshortdesc A data grid displays data in a cell oriented grid.
  * @ojtsimport {module: "ojdatagridprovider", type: "AMD", imported: ["DataGridProvider","GridBodyItem", "GridHeaderItem", "GridItem"]}
  * @ojtsimport {module: "ojdataprovider", type: "AMD", imported: ["DataProvider"]}
+ * @ojtsimport {module: "ojkeyset", type: "AMD", imported: ["ImmutableKeySet"]}
  * @ojsignature [{
  *                target: "Type",
  *                value: "class ojDataGrid<K, D> extends baseComponent<ojDataGridSettableProperties<K,D>>",
@@ -33885,6 +34404,14 @@ function DataGridProviderDataGridDataSourceKeyMap() {
  *       <td><kbd>Unfreeze Rows</kbd></td>
  *       <td>oj-datagrid-unfreezeRow</td>
  *     </tr>
+ *     <tr>
+ *     <td><kbd>Hide Columns</kbd></td>
+ *     <td>oj-datagrid-hideCol</td>
+ *     </tr>
+ *     <tr>
+ *     <td><kbd>Unhide Columns</kbd></td>
+ *     <td>oj-datagrid-unhideCol</td>
+ *     </tr>
  * </tbody></table>
  */
 //-----------------------------------------------------
@@ -35833,6 +36360,27 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
      */
     selection: [],
 
+    /**
+     * <p> An <a href="ImmutableKeySet.html#ImmutableSet<V>">immutable Set</a> of zero based indexes used to define columns as hidden by default. This property will be updated when the end user shows/hides columns via the context menu.
+     * Enable end user show/hide via the header.column.hidable property.
+     * Note: When initializing hiddenColumns set, it is not recommended to hide all columns.
+     *
+     * @example <caption>Initialize the DataGrid with the <code class="prettyprint">hidden-columns</code> attribute:</caption>
+     * Assign values with type Set
+     * @expose
+     * @name hiddenColumns
+     * @memberof oj.ojDataGrid
+     * @instance
+     * @type {Object}
+     * @ojwriteback
+     * @ojshortdesc Use to hide columns of grid on initial render.
+     * @ojsignature {target: "Type",
+     *               value: "ImmutableKeySet.ImmutableSet<number>",
+     *               jsdocOverride: true}
+     *
+     */
+    hiddenColumns: new Set([]),
+
     /**
      * <p>The cell that currently have keyboard focus.  Note that if the current cell
      * is set to an item that is currently not available (not fetched in high-water mark scrolling case or
@@ -36724,6 +37272,40 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
          * myDataGrid.header.column.style = 'myStyle';
          */
         style: null,
+        /**
+         * <p>Enables or disables hide and show end user functionality on the datagrid columns using
+         * <code class="prettyprint">enable</code>
+         * or <code class="prettyprint">disable</code>.
+         * See hidden-columns for tracking the current hidden state.
+         * Note: It's not recommeneded to hide all columns via any interactions.
+         *
+         * @expose
+         * @name header.column.hidable
+         * @instance
+         * @memberof! oj.ojDataGrid
+         * @type {string}
+         * @default 'disable'
+         * @ojsignature { target: "Type",
+         *                value: "?string",
+         *                jsDocOverride: true }
+         * @ojshortdesc Allows hide/unhide on columns.
+         * @example <caption>Initialize the DataGrid with the <code class="prettyprint">hidable</code> attribute specified:</caption>
+         * &lt;!-- Using dot notation -->
+         * &lt;oj-data-grid header.column.hidable="enable">&lt;/oj-data-grid>
+         *
+         * &lt;!-- Using JSON notation -->
+         * &lt;oj-data-grid header.column.hidable='enable'>&lt;/oj-data-grid>
+         *
+         * @example <caption>Get or set the <code class="prettyprint">hidable</code> property after initialization:</caption>
+         * // Getter
+         * let hidableColumn = myDataGrid.header.column.hidable;
+         *
+         * // Setter
+         * myDataGrid.setProperty('header.column.hidable', "enable");
+         *
+         */
+        hidable: 'disable',
+
         /**
          * <p>Enables or disables freeze and unfreeze option on the datagrid columns.
          *
@@ -37851,6 +38433,9 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
     // sets the initial (or default) selection on internal grid
     this._setSelection();
 
+    // hides the initial (or default) columns on internal grid
+    this._hideColumns();
+
     if (this.datasource != null) {
       this.grid.SetDataSource(this.datasource);
 
@@ -38057,6 +38642,15 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
         changed: true
       });
     });
+    this.grid.addListener('columnHide', function (details) {
+      self.option('hiddenColumns', details.ui.hiddenColumns, {
+        _context: {
+          originalEvent: details.event,
+          internalSet: true
+        },
+        changed: true
+      });
+    });
   },
 
   /**
@@ -38320,6 +38914,7 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
         case 'selection':
         case 'frozenColumnCount':
         case 'frozenRowCount':
+        case 'hiddenColumns':
           // just set returnVal in case another option is refresh at
           // the wrapper level
           returnVal = 'pass';
@@ -38416,6 +39011,19 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
     return false;
   },
 
+  /**
+   * Checks if hide is enabled on headers along a given axis
+   * @private
+   * @param {string} axis column/row
+   * @return {boolean} true if hide is not set to 'disable'
+   */
+  _isHideEnabled: function (axis) {
+    if (this.options.header[axis]) {
+      return this.options.header[axis].hidable !== 'disable';
+    }
+    return false;
+  },
+
   /**
    * Remove all children except context menu slot and templates
    * @private
@@ -38585,6 +39193,8 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
     let dataTransferOptionsMenu;
     let freezeMenu;
     let menuContainer;
+    let hideMenu;
+    let unhideMenu;
 
     const isCustomElement = this._IsCustomElement();
     if (!isCustomElement) {
@@ -38620,6 +39230,11 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
       }
     }
 
+    if (this._isHideEnabled('column')) {
+      hideMenu = this._buildContextMenuItem('hideCol', isCustomElement);
+      unhideMenu = this._buildContextMenuItem('unhideCol', isCustomElement);
+    }
+
     if (this.options.dnd.reorder.row === 'enable') {
       switch (this.datasource.getCapability('move')) {
         case 'none':
@@ -38723,11 +39338,25 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
       moveMenu ||
       selectMenu ||
       freezeMenu ||
+      hideMenu ||
+      unhideMenu ||
       dataTransferOptionsMenu
     ) {
       if (dataTransferOptionsMenu) {
         menuContainer.appendChild(dataTransferOptionsMenu); // @HTMLUpdateOK
       }
+      if (hideMenu) {
+        menuContainer.appendChild(hideMenu); // @HTMLUpdateOK
+      }
+      if (unhideMenu) {
+        menuContainer.appendChild(unhideMenu); // @HTMLUpdateOK
+      }
+      if (freezeMenu) {
+        menuContainer.appendChild(freezeMenu); // @HTMLUpdateOK
+      }
+      if (hideMenu || unhideMenu || freezeMenu) {
+        menuContainer.appendChild(this._buildContextMenuDivider()); // @HTMLUpdateOK
+      }
       if (resizeRowHeightMenu) {
         menuContainer.appendChild(resizeRowHeightMenu); // @HTMLUpdateOK
       }
@@ -38737,11 +39366,8 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
       if (resizeFitToContentMenu) {
         menuContainer.appendChild(resizeFitToContentMenu); // @HTMLUpdateOK
       }
-      if (freezeMenu) {
-        menuContainer.appendChild(freezeMenu); // @HTMLUpdateOK
-      }
       if (sortColumnMenu || sortRowMenu) {
-        if (resizeRowHeightMenu || resizeColWidthMenu || resizeFitToContentMenu || freezeMenu) {
+        if (resizeRowHeightMenu || resizeColWidthMenu || resizeFitToContentMenu) {
           menuContainer.appendChild(this._buildContextMenuDivider()); // @HTMLUpdateOK
         }
         if (sortColumnMenu) {
@@ -38757,6 +39383,8 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
           resizeColWidthMenu ||
           resizeFitToContentMenu ||
           freezeMenu ||
+          hideMenu ||
+          unhideMenu ||
           sortColumnMenu ||
           sortRowMenu
         ) {
@@ -38772,6 +39400,8 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
           freezeMenu ||
           sortColumnMenu ||
           sortRowMenu ||
+          hideMenu ||
+          unhideMenu ||
           moveMenu
         ) {
           menuContainer.appendChild(this._buildContextMenuDivider()); // @HTMLUpdateOK
@@ -38934,6 +39564,14 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
       // eslint-disable-next-line no-param-reassign
       command = 'resizeRow';
     }
+    if (command === 'hideCol') {
+      // eslint-disable-next-line no-param-reassign
+      command = 'hideColumns';
+    }
+    if (command === 'unhideCol') {
+      // eslint-disable-next-line no-param-reassign
+      command = 'unhideColumns';
+    }
     let key = 'label' + command.charAt(0).toUpperCase() + command.slice(1);
     if (!isCustomElement && command === 'discontiguousSelection') {
       // always initialize to enable
@@ -39262,7 +39900,9 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
       this.menuItemFunction === this._getMappedCommand('freezeRow') ||
       this.menuItemFunction === this._getMappedCommand('freezeCol') ||
       this.menuItemFunction === this._getMappedCommand('unfreezeRow') ||
-      this.menuItemFunction === this._getMappedCommand('unfreezeCol')
+      this.menuItemFunction === this._getMappedCommand('unfreezeCol') ||
+      this.menuItemFunction === this._getMappedCommand('hideCol') ||
+      this.menuItemFunction === this._getMappedCommand('unhideCol')
     ) {
       this.grid.handleContextMenuReturn(this.contextMenuEvent, this.menuItemFunction, null);
       // this.contextMenuEvent['target'].focus();
@@ -39462,6 +40102,18 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
     }
   },
 
+  /**
+   * Sets hidability on internal grid from options
+   * @private
+   */
+  _hideColumns: function () {
+    var hiddenColumns = this.options.hiddenColumns;
+    if (hiddenColumns != null) {
+      hiddenColumns = [...hiddenColumns];
+      this.grid.setHiddenColumns(hiddenColumns);
+    }
+  },
+
   /**
    * Modify the header and cell context before passing to the renderer.
    * @param {Object} context the header or cell context.
@@ -42122,6 +42774,30 @@ DvtDataGrid.prototype._addFrozenIndicator = function (axis, top, dir, dirValue,
       );
     }
 
+    // If corner has only column labels frozen row indicator left has to be dir value of databody.
+    if (
+      axis === 'row' &&
+      this.m_endRowHeader === -1 &&
+      this.m_headerLabels.column &&
+      this.m_headerLabels.column.length
+    ) {
+      // eslint-disable-next-line no-param-reassign
+      databodyVisualIndicatorDir = this._hasFrozenColumns()
+        ? this.getElementDir(this.m_databodyFrozenCol, dir)
+        : this.getElementDir(this.m_databody, dir);
+    }
+
+    // If corner has only row labels frozen col indicator top has to be height of row header label.
+    if (
+      axis === 'column' &&
+      this.m_endColHeader === -1 &&
+      this.m_headerLabels.row &&
+      this.m_headerLabels.row.length
+    ) {
+      // eslint-disable-next-line no-param-reassign
+      databodyVisualIndicatorTop = this.getElementHeight(this.m_headerLabels.row[0]);
+    }
+
     return [
       databodyVisualIndicatorTop,
       headerVisualIndicatorTop,
@@ -42461,6 +43137,8 @@ DvtDataGrid.prototype._buildFrozenHeaders = function (axis, startResults, endRes
 
 /**
  * Checks freeze feasibility.
+ * Checks the extents on startResult and endResult and returns the closest matching extent if available
+ * If only one of startResult, endResult is available then frozen index is expected to be less than the count.
  * @param {String} axis row/column
  * @param {Number} index row/column index
  * @param {Object} startResults a headerSet object returned from the data source
@@ -42474,9 +43152,11 @@ DvtDataGrid.prototype._isFreezeFeasible = function (axis, startResults, endResul
     // if application tries to freeze an index beyond the fetch count.
     if (
       (axis === 'column' &&
+        !this.m_initialized &&
         (this.m_frozenColIndex >= startResults.getCount() ||
           this.m_frozenColIndex >= endResults.getCount())) ||
       (axis === 'row' &&
+        !this.m_initialized &&
         (this.m_frozenRowIndex >= startResults.getCount() ||
           this.m_frozenRowIndex >= endResults.getCount()))
     ) {
@@ -42518,14 +43198,18 @@ DvtDataGrid.prototype._isFreezeFeasible = function (axis, startResults, endResul
     }
   } else if (
     startResults &&
-    ((axis === 'column' && this.m_frozenColIndex < startResults.getCount()) ||
-      (axis === 'row' && this.m_frozenRowIndex < startResults.getCount()))
+    ((!this.m_initialized &&
+      ((axis === 'column' && this.m_frozenColIndex < startResults.getCount()) ||
+        (axis === 'row' && this.m_frozenRowIndex < startResults.getCount()))) ||
+      this.m_initialized)
   ) {
     isFeasible = true;
   } else if (
     endResults &&
-    ((axis === 'column' && this.m_frozenColIndex < endResults.getCount()) ||
-      (axis === 'row' && this.m_frozenRowIndex < endResults.getCount()))
+    ((!this.m_initialized &&
+      ((axis === 'column' && this.m_frozenColIndex < endResults.getCount()) ||
+        (axis === 'row' && this.m_frozenRowIndex < endResults.getCount()))) ||
+      this.m_initialized)
   ) {
     isFeasible = true;
   } else if (!startResults && !endResults) {
@@ -42739,6 +43423,7 @@ DvtDataGrid.prototype._handleFreezeRow = function (event) {
   }
   if (isFeasible) {
     this._mutateRowFrozenContainer(header, cell, axis);
+    this.deleteAndApplyHiddenIndicators();
     let details = {
       event: event,
       ui: {
@@ -42832,6 +43517,7 @@ DvtDataGrid.prototype._handleFreezeCol = function (event) {
   }
   if (isFeasible) {
     this._mutateColumnFrozenContainer(header, cell, axis);
+    this.deleteAndApplyHiddenIndicators();
     let details = {
       event: event,
       ui: {
@@ -44530,6 +45216,7 @@ DvtDataGrid.prototype._handleUnFreeze = function (axis, event) {
     if (this.m_colEndHeaderFrozen) {
       this.m_root.removeChild(this.m_colEndHeaderFrozen);
     }
+    this.deleteAndApplyHiddenIndicators();
     if (event) {
       let details = {
         event: event,
@@ -44552,6 +45239,7 @@ DvtDataGrid.prototype._handleUnFreeze = function (axis, event) {
     if (this.m_rowEndHeaderFrozen) {
       this.m_root.removeChild(this.m_rowEndHeaderFrozen);
     }
+    this.deleteAndApplyHiddenIndicators();
     if (event) {
       let details = {
         event: event,
@@ -45355,3 +46043,1297 @@ DvtDataGrid.prototype._resetSkeletonProperties = function () {
   this.m_skeletonRowEndPixel = null;
   this.m_skeletonSet = new Set();
 };
+
+/**
+ * set Hidden columns
+ * @param Array hiddenColumns
+ */
+DvtDataGrid.prototype.setHiddenColumns = function (hiddenColumns) {
+  // it can be null but cannot be undefined
+  if (hiddenColumns !== undefined) {
+    this.m_hiddenColumns = hiddenColumns === null ? [] : hiddenColumns;
+  }
+};
+
+/**
+ * Returns hidden indicator div belonging to the region
+ * @param {number} index
+ * @param {Object} databody/header/endHeader
+ * @param {boolean} isHeader
+ */
+DvtDataGrid.prototype.getHiddenIndicatorByIndex = function (index, container, isHeader) {
+  let hiddenIndicators;
+
+  if (isHeader) {
+    hiddenIndicators = container.querySelectorAll(
+      `.${this.getResources().getMappedStyle('headerHiddenIndicator')}`
+    );
+  } else {
+    hiddenIndicators = container.querySelectorAll(
+      `.${this.getResources().getMappedStyle('databodyHiddenIndicator')}`
+    );
+  }
+
+  hiddenIndicators = Array.from(hiddenIndicators);
+
+  if (hiddenIndicators.length > 0) {
+    const hiddenIndicatorNode = hiddenIndicators.find(
+      (node) => this._getAttribute(node, 'hiddenIndicatorIndex', true) === index
+    );
+
+    if (hiddenIndicatorNode) {
+      return hiddenIndicatorNode;
+    }
+  }
+
+  return null;
+};
+
+// returns active databody indicators
+DvtDataGrid.prototype.getActiveDatabodyIndicators = function () {
+  let indicatorsIndexArray = [];
+
+  if (this._hasFrozenColumns()) {
+    // frozen columns
+    let frozenatabodyContainer = this.m_databodyFrozenCol.firstChild;
+    frozenatabodyContainer
+      .querySelectorAll(`.${this.getResources().getMappedStyle('databodyHiddenIndicator')}`)
+      .forEach((node) =>
+        indicatorsIndexArray.push(this._getAttribute(node, 'hiddenIndicatorIndex', true))
+      );
+  }
+
+  if (this._hasFrozenRows()) {
+    // frozen row's indicators
+    let frozenRowDatabodyContainer = this.m_databodyFrozenRow.firstChild;
+    frozenRowDatabodyContainer
+      .querySelectorAll(`.${this.getResources().getMappedStyle('databodyHiddenIndicator')}`)
+      .forEach((node) =>
+        indicatorsIndexArray.push(this._getAttribute(node, 'hiddenIndicatorIndex', true))
+      );
+  }
+
+  if (this._hasFrozenColumns() && this._hasFrozenRows()) {
+    // frozen corner
+    let frozenCornerDatabodyContainer = this.m_databodyFrozenCorner.firstChild;
+    frozenCornerDatabodyContainer
+      .querySelectorAll(`.${this.getResources().getMappedStyle('databodyHiddenIndicator')}`)
+      .forEach((node) =>
+        indicatorsIndexArray.push(this._getAttribute(node, 'hiddenIndicatorIndex', true))
+      );
+  }
+
+  let databodyHiddenIndicators = this.m_databody.firstChild;
+  databodyHiddenIndicators
+    .querySelectorAll(`.${this.getResources().getMappedStyle('databodyHiddenIndicator')}`)
+    .forEach((node) =>
+      indicatorsIndexArray.push(this._getAttribute(node, 'hiddenIndicatorIndex', true))
+    );
+
+  if (indicatorsIndexArray.length > 0) {
+    return [...new Set(indicatorsIndexArray)];
+  }
+
+  return null;
+};
+
+/**
+ * returns all the children indexes of the deepest level belonging to the header
+ */
+DvtDataGrid.prototype.getIndexesByHeader = function (header) {
+  let headerContext = header[this.getResources().getMappedAttribute('context')];
+  let indexesSpannedByHeader = [];
+  let headerIndex = headerContext.index;
+  let headerExtent = headerContext.extent;
+
+  for (let i = headerIndex; i < headerIndex + headerExtent; i++) {
+    indexesSpannedByHeader.push(i);
+  }
+
+  return indexesSpannedByHeader;
+};
+
+/**
+ * Apply and render visual indicator for hidden columns
+ * @param {Number} - startCol is the start column index of the visible range
+ * @param {Number} - endCol is the end column index of the visible range
+ */
+DvtDataGrid.prototype.applyHiddenIndicatorToRange = function (startCol, endCol, databodyIndicator) {
+  const dir = this.getResources().isRTLMode() ? 'right' : 'left';
+  let hiddenCols = this.m_hiddenColumns;
+  hiddenCols.sort((a, b) => a - b);
+
+  let headerRoot;
+  let levelCount = this.m_columnHeaderLevelCount;
+  let headerStart = this.m_startColHeader;
+
+  for (let i = startCol; i <= endCol; i++) {
+    if (this.m_hiddenColumns.includes(i)) {
+      let adjustedColIndex = i === -1 ? 0 : i;
+      let currentHeader;
+
+      if (levelCount === 1 && (this.m_hasColHeader || this.m_hasColEndHeader)) {
+        let header = this._getHeaderCellByIndex(adjustedColIndex, 'column', 0);
+
+        if (header) {
+          let indicatorLinePosition = this.getElementDir(header, dir);
+          indicatorLinePosition += i === -1 ? 0 : this.getElementWidth(header);
+          this.renderHiddenColumnVisualIndicator(
+            'column',
+            0,
+            dir,
+            indicatorLinePosition,
+            adjustedColIndex,
+            databodyIndicator
+          );
+        }
+      } else {
+        if (this._hasFrozenColumns() && i <= this.m_frozenColIndex) {
+          headerRoot = this.m_colHeaderFrozen;
+        } else {
+          headerRoot = this.m_colHeader;
+        }
+        // get headers of all level with the headerFirstIndex
+        let allHeadersofIndex = this._getHeadersByIndex(i, headerRoot, levelCount, headerStart);
+        let tempArray;
+        for (let j = allHeadersofIndex.length - 1; j >= 0; j--) {
+          currentHeader = allHeadersofIndex[j];
+          tempArray = this.getIndexesByHeader(currentHeader);
+          if (this.isArraySubset(tempArray, hiddenCols)) {
+            let headerTop = this.getElementDir(currentHeader, 'top');
+            let indicatorLinePosition = this.getElementDir(currentHeader, dir);
+            indicatorLinePosition += j === -1 ? 0 : this.getElementWidth(currentHeader);
+            this.renderHiddenColumnVisualIndicator(
+              'column',
+              headerTop,
+              dir,
+              indicatorLinePosition,
+              adjustedColIndex,
+              databodyIndicator
+            );
+            // filtering to avoid multiple loops for the same nested header for each header
+            /* eslint-disable  no-loop-func */
+            hiddenCols = hiddenCols.filter((item) => !tempArray.includes(item));
+          }
+        }
+      }
+    }
+  }
+};
+
+/**
+ * Render visual indicator for hidden columns
+ * @param {string} axis
+ * @param {number} top value
+ * @param {string} direction RTL/LTR
+ * @param {number} index
+ */
+DvtDataGrid.prototype.renderHiddenColumnVisualIndicator = function (
+  axis,
+  top,
+  dir,
+  dirValue,
+  index,
+  databodyIndicatorArray
+) {
+  let databodyElem;
+  let headerElem;
+  let endHeaderElem;
+
+  if (this._hasFrozenColumns() && index <= this.m_frozenColIndex) {
+    headerElem = this.m_colHeaderFrozen;
+    endHeaderElem = this.m_colEndHeaderFrozen;
+    databodyElem = this.m_databodyFrozenCol;
+  } else {
+    headerElem = this.m_colHeader;
+    endHeaderElem = this.m_colEndHeader;
+    databodyElem = this.m_databody;
+  }
+
+  let databodyVisualIndicatorDimension;
+  let headerVisualIndicatorDimension;
+
+  if (axis === 'row') {
+    databodyVisualIndicatorDimension = 'width';
+    headerVisualIndicatorDimension = 'width';
+  } else if (axis === 'column') {
+    databodyVisualIndicatorDimension = 'height';
+    headerVisualIndicatorDimension = 'height';
+  }
+
+  let headerVisualIndicatorDimensionValue = 0;
+  let endHeaderVisualIndicatorDimensionValue = 0;
+  let databodyVisualIndicatorDimensionValue = 0;
+
+  databodyVisualIndicatorDimensionValue = this.getElementDir(
+    this.m_databody.firstChild,
+    databodyVisualIndicatorDimension
+  );
+  headerVisualIndicatorDimensionValue =
+    this.getElementDir(headerElem.firstChild, headerVisualIndicatorDimension) - top;
+  endHeaderVisualIndicatorDimensionValue =
+    this.getElementDir(endHeaderElem.firstChild, headerVisualIndicatorDimension) - top;
+
+  let delta = 0;
+  let bodyAdjust = 0;
+
+  // To make visual indicator center to the gridline except for first/last visible index
+  // for first/last visible index, the way  hidden indicator looks is different
+  // index here is the hidden index, so we are passing +/- of the index to check for first/last visible index
+  if (this.isFirstOrFirstNonHiddenIndex(index + 1)) {
+    delta = 2;
+    bodyAdjust = 1;
+  } else if (this.isLastOrLastNonHiddenIndex(index - 1)) {
+    delta = -2;
+    bodyAdjust = -1;
+  }
+
+  let headerClassName = 'headerHiddenIndicator';
+  let databodyClassName = 'databodyHiddenIndicator';
+  if (axis === 'column' || axis === 'columnEnd') {
+    if (this.m_hasColHeader) {
+      let headerIndicator = document.createElement('div');
+      // hiddenIndicatorIndex is an attribute of hidden indicators mapping each to its hidden column index
+      this._setAttribute(headerIndicator, 'hiddenIndicatorIndex', index);
+      this._setVisualIndicatorStyle(
+        headerIndicator,
+        headerClassName,
+        top,
+        dir,
+        dirValue + delta - 2,
+        headerVisualIndicatorDimensionValue,
+        headerVisualIndicatorDimension
+      );
+      headerElem.firstChild.appendChild(headerIndicator); // @HTMLUpdateOK
+    }
+
+    if (this.m_hasColEndHeader) {
+      let endHeaderIndicator = document.createElement('div');
+      // hiddenIndicatorIndex is an attribute of hidden indicators mapping each to its hidden column index
+      this._setAttribute(endHeaderIndicator, 'hiddenIndicatorIndex', index);
+      this._setVisualIndicatorStyle(
+        endHeaderIndicator,
+        headerClassName,
+        0,
+        dir,
+        dirValue + delta - 2,
+        endHeaderVisualIndicatorDimensionValue,
+        headerVisualIndicatorDimension
+      );
+      endHeaderElem.firstChild.appendChild(endHeaderIndicator); // @HTMLUpdateOK
+    }
+
+    // For databody hidden Indicator
+    // if we have frozen cols/rows, we apply indicators separately for each section frozen section
+    if (databodyIndicatorArray && databodyIndicatorArray.includes(index)) {
+      let databodyIndicator = document.createElement('div');
+      // hiddenIndicatorIndex is an attribute of hidden indicators mapping each to its hidden column index
+      this._setAttribute(databodyIndicator, 'hiddenIndicatorIndex', index);
+      this._setVisualIndicatorStyle(
+        databodyIndicator,
+        databodyClassName,
+        0,
+        dir,
+        dirValue + bodyAdjust - 1,
+        databodyVisualIndicatorDimensionValue,
+        databodyVisualIndicatorDimension
+      );
+      databodyElem.firstChild.appendChild(databodyIndicator); // @HTMLUpdateOK
+      if (this._hasFrozenRows()) {
+        if (this._hasFrozenColumns() && index <= this.m_frozenColIndex) {
+          // appending Indicator to the frozen corner
+          let databodyFrozenCornerIndicator = document.createElement('div');
+          let databodyFrozenCornerVisualIndicatorDimensionValue = 0;
+          let databodyFrozenCornerElem = this.m_databodyFrozenCorner;
+          databodyFrozenCornerVisualIndicatorDimensionValue = this.getElementDir(
+            databodyFrozenCornerElem.firstChild,
+            databodyVisualIndicatorDimension
+          );
+          this._setAttribute(databodyFrozenCornerIndicator, 'hiddenIndicatorIndex', index);
+          this._setVisualIndicatorStyle(
+            databodyFrozenCornerIndicator,
+            databodyClassName,
+            0,
+            dir,
+            dirValue + bodyAdjust - 1,
+            databodyFrozenCornerVisualIndicatorDimensionValue,
+            databodyVisualIndicatorDimension
+          );
+
+          databodyFrozenCornerElem.firstChild.appendChild(databodyFrozenCornerIndicator); // @HTMLUpdateOK
+        } else {
+          // appending indicator to the frozen row
+          let databodyFrozenRowIndicator = document.createElement('div');
+          let databodyFrozenRowVisualIndicatorDimensionValue = 0;
+          let databodyFrozenRowElem = this.m_databodyFrozenRow;
+
+          databodyFrozenRowVisualIndicatorDimensionValue = this.getElementDir(
+            databodyFrozenRowElem.firstChild,
+            databodyVisualIndicatorDimension
+          );
+          this._setAttribute(databodyFrozenRowIndicator, 'hiddenIndicatorIndex', index);
+          this._setVisualIndicatorStyle(
+            databodyFrozenRowIndicator,
+            databodyClassName,
+            0,
+            dir,
+            dirValue + bodyAdjust - 1,
+            databodyFrozenRowVisualIndicatorDimensionValue,
+            databodyVisualIndicatorDimension
+          );
+
+          databodyFrozenRowElem.firstChild.appendChild(databodyFrozenRowIndicator); // @HTMLUpdateOK
+        }
+      }
+    }
+  }
+};
+
+/**
+ * Returns true if the current index of given axis is hidden
+ * @param {string} axis
+ * @param {number} index
+ */
+DvtDataGrid.prototype.isHidden = function (axis, index) {
+  if (axis === 'column' || axis === 'columnEnd') {
+    if (this.m_hiddenColumns.includes(index)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+DvtDataGrid.prototype.isHeaderHidden = function (header) {
+  let headerContext;
+  let headerExtent;
+  let index;
+  let axis;
+  let indexes = [];
+  if (header) {
+    headerContext = header[this.getResources().getMappedAttribute('context')];
+    headerExtent = headerContext.extent;
+    axis = headerContext.axis;
+    index = headerContext.index;
+  }
+
+  if (axis === 'column' || axis === 'columnEnd') {
+    if (headerExtent === 1) {
+      if (this.m_hiddenColumns.includes(index)) {
+        return true;
+      }
+    } else {
+      indexes = this.getIndexesByHeader(header);
+      if (this.isArraySubset(indexes, this.m_hiddenColumns)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+/**
+ * Returns an array of integers
+ * @param {number} number
+ * @param {Object} arrow if {right:true}, returns array with integers from given number till max right,
+ * if {left:true}, returns array with integers from 0 till given number
+ */
+DvtDataGrid.prototype.arrayIndices = function (number, arrow) {
+  let lastIndex;
+  if (this._isCountUnknownOrHighwatermark('column')) {
+    lastIndex = this._getMaxRight();
+  } else {
+    lastIndex = Math.max(0, this.getDataSource().getCount('column') - 1);
+  }
+
+  let indexArray = [];
+  if (arrow.left) {
+    for (let i = 0; i <= number; i++) {
+      indexArray.push(i);
+    }
+  } else if (arrow.right) {
+    for (let i = number; i <= lastIndex; i++) {
+      indexArray.push(i);
+    }
+  }
+  return indexArray;
+};
+
+/**
+ * Returns true if subArray is a part of parentArray
+ */
+DvtDataGrid.prototype.isArraySubset = function (subArray, parentArray) {
+  return subArray.every((element) => parentArray.includes(element));
+};
+
+/**
+ * Retrieve all hidden Columns in the given direction (arrow) from/till the given index
+ * @param {Number} index
+ * @param {Object} arrow left/right
+ */
+DvtDataGrid.prototype.hiddenColumnsInDirection = function (index, arrow) {
+  let indexArray = new Set(this.arrayIndices(index, arrow));
+  let hiddenColumns = this.m_hiddenColumns;
+  let hiddenColumnsInDirection = hiddenColumns.filter((currentIndex) =>
+    indexArray.has(currentIndex)
+  );
+  return hiddenColumnsInDirection;
+};
+
+/**
+ * returns true if given index is the first visible index by checking if all indices before that are hidden
+ * @param {Number} index
+ */
+DvtDataGrid.prototype.isFirstOrFirstNonHiddenIndex = function (index) {
+  if (index >= 0) {
+    for (let i = 0; i <= index - 1; i++) {
+      if (!this.m_hiddenColumns.includes(i)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+  return false;
+};
+/**
+ * returns true if given index is the last visible index by checking if all indices after that are hidden
+ * @param {Number} index
+ */
+DvtDataGrid.prototype.isLastOrLastNonHiddenIndex = function (index) {
+  if (index >= 0) {
+    let lastIndex;
+    if (this._isCountUnknownOrHighwatermark('column')) {
+      lastIndex = this._getMaxRight();
+    } else {
+      lastIndex = Math.max(0, this.getDataSource().getCount('column') - 1);
+    }
+
+    for (let i = lastIndex; i >= index + 1; i--) {
+      if (!this.m_hiddenColumns.includes(i)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+  return false;
+};
+
+/**
+ * returns visible index around given index in the direction mentioned
+ * @param {String} axis
+ * @param {Number} index
+ * @param {Object} direction
+ */
+DvtDataGrid.prototype.getVisibleCellIndexInDirection = function (axis, index, direction) {
+  let newIndex = index;
+  if (axis === 'column' || axis === 'columnEnd') {
+    if (direction.right || direction.down) {
+      while (this.m_hiddenColumns.includes(newIndex)) {
+        newIndex += 1;
+      }
+    } else if (direction.left || direction.up) {
+      while (this.m_hiddenColumns.includes(newIndex)) {
+        newIndex -= 1;
+      }
+    }
+  }
+  return newIndex;
+};
+
+/**
+ * Hide and shift cells and headers when column is hidden
+ * @param event
+ */
+/* eslint-disable no-unused-vars */
+DvtDataGrid.prototype._handleHideColumn = function (event) {
+  let targetHeader = this.findHeader(event.target);
+  let targetCell = this.findCell(event.target);
+
+  let selectedArray = this.m_selection;
+  let selection = this.m_options.options.selectionMode;
+  let cellSelection = selection.cell;
+  let rowSelection = selection.row;
+  let columnArray = [];
+
+  // get all the column indexes to hide
+  if (selectedArray.length && cellSelection === 'multiple') {
+    // get all the column indexes from selected array of objects
+    for (let i = 0; i < selectedArray.length; i++) {
+      let startIndex = selectedArray[i].startIndex.column;
+      let endIndex = selectedArray[i].endIndex.column;
+
+      // for the row selection case they will be ignored because endindex -1 < 0
+      for (let j = startIndex; j <= endIndex; j++) {
+        columnArray.push(j);
+      }
+    }
+  } else if (cellSelection === 'single') {
+    // get all the column indexes from selected array of objects
+    if (selectedArray.length) {
+      columnArray.push(selectedArray[0].startIndex.column);
+    } else if (targetHeader) {
+      // on context menu click on header (operates on active)
+      columnArray = this.getIndexesByHeader(targetHeader);
+    }
+  } else if (cellSelection === 'none' && rowSelection === 'none') {
+    // on context menu click on header (operates on active)
+    if (targetHeader) {
+      columnArray = this.getIndexesByHeader(targetHeader);
+    } else if (targetCell) {
+      // on context menu click on databody cell
+      columnArray.push(this._getIndex(targetCell, 'column'));
+    }
+  } else if (rowSelection === 'multiple' || rowSelection === 'single') {
+    // on context menu click on header (operates on active)
+    if (targetHeader) {
+      columnArray = this.getIndexesByHeader(targetHeader);
+    } else {
+      return;
+    }
+  } else {
+    return;
+  }
+
+  // looping each column index to hide and shift axis
+  for (let i = 0; i < columnArray.length; i++) {
+    let index = columnArray[i];
+    if (!this.m_hiddenColumns.includes(index)) {
+      this.m_hiddenColumns.push(index);
+    }
+    this.shiftCellsForHidability(index, true);
+  }
+  this.focusNextVisibleColumn(targetHeader, targetCell, event);
+  this.deleteAndApplyHiddenIndicators(columnArray);
+  this.fillViewport();
+
+  let details = {
+    event: event,
+    ui: {
+      hiddenColumns: new Set(this.m_hiddenColumns)
+    }
+  };
+
+  this.fireEvent('columnHide', details);
+};
+
+// moves focus to next visible cell or header
+DvtDataGrid.prototype.focusNextVisibleColumn = function (targetHeader, targetCell, event) {
+  let activeIndex;
+  if (targetHeader) {
+    activeIndex = this._getIndex(targetHeader, 'column');
+  } else if (targetCell) {
+    activeIndex = this._getIndex(targetCell, 'column');
+  } else {
+    return;
+  }
+
+  let newIndex;
+
+  if (!this.isLastOrLastNonHiddenIndex(activeIndex)) {
+    newIndex = this.getVisibleCellIndexInDirection('column', activeIndex, { right: true });
+  } else {
+    newIndex = this.getVisibleCellIndexInDirection('column', activeIndex, { left: true });
+  }
+
+  if (targetHeader) {
+    let context = targetHeader[this.getResources().getMappedAttribute('context')];
+    let level = context.level;
+    let axis = context.axis;
+    var nextHeader = this._getHeaderCellByIndex(newIndex, axis, level);
+    this._setActive(nextHeader, {
+      type: 'header',
+      index: newIndex,
+      level,
+      axis
+    });
+  } else if (targetCell) {
+    let row = targetCell[this.getResources().getMappedAttribute('context')].indexes.row;
+    let newCellIndex = this.createIndex(row, newIndex);
+    this._setActiveByIndex(newCellIndex, event);
+  }
+};
+
+DvtDataGrid.prototype._updateHiddenSection = function (columnArray) {
+  // column array always has all indices to hide
+  // we are filtering for indices which are in this.m_hiddenColumns and not in columnArray
+  // to unhide
+  const unHideArray = this.m_hiddenColumns.filter((item) => !columnArray.includes(item));
+
+  let latestHidden = columnArray.filter((item) => !this.m_hiddenColumns.includes(item));
+
+  // updating global this.m_hiddenColumns array with columnArray (new hidden array with indexes from external hide
+  // including previous hidden indexes)
+  this.m_hiddenColumns = columnArray;
+
+  for (let i = 0; i < latestHidden.length; i++) {
+    let index = latestHidden[i];
+    this.shiftCellsForHidability(index, true);
+  }
+
+  // looping each index if any to unhide and shift axis
+  for (let i = 0; i < unHideArray.length; i++) {
+    let index = unHideArray[i];
+    this.shiftCellsForHidability(index);
+  }
+
+  this.deleteAndApplyHiddenIndicators(latestHidden);
+  this.fillViewport();
+};
+
+/* eslint-enable no-loop-func */
+
+DvtDataGrid.prototype.containsHiddenItems = function (selectedArray) {
+  let commonHiddenItems = selectedArray.filter((item) => this.m_hiddenColumns.includes(item));
+  commonHiddenItems.sort((a, b) => a - b);
+  return commonHiddenItems;
+};
+
+/**
+ * Unhide and shift cells and headers when column is hidden
+ * @param event
+ */
+/* eslint-disable no-unused-vars */
+DvtDataGrid.prototype._handleUnhideColumn = function (event) {
+  let targetHeader = this.findHeader(event.target);
+  let targetCell = this.findCell(event.target);
+
+  let selectedArray = this.m_selection;
+  let columnArray = this.getColumnSelectionIndexArray();
+
+  let selection = this.m_options.options.selectionMode;
+  let cellSelection = selection.cell;
+  let rowSelection = selection.row;
+
+  let selectedHiddenIndexes = this.containsHiddenItems(columnArray);
+  let unhideIndexes = [];
+
+  const unhideColumns = (unhideItems) => {
+    // except for cell multiple, in all other selection modes,
+    // we check if the columns on either side of the current column is hidden
+    // and we unhide them.
+    let beforeIndex = [];
+    let afterIndex = [];
+    for (let i = 0; i < unhideItems.length; i++) {
+      let j = 0;
+      while (this.m_hiddenColumns.includes(unhideItems[i] - 1 - j)) {
+        beforeIndex.push(unhideItems[i] - 1 - j);
+        j += 1;
+      }
+      let k = 0;
+      while (this.m_hiddenColumns.includes(unhideItems[i] + 1 + k)) {
+        afterIndex.push(unhideItems[i] + 1 + k);
+        k += 1;
+      }
+    }
+    return [...beforeIndex, ...afterIndex];
+  };
+
+  if (this.areAllColumnsSelectedViaRowSelection()) {
+    unhideIndexes = [...this.m_hiddenColumns];
+  } else if (selectedArray.length && cellSelection === 'multiple') {
+    for (let i = 0; i < columnArray.length; i++) {
+      let index = columnArray[i];
+      // if the selected range contains hidden items, unhide
+      // else if it's first and last selected array, unhide everything
+      // else if index is first visible column and if there are any hidden columns before
+      // show all columns before the selected index
+      // else if index is last visible column
+      // show all columns after the selected index
+      if (selectedHiddenIndexes.length) {
+        unhideIndexes = selectedHiddenIndexes;
+        break;
+      } else if (
+        this.isFirstOrFirstNonHiddenIndex(index) &&
+        this.isLastOrLastNonHiddenIndex(index)
+      ) {
+        unhideIndexes = unhideColumns([index]);
+      } else if (this.isFirstOrFirstNonHiddenIndex(index)) {
+        let indexArray = [];
+        for (let j = 0; j <= index - 1; j++) {
+          indexArray.push(j);
+        }
+        unhideIndexes = indexArray;
+      } else if (this.isLastOrLastNonHiddenIndex(index)) {
+        let indexArray = [];
+        for (let j = index + 1; j <= this._getMaxRight(); j++) {
+          indexArray.push(j);
+        }
+        unhideIndexes = indexArray;
+      }
+    }
+  } else if (cellSelection === 'single') {
+    if (selectedArray.length) {
+      unhideIndexes = unhideColumns(columnArray);
+    } else if (targetHeader) {
+      // on context menu click on header (operates on active)
+      columnArray = this.getIndexesByHeader(targetHeader);
+      unhideIndexes = unhideColumns(columnArray);
+    }
+  } else if (cellSelection === 'none' && rowSelection === 'none') {
+    // on context menu click on header (operates on active)
+    if (targetHeader) {
+      columnArray = this.getIndexesByHeader(targetHeader);
+      unhideIndexes = unhideColumns(columnArray);
+    } else if (targetCell) {
+      // on context menu click on databody cell
+      columnArray.push(this._getIndex(targetCell, 'column'));
+      unhideIndexes = unhideColumns(columnArray);
+    }
+  } else if (rowSelection === 'multiple' || rowSelection === 'single') {
+    // on context menu click on header (operates on active)
+    if (targetHeader) {
+      columnArray = this.getIndexesByHeader(targetHeader);
+      unhideIndexes = unhideColumns(columnArray);
+    } else {
+      return;
+    }
+  } else {
+    return;
+  }
+
+  this.unhighlightSelection();
+  for (let i = 0; i < unhideIndexes.length; i++) {
+    let index = unhideIndexes[i];
+    // delete the index from hiddenColumns array
+    let itemIndex = this.m_hiddenColumns.indexOf(index);
+    if (itemIndex !== -1) {
+      this.m_hiddenColumns.splice(itemIndex, 1);
+    }
+    this.shiftCellsForHidability(index);
+  }
+
+  this.deleteAndApplyHiddenIndicators();
+  this.applySelection();
+  this._resetHeaderHighLight();
+  this.resizeGrid();
+
+  let details = {
+    event: event,
+    ui: {
+      hiddenColumns: new Set(this.m_hiddenColumns)
+    }
+  };
+
+  this.fireEvent('columnHide', details);
+};
+
+DvtDataGrid.prototype.shiftCellsForHidability = function (index, hide) {
+  var dir = this.getResources().isRTLMode() ? 'right' : 'left';
+  const colHeaderCellClass = this.getMappedStyle('colheadercell');
+  const colEndHeaderCellClass = this.getMappedStyle('colendheadercell');
+
+  let row = this.m_startRow;
+  let column = index;
+
+  let cell;
+  let columnKey;
+  let cellContext;
+  let currentElementWidth;
+  let newElementWidth;
+  let oldElementWidth;
+  let newScrollerWidth;
+  let widthChange;
+
+  let cellIndex = this.createIndex(row, column);
+  cell = this._getCellByIndex(cellIndex);
+  cellContext = cell[this.getResources().getMappedAttribute('context')];
+  columnKey = cellContext.keys.column;
+
+  currentElementWidth = this.getElementWidth(cell);
+
+  oldElementWidth = this.m_sizingManager.getSize('column', columnKey);
+
+  if (hide) {
+    newElementWidth = 0;
+  } else {
+    newElementWidth = oldElementWidth;
+  }
+
+  widthChange = newElementWidth - currentElementWidth;
+
+  let headerRoot;
+  let endHeaderRoot;
+
+  if (widthChange !== 0) {
+    let isHideFrozenSection = false;
+    if (this._hasFrozenColumns() && index <= this.m_frozenColIndex) {
+      isHideFrozenSection = true;
+      headerRoot = this.m_colHeaderFrozen;
+      endHeaderRoot = this.m_colEndHeaderFrozen;
+    } else {
+      headerRoot = this.m_colHeader;
+      endHeaderRoot = this.m_colEndHeader;
+    }
+
+    if (this.m_databody.firstChild != null && !isHideFrozenSection) {
+      let oldScrollerWidth = this.getElementWidth(this.m_databody.firstChild);
+      newScrollerWidth = oldScrollerWidth + widthChange;
+      this.setElementWidth(this.m_databody.firstChild, newScrollerWidth);
+      if (this.m_databodyFrozenRow) {
+        this.setElementWidth(this.m_databodyFrozenRow.firstChild, newScrollerWidth);
+      }
+    } else if (isHideFrozenSection && this.m_databodyFrozenCol) {
+      let oldScrollerWidth = this.getElementWidth(this.m_databodyFrozenCol);
+      let scrollerDir = this.getElementDir(this.m_databodyFrozenCol, dir);
+      if (this.m_endRowEndHeader !== -1) {
+        let endHeaderDir = this.getElementDir(this.m_rowEndHeader, dir);
+        let newWidth = scrollerDir + oldScrollerWidth + widthChange;
+        widthChange =
+          newWidth > endHeaderDir ? endHeaderDir - (scrollerDir + oldScrollerWidth) : widthChange;
+      }
+      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);
+      }
+    }
+
+    let corner = false;
+
+    // shifting start/end headers and set display to none for single headers
+    if (this.m_hasColHeader) {
+      this._shiftHeadersAlongAxisInContainer(
+        headerRoot.firstChild,
+        column,
+        widthChange,
+        dir,
+        colHeaderCellClass,
+        'column',
+        true,
+        hide
+      );
+      if (!isHideFrozenSection) {
+        this.m_endColHeaderPixel += widthChange;
+      }
+    }
+    if (this.m_hasColEndHeader) {
+      this._shiftHeadersAlongAxisInContainer(
+        endHeaderRoot.firstChild,
+        column,
+        widthChange,
+        dir,
+        colEndHeaderCellClass,
+        'column',
+        true,
+        hide
+      );
+      if (!isHideFrozenSection) {
+        this.m_endColEndHeaderPixel += widthChange;
+      }
+    }
+
+    // shift the cells widths and left/right values in the databody
+    if (!isHideFrozenSection) {
+      this._shiftCellsAlongAxis('column', widthChange, column, false, undefined, undefined, true);
+      if (this.m_databodyFrozenRow) {
+        this._shiftFrozenCellsAlongAxis('column', widthChange, column, false, true);
+      }
+      this.m_endColPixel += widthChange;
+    } else {
+      if (this.m_databodyFrozenRow) {
+        corner = true;
+      }
+      this._shiftCellsAlongAxis(
+        'column',
+        widthChange,
+        column,
+        null,
+        this.m_frozenColIndex,
+        corner,
+        true
+      );
+    }
+
+    this.manageResizeScrollbars();
+  }
+};
+
+/**
+ * Delete existing and apply visual indicator for hidden columns
+ * If nothing is passed, indicators are applied in just headers
+ * @param {Array} - newHideColumnsArray is the array of indexes of databody indicators
+ */
+DvtDataGrid.prototype.deleteAndApplyHiddenIndicators = function (newHideColumnsArray) {
+  let columnStart = this.m_startCol;
+  let columnEnd = this.m_endCol;
+
+  // delete all existing indicators
+  this.deleteAllHiddenVisualIndicators();
+
+  // re-apply indicators
+  this.applyHiddenIndicatorToRange(columnStart, columnEnd, newHideColumnsArray);
+};
+
+DvtDataGrid.prototype.deleteAllHiddenVisualIndicators = function () {
+  let colHeaderContainer = this.m_colHeader.firstChild;
+  let colEndHeaderContainer = this.m_colEndHeader.firstChild;
+
+  // body
+  this.deleteDatabodyHiddenVisualIndicators();
+
+  // headers
+  colHeaderContainer
+    .querySelectorAll(`.${this.getResources().getMappedStyle('headerHiddenIndicator')}`)
+    .forEach((node) => this._remove(node));
+
+  // end headers
+  colEndHeaderContainer
+    .querySelectorAll(`.${this.getResources().getMappedStyle('headerHiddenIndicator')}`)
+    .forEach((node) => this._remove(node));
+
+  if (this._hasFrozenColumns()) {
+    let frozenColHeaderContainer = this.m_colHeaderFrozen.firstChild;
+    let frozenColEndHeaderContainer = this.m_colEndHeaderFrozen.firstChild;
+
+    // frozen headers
+    frozenColHeaderContainer
+      .querySelectorAll(`.${this.getResources().getMappedStyle('headerHiddenIndicator')}`)
+      .forEach((node) => this._remove(node));
+
+    // frozen end headers
+    frozenColEndHeaderContainer
+      .querySelectorAll(`.${this.getResources().getMappedStyle('headerHiddenIndicator')}`)
+      .forEach((node) => this._remove(node));
+  }
+};
+
+DvtDataGrid.prototype.deleteDatabodyHiddenVisualIndicators = function () {
+  let databodyContainer = this.m_databody.firstChild;
+  databodyContainer
+    .querySelectorAll(`.${this.getResources().getMappedStyle('databodyHiddenIndicator')}`)
+    .forEach((node) => this._remove(node));
+
+  if (this._hasFrozenColumns()) {
+    // deleting frozen columns's indicators
+    let frozenDatabodyContainer = this.m_databodyFrozenCol.firstChild;
+    frozenDatabodyContainer
+      .querySelectorAll(`.${this.getResources().getMappedStyle('databodyHiddenIndicator')}`)
+      .forEach((node) => this._remove(node));
+  }
+
+  if (this._hasFrozenRows()) {
+    // deleting frozen row's indicators
+    let frozenRowDatabodyContainer = this.m_databodyFrozenRow.firstChild;
+    frozenRowDatabodyContainer
+      .querySelectorAll(`.${this.getResources().getMappedStyle('databodyHiddenIndicator')}`)
+      .forEach((node) => this._remove(node));
+  }
+
+  if (this._hasFrozenColumns() && this._hasFrozenRows()) {
+    // frozen corner's indicators
+    let frozenCornerDatabodyContainer = this.m_databodyFrozenCorner.firstChild;
+    frozenCornerDatabodyContainer
+      .querySelectorAll(`.${this.getResources().getMappedStyle('databodyHiddenIndicator')}`)
+      .forEach((node) => this._remove(node));
+  }
+};
+
+/**
+ * This method increments all hidden columns after start index on insertion
+ * @param {Number} start
+ * @param {Number} count
+ */
+DvtDataGrid.prototype.updateHiddenColumnsForInsertion = function (start, count) {
+  let changed = false;
+
+  // for insertion, we get each start index, count
+  for (let i = 0; i < this.m_hiddenColumns.length; i++) {
+    if (this.m_hiddenColumns[i] >= start) {
+      this.m_hiddenColumns[i] += count;
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    let details = {
+      event: null,
+      ui: {
+        hiddenColumns: new Set(this.m_hiddenColumns)
+      }
+    };
+
+    this.fireEvent('columnHide', details);
+  }
+};
+
+/**
+ * This method increments all hidden columns after start index on insertion
+ * @param {Array} columnIndexes deleted indexes
+ */
+DvtDataGrid.prototype.updateHiddenColumnsForDeletion = function (columnIndexes) {
+  let changed = false;
+
+  // for deletion, we have all the indexes that need to be deleted
+  columnIndexes.forEach((columnIndex) => {
+    let find = this.m_hiddenColumns.indexOf((hiddenIndex) => {
+      return hiddenIndex === columnIndex;
+    });
+
+    if (find !== -1) {
+      changed = true;
+      this.m_hiddenColumns.splice(find, 1);
+    }
+
+    this.m_hiddenColumns = this.m_hiddenColumns.map((hiddenIndex) => {
+      if (hiddenIndex > columnIndex) {
+        changed = true;
+        return hiddenIndex - 1;
+      }
+      return hiddenIndex;
+    });
+  });
+
+  if (changed) {
+    let details = {
+      event: null,
+      ui: {
+        hiddenColumns: new Set(this.m_hiddenColumns)
+      }
+    };
+
+    this.fireEvent('columnHide', details);
+  }
+};
+
+// this function returns false if there is only one column left to hide
+DvtDataGrid.prototype.canHide = function () {
+  let selectedArray = this.m_selection;
+  let totalColumnCount = this.m_endCol - this.m_startCol + 1;
+  let hiddenColumnsCount = this.m_hiddenColumns.length;
+
+  let columnArray = [];
+  let selectionColumnArrayCount;
+  let visibleColumnCount;
+
+  if (selectedArray.length && this.isMultipleSelection()) {
+    // if a row is selected, can't hide
+    if (this.areAllColumnsSelectedViaRowSelection()) {
+      return false;
+    }
+    // get all the column indexes from selected array of objects
+    for (let i = 0; i < selectedArray.length; i++) {
+      let startIndex = selectedArray[i].startIndex.column;
+      let endIndex = selectedArray[i].endIndex.column;
+      for (let j = startIndex; j <= endIndex; j++) {
+        if (!this.m_hiddenColumns.includes(j)) {
+          columnArray.push(j);
+        }
+      }
+    }
+
+    selectionColumnArrayCount = columnArray.length;
+  } else {
+    // count is 1 when the selection is not multiple
+    selectionColumnArrayCount = 1;
+  }
+
+  visibleColumnCount = totalColumnCount - hiddenColumnsCount - selectionColumnArrayCount;
+
+  return visibleColumnCount > 0;
+};
+
+DvtDataGrid.prototype.isHiddenAdjacent = function (details) {
+  let isCell = details.cell;
+  let isHeader = details.header;
+
+  let columnIndex = details.index;
+
+  if (isCell) {
+    let beforeIndex = columnIndex - 1;
+    let afterIndex = columnIndex + 1;
+    if (this.m_hiddenColumns.includes(beforeIndex)) {
+      return true;
+    } else if (this.m_hiddenColumns.includes(afterIndex)) {
+      return true;
+    }
+    return false;
+  } else if (isHeader) {
+    let beforeIndex = [];
+    let afterIndex = [];
+    for (let i = 0; i < columnIndex.length; i++) {
+      let j = 0;
+      while (this.m_hiddenColumns.includes(columnIndex[i] - 1 - j)) {
+        beforeIndex.push(columnIndex[i] - 1 - j);
+        j += 1;
+      }
+      let k = 0;
+      while (this.m_hiddenColumns.includes(columnIndex[i] + 1 + k)) {
+        afterIndex.push(columnIndex[i] + 1 + k);
+        k += 1;
+      }
+    }
+    if (beforeIndex.length > 0 || afterIndex.length > 0) {
+      return true;
+    }
+    return false;
+  }
+  return false;
+};
+
+DvtDataGrid.prototype.getColumnSelectionIndexArray = function () {
+  let selectedArray = this.m_selection;
+  let columnArray = [];
+
+  if (selectedArray.length && !this.areAllColumnsSelectedViaRowSelection()) {
+    // get all the column indexes from selected array of objects
+    // handle all rows + columns case
+    for (let i = 0; i < selectedArray.length; i++) {
+      let startIndex = selectedArray[i].startIndex.column;
+      let endIndex = selectedArray[i].endIndex.column;
+      for (let j = startIndex; j <= endIndex; j++) {
+        columnArray.push(j);
+      }
+    }
+    columnArray.sort((a, b) => a - b);
+  }
+  return columnArray;
+};
+
+DvtDataGrid.prototype.areAllColumnsSelectedViaRowSelection = function () {
+  // returns true when it's cell selection multiple and rows are selected
+  let selectedArray = this.m_selection;
+
+  let selection = this.m_options.options.selectionMode;
+  let cellSelection = selection.cell;
+  let rowSelection = selection.row;
+
+  let isRowSelection = rowSelection === 'multiple' || rowSelection === 'single';
+
+  if (selectedArray.length && (cellSelection === 'multiple' || isRowSelection)) {
+    for (let i = 0; i < selectedArray.length; i++) {
+      let startIndex = selectedArray[i].startIndex.column;
+      let endIndex = selectedArray[i].endIndex.column;
+      /* eslint-disable eqeqeq */
+      if (
+        (startIndex === 0 && endIndex === -1) ||
+        (startIndex == undefined && endIndex == undefined)
+      ) {
+        return true;
+      }
+      /* eslint-enable eqeqeq */
+    }
+  }
+  return false;
+};
+
+DvtDataGrid.prototype._getCellHidabilityContextMenuCapability = function (cell) {
+  let selectionMode = this.m_options.options.selectionMode;
+  let cellSelection = selectionMode.cell;
+  let rowSelection = selectionMode.row;
+
+  let canHide = false;
+  let canUnhide = false;
+
+  let columnArray = this.getColumnSelectionIndexArray();
+  const context = this.getResources().getMappedAttribute('context');
+
+  // for cell selection multiple hide is enabled all the time except when all visible columns are selected or when rows are selected
+  // for cell selection multiple unhide is enabled when there are hidden columns in the selection or when rows are selected
+  // for cell selection single, hide is enabled all the time except when all visible columns are selected
+  // for cell selection single, unhide is enabled when there are hidden columns adjacent to the selected cell
+  // for row selection single, hide is disabled. Unhide is enabled if there are any hidden columns
+  // for cell/row selection none, hide is enabled all the time except if it's last visible column.
+  // for cell/row selection none, unhide is enabled when there are hidden columns adjacent to the Active cell
+
+  // for cell/row single/multiple
+  if (this._isSelectionEnabled()) {
+    // cell/row multiple
+    if (this.isMultipleSelection()) {
+      if (cellSelection === 'multiple') {
+        if (this.canHide()) {
+          canHide = true;
+        }
+        if (columnArray.length > 0) {
+          let firstIndex = columnArray[0];
+          let lastIndex = columnArray[columnArray.length - 1];
+          if (
+            this.containsHiddenItems(columnArray).length > 0 ||
+            this.isFirstOrFirstNonHiddenIndex(firstIndex) ||
+            this.isLastOrLastNonHiddenIndex(lastIndex)
+          ) {
+            canUnhide = true;
+          }
+        }
+      } else if (rowSelection === 'multiple' && this.m_hiddenColumns.length > 0) {
+        canUnhide = true;
+      }
+    } else if (cellSelection === 'single') {
+      if (this.canHide()) {
+        canHide = true;
+      }
+      if (this.isHiddenAdjacent({ cell: true, index: columnArray[0] })) {
+        canUnhide = true;
+      }
+    } else if (rowSelection === 'single' && this.m_hiddenColumns.length > 0) {
+      canUnhide = true;
+    }
+  } else if (cellSelection === 'none' && rowSelection === 'none') {
+    if (this.canHide()) {
+      canHide = true;
+    }
+    let columnIndex = cell[context].indexes.column;
+    if (this.isHiddenAdjacent({ cell: true, index: columnIndex })) {
+      canUnhide = true;
+    }
+  }
+
+  return { canHide, canUnhide };
+};
+
+DvtDataGrid.prototype._getHeaderHidabilityContextMenuCapability = function (header, actualCell) {
+  let selectionMode = this.m_options.options.selectionMode;
+  let cellSelection = selectionMode.cell;
+  let rowSelection = selectionMode.row;
+  var axis = this.getHeaderCellAxis(header);
+
+  let canHide = false;
+  let canUnhide = false;
+
+  let columnArray = this.getColumnSelectionIndexArray();
+  let isHeaderSelected = this.m_utils.containsCSSClassName(header, this.getMappedStyle('selected'));
+
+  if (this._isSelectionEnabled() && cellSelection === 'multiple') {
+    if (isHeaderSelected && this.canHide()) {
+      canHide = true;
+    }
+    if (columnArray.length > 0) {
+      let firstIndex = columnArray[0];
+      let lastIndex = columnArray[columnArray.length - 1];
+      if (
+        this.containsHiddenItems(columnArray).length > 0 ||
+        this.isFirstOrFirstNonHiddenIndex(firstIndex) ||
+        this.isLastOrLastNonHiddenIndex(lastIndex)
+      ) {
+        canUnhide = true;
+      }
+    } else if (this.areAllColumnsSelectedViaRowSelection() && this.m_hiddenColumns.length > 0) {
+      canUnhide = true;
+    }
+  } else if (
+    rowSelection === 'multiple' ||
+    cellSelection === 'single' ||
+    rowSelection === 'single' ||
+    (cellSelection === 'none' && rowSelection === 'none')
+  ) {
+    if (this.m_hiddenColumns.length > 0) {
+      canUnhide = true;
+    }
+
+    // right click on column header with row selection
+    if ((axis === 'column' || axis === 'columnEnd') && !actualCell) {
+      canHide = true;
+
+      let columnIndex = this.getIndexesByHeader(header);
+      if (this.isHiddenAdjacent({ header: true, index: columnIndex })) {
+        canUnhide = true;
+      } else {
+        canUnhide = false;
+      }
+    }
+  }
+
+  return { canHide, canUnhide };
+};