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() {
  for (var item of data) {
    item["charCode"] += 1;
  }

  $('#jqxgrid').jqxGrid('updatebounddata', 'sort');
});