JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>

<button style="margin-top:10px" id="nextBtn">
Next Characters
</button>

JavaScript

var data = [];

for (var i = 0; i< 5; i++) {
data.push( {'charCode': (65+i) } )
}

var source = {
    localdata: data,
    datafields: [{
        name: 'charSymbol',
        type: 'string'
    }, {
        name: 'charCode',
        type: 'number'
    }],
    datatype: "json"
};

// render for symbol
var symbolcellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowData) {
	return $(defaulthtml).html(String.fromCharCode(rowData["charCode"]))[0].outerHTML;
}

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
    width: 500,
    height: 200,
    theme: 'energyblue',
    source: adapter,
    sortable: true,
    ready: function () {
        $("#jqxgrid").jqxGrid('selectrow', 0);
        $('#jqxgrid').jqxGrid('focus');
    },
    columns: [{
        text: 'Char Symbol',
        datafield: 'charSymbol',
        width: '50%',
        cellsrenderer: symbolcellsrenderer
    }, {
        text: 'Char Code',
        datafield: 'charCode',
        width: '50%'
    }]
});

$("#nextBtn").on("click", function() {
	var rows = $('#jqxgrid').jqxGrid('getrows');
  
  for (var row of rows) {
  	row["charCode"]+=1;
  }
  
  $('#jqxgrid').jqxGrid('refresh');
  
  
  
})