React ag-grid header component is rendering behind row

Question

I have a custom component for my ag-grid header, of a clickable icon that opens a menu. This menu opens, but most of it appears behind the rows below the header. I know there is a solution for a custom cell that has a popup menu , where you add "overflow: visible" to the cell, and adjust z-indexes for the cell and the other cells. I tried that with the header cells but it still is not working. I couldn't find a similar question asked anywhere else. Does anyone know how to fix this?

This is what it looks like

Here is my AgGridColumn:

          <AgGridColumn headerComponentFramework={(params) => renderKebabMenuHeader(params)} minWidth={160} headerName="" field="id" cellRenderer="kebabMenuRenderer" cellClass="kebab-menu-cell cell-vertical-align-text-right" headerClass="kebab-menu-cell cell-vertical-align-text-right"/>

renderKebabMenuHeader() simply returns a JSX element of my menu.

Answer 1

I ended up not using the ag-grid header at all for this. Instead I made a div with position: absolute instead