JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="shipment_grid"><tr><td></td></tr></table>
<div id="shipment_grid_pager"></div>

CSS

/* to remove the vertical scroll bar in column header in chrome */
.ui-jqgrid-hdiv { overflow-y: hidden; }

JavaScript

var grid = jQuery("#shipment_grid"),
    mainGridPrefix = "s_",
    serverResponse = {
        "page":1,
        "records":[
            {"id":2,"trackingNr":"1Z1484366620874728", 
             "shipUnitView":[{"reference":"65000943","shipUnitType":"CARTON","totalOfCartons":1},
                            {"reference":"65000942","shipUnitType":"CARTON","totalOfCartons":1}]},

            {"id":4, "trackingNr":"1Z1484366620874746",
             "shipUnitView":[{"reference":"65000940","shipUnitType":"CARTON","totalOfCartons":1},
                            {"reference":"65000939","shipUnitType":"CARTON","totalOfCartons":1}]},

           {"id":3, "trackingNr":"1Z1484366620874764",
            "shipUnitView":[{"reference":"65000938","shipUnitType":"CARTON","totalOfCartons":1},
                            {"reference":"65000937","shipUnitType":"CARTON","totalOfCartons":1}]}  
        ],
        "recordsTotal":3,
        "rows":10,
        "sidx":null,
        "sord":"asc",
        "total":1,
        "trackingNr":null,
        "truckId":"174225",
        "truckShipmentComponent":{}
    };

grid.jqGrid({
    url: "/echo/json/", // use JSFiddle echo service
    postData: {
        json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
    },
    datatype: "json",
    mtype: "POST", // needed for JSFiddle echo service
    loadonce: true,
    colNames: ["Lead Tracking #"],
    colModel: [
        {name: "trackingNr", width: 100}
    ],
    rowNum: 10,
    height: "auto",
    width: 700,
    idPrefix: mainGridPrefix,
    rowList: [10, 20, 30],
    pager: '#shipment_grid_pager',
    sortname: 'trackingNr',
    sortorder: "desc",
    jsonReader: {
        root: "records",
        records: "rows",
        repeatitems: false
    },
    viewrecords: true,
    altRows: false,
    gridview: true,
    multiselect: true,
    hidegrid: false,
    forceFit: true,
    idPrefix: mainGridPrefix,
    caption: "Shipments Overview",
    subGrid: true,
   ...