JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

$(function () {
    "use strict";
    var columnHeaders = [ "SiteID", "DFECode", "Site Name", "Role1_ID", "Admin", "Role2_ID", "Support", "Action" ],
    	columnModel = [{
            "name": "SiteID",
            "index": "SiteId",
            "width": "0",
            "hidden": true,
            "sortable": false
        },
        {
            "name": "DFECode",
            "index": "DFECode",
            "width": "120",
            "hidden": false,
            "sortable": false
        },
        {
            "name": "SiteName",
            "index": "SiteName",
            "width": "200",
            "hidden": false,
            "sortable": false
        },
        {
            "name": "Role1_ID",
            "index": "Role1_ID",
            "width": "0",
            "hidden": true,
            "sortable": false
        },
        {
            "name": "Role1_Value",
            "index": "Role1_Value",
            "width": "90",
            "hidden": false,
            "sortable": false,
            "formatter": "checkbox",
            "align": "center",
            "editable": true,
            "edittype": "checkbox",
            "formatoptions": {
                "disabled": false
            }
        },
        {
            "name": "Role2_ID",
            "index": "Role2_ID",
            "width": "0",
            "hidden": true,
            "sortable": false
        },
        {
            "name": "Role2_Value",
            "index": "Role2_Value",
            "width": "90",
            "hidden": false,
            "sortable": false,
            "formatter": "checkbox",
            "align": "center",
            "editable": true,
            "edittype": "checkbox",
            "formatoptions": {
                "disabled": false
            }
        },
        {
            "name": "Action",
            "index": "Action",
            "width": "90",
            "hidden": false,
            "sortable": false,
            "formatter":...