import { ColDef , GetMainMenuItemsParams , GridOptions , MenuItemDef , PostProcessPopupParams } from '@ag-grid-community/core' ; const columnDefs = [ { field : 'athlete' , minWidth : 200 } , { field : 'age' } , { field : 'country' , minWidth : 200 } , { field : 'year' } , { field : 'date' , minWidth : 180 , menuTabs : [ 'filterMenuTab' , 'generalMenuTab' , 'columnsMenuTab' ] , } , { field : 'sport' , minWidth : 200 , menuTabs : [ 'filterMenuTab' , 'columnsMenuTab' ] , } , { field : 'gold' , menuTabs : [ 'generalMenuTab' , 'gibberishMenuTab' ] , } , { field : 'silver' , menuTabs : [ ] } , { field : 'bronze' } , { field : 'total' } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , minWidth : 100 , filter : true , } , getMainMenuItems : getMainMenuItems , postProcessPopup : ( params ) => { if ( params . type !== 'columnMenu' ) { return ; } const columnId = params . column ? params . column . getId ( ) : undefined ; if ( columnId === 'gold' ) { const ePopup = params . ePopup ; let oldTopStr = ePopup . style . top ! ; oldTopStr = oldTopStr . substring ( 0 , oldTopStr . indexOf ( 'px' ) ) ; const oldTop = parseInt ( oldTopStr ) ; const newTop = oldTop + 25 ; ePopup . style . top = newTop + 'px' ; } } , } ; function getMainMenuItems ( params ) { switch ( params . column . getId ( ) ) { case 'athlete' : const athleteMenuItems = params . defaultItems . slice ( 0 ) ; athleteMenuItems . push ( { name : 'AG Grid Is Great' , action : ( ) => { console . log ( 'AG Grid is great was selected' ) ; } , } ) ; athleteMenuItems . push ( { name : 'Casio Watch' , action : ( ) => { console . log ( 'People who wear casio watches are cool' ) ; } , } ) ; athleteMenuItems . push ( { name : 'Custom Sub Menu' , subMenu : [ { name : 'Black' , action : ( ) => { console . log ( 'Black was pressed' ) ; } , } , { name : 'White' , action : ( ) => { console . log ( 'White was pressed' ) ; } , } , { name : 'Grey' , action : ( ) => { console . log ( 'Grey was pressed' ) ; } , } , ] , } ) ; return athleteMenuItems ; case 'age' : return [ { name : 'Joe Abercrombie' , action : ( ) => { console . log ( 'He wrote a book' ) ; } , icon : '<img src="https://www.ag-grid.com/example-assets/lab.png" style="width: 14px;" />' , } , { name : 'Larsson' , action : ( ) => { console . log ( 'He also wrote a book' ) ; } , checked : true , } , 'resetColumns' , ] ; case 'country' : const countryMenuItems = [ ] ; const itemsToExclude = [ 'separator' , 'pinSubMenu' , 'valueAggSubMenu' ] ; params . defaultItems . forEach ( item => { if ( itemsToExclude . indexOf ( item ) < 0 ) { countryMenuItems . push ( item ) ; } } ) ; return countryMenuItems ; default : return params . defaultItems ; } } 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 ) ) ; } ) ;