Header row only 10px high when grouping and loading data asynchronously.

[adamjerickson]

When you have grouping turned on (e.g. using the directive "ui-grid-grouping", and you are loading data asynchronously (e.g. gridOptions.data = 'data', and then data is set later), the column headers render only 10px high. This is reproduced in the linked Plunkr, a fork from the Plunkr in the API docs.

EDIT: Also requires columnDefs to be set later (e.g. dynamically based on the data), or if you're trying to let ui-grid interpret the columns by not setting columnDefs.

Plunkr recreating the issue: http://plnkr.co/edit/O8a1mwpfnDS6aPQM7wPS?p=preview

API Doc page with plunkr referenced: http://ui-grid.info/docs/#/api/ui.grid.grouping.directive:uiGridGrouping

[grimaldistudio]

One solution is to put a ng-if and set in controller variable ready=true when data loaded.
For example:
<div id="grid" ui-grid="$ctrl.gridParams" class="grid" ui-grid-grouping ng-if="$ctrl.ready"></div>
This worked for me