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

// Triand's jqGrid
// Example with CSS 100% height and 100% width resizing with parent div
// Also demonstrating content determined column widths
// PPhillips 2014-09-10
// [email protected]

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "777333373457892349058723895", "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: 10,sorttype: "int"},
    {name: 'thingy',index: 'thingy',width: 10,sorttype: "date"},
    {name: 'blank',index: 'blank',width: 10},
    {name: 'number',index: 'number',width: 10,sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 10,
        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);
	},
    gridComplete: function () {
        // Test - resize cols based on content

                $('#parent').append('<span id="widthTest"...