import { ColDef , GridOptions } from '@ag-grid-community/core' ; var myIcons = { sortAscending : function ( ) { return 'ASC' ; } , sortDescending : function ( ) { return 'DESC' ; } , } ; const columnDefs = [ { field : 'athlete' , rowGroup : true , hide : true , } , { field : 'age' , width : 90 , enableValue : true , icons : { sortAscending : 'U' , sortDescending : 'D' , } , } , { field : 'country' , width : 150 , rowGroupIndex : 0 , icons : { sortAscending : '<i class="fa fa-sort-alpha-up"/>' , sortDescending : '<i class="fa fa-sort-alpha-down"/>' , } , } , { field : 'year' , width : 90 , enableRowGroup : true } , { field : 'date' } , { field : 'sport' , width : 110 , icons : myIcons , } , { field : 'gold' , width : 100 } , { field : 'silver' , width : 100 } , { field : 'bronze' , width : 100 } , { field : 'total' , width : 100 } , ] ; const gridOptions = { defaultColDef : { width : 150 , sortable : true , resizable : true , filter : true , floatingFilter : true , } , columnDefs : columnDefs , rowData : null , sideBar : true , autoGroupColumnDef : { headerName : 'Athlete' , field : 'athlete' , rowDrag : true , icons : { menu : '<i class="fa fa-shower"/>' , filter : '<i class="fa fa-long-arrow-alt-up"/>' , columns : '<i class="fa fa-snowflake"/>' , sortAscending : '<i class="fa fa-sort-alpha-up"/>' , sortDescending : '<i class="fa fa-sort-alpha-down"/>' , } , headerCheckboxSelection : true , width : 300 , } , icons : { menu : '<i class="fa fa-bath" style="width: 10px"/>' , filter : '<i class="fa fa-long-arrow-alt-down"/>' , columns : '<i class="fa fa-handshake"/>' , sortAscending : '<i class="fa fa-long-arrow-alt-down"/>' , sortDescending : '<i class="fa fa-long-arrow-alt-up"/>' , groupExpanded : '<img src="https://www.ag-grid.com/example-assets/group/contract.png" style="height: 12px; width: 12px;padding-right: 2px"/>' , groupContracted : '<img src="https://www.ag-grid.com/example-assets/group/expand.png" style="height: 12px; width: 12px;padding-right: 2px"/>' , columnMovePin : '<i class="far fa-hand-rock"/>' , columnMoveAdd : '<i class="fa fa-plus-square"/>' , columnMoveHide : '<i class="fa fa-times"/>' , columnMoveMove : '<i class="fa fa-link"/>' , columnMoveLeft : '<i class="fa fa-arrow-left"/>' , columnMoveRight : '<i class="fa fa-arrow-right"/>' , columnMoveGroup : '<i class="fa fa-users"/>' , rowGroupPanel : '<i class="fa fa-university"/>' , pivotPanel : '<i class="fa fa-magic"/>' , valuePanel : '<i class="fa fa-magnet"/>' , menuPin : 'P' , menuValue : 'V' , menuAddRowGroup : 'A' , menuRemoveRowGroup : 'R' , clipboardCopy : '>>' , clipboardPaste : '>>' , rowDrag : '<i class="fa fa-circle"/>' , } , rowSelection : 'multiple' , } ; 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 ) ) ; } ) ;