ag-grid - space between column header and first row

There is a space between grid header row and first data row - how do i remove this? Thanks My code:

<div>
        <ag-grid-angular style="width: 500px; height: 500px;" [headerHeight]="0" [rowData]="rowData"
          [rowSelection]="rowSelection" [rowMultiSelectWithClick]="true" [columnDefs]="columnDefs"
          [floatingFiltersHeight]="0" (gridReady)="onGridReady($event)">
        </ag-grid-angular>
      </div>



    columnDefs = [{
    headerName: 'id', field: 'id', editable: true, suppressToolPanel: true, filter: false, hide: true
  },
  {
    headerName: 'payrollcode', field: 'payrollcode', editable: true, suppressToolPanel: true, filter: false
  },
  {
    headerName: 'select', field: 'select', editable: true, suppressToolPanel: true, filter: true, cellRendererParams: { checkbox: true }
  }];

Please find code for screenshot gird below.

 @Input()
  displayObject: Array<any> = [];
  @Input()
  title = '';

  columnDefs = [];
  calcHeight$ = of(30);
  loading$;
  rowData = [];
  constructor(
    public activeModal: NgbActiveModal,
    private calendarService: CalendarService,
    private injector: Injector,
    private modalService: NgbModal,
    private sdToastService: SdToastService) { }

  ngOnInit() {

    Object.keys(this.displayObject[0]).forEach(key => {
      this.columnDefs.push({ headerName: key, field: key, sortable: true, filter: true });
    });
    // this.rowData.concat(this.displayObject);
    this.rowData = this.displayObject;
    console.log(this.rowData);

  }


 

      <div style="width: 400px; height: 400px;">
      <ag-grid-angular style="width: 600px; height:300px;" class="ag-theme-balham" [rowData]="rowData"
        [columnDefs]="columnDefs">
      </ag-grid-angular>
    </div>

I added the code for the grid in the screenshot.

Here is a screenshot showing better the issue:

import { Component, Injector, Input, OnInit } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { of } from 'rxjs';
import { CalendarService } from '../calendar.service';

@Component({
  selector: 'app-preview-calendars',
  templateUrl: './preview-calendars.component.html',
  styleUrls: ['./preview-calendars.component.css']
})
export class PreviewCalendarsComponent implements OnInit {
  @Input()
  displayObject: Array<any> = [];
  @Input()
  title = '';

  columnDefs = [];
  calcHeight$ = of(30);
  loading$;
  rowData = [];
  constructor(
    public activeModal: NgbActiveModal,
    private calendarService: CalendarService,
    private injector: Injector,
    private modalService: NgbModal,
) { }

  ngOnInit() {

    Object.keys(this.displayObject[0]).forEach(key => {
      this.columnDefs.push({ headerName: key, field: key, sortable: true, filter: true });
    });
    // this.rowData.concat(this.displayObject);
    this.rowData = this.displayObject;
    console.log(this.rowData);

  }

}



  <div style="width: 400px; height: 400px;">
      <ag-grid-angular class="ag-theme-balham" [rowData]="rowData" [columnDefs]="columnDefs">
      </ag-grid-angular>
    </div>

You will see that the first row is occupies too much space and the last row is hidden - this is the issue it seems there is an empty row being displayed.

The data: