JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<div id="container" class="jqgrid-fluid-width">
    <table id="grid"></table>
</div>

CSS

.jqgrid-fluid-width > .ui-jqgrid {
      max-width: 100% !important;
      width: auto !important;
}

.jqgrid-fluid-width > .ui-jqgrid > .ui-jqgrid-view,
.jqgrid-fluid-width > .ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-hdiv,
.jqgrid-fluid-width > .ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-bdiv {
      width: auto !important;
}

/* enable scrollbar */
.ui-jqgrid-bdiv {
    overflow: auto
}

#container { 
    width: 100%;
    margin: 0 0%; 
}

JavaScript

var $grid = $("#grid");

$grid.jqGrid({
    datatype: 'local',
    colNames: ['Header1', 'Header2', 'nf1', 'nf2', 'nf3', 'nf4', 'nf5', 'nf6'],
    colModel: [
        { 'name': 'frozen1', width: 50, frozen: true},
        { 'name': 'frozen2', width: 50, frozen: true},
        { 'name': 'nf1', width: 60},
        { 'name': 'nf2', width: 60},
        { 'name': 'nf3', width: 60},
        { 'name': 'nf4', width: 60},
        { 'name': 'nf5', width: 60},
        { 'name': 'nf6', width: 60}
    ],
    autowidth: true,
    height: 200,
    shrinkToFit: false
});

$grid.jqGrid('setFrozenColumns');

fillGrid("#grid");

function fillGrid(id) {
    for (var idx = 1; idx < 10; idx++) {
        $(id).jqGrid("addRowData", idx, { frozen1: 'Frozen1', frozen2: 'Frozen2', nf1: 'Free1', nf2: 'Free2', nf3: 'Free3'});
    }
}