How to increase the height of column header in ag-grid?

Question

Is there a way to increase the height of the column header like we do for the width. I need this because I've embedded a piechart in header and which is binded but the column is too short to show it completely. is there a way to increase size of a column header.

Solution 1

You have a property headerHeight in gridOptions

Check https://www.ag-grid.com/javascript-grid-properties/index.php

Solution 2

You can add run-time also according to header content using grid api:

onGridReady(params) {
    this.gridApi = params.api;
    this.gridApi.setHeaderHeight(<set your header height in pixel>);
}

bind onGridReady() function to gridReady event as follows:

<ag-grid-angular(gridReady)="onGridReady($event)"> </ag-grid-angular>

Solution 3

Header Height property can also be set directly on the grid component in pixels like so:

<ag-grid-vue style="width: 100%;height: 47vh;"
    class="ag-theme-balham"
    :columnDefs="columnDefs"
    :rowData="rowData"
    headerHeight="50">
</ag-grid-vue>