Ag-grid Ячейка, содержащая кнопку меню

Question

Я использую общественную версию ag-grid в своем проекте. Я пытаюсь добавить кнопку меню в одну из ячеек каждой строки. при нажатии кнопки меню должно появиться всплывающее меню, которое будет иметь опции «Редактировать / удалить / переименовать», и мне нужно запускать событие со значением строки при нажатии любого элемента в меню.

Я пытаюсь создайте средство визуализации ячеек, которое будет отображать кнопку. Первоначально меню будет скрыто, и по нажатию кнопки я меняю отображение, используя класс css. Я вижу, что класс css добавляется правильно, но меню все еще не отображается. Я проверил в консоли, и она скрыта за столом. Я использовал абсолютное положение и z-index в разных местах, но безуспешно.

Я не могу использовать контекстное меню или корпоративное меню из коробки, так как я использую версию сообщества. не могли бы вы помочь мне здесь? Кроме того, есть ли лучший способ достичь этого результата, то дайте мне знать. Большое спасибо заранее.

var students = [
    {value: 14, type: 'age'},
    {value: 'female', type: 'gender'},
    {value: "Happy", type: 'mood'},
    {value: 21, type: 'age'},
    {value: 'male', type: 'gender'},
    {value: "Sad", type: 'mood'}
];


var columnDefs = [
    {
        headerName: "Value",
        field: "value",
        width: 100
    },

    {headerName: "Type", field: "type", width: 100},
     {headerName: "Action", width: 100, cellRenderer: 'actionMenuRenderer' }
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: students,
    onGridReady: function (params) {
        params.api.sizeColumnsToFit();
    },
    components:{
      actionMenuRenderer: ActionMenuCellRenderer
    }
};
function ActionMenuCellRenderer() {
}

ActionMenuCellRenderer.prototype.init = function (params) {
    this.eGui = document.createElement('div')

    if (params.value !== "" || params.value !== undefined || params.value !== null) {
         this.eGui.classList.add('menu');
         this.eGui.innerHTML = this.getMenuMarkup();
         this.actionBtn =  this.eGui.querySelector(`.actionButton`);
           this.menuWrapper =  this.eGui.querySelector(`.menuWrapper`);
           this.actionBtn.addEventListener('click', event => this.onActionBtnClick(event));
    }
};

ActionMenuCellRenderer.prototype.getGui = function () {
    return this.eGui;
};

ActionMenuCellRenderer.prototype.onActionBtnClick = function() {
    alert('hey');
    this.menuWrapper.classList.toggle('showMenu');
}

ActionMenuCellRenderer.prototype.getMenuMarkup = function () {
        return `
            <button type="button" class="actionButton">
              menu
            </button>
            <div class="menuWrapper">
                <a class="menuItem">
                    Edit
                </a>
                <a class="menuItem">
                    Delete
                </a>
                <a class="menuItem">
                    Duplicate
                </a>
            </div>
        `;
}

Мой образец plnkr - Пример plnkr