import { ColumnApi , GridOptions } from '@ag-grid-community/core' ; function getInitialData ( ) { var data = [ ] ; for ( var i = 0 ; i < 5 ; i ++ ) { data . push ( createItem ( ) ) ; } return data ; } var immutableStore = [ ] ; function addFiveItems ( append ) { var newStore = immutableStore . slice ( ) ; for ( var i = 0 ; i < 5 ; i ++ ) { var newItem = createItem ( ) ; if ( append ) { newStore . push ( newItem ) ; } else { newStore . splice ( 0 , 0 , newItem ) ; } } immutableStore = newStore ; gridOptions . api ! . setRowData ( immutableStore ) ; } function removeSelected ( ) { var selectedRowNodes = gridOptions . api ! . getSelectedNodes ( ) ; var selectedIds = selectedRowNodes . map ( function ( rowNode ) { return rowNode . id ; } ) ; immutableStore = immutableStore . filter ( function ( dataItem ) { return selectedIds . indexOf ( dataItem . symbol ) < 0 ; } ) ; gridOptions . api ! . setRowData ( immutableStore ) ; } function setSelectedToGroup ( newGroup ) { var selectedRowNodes = gridOptions . api ! . getSelectedNodes ( ) ; var selectedIds = selectedRowNodes . map ( function ( rowNode ) { return rowNode . id ; } ) ; immutableStore = immutableStore . map ( function ( dataItem ) { var itemSelected = selectedIds . indexOf ( dataItem . symbol ) >= 0 ; if ( itemSelected ) { return { symbol : dataItem . symbol , price : dataItem . price , group : newGroup , } ; } else { return dataItem ; } } ) ; gridOptions . api ! . setRowData ( immutableStore ) ; } function updatePrices ( ) { var newStore = [ ] ; immutableStore . forEach ( function ( item ) { newStore . push ( { symbol : item . symbol , group : item . group , price : Math . floor ( Math . random ( ) * 100 ) , } ) ; } ) ; immutableStore = newStore ; gridOptions . api ! . setRowData ( immutableStore ) ; } function filter ( list , callback ) { var filteredList = [ ] ; list . forEach ( function ( item ) { if ( callback ( item ) ) { filteredList . push ( item ) ; } } ) ; return filteredList ; } function createItem ( ) { var item = { group : 'A' , symbol : createUniqueRandomSymbol ( ) , price : Math . floor ( Math . random ( ) * 100 ) , } ; return item ; } function onGroupingEnabled ( enabled ) { setGroupingEnabled ( enabled , gridOptions . columnApi ! ) ; } function setGroupingEnabled ( enabled , columnApi ) { if ( enabled ) { columnApi . applyColumnState ( { state : [ { colId : 'group' , rowGroup : true , hide : true } , { colId : 'symbol' , hide : true } , ] , } ) ; } else { columnApi . applyColumnState ( { state : [ { colId : 'group' , rowGroup : false , hide : false } , { colId : 'symbol' , hide : false } , ] , } ) ; } setItemVisible ( 'groupingOn' , ! enabled ) ; setItemVisible ( 'groupingOff' , enabled ) ; } function setItemVisible ( id , visible ) { var element = document . querySelector ( '#' + id ) ! as any ; element . style . display = visible ? 'inline' : 'none' ; } function createUniqueRandomSymbol ( ) { var symbol ; var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' ; var isUnique = false ; while ( ! isUnique ) { symbol = '' ; for ( var i = 0 ; i < 3 ; i ++ ) { symbol += possible . charAt ( Math . floor ( Math . random ( ) * possible . length ) ) ; } isUnique = true ; immutableStore . forEach ( function ( oldItem ) { if ( oldItem . symbol === symbol ) { isUnique = false ; } } ) ; } return symbol ; } function reverseItems ( ) { immutableStore . reverse ( ) ; gridOptions . api ! . setRowData ( immutableStore ) ; } const gridOptions = { columnDefs : [ { headerName : 'Symbol' , field : 'symbol' } , { headerName : 'Price' , field : 'price' } , { headerName : 'Group' , field : 'group' } , ] , defaultColDef : { width : 250 , sortable : true , resizable : true , } , immutableData : true , animateRows : true , rowSelection : 'multiple' , autoGroupColumnDef : { headerName : 'Symbol' , cellRenderer : 'agGroupCellRenderer' , field : 'symbol' , } , statusBar : { statusPanels : [ { statusPanel : 'agAggregationComponent' , align : 'right' } ] , } , groupDefaultExpanded : 1 , rowData : immutableStore , getRowNodeId : function ( data ) { return data . symbol ; } , onGridReady : function ( params ) { immutableStore = [ ] ; immutableStore = getInitialData ( ) ; params . api . setRowData ( immutableStore ) ; setGroupingEnabled ( false , params . columnApi ) ; } , } ; document . addEventListener ( 'DOMContentLoaded' , function ( ) { var eGridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( eGridDiv , gridOptions ) ; } ) ;