JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="account-contract-grid">
    <tr>
        <td></td>
    </tr>
</table>

CSS

.ui-jqgrid-hdiv {
    overflow-y: hidden;
}

JavaScript

var $gridName = $('#account-contract-grid');
var mainGrid = [ 
    {contractid: "4", description:"abcde", status:"Open", classification : "License", startdate : "01-Nov-2013", enddate : "31-Oct-2016", canceldate :"",
    subgrid: [
        { contractlineid : "4", itemname : "contractlline1" , startdate : "01-Nov-2013", enddate : "31-Oct-2016", canceldate : "", description: "abc", vendorname: "def", isshipped : "T",
         subgrid: [
            { productid: "5", description: "abc" },
            { productid: "50001", description: "abce" }
        ] },
        { contractlineid : "40001", itemname : "contractlline2" , startdate : "01-Nov-2013", enddate : "31-Oct-2016", canceldate : "", description: "abc", vendorname: "def", isshipped : "T" },
        { contractlineid : "40002", itemname : "contractlline3" , startdate : "01-Nov-2013", enddate : "31-Oct-2016", canceldate : "", description: "abc", vendorname: "def", isshipped : "T" }
    ]},
    {contractid: "5", description:"abcdeg", status:"closed", classification : "License", startdate : "01-Nov-2013", enddate : "31-Oct-2016", canceldate :"",
    subgrid: [ 
        { contractlineid : "40003", itemname : "contractlline1" , startdate : "01-Nov-2013", enddate : "31-Oct-2016", canceldate : "", description: "abc", vendorname: "def", isshipped : "T",
         subgrid:[ 
            { productid: "50003", description: "abced" },
            { productid: "50004", description: "abcedf" }
        ]}
    ]}		
];
var removeSubgridIcon = function () {
        var $this = $(this),
            idPrefix = $this.jqGrid("getGridParam", "idPrefix");
        $this.find(">tbody>tr.jqgrow>td.ui-sgcollapsed").filter(function () {
            var rowData = $this.jqGrid("getLocalRow",
                                       $.jgrid.stripPref(idPrefix, $(this).closest("tr.jqgrow").attr("id")));
            return rowData.subgrid === null;
        }).unbind("click").html("");
    };

var isHasSubrids = function (data) {
    var l =...