import { ColDef , GridOptions , ICellEditorComp , ICellEditorParams } from '@ag-grid-community/core' ; const columnDefs = [ { field : 'athlete' } , { field : 'date' , editable : true , cellEditor : 'datePicker' } , { field : 'age' , maxWidth : 110 } , { field : 'country' } , { field : 'year' , maxWidth : 120 } , { field : 'sport' } , { field : 'gold' } , { field : 'silver' } , { field : 'bronze' } , { field : 'total' } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , minWidth : 150 , } , components : { datePicker : getDatePicker ( ) , } , } ; function getDatePicker ( ) { class Datepicker implements ICellEditorComp { eInput ! : HTMLInputElement ; init ( params ) { this . eInput = document . createElement ( 'input' ) ; this . eInput . value = params . value ; this . eInput . classList . add ( 'ag-input' ) ; this . eInput . style . height = '100%' ; $ ( this . eInput ) . datepicker ( { dateFormat : 'dd/mm/yy' , } ) ; } getGui ( ) { return this . eInput ; } afterGuiAttached ( ) { this . eInput . focus ( ) ; this . eInput . select ( ) ; } getValue ( ) { return this . eInput . value ; } destroy ( ) { } isPopup ( ) { return false ; } } return Datepicker ; } document . addEventListener ( 'DOMContentLoaded' , ( ) => { const 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 ) ) ; } ) ;