ag-grid how to set dynamic header height with react

Question

This is the example in ag-grid https://www.ag-grid.com/javascript-grid/column-headers/

function setHeaderHeight(value) {
  gridOptions.api.setHeaderHeight(value); // set as null to remove heights.
  setIdText('headerHeight', value);
}

In my react applications on grid ready

params =  
{type: "gridReady", api: GridApi, columnApi: ColumnApi}
api: GridApi
aggFuncService: null
alignedGridsService: AlignedGridsService {destroyFunctions: Array(6), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
animationFrameService: AnimationFrameService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
chartService: null
clientSideRowModel: ClientSideRowModel {destroyFunctions: Array(10), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
clipboardService: null
columnController: ColumnController {destroyFunctions: Array(1), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
context: Context {beanWrappers: {…}, destroyed: false, contextParams: {…}, logger: Logger}
contextMenuFactory: null
controllersService: ControllersService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
csvCreator: CsvCreator {columnController: ColumnController, valueService: ValueService, gridSerializer: GridSerializer, gridOptionsWrapper: GridOptionsWrapper, beans: {…}}
destroyCalled: false
detailGridInfoMap: {}
dragAndDropService: DragAndDropService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
eventService: EventService {allSyncListeners: Map(38), allAsyncListeners: Map(0), globalSyncListeners: Set(0), globalAsyncListeners: Set(1), asyncFunctionsQueue: Array(0), …}
excelCreator: null
filterManager: FilterManager {destroyFunctions: Array(2), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
focusController: FocusController {destroyFunctions: Array(5), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
gridBodyComp: GridBodyComp {destroyFunctions: Array(23), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
gridBodyCon: GridBodyController {destroyFunctions: Array(9), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
gridCompController: GridCompController {destroyFunctions: Array(4), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
gridOptionsWrapper: GridOptionsWrapper {propertyEventService: EventService, domDataKey: "__AG_0.8817246002736534", destroyed: false, gridOptions: {…}, columnController: ColumnController, …}
headerRootComp: HeaderRootComp {destroyFunctions: Array(18), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
headlessService: null
immutableService: ImmutableService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
menuFactory: StandardMenuFactory {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
overlayWrapperComp: OverlayWrapperComponent {destroyFunctions: Array(4), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
paginationProxy: PaginationProxy {destroyFunctions: Array(2), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
pinnedRowModel: PinnedRowModel {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
rangeController: null
rowModel: ClientSideRowModel {destroyFunctions: Array(10), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
rowNodeBlockLoader: RowNodeBlockLoader {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
rowRenderer: RowRenderer {destroyFunctions: Array(13), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
selectionController: SelectionController {destroyFunctions: Array(2), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
serverSideTransactionManager: null
sortController: SortController {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
statusBarService: null
undoRedoService: UndoRedoService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
valueCache: ValueCache {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
valueService: ValueService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
__proto__: Object
columnApi: ColumnApi
columnController: ColumnController {destroyFunctions: Array(1), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
__proto__: Object
type: "gridReady"

there is no method - setHeaderHeight Where can I access this method?

Answer 1

you can set grid property domLayout='autoHeight'

https://www.ag-grid.com/react-grid/grid-size/

Answer 2

Ok so it turns out I was wrong. The method does exist:

console.log('gridOptions.api = ', gridOptions.api.setHeaderHeight);

The reason I can't see it by logging the whole object is because it is not enumerable for whatever reason that decision has been made? This has just exposed a flaw in ag-grid because key functionality is not exposed and there is a lot of noise in that object.

How would one know what functions are supposed to be public?

console.log('gridOptions.api = ',gridOptions.api);

I cannot convert it to json because there is a circular dependency and this results in an errror

console.log('JSON.stringify(gridOptions.api) = ',JSON.stringify(gridOptions.api));

I can log its keys this way however.

for (key in gridOptions.api) {
   console.log('key = ', key);
 }

The only problem - is it doesn't do anything when setting it to null