title: Ag-grid Cell containing menu button
body: <p>I am using community version of ag-grid in my project. I am trying add menu button in one of the cell of every row. on clicking of the menu button, there should be menu pop up, which will have Edit/delete/rename options and I need to fire event with row value when any item on menu is clicked.</p>
  
  <p>I am trying to create a cell renderer which will display the button. menu will be hidden initially and on clicking of button, I am changing display using css class. I am seeing the css class is getting added correctly but the menu is still not visible. I checked in the console and it is hidden behind the table. I used position absolute and z-index at various place but ended up with no luck.</p>
  
  <p>I can not use context menu or enterprise menu out of box as I am using community version. can you please help me here? also, is there any better way to achieve this result then let me know. Thanks a lot in advance.</p>
  
  <pre><code>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 =&gt; 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 `
              &lt;button type="button" class="actionButton"&gt;
                menu
              &lt;/button&gt;
              &lt;div class="menuWrapper"&gt;
                  &lt;a class="menuItem"&gt;
                      Edit
                  &lt;/a&gt;
                  &lt;a class="menuItem"&gt;
                      Delete
                  &lt;/a&gt;
                  &lt;a class="menuItem"&gt;
                      Duplicate
                  &lt;/a&gt;
              &lt;/div&gt;
          `;
  }
  </code></pre>
  
  <p>My plnkr sample-
  <a href="https://plnkr.co/edit/4VI8uJvpWMZS7NJBxyDA?p=preview" rel="nofollow noreferrer">plnkr sample</a></p>