JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.0/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.0/css/ui.jqgrid.css">
<div id="pnlGrid" style="margin-left: 10px; margin-right: 10px;width:700px;">
  <table id="policyGrid">
  </table>
</div>

CSS

.ui-helper-hidden {
  display: none
}
.subgrid-data > .tablediv > .ui-jqgrid {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
.subgrid-data > .tablediv > .ui-jqgrid > .ui-jqgrid-view {
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

JavaScript

$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;

var maingriddata = [{
  Column1: "Test1",
  Column2: "Test1",
  ShowSubGrid: true
}, {
  Column1: "Test2",
  Column2: "Test2",
  ShowSubGrid: false
}];

var subgridData = [{
  SubCol1: 'SubCol1',
  SubCol2: 'SubCol2',
  SubCol3: 'SubCol3'
}, {
  SubCol1: 'SubCol11',
  SubCol2: 'SubCol22',
  SubCol3: 'SubCol33'
}];

$(function() {
  "use strict";
  var $grid = $("#policyGrid");

  $grid.jqGrid({
      datatype: "local",
      data: maingriddata,
      colNames: ["Column1", "Column2", "", ""],
      colModel: [{
        name: "Column1",
        width: 50
      }, {
        name: "Column2"
      }, {
        name: "viewsubgrid",
        align: "center",
        width: 21,
        formatter: function(cellvalue, options, rowObject) {
          if (rowObject.ShowSubGrid) {
            return "<span class='fa fa-fw fa-plus subgridIcon'></span>";
          } else {
            return "&nbsp;";
          }
        }
      }, {
        name: "ShowSubGrid",
        hidden: true
      }],
      cmTemplate: {
        sortable: false,
        resizable: false
      },
      iconSet: "fontAwesome",
      //loadonce: true,
      altRows: true,
      //caption: "",
      //width: '100%',
      //height: '100%',
      shrinkToFit: true,
      autowidth: true,
      height: 380,
      pgbuttons: false,
      pgtext: null,
      toppager: false,
      pager: true,
      rownumbers: false,
      threeStateSort: false,
      subGrid: true,
      subGridOptions: {
        hasSubgrid: function(options) {
          return options.data.ShowSubGrid;
        },
        reloadOnExpand: false,
        openicon: "ui-helper-hidden"
      },
      subGridRowExpanded: function(subgridDivId, rowId) {
        var subgrid_table_id, pager_id;
        subgrid_table_id = subgridDivId + "_t";
        pager_id = "p_" + subgrid_table_id;
        var $table = $("<table id='" + subgrid_table_id + "' class='scroll'></table>");
  ...