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="https://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/css/ui.jqgrid.css">
<script src="https://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/jquery.jqGrid.min.js"></script>
<div class="my-container">
    <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: ["IsActive", "Name", "Duration"],
    colModel: [
        { name: "IsActive", align: "center", sortable: false},
        { name: "CategoryName", sortable: false },
        { name: "ComboDuration", align: "center", sortable: false }       
    ],
    cmTemplate: { editable: true, autoResizable: true },
    jsonReader: {
        id: "Id",
        repeatitems: false
    },
    autowidth: true,
    height: "auto",
    rownumbers: true,
    sortname: "Id",
    caption: "Categories",
    viewrecords: true
}).jqGrid("filterToolbar");

function hideOrShowColumns (e) {
    if (e.matches) {
        // we have view ports of 767 pixels wide or less
    	$grid.jqGrid("hideCol", "ComboDuration");
    } else {
    	$grid.jqGrid("showCol", "ComboDuration");
    }
}
var mql = window.matchMedia('(max-width: 767px)');
hideOrShowColumns(mql);
mql.addListener(function (e) {
	hideOrShowColumns(e);
});

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