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.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<table id="list"></table>
<div id="pager"></div>

JavaScript

var serverResponse = {
      "page":1,
      "total":20000,
      "records":1000000,
      "rows":
        [
          {"id":1,"cell":[1,"Door","Details",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]},
          {"id":2,"cell":[2,"Door2","Details2",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]},
          {"id":3,"cell":[3,"Door3","Details3",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]},
          {"id":4,"cell":[4,"Door4","Details4",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]},
          {"id":5,"cell":[5,"Door5","Details5",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]},
          {"id":6,"cell":[6,"Door6","Details6",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]},
          {"id":7,"cell":[7,"Door7","Details7",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]},
          {"id":8,"cell":[8,"Door8","Details8",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]},
          {"id":9,"cell":[9,"Door9","Details9",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]},
          {"id":10,"cell":[10,"Door10","Details10",{"date":"2012-06-18 00:00:00","timezone_type":3,"timezone":"Europe\/Paris"}]}
        ]
    };

jQuery("#list").jqGrid({
    url: "/echo/json/", // use JSFiddle echo service
    datatype: "json",
    postData: {
        json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
    },
    mtype: "POST", // needed for JSFiddle echo service
    colNames: ['Product ID', 'Product Name', 'Product Details', 'Shipment Date', 'Actions'],
    colModel: [
        {name: 'id', index:'u.id', width: 110},
        {name: 'productName', index:'u.productName', width: 120, editable: true, jsonmap: "cell.1"},
        {name: 'productDetails', index:'u.productDetails', width: 120, align:'right',...