JSFiddle - React, Tailwind, and code Playground

by jihel

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%; }
.ui-jqgrid table td{
		/*color:black;*/
}
.ui-jqgrid table.ui-jqgrid-htable th.ui-th-column input,
.ui-jqgrid table.ui-jqgrid-htable th.ui-th-column select {
    background-color: white;
		height:18px;
		font-size:11px;
		/*color:#2779AA;*/
}
.ui-jqgrid table.ui-jqgrid-htable th.ui-th-column select {
		height:22px;
}
.ui-jqgrid table.ui-jqgrid-htable th.ui-th-column select option:nth-child(odd) {
		background:#F8F8F8;
}
.ui-jqgrid td.jqgrid-rownum{font-size:.8em;}
.ui-jqgrid .ui-pg-table td{
	/*color:#2779AA;*/
}
.ui-jqgrid tr.jqgrow td { text-overflow: ellipsis;-o-text-overflow: ellipsis; width:100%; white-space:nowrap !important;}
.ui-jqgrid tr.jqgrow  input.itmchk{
	margin:0 5px;
	margin-top:2px;
}
.ui-jqgrid tr.jqgrow  input.itmrad{
	margin:0 5px;
	margin-top:2px;
}
.ui-jqgrid tr.jqgrow  select.itmsel{
	height:22px;
	line-height:22px;
	padding-top:3px;
	font-size:11px;
	font-style:italic;
	width:225px;
	border:0;
	background-color:transparent;
}
.ui-jqgrid tr.jqgrow  select.itmsel option{
	height:14px;
	line-height:14px;
	padding-top:1px;
}

.ui-dialog-shadow
{
 box-shadow: 4px 4px 8px black; 
}
.ui-jqdialog select {
	height:21px;
	line-height:17px;
	padding-top:2px;
}
.subgrid-cell { 
	display: none;	
	/*
		show/hide subgrid column
	*/
}

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:'1',code:'21J',descr: 'FROMAGERIES BEL',ville: 'VENARET LES LAUMES',cp: '21150'}
						],
				2:	[
					{id:'2',code:'13Y',descr: 'COCA COLA BEVERAGES SA',ville: 'LES PENNES MIRABEAU',cp: '13571'},
					{id:'3',code:'31J',descr: 'COCA-COLA ENTREPRISE CASTANET TOLOSAN',ville: 'CASTANET TOLOSAN',cp: '31320'},
					{id:'4',code:'83A',descr: 'VAROISE DE CONCENTRES S.A.',ville: 'SIGNES',cp: '83870'},
					{id:'5',code:'91E',descr: 'COCA COLA',ville: 'GRIGNY',cp: '91350'}
						]
			};
	myGrid.jqGrid({
		caption:"Liste des GROUPES",
		hidegrid:false,
		datatype:'local',
		data:mydata,
		height:heightRows,
		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;
			colModel = myGrid.jqGrid('getGridParam',...