JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table id="sg1"></table>
<div id="psg1"></div>
</br>
<button type="button" id="PopulateDataBtn">Populate Data</button>
<button type="button" id="RemoveDataBtn">Remove Data</button>

CSS

.alert-info-grid{background-color:#ffffe5;color:black; font-size:14px; font-weight:600; padding:4px; text-align:center;}

JavaScript

$("#sg1").jqGrid({
	datatype: "local",
    cmTemplate: { sortable: !0, resizable: !0 },
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
    width:500,
	height: 'auto',
    viewrecords: true,
    pgbuttons: true,
    pager: "#psg1",
    pgtext: "Page {0} of {1}",
    rowList: [],
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:90, sorttype:"int"},
   		{name:'invdate',index:'invdate', width:190, sorttype:"date"},
   		{name:'name',index:'name', width:180},
   		{name:'amount',index:'amount', width:180, align:"right",sorttype:"float"},
   		{name:'tax',index:'tax', width:180, align:"right",sorttype:"float"},		
   		{name:'total',index:'total', width:80,align:"right",sorttype:"float"},		
   		{name:'note',index:'note', width:150, sortable:false}		
   	],
   	caption: "Test Grid"
});

var mydata = [
		{id:"1",invdate:"2007-10-01",name:"test 1234567890123456789",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"}
		];

$("<div class='alert-info-grid'>No Record(s) Found</div>").insertAfter($("#sg1").parent());

$('#PopulateDataBtn').on('click', function(){
    
    var gridObj = $("#sg1");
    
    gridObj.clearGridData();
    
    for(var i=0;i<=mydata.length;i++)
	   gridObj.jqGrid('addRowData',i+1,mydata[i]);
});

$('#RemoveDataBtn').on('click', function(){
    var gridObj = $("#sg1");
    
    gridObj.clearGridData();    
    
$("<div class='alert-info-grid'>No Record(s) Found</div>").insertAfter(gridObj.parent());
    
});