import { ColDef , FirstDataRenderedEvent , GridOptions } from '@ag-grid-community/core' ; const columnDefs = [ { headerName : '#' , colId : 'rowNum' , valueGetter : 'node.id' } , { field : 'athlete' , minWidth : 170 } , { field : 'age' } , { field : 'country' } , { field : 'year' } , { field : 'date' } , { field : 'sport' } , { field : 'gold' } , { field : 'silver' } , { field : 'bronze' } , { field : 'total' } , ] ; const gridOptions = { columnDefs : columnDefs , rowData : null , defaultColDef : { editable : true , sortable : true , flex : 1 , minWidth : 100 , filter : true , resizable : true , } , onFirstDataRendered : onFirstDataRendered , } ; function onFirstDataRendered ( params ) { var myInput = document . getElementById ( 'my-input' ) ! ; myInput . addEventListener ( 'keydown' , function ( event ) { if ( event . key !== 'Tab' ) return ; event . preventDefault ( ) ; params . api . ensureIndexVisible ( 0 ) ; var firstCol = params . columnApi . getAllDisplayedColumns ( ) [ 0 ] ; params . api . ensureColumnVisible ( firstCol ) ; params . api . setFocusedCell ( 0 , firstCol ) ; } , true ) ; } 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 ) ) ; } ) ;