JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

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', width:90, sorttype:"int"},
   		{name:'invdate', width:190, sorttype:"date"},
   		{name:'name', width:180},
   		{name:'amount', width:180, align:"right",sorttype:"float"},
   		{name:'tax', width:180, align:"right",sorttype:"float"},		
   		{name:'total', width:80,align:"right",sorttype:"float"},		
   		{name:'note', width:150, sortable:false}		
   	],
    localReader: {
        page: function (obj) {
            return (obj.page === 0 || obj.page === undefined) ? "0" : obj.page;
        }
    },
    onInitGrid: function () {
        $("<div class='alert-info-grid'>No Record(s) Found</div>").insertAfter($(this).parent());
    },
    loadComplete: function () {
        var $this = $(this), p = $this.jqGrid("getGridParam");
        if (p.reccount === 0) {
            $this.hide();
            $this.parent().siblings(".alert-info-grid").show();
        } else {
            $this.show();
            $this.parent().siblings(".alert-info-grid").hide();
        }
    },
   	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"}
	];

function setGridDataAndReload ($grid, data) {
    var p = $grid.jqGrid("getGridParam");
    p.data = data;
    $grid.trigger("reloadGrid", [{page: 1}]);
}

$('#PopulateDataBtn').on('click', function(){
    setGridDataAndReload($("#sg1"),...