Ag-Grid Angular: Conditionally Resize CellRenderer Header Component

Question

tl;dr: When editing an ag-grid, show a hidden column and adjust the header column width appropriately to fit all columns dynamically

I am having trouble getting a dynamic table width, specifically the header component. I have a view/action logic where one of the columns should only show when editing. The, let's say, edit column row data renders fine, but, the edit column header component does not adjust the width of the header, so it appears as edit column is never shown on the screen. This edit column is also a cellRenderer

     agGridColumnDefElement = new AgGridColumnDef("Edit", "Edit");
      agGridColumnDefElement.filter = false;
      agGridColumnDefElement.sortable = false;
      agGridColumnDefElement.hide = true;
      //agGridColumnDefElement.pinned = 'left';
      agGridColumnDefElement['headerClass'] = 'tall-header';
      agGridColumnDefElement['cellClass'] = 'identifier-column';

      agGridColumnDefElement.cellRenderer = 'editMenuRendererComponent';

      columnDefs.push(agGridColumnDefElement);

  onGridReady(params) {
    this.gridApi = params.api;
    params.api.sizeColumnsToFit();
    this.gridColumnApi = params.columnApi;
    
    // auto size all columns
    const allColumnIds: string[] = [];
    this.gridColumnApi.columnModel.gridColumns.map((column) => {
      allColumnIds.push(column.getId());
    });
    this.gridColumnApi.autoSizeColumns(allColumnIds);
  }

  private initGrid() {
    this.gridOptions = <GridOptions>{
      defaultColDef:
        {
          resizable: true,
          suppressSizeToFit: true,
          suppressColumnVirtualisation:true,
          sortable: true,
          suppressMenu: false,
          flex: 1,
        },
      domLayout: 'autoHeight',
      sizeColumnsToFit: true
    };
  }

please see image for column in question: