import { GridOptions } from '@ag-grid-community/core' ; const gridOptions = { columnDefs : [ { headerName : 'Athlete' , field : 'athlete' } , { headerName : 'Sport' , field : 'sport' } , { headerName : 'Age' , field : 'age' , type : 'numberColumn' } , { headerName : 'Year' , field : 'year' , type : 'numberColumn' } , { headerName : 'Date' , field : 'date' , width : 200 } , ] , defaultColDef : { width : 150 , } , defaultColGroupDef : { marryChildren : true , } , columnTypes : { numberColumn : { width : 83 } , } , rowData : null , onGridReady : function ( params ) { params . api . sizeColumnsToFit ( ) ; } , } ; document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; fetch ( 'https://www.ag-grid.com/example-assets/olympic-winners.json' ) . then ( response => response . json ( ) ) . then ( data => gridOptions . api ! . setRowData ( data ) ) ; } ) ;