import { ColDef , GridOptions , ICellRendererParams } from '@ag-grid-community/core' ; var cellRenderer = function ( params ) { return ( parseInt ( params . node . id ! ) + 1 ) + '' ; } ; const columnDefs = [ { headerName : '#' , width : 50 , cellRenderer : cellRenderer , } , { headerName : 'Athlete' , field : 'athlete' , width : 150 } , { headerName : 'Age' , field : 'age' , width : 90 } , { headerName : 'Country' , field : 'country' , width : 120 } , { headerName : 'Year' , field : 'year' , width : 90 } , { headerName : 'Date' , field : 'date' , width : 110 } , { headerName : 'Sport' , field : 'sport' , width : 110 } , { headerName : 'Gold' , field : 'gold' , width : 100 } , { headerName : 'Silver' , field : 'silver' , width : 100 } , { headerName : 'Bronze' , field : 'bronze' , width : 100 } , { headerName : 'Total' , field : 'total' , width : 100 } , ] ; const gridOptions = { defaultColDef : { resizable : true , filter : true , } , debug : true , rowSelection : 'multiple' , paginationPageSize : 500 , columnDefs : columnDefs , pagination : true , suppressPaginationPanel : true , suppressScrollOnNewData : true , onPaginationChanged : onPaginationChanged , } ; function setText ( selector , text ) { ( document . querySelector ( selector ) as any ) . innerHTML = text ; } function onPaginationChanged ( ) { console . log ( 'onPaginationPageLoaded' ) ; if ( gridOptions . api ! ) { setText ( '#lbLastPageFound' , gridOptions . api ! . paginationIsLastPageFound ( ) ) ; setText ( '#lbPageSize' , gridOptions . api ! . paginationGetPageSize ( ) ) ; setText ( '#lbCurrentPage' , gridOptions . api ! . paginationGetCurrentPage ( ) + 1 ) ; setText ( '#lbTotalPages' , gridOptions . api ! . paginationGetTotalPages ( ) ) ; setLastButtonDisabled ( ! gridOptions . api ! . paginationIsLastPageFound ( ) ) ; } } function setLastButtonDisabled ( disabled ) { ( document . querySelector ( '#btLast' ) as any ) . disabled = disabled ; } function onBtFirst ( ) { gridOptions . api ! . paginationGoToFirstPage ( ) ; } function onBtLast ( ) { gridOptions . api ! . paginationGoToLastPage ( ) ; } function onBtNext ( ) { gridOptions . api ! . paginationGoToNextPage ( ) ; } function onBtPrevious ( ) { gridOptions . api ! . paginationGoToPreviousPage ( ) ; } function onBtPageFive ( ) { gridOptions . api ! . paginationGoToPage ( 4 ) ; } function onBtPageFifty ( ) { gridOptions . api ! . paginationGoToPage ( 49 ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var 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 ) ) ; } ) ;