JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="//cdn.jsdelivr.net/free-jqgrid/4.9.0/js/i18n/grid.locale-en.js"></script>
<script src="//cdn.jsdelivr.net/free-jqgrid/4.9.0/js/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <table id="mygrid"></table>
  <div id="mypager"></div>

CSS

<link rel="stylesheet" href="ui.jqgrid.css"/>
	 <link rel="stylesheet" href="jquery-ui.css"/>

JavaScript

jQuery(document).ready(function() {
            var myGrid = $("#mygrid").jqGrid({
                datatype: 'local',
                colModel: [
                    { name: 'ID', label: 'Some ID', key: true, hidden:true, width: 100, editable: false, sorttype: "int" },
                    { name: 'p', width: 200, editable: false },
                    { name: 't', width: 150, editable: false },
                    { name: 'r', width: 100, editable: false},
                    { name: 'v', width: 100, editable: false },
					{ name: 'o', width: 100, editable: false,sorttype:'date'}, 
					{ name: 'c', width: 100, editable: false },
					{ name: 'b', width: 100, editable: false },
					{ name: 'pb', width: 100, editable: false },
					{ name: 'sd', width: 100, editable: false },
					{ name: 'dd', width: 100, editable: false },
					{ name: 'Year', width: 100, editable: false },
					{ name: 'pd', width: 100, editable: false }
                ],
                pager: '#mypager',
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                autowidth: true,
                sortname: 'Name',
                sortorder: 'desc',
				height:250,
			    subGrid: true,
				subGridRowExpanded: function (subgridId, rowid) {
			       var subgridTableId = subgridId + "_t";
                    $("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
                    $("#" + subgridTableId).jqGrid({
                        datatype: "local",
                        data: $(this).jqGrid("getLocalRow", rowid).files,
                        colNames: ["rn", "pid"],
                        colModel: [
                          {name: "rn", width: 130, key: true},
                          {name: "pid", width: 130}
                        ],
                        height: "100%",
                        rowNum: 10,
                        sortname: "name",
                        idPrefix: "s_" + rowid +...