import { GridOptions } from "@ag-grid-community/core" ; const gridOptions = { columnDefs : [ { field : 'athlete' } , { field : 'sport' } , { field : 'age' , type : 'numberColumn' } , { field : 'year' , type : 'numberColumn' } , { field : 'date' , type : [ 'dateColumn' , 'nonEditableColumn' ] , width : 220 } , { headerName : 'Medals' , groupId : 'medalsGroup' , children : [ { headerName : 'Gold' , field : 'gold' , type : 'medalColumn' } , { headerName : 'Silver' , field : 'silver' , type : 'medalColumn' } , { headerName : 'Bronze' , field : 'bronze' , type : 'medalColumn' } , { headerName : 'Total' , field : 'total' , type : 'medalColumn' , columnGroupShow : 'closed' } ] } ] , defaultColDef : { width : 150 , editable : true , filter : 'agTextColumnFilter' , floatingFilter : true , resizable : true } , defaultColGroupDef : { marryChildren : true } , columnTypes : { numberColumn : { width : 130 , filter : 'agNumberColumnFilter' } , medalColumn : { width : 100 , columnGroupShow : 'open' , filter : false } , nonEditableColumn : { editable : false } , dateColumn : { filter : 'agDateColumnFilter' , filterParams : { comparator : ( filterLocalDateAtMidnight , cellValue ) => { const dateParts = cellValue . split ( '/' ) ; const day = Number ( dateParts [ 0 ] ) ; const month = Number ( dateParts [ 1 ] ) - 1 ; const year = Number ( dateParts [ 2 ] ) ; const cellDate = new Date ( year , month , day ) ; if ( cellDate < filterLocalDateAtMidnight ) { return - 1 ; } else if ( cellDate > filterLocalDateAtMidnight ) { return 1 ; } else { return 0 ; } } } } } , rowData : null , } ; document . addEventListener ( 'DOMContentLoaded' , ( ) => { const 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 ) ) ; } ) ;