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.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cerulean/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.0/css/ui.jqgrid.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.0/js/jquery.jqgrid.min.js"></script>
<div class="container-fluid">
    <table id="categorysummary"></table>
</div>

CSS

.ui-th-column>div, .ui-jqgrid-btable .jqgrow>td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    vertical-align: middle;
}

JavaScript

var serverResponse = {
        "page": "1",
        "records": "3",
        "rows": [
            { "Id": "1", IsActive:"N", CategoryName: "Name 1", "ComboDuration": "83123a" },
            { "Id": "2", IsActive:"N", CategoryName: "Name 3", "ComboDuration": "83432a" },
            { "Id": "3", IsActive:"N", CategoryName: "Name 2", "ComboDuration": "83566a" }
        ]
    },
    $grid = $("#categorysummary");

$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
    },
    colNames: ["", "Active", "Name", "Duration"],
    colModel: [
        { name: "act", template: "actions" },
        { name: "IsActive", align: "center", sortable: false},
        { name: "CategoryName", sortable: false },
        { name: "ComboDuration", align: "center", sortable: false,
            classes: "hidden-xs", labelClasses: "hidden-xs" }       
    ],
    autoResizing: { compact: true },
    cmTemplate: { editable: true, autoResizable: true },
		iconSet: "fontAwesome",
    jsonReader: {
        id: "Id",
        repeatitems: false
    },
    autowidth: true,
    rownumbers: true,
    sortname: "Id",
    caption: "Categories",
    viewrecords: true
}).jqGrid("filterToolbar");

$(window).bind("resize", function () {
    $grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
}).triggerHandler("resize");