JSFiddle - React, Tailwind, and code Playground

by mestevez85

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<table id='myTable'></table>

JavaScript

console.clear();
function __columnStyle(rowid, cellValue, rawData, colModel, rowData) {
    if (colModel.name == "desc")
        return "style='font-weight: bold; border-right-style: solid; border-right-width: 2px; border-right-color: red;'"
    else
        return "style='font-style: italic; border-right-style: solid; border-right-width: 2px; border-right-color: red;'"
}

var myData = [
    {"id": 1, "cell": [1,"ITEM01","2013/01/01"]},
    {"id": 2, "cell": [2,"ITEM02","2013/01/01"]},
    {"id": 2, "cell": [2,"ITEM02","2013/01/01"]}
];

var grid = jQuery("#myTable");
grid.jqGrid({
    colModel : [
        { name: "order", width: 70, align: "right", formatter: "integer" },
        { name: "desc",  width: 100, cellattr:__columnStyle },
        { name: "date",  width: 80, formatter: "date", cellattr:__columnStyle }
    ],
    height: "auto",
    datastr: myData,
    datatype: "jsonstring",
    jsonReader: { "root": function(obj){return obj;} }
});