import { GridOptions , RowDragCallbackParams , RowDragEndEvent } from '@ag-grid-community/core' ; var rowDrag = function ( params ) { return ! params . node . group ; } ; const gridOptions = { columnDefs : [ { field : 'athlete' , rowDrag : rowDrag } , { field : 'country' , rowGroup : true } , { field : 'year' , width : 100 } , { field : 'date' } , { field : 'sport' } , { field : 'gold' } , { field : 'silver' } , { field : 'bronze' } , ] , defaultColDef : { width : 170 , sortable : true , filter : true , } , animateRows : true , groupDefaultExpanded : 1 , onRowDragMove : onRowDragMove , onGridReady : function ( ) { gridOptions . api ! . setRowData ( getData ( ) ) ; } , } ; function onRowDragMove ( event ) { var movingNode = event . node ! ; var overNode = event . overNode ! ; var groupCountry ; if ( overNode . group ) { groupCountry = overNode . key ; } else { groupCountry = overNode . data . country ; } var needToChangeParent = movingNode . data . country !== groupCountry ; if ( needToChangeParent ) { var movingData = movingNode . data ; movingData . country = groupCountry ; gridOptions . api ! . applyTransaction ( { update : [ movingData ] , } ) ; gridOptions . api ! . clearFocusedCell ( ) ; } } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;