JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://agilelogix.com/develope/jqgrid/css/ui.jqgrid.css">
<script src="http://agilelogix.com/develope/jqgrid/jquery.jqGrid.min.js"></script>
<script src="http://agilelogix.com/develope/jqgrid/grid.locale-en.js"></script>
<div id="root-wrapper">
		<div class="wrapper">
			<div class="data-grid">
				<table cellpadding="0" cellspacing="0" border="0" class="display" id="tbl_Grid">
				</table>
			</div>
		</div>
</div>

CSS

.wrapper {    box-shadow: 0.1rem 0 0.4rem rgba(0, 0, 0, 0.8);	max-width: 1000px;	margin:0 auto; }
	.wrapper .container  { width: 100%;} 
	.data-grid{ width:100%;position:relative;}

JavaScript

$(function(){
	
	jQuery("#tbl_Grid").jqGrid({
		url : 'http://agilelogix.com/develope/jqgrid/data.php',
		datatype : "local",
		colNames : ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
		colModel : [{
			name : 'id',
			index : 'id',
			width: 50
			}, {
			name : 'invdate',
			index : 'invdate',
			width: 100
			}, {
			name : 'name',
			index : 'name',
			width: 60
			}, {
			name : 'amount',
			index : 'amount',
			align : "right",
			width: 80
			}, {
			name : 'tax',
			index : 'tax',
			align : "right",
			width: 90
			}, {
			name : 'total',
			index : 'total',
			align : "right",
			width: 100
			}, {
			name : 'note',
			index : 'note',
			sortable : false,
			width: 150
		}
		],
		rowNum : 10,
		rowList : [10, 20, 30],
		sortname : 'id',
		autowidth: true,
		//shrinkToFit:true,
		viewrecords : true,
		sortorder : "desc"
	});
    
    var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; for(var i=0;i<=mydata.length;i++) jQuery("#tbl_Grid").jqGrid('addRowData',i+1,mydata[i]);
    
	return;	
});