JSFiddle - React, Tailwind, and code Playground

by dev2020

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/js/jquery.jqgrid.min.js"></script>
<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">
<div class="container-fluid">
   <div class="row">

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

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

JavaScript

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"
  }]
};



$(document).ready(function() {



  /*********************************************************************/
  $("#output").jqGrid({
    url: jsonData,

    mtype: "GET",
    datatype: "json",
    /*  postData: {
          json: JSON.stringify(data)
      },
      */
    colModel: [
      /**    { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
      {
        name: 'Symbol',
        label: 'Symbol',
        align: 'left',
        width: 65
      }, {
        name: 'Description',
        label: 'Description',
        align: 'left',
        width: 165
      }, {
        name: 'ShareQuantity',
        label: 'ShareQuantity',
        align: 'right',
        width: "85",
        formatter: 'currency',
  ...