JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/js/jquery.jqgrid.src.js"></script>
<div style="margin-left:20px">
    <table id="nplGrid"></table>
</div>

JavaScript

$(document).ready(function () {
    // we use below Echo service from JSFiddle to simulate the server response
    var serverResponse = [
        {
            "Id":"C14999",
            "Symbol":"AA",
            "Quantity":" 10000000 ",
            "Price":" 25.00000 ",
            "Value":" 25000.00 ",
            "Pledged":"Y",
            "Num1":"4",
            "Num2":"20"

        },
        {
            "Id":"C14998",
            "Symbol":"IRTX",
            "Quantity":" 25343.2250 ",
            "Price":" 33.82000 ",
            "Value":" 857107.87 ",
            "Pledged":"Y",
            "Num1":"12",
            "Num2":"31"
        },
        {
            "Id":"C14997",
            "Symbol":"MMM",
            "Quantity":" 14344.0000 ",
            "Price":" 100000 ",
            "Value":" 14344.00 ",
            "Pledged":"Y",
            "Num1":"22",
            "Num2":"20"

        },
        {
            "Id":"C14996",
            "Symbol":"FMCX",
            "Quantity":" 28565.7660 ",
            "Price":" 187125 ",
            "Value":" 624769.01 ",
            "Pledged":"N",
            "Num1":"232",
            "Num2":"20"  
        },
        {
            "Id":"C14995",
            "Symbol":"CEB",
            "Quantity":"122800.0000 ",
            "Price":" 949000 ",
            "Value":" 1165372.00 ",
            "Pledged":"Y",
            "Num1":"2",
            "Num2":"10"
        },
        {
            "Id":"C23456",
            "Symbol":"VETF",
            "Quantity":"1398400.0000 ",
            "Price":" 256000 ",
            "Value":" 3579904.00 ",
            "Pledged":"Y",
            "Num1":"14",
            "Num2":"20"
        }
    ];
    
    $("#nplGrid").jqGrid({
        url: "/echo/json/",
        mtype: "POST",
        datatype: "json",
        postData: {
            json: JSON.stringify(serverResponse)
        },
        colModel: [
            { name: 'Id', width: 50, key: true },
            { name: 'Symbol', width:...