JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20182.524/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.grid.min.js"></script>
<p>Check console after clicking 'Add new' button</p>
<div id="theGrid"></div>
<button id="btnAddNew">Add new</button>
<button id="btnCommitNew">Commit new</button>
<button id="btnCancelNew">Cancel new</button>

CSS

h1, h2 {
  font-family: Lato;
}

.wj-flexgrid{
  max-height: 300px;
}

.wj-elem-filter{
  margin-right: 20px;
}

JavaScript

var grid, gridSource;

gridSource = new wijmo.collections.CollectionView(getData(5));
grid=new wijmo.grid.FlexGrid('#theGrid',{
  itemsSource: gridSource
});

document.getElementById('btnAddNew').addEventListener('click', function(){
  var newItem = gridSource.addNew();
  console.log(newItem);
});

document.getElementById('btnCommitNew').addEventListener('click', function(){
  gridSource.commitNew();
});

document.getElementById('btnCancelNew').addEventListener('click', function(){
  gridSource.cancelNew();
});

function getCbData(){
  return 'US,Germany,UK,Japan,Italy,Greece'.split(',');
}
function getData(count){
  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < count; i++) {
    var condition=Boolean(Math.floor(Math.random()+.5));
    data.push({
      id: i,
      country: countries[i % countries.length],
      amount: Math.random()*10000,
      checked: condition
    });
  }
  return data;
}