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() {
function Datepicker() {}
Datepicker.prototype.init = function (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',
});
};
Datepicker.prototype.getGui = function () {
return this.eInput;
};
Datepicker.prototype.afterGuiAttached = function () {
this.eInput.focus();
this.eInput.select();
};
Datepicker.prototype.getValue = function () {
return this.eInput.value;
};
Datepicker.prototype.destroy = () => {
};
Datepicker.prototype.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));
});