@oracle/oraclejet 15.0.4 → 15.1.0

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

@@ -258,6 +258,10 @@ var __oj_data_grid_metadata =
               ],
               "value": "disable"
             },
+            "hidable": {
+              "type": "string",
+              "value": "disable"
+            },
             "label": {
               "type": "object",
               "properties": {
@@ -476,6 +480,10 @@ var __oj_data_grid_metadata =
         }
       }
     },
+    "hiddenColumns": {
+      "type": "object",
+      "writeback": true
+    },
     "scrollPolicy": {
       "type": "string",
       "enumValues": [
@@ -742,6 +750,9 @@ var __oj_data_grid_metadata =
         "labelFreezeRow": {
           "type": "string"
         },
+        "labelHideColumn": {
+          "type": "string"
+        },
         "labelPaste": {
           "type": "string"
         },
@@ -808,6 +819,9 @@ var __oj_data_grid_metadata =
         "labelUnfreezeRow": {
           "type": "string"
         },
+        "labelUnhideColumn": {
+          "type": "string"
+        },
         "msgFetchingData": {
           "type": "string"
         },
@@ -1026,6 +1040,8 @@ var __oj_data_grid_metadata =
     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';
@@ -1049,6 +1065,8 @@ var __oj_data_grid_metadata =
     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'
@@ -1064,6 +1082,7 @@ var __oj_data_grid_metadata =
     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);
@@ -2410,6 +2429,29 @@ var __oj_data_grid_metadata =
     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
@@ -3173,6 +3215,10 @@ var __oj_data_grid_metadata =
         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;
@@ -4103,7 +4149,6 @@ var __oj_data_grid_metadata =
    * @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);
@@ -7173,11 +7218,13 @@ var __oj_data_grid_metadata =
 
     // 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) {
@@ -7667,7 +7714,8 @@ var __oj_data_grid_metadata =
     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) {
@@ -7808,7 +7856,7 @@ var __oj_data_grid_metadata =
     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) {
@@ -8247,6 +8295,7 @@ var __oj_data_grid_metadata =
     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
@@ -8283,6 +8332,10 @@ var __oj_data_grid_metadata =
         top = columns ? 0 : atPixel - totalHeaderDimension;
       }
 
+      if (this.isHidden(axis, index)) {
+        hiddenInRangeCount += 1;
+      }
+
       var returnVal = this.buildLevelHeaders(
         fragment,
         index,
@@ -8323,10 +8376,13 @@ var __oj_data_grid_metadata =
 
     this.m_subtreeAttachedCallback(scroller);
 
+    let visibleHeaderCount = count - hiddenInRangeCount;
+
     return {
       totalHeaderDimension: totalHeaderDimension,
       totalLevelDimension: totalLevelDimension,
-      stopFetch: stopFetch
+      stopFetch: stopFetch,
+      visibleHeaderCount
     };
   };
 
@@ -8438,6 +8494,7 @@ var __oj_data_grid_metadata =
     var header;
     var i;
     var returnVal;
+    let hidden;
 
     if (axis === 'row') {
       dimensionAxis = 'row';
@@ -8484,6 +8541,7 @@ var __oj_data_grid_metadata =
       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;
@@ -8499,6 +8557,7 @@ var __oj_data_grid_metadata =
       if (this._hasFrozenColumns() && index <= this.m_frozenColIndex && this.m_colEndHeaderFrozen) {
         groupingRoot = this.m_colEndHeaderFrozen;
       }
+      hidden = this.isHidden(axis, index);
     }
 
     // get the extent info
@@ -8577,6 +8636,10 @@ var __oj_data_grid_metadata =
         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
@@ -8649,6 +8712,10 @@ var __oj_data_grid_metadata =
         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
@@ -8733,6 +8800,10 @@ var __oj_data_grid_metadata =
 
       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;
@@ -8792,6 +8863,10 @@ var __oj_data_grid_metadata =
           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) {
@@ -9065,9 +9140,14 @@ var __oj_data_grid_metadata =
     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 {
@@ -9102,6 +9182,66 @@ var __oj_data_grid_metadata =
     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;
@@ -9196,9 +9336,12 @@ var __oj_data_grid_metadata =
 
     // 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);
@@ -9868,7 +10011,7 @@ var __oj_data_grid_metadata =
         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,
@@ -10078,6 +10221,12 @@ var __oj_data_grid_metadata =
       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();
@@ -10383,6 +10532,8 @@ var __oj_data_grid_metadata =
   ) {
     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();
@@ -10556,6 +10707,12 @@ var __oj_data_grid_metadata =
               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);
 
@@ -10630,7 +10787,7 @@ var __oj_data_grid_metadata =
     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 };
   };
 
@@ -12445,7 +12602,10 @@ var __oj_data_grid_metadata =
           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
@@ -12462,6 +12622,10 @@ var __oj_data_grid_metadata =
 
           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);
@@ -12514,7 +12678,15 @@ var __oj_data_grid_metadata =
   ) {
     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 };
@@ -12526,12 +12698,25 @@ var __oj_data_grid_metadata =
 
     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 };
       }
@@ -12596,7 +12781,16 @@ var __oj_data_grid_metadata =
   ) {
     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);
@@ -12604,13 +12798,23 @@ var __oj_data_grid_metadata =
     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);
@@ -13106,7 +13310,9 @@ var __oj_data_grid_metadata =
       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,
@@ -13157,6 +13363,16 @@ var __oj_data_grid_metadata =
       }
     }
 
+    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) {
@@ -13239,7 +13455,9 @@ var __oj_data_grid_metadata =
       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,
@@ -13318,6 +13536,21 @@ var __oj_data_grid_metadata =
           }
         }
       }
+
+      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;
@@ -13425,6 +13658,10 @@ var __oj_data_grid_metadata =
       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);
     }
   };
 
@@ -13638,6 +13875,9 @@ var __oj_data_grid_metadata =
    * @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);
@@ -13914,6 +14154,7 @@ var __oj_data_grid_metadata =
   };
 
   DvtDataGrid.prototype.handleCornerMouseDown = function (event) {
+    this.deleteDatabodyHiddenVisualIndicators();
     let target = /** @type {Element} */ (event.target);
     let end =
       this.m_utils.containsCSSClassName(target, this.getMappedStyle('rowendheaderlabel')) ||
@@ -14199,6 +14440,9 @@ var __oj_data_grid_metadata =
    * @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) {
@@ -16046,10 +16290,15 @@ var __oj_data_grid_metadata =
 
     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;
@@ -16147,7 +16396,9 @@ var __oj_data_grid_metadata =
         levelCount = this.m_columnEndHeaderLevelCount;
         className += ' ' + this.getMappedStyle('colendheadercell');
       }
+
       const endAxis = `${axis}End`;
+
       insertReference = this._getHeaderCellByIndex(start, endAxis, levelCount - 1);
       insertPixel = this.getElementDir(insertReference, insertDimension);
 
@@ -16528,7 +16779,7 @@ var __oj_data_grid_metadata =
       }
       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;
@@ -16559,7 +16810,10 @@ var __oj_data_grid_metadata =
       }
       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;
@@ -16583,6 +16837,9 @@ var __oj_data_grid_metadata =
       this.updateColumnBanding();
     }
 
+    // this.setHiddenColumnsDisplayAndWidth();
+    this.deleteAndApplyHiddenIndicators();
+
     if (!dontModifySelection) {
       this.applySelection();
       this._resetHeaderHighLight();
@@ -17479,8 +17736,10 @@ var __oj_data_grid_metadata =
       // 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) &&
@@ -17738,6 +17997,8 @@ var __oj_data_grid_metadata =
       }
     }
 
+    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.
@@ -17925,6 +18186,8 @@ var __oj_data_grid_metadata =
         }
       }
       this.resizeGrid();
+      // this.setHiddenColumnsDisplayAndWidth();
+      this.deleteAndApplyHiddenIndicators();
       this.m_resizeRequired = true;
       let self = this;
       Promise.resolve().then(() => {
@@ -18889,6 +19152,7 @@ var __oj_data_grid_metadata =
           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();
@@ -19441,6 +19705,7 @@ var __oj_data_grid_metadata =
     var start;
     var index;
     let frozenRoot;
+    let headerElement = header;
 
     var axis = this.getHeaderCellAxis(header);
     switch (axis) {
@@ -19490,17 +19755,25 @@ var __oj_data_grid_metadata =
       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;
@@ -20586,10 +20859,12 @@ var __oj_data_grid_metadata =
 
     // 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++) {
@@ -21041,6 +21316,9 @@ var __oj_data_grid_metadata =
             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',
@@ -21066,7 +21344,19 @@ var __oj_data_grid_metadata =
           }
         }
         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);
@@ -21122,6 +21412,7 @@ var __oj_data_grid_metadata =
     var levelCount;
     var stopFetch;
     let start;
+    let root;
 
     let emptyElement = this._getEmptyElement();
 
@@ -21182,6 +21473,7 @@ var __oj_data_grid_metadata =
     }
 
     if (axis === 'column') {
+      root = this.m_colHeader;
       end = this.m_endColHeader;
       levelCount = this.m_columnHeaderLevelCount;
       stopFetch = this.m_stopColumnHeaderFetch;
@@ -21201,6 +21493,7 @@ var __oj_data_grid_metadata =
         // 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;
@@ -21262,7 +21555,7 @@ var __oj_data_grid_metadata =
     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],
@@ -21291,24 +21584,30 @@ var __oj_data_grid_metadata =
               );
               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) {
@@ -21510,12 +21809,30 @@ var __oj_data_grid_metadata =
             } 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);
@@ -21567,26 +21884,23 @@ var __oj_data_grid_metadata =
             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) &&
@@ -21915,7 +22229,8 @@ var __oj_data_grid_metadata =
               }
             }
           } 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);
@@ -22037,22 +22352,45 @@ var __oj_data_grid_metadata =
         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:
@@ -22244,12 +22582,23 @@ var __oj_data_grid_metadata =
     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;
       }
@@ -22621,8 +22970,45 @@ var __oj_data_grid_metadata =
             } 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
@@ -22715,8 +23101,45 @@ var __oj_data_grid_metadata =
               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
@@ -22926,47 +23349,69 @@ var __oj_data_grid_metadata =
           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 };
@@ -23084,10 +23529,17 @@ var __oj_data_grid_metadata =
       // 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;
 
@@ -24246,7 +24698,9 @@ var __oj_data_grid_metadata =
           // 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
@@ -25979,10 +26433,19 @@ var __oj_data_grid_metadata =
     }
     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);
           }
@@ -26116,7 +26579,8 @@ var __oj_data_grid_metadata =
       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);
@@ -26163,7 +26627,8 @@ var __oj_data_grid_metadata =
       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);
         }
@@ -26434,6 +26899,7 @@ var __oj_data_grid_metadata =
 
       // helper to update all elements this effects
       this.resizeColumnWidthAndShift(widthChange);
+      this.deleteAndApplyHiddenIndicators();
       if (!isFrozenSectionResize) {
         this.m_endColPixel += widthChange;
         this.m_endColHeaderPixel += widthChange;
@@ -26546,6 +27012,7 @@ var __oj_data_grid_metadata =
         adjustLabel = false;
       }
       this.resizeColumnHeightsAndShift(heightChange, level, end, adjustLabel);
+      this.deleteAndApplyHiddenIndicators();
 
       if (!end) {
         this.m_colHeaderHeight += heightChange;
@@ -27048,8 +27515,12 @@ var __oj_data_grid_metadata =
 
     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
         );
@@ -27396,6 +27867,9 @@ var __oj_data_grid_metadata =
     ) {
       // 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);
@@ -27478,7 +27952,8 @@ var __oj_data_grid_metadata =
     startAxisChange,
     shiftOnly,
     endAxisChange,
-    corner
+    corner,
+    forHideShow
   ) {
     var tempArray = [];
     var dimension;
@@ -27540,6 +28015,14 @@ var __oj_data_grid_metadata =
               axisExtent - extentWithinCellToIgnore
             );
           } else {
+            if (forHideShow) {
+              if (this.isHidden(axis, startAxisChange)) {
+                cell.style.display = 'none';
+              } else {
+                cell.style.display = '';
+              }
+            }
+
             this._updateTempArray(
               tempArray,
               true,
@@ -27589,7 +28072,8 @@ var __oj_data_grid_metadata =
     axis,
     dimensionDelta,
     startAxisChange,
-    shiftOnly
+    shiftOnly,
+    forHideShow
   ) {
     const tempArray = [];
     let dir;
@@ -27635,6 +28119,14 @@ var __oj_data_grid_metadata =
             axisExtent - extentWithinCellToIgnore
           );
         } else {
+          if (forHideShow) {
+            if (this.isHidden(axis, startAxisChange)) {
+              cell.style.display = 'none';
+            } else {
+              cell.style.display = '';
+            }
+          }
+
           this._updateTempArray(
             tempArray,
             true,
@@ -27784,7 +28276,8 @@ var __oj_data_grid_metadata =
     dimensionChange,
     dir,
     className,
-    axis
+    axis,
+    forHideShow
   ) {
     var header;
     var groupingContainer;
@@ -27793,7 +28286,7 @@ var __oj_data_grid_metadata =
     var newVal = 0;
 
     // get the last element in the container
-    var element = headersContainer.lastChild;
+    var element = this._getHeaderLastChild(headersContainer);
     if (element == null) {
       return;
     }
@@ -27818,7 +28311,7 @@ var __oj_data_grid_metadata =
         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;
@@ -27831,13 +28324,14 @@ var __oj_data_grid_metadata =
           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);
@@ -27854,7 +28348,15 @@ var __oj_data_grid_metadata =
       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 (
@@ -27873,10 +28375,24 @@ var __oj_data_grid_metadata =
     // 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);
+      }
     }
   };
 
@@ -28603,18 +29119,20 @@ var __oj_data_grid_metadata =
           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)
@@ -30726,7 +31244,6 @@ var __oj_data_grid_metadata =
       // eslint-disable-next-line no-param-reassign
       augment = false;
     }
-
     // reset any focus properties set on frontier cell
     this._resetSelectionFrontierFocus();
 
@@ -33520,6 +34037,7 @@ var __oj_data_grid_metadata =
     };
   }
 
+  // import { ImmutableKeySet } from 'ojs/ojkeyset';
   // import { DataGridProvider } from 'ojs/ojdatagridprovider';
 
   /**
@@ -33532,6 +34050,7 @@ var __oj_data_grid_metadata =
    * @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>>",
@@ -33869,6 +34388,14 @@ var __oj_data_grid_metadata =
    *       <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>
    */
   //-----------------------------------------------------
@@ -35817,6 +36344,27 @@ var __oj_data_grid_metadata =
        */
       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
@@ -36708,6 +37256,40 @@ var __oj_data_grid_metadata =
            * 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.
            *
@@ -37835,6 +38417,9 @@ var __oj_data_grid_metadata =
       // 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);
 
@@ -38041,6 +38626,15 @@ var __oj_data_grid_metadata =
           changed: true
         });
       });
+      this.grid.addListener('columnHide', function (details) {
+        self.option('hiddenColumns', details.ui.hiddenColumns, {
+          _context: {
+            originalEvent: details.event,
+            internalSet: true
+          },
+          changed: true
+        });
+      });
     },
 
     /**
@@ -38304,6 +38898,7 @@ var __oj_data_grid_metadata =
           case 'selection':
           case 'frozenColumnCount':
           case 'frozenRowCount':
+          case 'hiddenColumns':
             // just set returnVal in case another option is refresh at
             // the wrapper level
             returnVal = 'pass';
@@ -38400,6 +38995,19 @@ var __oj_data_grid_metadata =
       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
@@ -38569,6 +39177,8 @@ var __oj_data_grid_metadata =
       let dataTransferOptionsMenu;
       let freezeMenu;
       let menuContainer;
+      let hideMenu;
+      let unhideMenu;
 
       const isCustomElement = this._IsCustomElement();
       if (!isCustomElement) {
@@ -38604,6 +39214,11 @@ var __oj_data_grid_metadata =
         }
       }
 
+      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':
@@ -38707,11 +39322,25 @@ var __oj_data_grid_metadata =
         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
         }
@@ -38721,11 +39350,8 @@ var __oj_data_grid_metadata =
         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) {
@@ -38741,6 +39367,8 @@ var __oj_data_grid_metadata =
             resizeColWidthMenu ||
             resizeFitToContentMenu ||
             freezeMenu ||
+            hideMenu ||
+            unhideMenu ||
             sortColumnMenu ||
             sortRowMenu
           ) {
@@ -38756,6 +39384,8 @@ var __oj_data_grid_metadata =
             freezeMenu ||
             sortColumnMenu ||
             sortRowMenu ||
+            hideMenu ||
+            unhideMenu ||
             moveMenu
           ) {
             menuContainer.appendChild(this._buildContextMenuDivider()); // @HTMLUpdateOK
@@ -38918,6 +39548,14 @@ var __oj_data_grid_metadata =
         // 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
@@ -39246,7 +39884,9 @@ var __oj_data_grid_metadata =
         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();
@@ -39446,6 +40086,18 @@ var __oj_data_grid_metadata =
       }
     },
 
+    /**
+     * 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.
@@ -42106,6 +42758,30 @@ var __oj_data_grid_metadata =
         );
       }
 
+      // 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,
@@ -42445,6 +43121,8 @@ var __oj_data_grid_metadata =
 
   /**
    * 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
@@ -42458,9 +43136,11 @@ var __oj_data_grid_metadata =
       // 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()))
       ) {
@@ -42502,14 +43182,18 @@ var __oj_data_grid_metadata =
       }
     } 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) {
@@ -42723,6 +43407,7 @@ var __oj_data_grid_metadata =
     }
     if (isFeasible) {
       this._mutateRowFrozenContainer(header, cell, axis);
+      this.deleteAndApplyHiddenIndicators();
       let details = {
         event: event,
         ui: {
@@ -42816,6 +43501,7 @@ var __oj_data_grid_metadata =
     }
     if (isFeasible) {
       this._mutateColumnFrozenContainer(header, cell, axis);
+      this.deleteAndApplyHiddenIndicators();
       let details = {
         event: event,
         ui: {
@@ -44514,6 +45200,7 @@ var __oj_data_grid_metadata =
       if (this.m_colEndHeaderFrozen) {
         this.m_root.removeChild(this.m_colEndHeaderFrozen);
       }
+      this.deleteAndApplyHiddenIndicators();
       if (event) {
         let details = {
           event: event,
@@ -44536,6 +45223,7 @@ var __oj_data_grid_metadata =
       if (this.m_rowEndHeaderFrozen) {
         this.m_root.removeChild(this.m_rowEndHeaderFrozen);
       }
+      this.deleteAndApplyHiddenIndicators();
       if (event) {
         let details = {
           event: event,
@@ -45340,4 +46028,1298 @@ var __oj_data_grid_metadata =
     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 };
+  };
+
 });