How to dynamically set the height on just one header row in ag-grid for react

Question

This method sets the height

gridApi.setHeaderHeight(height);

But the problem is it sets height for both header groups.

 (Header group spans entire width)<------------------------- height gets set here
                                                            
(Header1    | Header 2   | header 3)<------------------------ and height gets set here
------------------------------------
row data 1 | row data 2 | row data 3

How to set the height for just one header row

 (Header group spans entire width)
                                                            
(Header1    | Header 2   | header 3)<------------------------ This row one only
------------------------------------
row data 1 | row data 2 | row data 3

See example: https://codesandbox.io/s/ag-grid-practice-forked-py43m?file=/src/index.tsx

Click Expand, and see both column header groups expand in height.

Answer 1

I think that this is impossible. The following methods can be used, but they set the height for the entire line in the header. I think this is a rather strange design decision to increase the header for only one of the columns.

gridApi.setHeaderHeight(value) 
gridApi.setGroupHeaderHeight(value)

Answer 2

ok I've come up with a solution to circumvent this.

Simpler version:

• https://codesandbox.io/s/ag-grid-custom-setaddedcolheight-sypg2?file=/src/Grid/Columns.tsx

More dynamic version:

• https://codesandbox.io/s/ag-grid-custom-setaddedcolheight-expand-reduce-mh8rw?file=/src/Grid/Columns.tsx