ag-grid hiding everything below column headers if no data found

Question

When I use ag-grid of given fixed height with Angular, before any data is shown the space where data will be shown (so grid in fact) is visible with text 'loading'. It's not correct in my case, as I don't bind rowData to Observable or Promise so it's not async. The grid is populated after click on button. I'd like to see only column headers and nothing below that. My grid config looks like that:

<ag-grid-angular
style="width: 100%; height: 335px;"
class="ag-theme-balham"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData"
animateRows
rowSelection="multiple"
>

So I'd like to hide whole grid except of column headers until rowData is empty array. Is there a way to do this?

Answer 1

Just to clarify, I use ag-grid with React but there are many similarities between the two. There are two things you can do here:

1. You can control what text is visible while loading or if there is no data with

    [overlayLoadingTemplate]="<span></span>"
    [overlayNoRowsTemplate]="<span></span>"

2. Since you are currently setting a fixed height in your in line styling for the grid, it will always be at 335px. Once you set that to something that's not static, you can add this prop to the grid and it will change the height of the grid depending on data inside.

[domLayout]="autoHeight"