import { CellEditingStartedEvent , CellEditingStoppedEvent , ColDef , GridOptions , ICellEditorParams , RowEditingStartedEvent , RowEditingStoppedEvent } from '@ag-grid-community/core' ; declare var NumericCellEditor ; declare var MoodEditor ; const columnDefs = [ { field : 'value' , editable : true , cellEditorSelector : cellEditorSelector , } , { field : 'type' } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , } , rowData : getData ( ) , components : { numericCellEditor : NumericCellEditor , moodEditor : MoodEditor , } , onRowEditingStarted : onRowEditingStarted , onRowEditingStopped : onRowEditingStopped , onCellEditingStarted : onCellEditingStarted , onCellEditingStopped : onCellEditingStopped , } ; function onRowEditingStarted ( event ) { console . log ( 'never called - not doing row editing' ) ; } function onRowEditingStopped ( event ) { console . log ( 'never called - not doing row editing' ) ; } function onCellEditingStarted ( event ) { console . log ( 'cellEditingStarted' ) ; } function onCellEditingStopped ( event ) { console . log ( 'cellEditingStopped' ) ; } function cellEditorSelector ( params ) { if ( params . data . type === 'age' ) { return { component : 'numericCellEditor' , } ; } if ( params . data . type === 'gender' ) { return { component : 'agRichSelectCellEditor' , params : { values : [ 'Male' , 'Female' ] , } , } ; } if ( params . data . type === 'mood' ) { return { component : 'moodEditor' , } ; } return undefined ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;