import { ColDef , GridOptions , IDatasource , IGetRowsParams } from '@ag-grid-community/core' ; var ALPHABET = 'abcdefghijklmnopqrstuvwxyz' . split ( '' ) ; function getColumnDefs ( ) { const columnDefs = [ { checkboxSelection : true , headerName : '' , width : 60 } , { headerName : '#' , width : 80 , valueGetter : 'node.rowIndex' } , ] ; ALPHABET . forEach ( function ( letter ) { columnDefs . push ( { headerName : letter . toUpperCase ( ) , field : letter , width : 150 , } ) ; } ) ; return columnDefs ; } const gridOptions = { columnDefs : getColumnDefs ( ) , defaultColDef : { resizable : true , } , rowModelType : 'infinite' , rowSelection : 'multiple' , maxBlocksInCache : 2 , suppressRowClickSelection : true , getRowNodeId : function ( item ) { return item . a ; } , datasource : getDataSource ( 100 ) , } ; function getDataSource ( count ) { const dataSource = { rowCount : count , getRows : function ( params ) { var rowsThisPage = [ ] ; for ( var rowIndex = params . startRow ; rowIndex < params . endRow ; rowIndex ++ ) { var record = { } ; ALPHABET . forEach ( function ( letter , colIndex ) { var randomNumber = 17 + rowIndex + colIndex ; var cellKey = letter . toUpperCase ( ) + ( rowIndex + 1 ) ; record [ letter ] = cellKey + ' = ' + randomNumber ; } ) ; rowsThisPage . push ( record ) ; } setTimeout ( function ( ) { params . successCallback ( rowsThisPage ) ; } , 100 ) ; } } ; return dataSource ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;