JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/plugins/min/jquery.contextmenu-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/jquery.createcontexmenufromnavigatorbuttons.js"></script>
<table id="jqGrid"></table>

JavaScript

$.contextMenu.defaults({
    menuShadowStyle: {
        "box-shadow": "8px 8px 8px #aaaaaa",
        margin: "-2px",
        padding: "0"
    },
    itemIconSpanStyle: {
        "float": "none",
        top: "-2px",
        position: "relative"
    }
});

$("#jqGrid").jqGrid({
    url : 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
    datatype : "jsonp",
    colModel : [{
        name : 'OrderID',
        key : true,
        width : 75
    }, {
        label : 'Customer ID',
        name : 'CustomerID',
        width : 150
    }, {
        label : 'Order Date',
        name : 'OrderDate',
        width : 150
    }, {
        label : 'Freight',
        name : 'Freight',
        width : 150
    }, {
        label : 'Ship Name',
        name : 'ShipName',
        width : 150
    }],
    viewrecords : true,
    width : 780,
    height : 250,
    rowNum : 20,
    pager : true
}).jqGrid('navGrid', {
    view : true
}).jqGrid("createContexMenuFromNavigatorButtons", $("#jqGrid").jqGrid("getGridParam", "pager"))