import { GridApi , GridOptions , GridReadyEvent , RowNode , ValueGetterParams } from '@ag-grid-community/core' ; interface Student { student : number ; yearGroup : string ; age : number ; course : string ; points : number ; } const gridOptions = { columnDefs : [ { headerName : 'Student ID' , field : 'student' } , { headerName : 'Year Group' , field : 'yearGroup' , rowGroup : true } , { headerName : 'Age' , field : 'age' } , { headerName : 'Course' , field : 'course' , pivot : true } , { headerName : 'Age Range' , valueGetter : ageRangeValueGetter , pivot : true , } , { headerName : 'Points' , field : 'points' , aggFunc : 'sum' } , ] , defaultColDef : { flex : 1 , minWidth : 150 , sortable : true , resizable : true , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , rowData : getRowData ( ) , pivotMode : true , groupDefaultExpanded : 1 , animateRows : true , getRowNodeId : function ( data ) { return data . student ; } , onGridReady : function ( params ) { ( document . getElementById ( 'pivot-mode' ) as HTMLInputElement ) . checked = true ; } , } ; function ageRangeValueGetter ( params ) { var age = params . getValue ( 'age' ) ; if ( age === undefined ) { return null ; } if ( age < 20 ) { return '< 20' ; } else if ( age > 30 ) { return '> 30' ; } else { return '20 to 30' ; } } var studentIdSequence = 10023 ; var seed ; function random ( ) { seed = ( ( seed || 1 ) * 16807 ) % 2147483647 ; return seed ; } function getRowData ( ) { var rowData = [ ] ; for ( var i = 1 ; i <= 100 ; i ++ ) { var row = createRow ( ) ; rowData . push ( row ) ; } return rowData ; } function createRow ( ) { var randomNumber = random ( ) ; var result = { student : studentIdSequence ++ , points : ( randomNumber % 60 ) + 40 , course : [ 'Science' , 'History' ] [ randomNumber % 3 === 0 ? 0 : 1 ] , yearGroup : 'Year ' + ( ( randomNumber % 4 ) + 1 ) , age : ( randomNumber % 25 ) + 15 , } ; return result ; } function pivotMode ( ) { var pivotModeOn = ( document . getElementById ( 'pivot-mode' ) as HTMLInputElement ) . checked ; gridOptions . columnApi ! . setPivotMode ( pivotModeOn ) ; gridOptions . columnApi ! . applyColumnState ( { state : [ { colId : 'yearGroup' , rowGroup : pivotModeOn } , { colId : 'course' , pivot : pivotModeOn } , { colId : 'ageRange' , pivot : pivotModeOn } , ] , } ) ; } function updateOneRecord ( ) { var rowNodeToUpdate = pickExistingRowNodeAtRandom ( gridOptions . api ! ) ; if ( ! rowNodeToUpdate ) return ; var randomValue = createNewRandomScore ( rowNodeToUpdate . data ) ; console . log ( 'updating points to ' + randomValue + ' on ' , rowNodeToUpdate . data ) ; rowNodeToUpdate . setDataValue ( 'points' , randomValue ) ; } function createNewRandomScore ( data ) { var randomValue = createRandomNumber ( ) ; while ( randomValue === data . points ) { randomValue = createRandomNumber ( ) ; } return randomValue ; } function createRandomNumber ( ) { return Math . floor ( Math . random ( ) * 100 ) ; } function pickExistingRowNodeAtRandom ( gridApi ) { var allItems = [ ] ; gridApi . forEachLeafNode ( function ( rowNode ) { allItems . push ( rowNode ) ; } ) ; if ( allItems . length === 0 ) { return ; } var result = allItems [ Math . floor ( Math . random ( ) * allItems . length ) ] ; return result ; } function pickExistingRowItemAtRandom ( gridApi ) { var rowNode = pickExistingRowNodeAtRandom ( gridApi ) ; return rowNode ? rowNode . data : null ; } function updateUsingTransaction ( ) { var itemToUpdate = pickExistingRowItemAtRandom ( gridOptions . api ! ) ; if ( ! itemToUpdate ) { return ; } console . log ( 'updating - before' , itemToUpdate ) ; itemToUpdate . points = createNewRandomScore ( itemToUpdate ) ; var transaction = { update : [ itemToUpdate ] , } ; console . log ( 'updating - after' , itemToUpdate ) ; gridOptions . api ! . applyTransaction ( transaction ) ; } function addNewGroupUsingTransaction ( ) { var item1 = createRow ( ) ; var item2 = createRow ( ) ; item1 . yearGroup = 'Year 5' ; item2 . yearGroup = 'Year 5' ; var transaction = { add : [ item1 , item2 ] , } ; console . log ( 'add - ' , item1 ) ; console . log ( 'add - ' , item2 ) ; gridOptions . api ! . applyTransaction ( transaction ) ; } function addNewCourse ( ) { var item1 = createRow ( ) ; item1 . course = 'Physics' ; var transaction = { add : [ item1 ] , } ; console . log ( 'add - ' , item1 ) ; gridOptions . api ! . applyTransaction ( transaction ) ; } function removePhysics ( ) { var allPhysics = [ ] ; gridOptions . api ! . forEachLeafNode ( function ( rowNode ) { if ( rowNode . data . course === 'Physics' ) { allPhysics . push ( rowNode . data ) ; } } ) ; var transaction = { remove : allPhysics , } ; console . log ( 'removing ' + allPhysics . length + ' physics items.' ) ; gridOptions . api ! . applyTransaction ( transaction ) ; } function moveCourse ( ) { var item = pickExistingRowItemAtRandom ( gridOptions . api ! ) ; if ( ! item ) { return ; } item . course = item . course === 'History' ? 'Science' : 'History' ; var transaction = { update : [ item ] , } ; console . log ( 'moving ' + item ) ; gridOptions . api ! . applyTransaction ( transaction ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;