import { GridOptions , RowDragMoveEvent } from '@ag-grid-community/core' ; var immutableStore = getData ( ) ; const gridOptions = { columnDefs : [ { field : 'athlete' , rowDrag : true } , { field : 'country' } , { field : 'year' , width : 100 } , { field : 'date' } , { field : 'sport' } , { field : 'gold' } , { field : 'silver' } , { field : 'bronze' } , ] , defaultColDef : { width : 170 , sortable : true , filter : true , } , immutableData : true , animateRows : true , onRowDragMove : onRowDragMove , getRowNodeId : getRowNodeId , onSortChanged : onSortChanged , onFilterChanged : onFilterChanged , onGridReady : function onGridReady ( ) { immutableStore . forEach ( function ( data , index ) { data . id = index ; } ) ; gridOptions . api ! . setRowData ( immutableStore ) ; } , } ; var sortActive = false ; var filterActive = false ; function onSortChanged ( ) { var colState = gridOptions . columnApi ! . getColumnState ( ) || [ ] ; sortActive = colState . some ( c => c . sort ) ; var suppressRowDrag = sortActive || filterActive ; console . log ( 'sortActive = ' + sortActive + ', filterActive = ' + filterActive + ', allowRowDrag = ' + suppressRowDrag ) ; gridOptions . api ! . setSuppressRowDrag ( suppressRowDrag ) ; } function onFilterChanged ( ) { filterActive = gridOptions . api ! . isAnyFilterPresent ( ) ; var suppressRowDrag = sortActive || filterActive ; console . log ( 'sortActive = ' + sortActive + ', filterActive = ' + filterActive + ', allowRowDrag = ' + suppressRowDrag ) ; gridOptions . api ! . setSuppressRowDrag ( suppressRowDrag ) ; } function getRowNodeId ( data ) { return data . id ; } function onRowDragMove ( event ) { var movingNode = event . node ; var overNode = event . overNode ; var rowNeedsToMove = movingNode !== overNode ; if ( rowNeedsToMove ) { var movingData = movingNode . data ; var overData = overNode ! . data ; var fromIndex = immutableStore . indexOf ( movingData ) ; var toIndex = immutableStore . indexOf ( overData ) ; var newStore = immutableStore . slice ( ) ; moveInArray ( newStore , fromIndex , toIndex ) ; immutableStore = newStore ; gridOptions . api ! . setRowData ( newStore ) ; gridOptions . api ! . clearFocusedCell ( ) ; } function moveInArray ( arr , fromIndex , toIndex ) { var element = arr [ fromIndex ] ; arr . splice ( fromIndex , 1 ) ; arr . splice ( toIndex , 0 , element ) ; } } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;