JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/ag-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/styles/ag-grid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/styles/theme-blue.css">
<button id='addRow' >Add row</button>
<div id="myGrid" style="height: 500px" class="ag-blue"></div>
JavaScript
function ObjectCellRenderer() {
}
ObjectCellRenderer.prototype.init = function (params) {
this.span = document.createElement('span');
this.span.title=''
this.span.innerHTML='';
this.refresh(params)
};
ObjectCellRenderer.prototype.refresh = function(params) {
var res = ''
if(params.value) {
for(var i=0;i<params.fields.length;i++) {
res += params.fields[i].label + ': ';
res+=params.value[params.fields[i].name] + ' ';
}
}
this.span.innerHTML=res;
}
ObjectCellRenderer.prototype.getGui = function () {
return this.span;
};
function ObjectEditor() {
}
var onKeyDown = function(event) {
var key = event.which || event.keyCode;
if (key == 37 || // left
key == 39 || // right
key == 9 ) { // tab
event.stopPropagation();
}
}
ObjectEditor.prototype.init = function (params) {
this.container = document.createElement('div');
this.container.style = "border-radius: 15px; border: 1px solid grey;background: #e6e6e6;padding: 10px; ";
this.container.onkeydown = onKeyDown
for(i=0;i<params.fields.length;i++) {
var field = params.fields[i];
var label = document.createElement('label');
label.innerHTML = field.label+': ';
var input = document.createElement('input');
input.name = field.name;
if (params.value) {
input.value = params.value[field.name];
}
this.container.appendChild(label);
this.container.appendChild(input);
this.container.appendChild(document.createElement('br'));
}
var saveButton = document.createElement('button');
saveButton.appendChild(document.createTextNode('Ok'))
saveButton.addEventListener('click', function (event) {
params.stopEditing();
});
this.container.appendChild(saveButton);
};
ObjectEditor.prototype.getGui = function () {
return...