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 container-fluid">
           <table id="output"></table>
         </div>
     </div>
  </div>     
</div>

JavaScript

$(document).ready(function() {
    var jsonData = {
      "Name": "Julie Brown",
      "Account": "C0010",
      "LoanApproved": "12/5/2015",
      "LastActivity": "4/1/2016",
      "PledgedPortfolio": "4012214.00875",
      "MaxApprovedLoanAmt": "2050877.824375",
      "LoanBalance": "1849000",
      "AvailableCredit": "201877.824375",
      "Aging": "3",
      "Brokerage": "My Broker",
      "Contact": "Robert L. Johnson",
      "ContactPhone": "(212) 902-3614",
      "RiskCategory": "Yellow",
      "rows": [{
        "ClientID": "C0010",
        "Symbol": "WEC",
        "Description": "Western Electric Co",
        "ShareQuantity": "20638",
        "SharePrice": "21.12",
        "TotalValue": "435874.56",
        "LTVCategory": "Equities",
        "LTVRatio": "50%",
        "MaxLoanAmt": "217937.28"
      }, {
        "ClientID": "C0010",
        "Symbol": "BBB",
        "Description": "Bins Breakers and Boxes",
        "ShareQuantity": "9623",
        "SharePrice": "74.29125",
        "TotalValue": "714904.69875",
        "LTVCategory": "Equities",
        "LTVRatio": "50%",
        "MaxLoanAmt": "357452.349375"
      }, {
        "ClientID": "C0010",
        "Symbol": "GPSC",
        "Description": "Great Plains Small Cap Stock",
        "ShareQuantity": "49612",
        "SharePrice": "14.24",
        "TotalValue": "706474.88",
        "LTVCategory": "Mutual Funds - Small Cap",
        "LTVRatio": "40%",
        "MaxLoanAmt": "282589.952"
      }]
    },
    mmddyyyy = "";
  /*********************************************************************/
  $("#output").jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
          json: JSON.stringify(jsonData)
    },
    colModel: [
      /**    { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
      {
        name: 'Symbol',
        width: 65
      }, {
        name: 'Description',
        width: 165
      }, {
        name: 'ShareQuantity',
        align:...