title: ag-grid - space between column header and first row
body: <p>There is a space between grid header row and first data row - how do i remove this? Thanks
  My code:</p>
  <pre><code>&lt;div&gt;
          &lt;ag-grid-angular style=&quot;width: 500px; height: 500px;&quot; [headerHeight]=&quot;0&quot; [rowData]=&quot;rowData&quot;
            [rowSelection]=&quot;rowSelection&quot; [rowMultiSelectWithClick]=&quot;true&quot; [columnDefs]=&quot;columnDefs&quot;
            [floatingFiltersHeight]=&quot;0&quot; (gridReady)=&quot;onGridReady($event)&quot;&gt;
          &lt;/ag-grid-angular&gt;
        &lt;/div&gt;
  
  
  
      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 }
    }];
  </code></pre>
  <p><a href="https://i.stack.imgur.com/B3Me8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B3Me8.png" alt="grid " /></a>
  Please find code for screenshot gird below.</p>
  <pre><code> @Input()
    displayObject: Array&lt;any&gt; = [];
    @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 =&gt; {
        this.columnDefs.push({ headerName: key, field: key, sortable: true, filter: true });
      });
      // this.rowData.concat(this.displayObject);
      this.rowData = this.displayObject;
      console.log(this.rowData);
  
    }
  
  
   
  
        &lt;div style=&quot;width: 400px; height: 400px;&quot;&gt;
        &lt;ag-grid-angular style=&quot;width: 600px; height:300px;&quot; class=&quot;ag-theme-balham&quot; [rowData]=&quot;rowData&quot;
          [columnDefs]=&quot;columnDefs&quot;&gt;
        &lt;/ag-grid-angular&gt;
      &lt;/div&gt;
  </code></pre>
  <p>I added the code for the grid in the screenshot.</p>
  <p>Here is a screenshot showing better the issue:
  <a href="https://i.stack.imgur.com/LexTo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LexTo.png" alt="enter image description here" /></a></p>
  <pre><code>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&lt;any&gt; = [];
    @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 =&gt; {
        this.columnDefs.push({ headerName: key, field: key, sortable: true, filter: true });
      });
      // this.rowData.concat(this.displayObject);
      this.rowData = this.displayObject;
      console.log(this.rowData);
  
    }
  
  }
  
  
  
    &lt;div style=&quot;width: 400px; height: 400px;&quot;&gt;
        &lt;ag-grid-angular class=&quot;ag-theme-balham&quot; [rowData]=&quot;rowData&quot; [columnDefs]=&quot;columnDefs&quot;&gt;
        &lt;/ag-grid-angular&gt;
      &lt;/div&gt;
  </code></pre>
  <p>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.</p>
  <p>The data:</p>
  <p><a href="https://i.stack.imgur.com/pI0Ap.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pI0Ap.png" alt="enter image description here" /></a></p>