JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

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="output"></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 = "",
    $grid = $("#output");
  /*********************************************************************/

  $grid.jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
      json: JSON.stringify(jsonData)
    },
    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
    }],
    loadonce: true,
    additionalProperties: ["subgridData"],
    autoencode: true,
    pager: true,
    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"
    },*/
    iconSet: "fontAwesome",
    shrinkToFit: false,
    subGridRowExpanded: function(subgridDivId, rowid) {
      var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
          subgridData = $(this).jqGrid("getLocalRow", rowid).subgridData;

      $("#" + subgridDivId).append($subgrid);
      $subgrid.jqGrid({
        data: subgridData,
        colNames: ['No', 'Item', 'Qty'],
        colModel: [{
          name: "num",
          width: 80,
          key: true
        }, {
          name: "item",
          width:...