import { FirstDataRenderedEvent , GridApi , GridOptions , GridReadyEvent , GridSizeChangedEvent } from '@ag-grid-community/core' ; var minRowHeight = 25 ; var currentRowHeight ; const gridOptions = { columnDefs : [ { field : 'athlete' , minWidth : 150 } , { field : 'age' , minWidth : 70 , maxWidth : 90 } , { field : 'country' , minWidth : 130 } , { field : 'year' , minWidth : 70 , maxWidth : 90 } , { field : 'date' , minWidth : 120 } , { field : 'sport' , minWidth : 120 } , { field : 'gold' , minWidth : 80 } , { field : 'silver' , minWidth : 80 } , { field : 'bronze' , minWidth : 80 } , { field : 'total' , minWidth : 80 } , ] , defaultColDef : { resizable : true , } , rowData : getData ( ) , onGridReady : function ( params ) { minRowHeight = params . api . getSizesForCurrentTheme ( ) . rowHeight ; currentRowHeight = minRowHeight ; params . api . sizeColumnsToFit ( ) ; } , onFirstDataRendered : onFirstDataRendered , onGridSizeChanged : onGridSizeChanged , getRowHeight : function ( ) { return currentRowHeight ; } , } ; function onFirstDataRendered ( params ) { updateRowHeight ( params ) ; } function onGridSizeChanged ( params ) { updateRowHeight ( params ) ; } const updateRowHeight = ( params ) => { const bodyViewport = document . querySelector ( '.ag-body-viewport' ) ; if ( ! bodyViewport ) { return ; } var gridHeight = bodyViewport . clientHeight ; var renderedRowCount = params . api . getDisplayedRowCount ( ) ; if ( renderedRowCount * minRowHeight >= gridHeight ) { if ( currentRowHeight !== minRowHeight ) { currentRowHeight = minRowHeight ; params . api . resetRowHeights ( ) ; } } else { currentRowHeight = Math . floor ( gridHeight / renderedRowCount ) ; params . api . resetRowHeights ( ) ; } } ; document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;