JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.3/js/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.3/css/ui.jqgrid.min.css">
<div class="container-fluid">
  <div class="row">

    <div class="col-md-11">
      <h3 class="subheader"> Sample Info </h3>
      <div class="redmond">
        <table id="grid"></table>

      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
  var jsonData = {
      id: 48803,
      thingy: "DSK1",
      number: "02200220",
      status: "OPEN",
      subgridData: [{
        num: 1,
        item: "Item 1",
        qty: 3
      }, {
        num: 2,
        item: "Item 2",
        qty: 5
      }]
    },
    {
      id: 48769,
      thingy: "APPR",
      number: "77733337",
      status: "ENTERED",
      subgridData: [{
        num: 3,
        item: "Item 3",
        qty: 5
      }, {
        num: 2,
        item: "Item 2",
        qty: 10
      }]
    },
    mmddyyyy = "";
  /*********************************************************************/


  $("#output").jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
      json: JSON.stringify(jsonData)
    },
    height: 'auto',
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
    colModel: [{
      name: 'id',
      width: 60,
      sorttype: "int",
      key: true
    }, {
      name: 'thingy',
      width: 90
    }, {
      name: 'number',
      width: 80,
      formatter: "integer"
    }, {
      name: 'status',
      width: 80
    }],
    gridview: true,
    autoencode: true,
    pager: '#pagerId',
    caption: "Stack Overflow Subgrid Example",
    subGrid: true,
    subGridOptions: {
      plusicon: "ui-icon-triangle-1-e",
      minusicon: "ui-icon-triangle-1-s",
      openicon: "ui-icon-arrowreturn-1-e"
    },
    shrinkToFit: false,

    subGridRowExpanded: function(subgrid_id, row_id) {
      var subgrid_table_id = subgrid_id + "_t",
        pager_id = "p_" + subgrid_table_id,
        localRowData = $(this).jqGrid("getLocalRow", row_id);
      $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>");
      $("#" + subgrid_table_id).jqGrid({
        datatype: "local",
        data: localRowData.subgridData,
        colNames: ['No', 'Item', 'Qty'],
        colModel: [{
          name: "num",
          width: 80,
         ...