JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/jquery.contextMenu.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.0/css/ui.jqgrid.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/jquery.contextMenu.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.0/js/jquery.jqgrid.min.js"></script>
<table id="grid"></table>

JavaScript

$(function () {
    "use strict";
    var serverResponse = [
        { "id": 10, "firstname": "Test10", "lastname": "User10", "status": "ACTIVE"},
        { "id": 20, "firstname": "Test20", "lastname": "User20", "status": "INACTIVATED"},
        { "id": 30, "firstname": "Test30", "lastname": "User30", "status": "PENDING APPROVAL"},
        { "id": 40, "firstname": "Test40", "lastname": "User40", "status": "ACTIVE"},
        { "id": 50, "firstname": "Test50", "lastname": "User50", "status": "INACTIVATED"},
        { "id": 60, "firstname": "Test60", "lastname": "User60", "status": "PENDING APPROVAL"}
    ],
    $grid = $("#grid");

    $grid.jqGrid({
        url: "/echo/json/", // use JSFiddle echo service
        datatype: "json",
        mtype: "POST", // needed for JSFiddle echo service
        postData: {
            json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
        },
        colModel: [
            { name: 'lastname', label: 'Last Name'},
            { name: 'firstname', label: 'First Name'},
            { name: 'status', label: 'Status', stype: 'select',
                searchoptions: {value: ':All;ACTIVE:Active;INACTIVATED:Inactive;PENDING APPROVAL:Pending Approval;'}}
        ],
        autowidth: true,
        viewrecords: true,
        iconSet: "fontAwesome",
        height: "auto",
        rowNum: 20,
        pager: true,
        sortname: "lastname",
        forceClientSorting: true,
        loadonce: true
    }).contextMenu({
        selector: ".jqgrow", 
        build: function ($trigger, e) {
            // this callback is executed every time the menu is to be shown
            // its results are destroyed every time the menu is hidden
            // e is the original contextmenu event
            var $tr = $(e.target).closest("tr.jqgrow"),
                rowid = $tr.attr("id"),
                item = $grid.jqGrid("getRowData", rowid);

            if (item.status === "ACTIVE") {
                return {
            ...