JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.4/css/ui.jqgrid.css">
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.4/js/jquery.jqGrid.src.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.4/js/i18n/grid.locale-en.js"></script>
<table id="tab33"></table> 
<div id="tab33p"></div>

CSS

html { 
	width:100%; 
	height:100%;
}
body{ 
	height:100%;
	width:100%;
	min-width:970px;
	min-height:570px;
	margin:0;
	padding:0;
	overflow:auto;
	text-align:left;
}
html, body { font-size: 80%; }
.subgrid-cell { display: none}

JavaScript

jQuery(function ($) {
	var OldSelectedRow=null,
			height=$('body').height()-210,
			numRows=Math.floor(height/23)-(Math.floor(height/23)%5),
			heightRows=numRows*23,
			myGrid = $("#tab33"),
			mydata = [
				{id:"1",code:"BEL",descr:"Groupe BEL"},
				{id:"2",code:"COCACOLA",descr:"Groupe COCA-COLA"}
			],
			mydata2 = {
				1:	[
					{id:'10',code:'21J',descr: 'FROMAGERIES BEL',ville: 'VENARET LES LAUMES',cp: '21150'}
						],
				2:	[
					{id:'20',code:'13Y',descr: 'COCA COLA BEVERAGES SA',ville: 'LES PENNES MIRABEAU',cp: '13571'},
					{id:'30',code:'31J',descr: 'COCA-COLA ENTREPRISE CASTANET TOLOSAN',ville: 'CASTANET TOLOSAN',cp: '31320'},
					{id:'40',code:'83A',descr: 'VAROISE DE CONCENTRES S.A.',ville: 'SIGNES',cp: '83870'},
					{id:'50',code:'91E',descr: 'COCA COLA',ville: 'GRIGNY',cp: '91350'}
						]
			};
	myGrid.jqGrid({
		caption:"Liste des GROUPES",
		hidegrid:false,
		datatype:'local',
		data:mydata,
		height:"auto",
		shrinkToFit: true,
		rowNum:numRows,
		rownumbers: true, 
		rownumWidth: 40, 
		gridview: true,
		colNames:['Id','Groupe','Nom'],
		colModel:[ 
			{name:'id',index:'id', width:60, align:"right",hidden:true}, 
			{name:'code',index:'code', width:60,editable:true}, 
			{name:'descr',index:'descr', width:400,editable:true}
		], 
		pager: '#tab33p', 
		sortname: 'code', 
		sortorder: "asc", 
		onSortCol: function (index, idxcol, sortorder) {
			if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol && 
			this.p.colModel[this.p.lastsort].sortable !== false) {
					$(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
					$(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
			}
			$(this.grid.headers[idxcol].el).addClass('ui-state-active');
		},
		viewrecords: true,
		emptyrecords: 'Aucune donnée correspondante...',		
		altRows:true,
		altclass:'myAltRowClass',
		gridComplete:function(){
			OldSelectedRow=null;
		},
		onSelectRow:function(rowid){
           ...