JSFiddle - React, Tailwind, and code Playground

by Vinoth Krishnan

HTML

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

JavaScript

var mydata = [
  {"UserName":"8125579231","RoleId":1,"Name":"Sreekanth","RoleName":"Administrator"},
{"UserName":"9676078986","RoleId":1,"Name":"Karteek","RoleName":"Administrator"}
];
		 var myGrid = $("#list2"),
     myGridId = $.jgrid.jqID(myGrid[0].id);
     myGrid.jqGrid({
            caption: "Employee Details",
            data: mydata,
            datatype: "local",
            colNames: ["UserName", "RoleId", "Name", "RoleName"],
            colModel: [
                  { name: "UserName", index: 'UserName', width: 150 },
                  { name: 'RoleId', index: "RoleId", width: 150 },
                  { name: "Name", index: "Name", width: 150 },
                  { name: "RoleName", index: "RoleName", width: 150 }
            ],
            rowNum: 10,
            pager: '#jQGridDemoPager',
            sortname: "UserName",
            viewrecords: true,
            sortorder: "desc"
}).jqGrid('navGrid', '#jQGridDemoPager');

$("#del_" + myGridId).addClass('ui-state-disabled');