JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<div id="parent" class="resizable">
    <table id="grid"></table>
    <div id="gridPager"></div>
</div>

CSS

body, html {width: 100%;height:100%;padding: 0; margin: 0; overflow: hidden;}
#parent { width: 100%; height: 100%; position:relative;}

JavaScript

// Example with CSS height and width resizing with parent div

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];
var resizeTimer = null;
    
    
$("#grid").jqGrid({
    datatype: "local",       
    shrinkToFit: false,
    width: null,
    pager: 'gridPager',
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{name: 'id',index: 'id',width: 60,sorttype: "int"},
    {name: 'thingy',index: 'thingy',width: 90},
    {name: 'blank',index: 'blank',width: 50},
    {name: 'number',index: 'number',width: 80,sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "jqGrid Size Setting Example",
    beforeRequest: function () {
            setTimeout(function () {
                var gridName = 'grid';
                $('#gbox_' + gridName).css({
                    position: 'absolute',
                    top: 0,
                    bottom: $('#gbox_' + gridName + ' .ui-pager-control').outerHeight() + 'px',
                    width: '100%'
                });
                $('#gbox_' + gridName + ' .ui-jqgrid-view').css({ 'height': '100%' });

                $('#gbox_' + gridName + ' .ui-jqgrid-bdiv').css({
                    position: 'absolute',
                    top: $('#gbox_' + gridName + ' .ui-jqgrid-titlebar').outerHeight() + $('#gbox_' + gridName + ' .ui-jqgrid-hbox').outerHeight() + 'px',
                    bottom: 0,
                    left: 0,
                    right: 0,
                    height: '',
                    width: ''
                });
                
            }, 100);
	}
}).navGrid("#gridPager",{edit:false,add:true,del:false});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i...