Html Grid

Set the source property of the jqxGrid. Author: http://jqwidgets.com

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="jqxgrid"></div>

JavaScript

var newRecords = [];
var dataObj = {  
  "GW-2580":{  
    "folds_mut":1,
    "folds_wt":1,
    "folds_ak":1,
    "Annotation":"FDA",
    "Smiles":"COC1=CC=C(C=C1)COC2=C(C=C(C=C2)CC3=CN=C(N=C3N)N)OC"
  },
  "MLN-8054":{  
    "folds_mut":1,
    "folds_wt":2,
    "folds_ak":3,
    "Annotation":"FDA",
    "Smiles":"C1C2=CN=C(N=C2C3=C(C=C(C=C3)Cl)C(=N1)C4=C(C=CC=C4F)F)NC5=CC=C(C=C5)C(=O)O"
  },
  "LAPATINIB":{  
    "folds_mut":1,
    "folds_wt":2,
    "folds_ak":1,
    "Annotation":"FDA",
    "Smiles":"CS(=O)(=O)CCNCC1=CC=C(O1)C2=CC3=C(C=C2)N=CN=C3NC4=CC(=C(C=C4)OCC5=CC(=CC=C5)F)Cl"
  }
};

var sourceObj = {
                datatype: "json",
                localdata: dataObj
            };
var dataAdapterObj = new $.jqx.dataAdapter(sourceObj, {
                  beforeLoadComplete: function (records) {
                      $.map(records[0], function(value, index) {
                     		 	let element = value;
                          element.itemIndex = index;
                          newRecords.push(element);
                      });
                      newRecords.pop();
                  },
              });
dataAdapterObj.dataBind();

// prepare the data
var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'itemIndex', type: 'string' },
                    { name: 'Annotation', type: 'string' },
                    { name: 'Smiles', type: 'string' },
                    { name: 'folds_ak', type: 'string' },
                    { name: 'folds_mut', type: 'string' },
                    { name: 'folds_wt', type: 'string' }
                ],
                localdata: newRecords
            };
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                autoheight:true,
                columnsresize: true,
                columns: [
                    { text: 'itemIndex', datafield:...