How to use the handsontable/helpers/dom/element.addClass function in handsontable

let hotInitializer = (wrapper) => {
      if (!this._element) {
        return;
      }
      if (this.itemsBox) {
        this.itemsBox.destroy();
      }

      addClass(wrapper, 'htUIMultipleSelectHot');
      // Construct and initialise a new Handsontable
      this.itemsBox = new this.hot.constructor(wrapper, {
        data: this.items,
        columns: [
          {data: 'checked', type: 'checkbox', label: {property: 'visualValue', position: 'after'}}
        ],
        beforeRenderer: (TD, row, col, prop, value, cellProperties) => {
          TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
        },
        autoWrapCol: true,
        colWidths: 187,
        height: 110,
        width: 187,
        copyPaste: false,
        disableVisualSelection: 'area',
        fillHandle: false,

var hotInitializer = function hotInitializer(wrapper) {
        if (!_this3._element) {
          return;
        }
        if (_this3.itemsBox) {
          _this3.itemsBox.destroy();
        }

        addClass(wrapper, 'htUIMultipleSelectHot');
        // Construct and initialise a new Handsontable
        _this3.itemsBox = new _this3.hot.constructor(wrapper, {
          data: _this3.items,
          columns: [{ data: 'checked', type: 'checkbox', label: { property: 'visualValue', position: 'after' } }],
          beforeRenderer: function beforeRenderer(TD, row, col, prop, value, cellProperties) {
            TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
          },
          autoWrapCol: true,
          colWidths: 187,
          height: 110,
          width: 187,
          copyPaste: false,
          disableVisualSelection: 'area',
          fillHandle: false,
          fragmentSelection: 'cell',
          tabMoves: { row: 1, col: 0 },

onAfterGetRowHeader(row, th) {
    let tr = th.parentNode;

    if (tr) {
      if (this.isHidden(row)) {
        addClass(tr, 'hide');
      } else {
        removeClass(tr, 'hide');
      }
    }

    let firstSectionHidden = true;
    let i = row - 1;

    do {
      if (!this.isHidden(i)) {
        firstSectionHidden = false;
        break;
      }
      i--;
    } while (i >= 0);

renderer: (hot, wrapper, row, col, prop, value) => {
        addClass(wrapper.parentNode, 'htFiltersMenuCondition');

        if (this.addSeparator) {
          addClass(wrapper.parentNode, 'border');
        }

        let label = document.createElement('div');

        addClass(label, 'htFiltersMenuLabel');

        label.textContent = value;

        wrapper.appendChild(label);
        arrayEach(this.elements, (ui) => wrapper.appendChild(ui.element));

        return wrapper;
      }
    };

firstSectionHidden = false;
        break;
      }
      i--;
    } while (i >= 0);

    if (firstSectionHidden) {
      addClass(th, 'firstVisibleRow');
    }

    if (this.settings.indicators && this.hot.hasRowHeaders()) {
      if (this.isHidden(row - 1)) {
        addClass(th, 'afterHiddenRow');
      }
      if (this.isHidden(row + 1)) {
        addClass(th, 'beforeHiddenRow');
      }
    }
  }

value: function onAfterGetColHeader(col, TH) {
      var physicalColumn = this.t.toPhysicalColumn(col);

      if (this.enabled && this.conditionCollection.hasConditions(physicalColumn)) {
        addClass(TH, 'htFiltersActive');
      } else {
        removeClass(TH, 'htFiltersActive');
      }
    }

let topLeftCornerOverlay = _this.hot.view.wt.wtOverlays.topLeftCornerOverlay;
        let leftOverlay = _this.hot.view.wt.wtOverlays.leftOverlay;
        let isInTopLeftCornerOverlay = topLeftCornerOverlay ? topLeftCornerOverlay.clone.wtTable.THEAD.contains(TH) : false;
        let isInLeftOverlay = leftOverlay ? leftOverlay.clone.wtTable.THEAD.contains(TH) : false;

        if (colspan > 1) {
          TH.setAttribute('colspan', isInTopLeftCornerOverlay || isInLeftOverlay ? Math.min(colspan, fixedColumnsLeft - index) : colspan);
        }

        if (isInTopLeftCornerOverlay || isInLeftOverlay && index === fixedColumnsLeft - 1) {
          addClass(TH, 'overlayEdge');
        }
      }

      if (_this.colspanArray[headerRow][index] && _this.colspanArray[headerRow][index].hidden) {
        addClass(TH, 'hiddenHeader');
      }

      empty(TH);

      let divEl = document.createElement('DIV');
      addClass(divEl, 'relative');
      let spanEl = document.createElement('SPAN');
      addClass(spanEl, 'colHeader');

      fastInnerHTML(spanEl, _this.colspanArray[headerRow][index] ? _this.colspanArray[headerRow][index].label || '' : '');

      divEl.appendChild(spanEl);

      TH.appendChild(divEl);

      _this.hot.runHooks('afterGetColHeader', index, TH);

TH.setAttribute('colspan', isInTopLeftCornerOverlay || isInLeftOverlay ? Math.min(colspan, fixedColumnsLeft - index) : colspan);
          }

          if (isInTopLeftCornerOverlay || isInLeftOverlay && index === fixedColumnsLeft - 1) {
            addClass(TH, 'overlayEdge');
          }
        }

        if (_this.colspanArray[headerRow][index] && _this.colspanArray[headerRow][index].hidden) {
          addClass(TH, 'hiddenHeader');
        }

        empty(TH);

        var divEl = document.createElement('DIV');
        addClass(divEl, 'relative');
        var spanEl = document.createElement('SPAN');
        addClass(spanEl, 'colHeader');

        fastInnerHTML(spanEl, _this.colspanArray[headerRow][index] ? _this.colspanArray[headerRow][index].label || '' : '');

        divEl.appendChild(spanEl);

        TH.appendChild(divEl);

        _this.hot.runHooks('afterGetColHeader', index, TH);
      };
    }

onAfterGetColHeader(col, TH) {
    const physicalColumn = this.t.toPhysicalColumn(col);

    if (this.enabled && this.conditionCollection.hasConditions(physicalColumn)) {
      addClass(TH, 'htFiltersActive');
    } else {
      removeClass(TH, 'htFiltersActive');
    }
  }