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:670px;
	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.jgrid.no_legacy_api = true;
        jQuery.jgrid.useJSON = true;

        jQuery.extend(jQuery.jgrid.defaults, { 
				viewrecords: true,
				emptyrecords: 'Aucune donnée correspondante...',		
				altRows:true,
				altclass:'myAltRowClass',
				rownumbers: true, 
				rownumWidth: 40, 
				gridview: true,
				sortorder: "asc",
				onSortCol: function (index, idxcol) {
					if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol && 
					this.p.colModel[this.p.lastsort].sortable !== false) {
						jQuery(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
						jQuery(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
					}
					jQuery(this.grid.headers[idxcol].el).addClass('ui-state-active');
				},
				onSelectRow:function(rowid){
          			var $self = jQuery(this),
						$this = jQuery("#" + jQuery.jgrid.jqID(rowid)), // the row
						$expanded = $self.find("td.sgexpanded");

					 if ($expanded.length > 0) {
							 $expanded.trigger("click");
					 }
					 $self.jqGrid("expandSubGridRow", rowid);
					 $self.jqGrid("setSelection", rowid, false);
					 $this.closest(".ui-jqgrid-bdiv").scrollTop($this.position().top);
                    //alert($this.position().top+' '+$this.closest(".ui-jqgrid-bdiv").scrollTop());
				},
			});		
			//			
			sortDataCol=function(grid){
				var colModel = jQuery(grid).jqGrid('getGridParam', 'colModel'),
					sortName = jQuery(grid).jqGrid('getGridParam', 'sortname');
				jQuery('#gbox_' + jQuery.jgrid.jqID(jQuery(grid)[0].id) +
						' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
					var $this=jQuery(this);
					var cmi = colModel[i], colName = cmi.name;
					if (cmi.sortable !== false) {
						jQuery($this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
					} else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
						jQuery($this).find('>div.ui-jqgrid-sortable').css({cursor:...