import { GridOptions } from '@ag-grid-community/core' ; declare var XLSX ; const gridOptions = { columnDefs : [ { field : 'athlete' , minWidth : 180 } , { field : 'age' } , { field : 'country' , minWidth : 150 } , { field : 'year' } , { field : 'date' , minWidth : 130 } , { field : 'sport' , minWidth : 100 } , { field : 'gold' } , { field : 'silver' } , { field : 'bronze' } , { field : 'total' } , ] , defaultColDef : { resizable : true , minWidth : 80 , flex : 1 , } , rowData : [ ] , } ; function makeRequest ( method , url , success , error ) { var httpRequest = new XMLHttpRequest ( ) ; httpRequest . open ( 'GET' , url , true ) ; httpRequest . responseType = 'arraybuffer' ; httpRequest . open ( method , url ) ; httpRequest . onload = function ( ) { success ( httpRequest . response ) ; } ; httpRequest . onerror = function ( ) { error ( httpRequest . response ) ; } ; httpRequest . send ( ) ; } function convertDataToWorkbook ( dataRows ) { var data = new Uint8Array ( dataRows ) ; var arr = new Array ( ) ; for ( var i = 0 ; i !== data . length ; ++ i ) { arr [ i ] = String . fromCharCode ( data [ i ] ) ; } var bstr = arr . join ( '' ) ; return XLSX . read ( bstr , { type : 'binary' } ) ; } function populateGrid ( workbook ) { var firstSheetName = workbook . SheetNames [ 0 ] ; var worksheet = workbook . Sheets [ firstSheetName ] ; var columns = { A : 'athlete' , B : 'age' , C : 'country' , D : 'year' , E : 'date' , F : 'sport' , G : 'gold' , H : 'silver' , I : 'bronze' , J : 'total' , } ; var rowData = [ ] ; var rowIndex = 2 ; while ( worksheet [ 'A' + rowIndex ] ) { var row = { } ; Object . keys ( columns ) . forEach ( function ( column ) { row [ columns [ column ] ] = worksheet [ column + rowIndex ] . w ; } ) ; rowData . push ( row ) ; rowIndex ++ ; } gridOptions . api ! . setRowData ( rowData ) ; } function importExcel ( ) { makeRequest ( 'GET' , 'https://www.ag-grid.com/example-assets/olympic-data.xlsx' , function ( data ) { var workbook = convertDataToWorkbook ( data ) ; populateGrid ( workbook ) ; } , function ( error ) { throw error ; } ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var eGridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( eGridDiv , gridOptions ) ; } ) ;