JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<table id="list5">
    <tr>
        <td />
    </tr>
</table>
<div id="pager5"></div>

JavaScript

var data = [{"sid":"1","sname":"viki","city":"11"},
           {"sid":"2","sname":"sam","city":"12"}]

jQuery("#list5").jqGrid({
          datatype: "local",
          data: data,
          autowidth : true,
          height : 'auto',
          colNames:['Student ID','Name','City'], 
          colModel:[ {name:'sid',index:'sid', width:150},
                     {name:'sname',index:'sname', width:150},
                     {name:'city',index:'city'}],
    altRows:false,
    pager: jQuery('#pager5'),
    rowNum:10, 
    rowList:[10,20,50], 
    sortname: 'sid', 
    sord:'asc',
    gridComplete: function () {
	    var rowIDs = jQuery("#list5").getDataIDs(); 
for (var i=0;i<rowIDs.length;i=i+1){ 
  rowData=jQuery("#list5").getRowData(rowIDs[i]);
    var count = 2;
  	if (rowData.city == "11") { 
        $("#list5").find('td').eq('5').html('chennai');
    }else if (rowData.city == "12") { 
        $("#list5").find('td').eq('8').html('mumbai');
	}
  }
	}
});