JSFiddle - React, Tailwind, and code Playground

HTML

<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://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/blitzer/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div id="gi_display">
    <table id="jqgrid_m"></table> 
    <div id="jqpager_m"></div>
</div>

JavaScript

var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC",       "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];


	jQuery("#jqgrid_m").jqGrid({
		datatype:'local',
		height:'150',
		viewrecords:true,
		gridview:true,
		pager: '#jqpager_m',
		caption:'Accounts',
		colModel:[
			{name:'id',index:'id',align:'center',width:50,editable:false,hidden:true},
			{name:'name',index:'name', width:90, align:'left',editable:true,edittype:'text',search:true,
				editrules:{required:true},
				editoptions:{size:35,
					dataInit:function (elem) { 

						$(elem).autocomplete({
							source: availableTags,
						});
						
						
					}
				}
			}
		]

	});
	jQuery("#jqgrid_m").jqGrid('navGrid','#jqpager_m',
		{edit:true,add:true,del:false,search:true,refresh:false}
	);

var mydata	= [{id:"1",name:"Scheme"}, {id:"2",name:"Ruby"}]; 

for(var i=0;i<=mydata.length;i++) jQuery("#jqgrid_m").jqGrid('addRowData',i+1,mydata[i]);