JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<div id="configDiv"></div>

CSS

/*Grid*/ .ui-jqgrid {position: relative; font-size:11px;} .ui-jqgrid .ui-jqgrid-view {position: relative;left:0px; top: 0px; padding: .0em;} /* caption*/ .ui-jqgrid .ui-jqgrid-titlebar {padding: .3em .2em .2em .3em; position: relative; border-left: 0px none;border-right: 0px none; border-top: 0px none;} .ui-jqgrid .ui-jqgrid-title { float: left; margin: .1em 0 .2em; } .ui-jqgrid .ui-jqgrid-titlebar-close { position: absolute;top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height:18px;}.ui-jqgrid .ui-jqgrid-titlebar-close span { display: block; margin: 1px; } .ui-jqgrid .ui-jqgrid-titlebar-close:hover { padding: 0; } /* header*/ .ui-jqgrid .ui-jqgrid-hdiv {position: relative; margin: 0em;padding: 0em; overflow-x: hidden; overflow-y: auto; border-left: 0px none !important; border-top : 0px none !important; border-right : 0px none !important;} .ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 20px;} .ui-jqgrid .ui-jqgrid-htable {table-layout:fixed;margin:0em;} .ui-jqgrid .ui-jqgrid-htable th {height:22px;padding: 0 2px 0 2px;} .ui-jqgrid .ui-jqgrid-htable th div {overflow: hidden; position:relative; height:17px;} .ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {overflow: hidden;white-space: nowrap;text-align:center;border-top : 0px none;border-bottom : 0px none;} .ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {border-left : 0px none;} .ui-th-rtl, .ui-jqgrid .ui-jqgrid-htable th.ui-th-rtl {border-right : 0px none;} .ui-jqgrid .ui-th-div-ie {white-space: nowrap; zoom :1; height:17px;} .ui-jqgrid .ui-jqgrid-resize {height:20px !important;position: relative; cursor :e-resize;display: inline;overflow: hidden;} .ui-jqgrid .ui-grid-ico-sort {overflow:hidden;position:absolute;display:inline; cursor: pointer !important;} .ui-jqgrid .ui-icon-asc {margin-top:-3px; height:12px;} .ui-jqgrid .ui-icon-desc {margin-top:3px;height:12px;} .ui-jqgrid .ui-i-asc {margin-top:0px;height:16px;} .ui-jqgrid .ui-i-desc...

JavaScript

var json= [
{cfgId:"0",cfgName:"Pallet GB(ISO2)",hostname:"120.00",cfgDesc:"100.00",productId:"2",cfgType:"yes",updateDate:"#ff5656"},
{cfgId:"1",cfgName:"Pallet EPAL(EUR)",hostname:"120.00",cfgDesc:"80.00",productId:"2",cfgType:"yes",updateDate:"#aad4ff"},
{cfgId:"2",cfgName:"Pallet 1/2(EUR)",hostname:"80.00",cfgDesc:"60.00",productId:"2",cfgType:"no",updateDate:"#5fbf00"}
];
    $.jgrid.no_legacy_api = true;

         $('#configDiv').empty();
            $('<div width="100%">')
            .attr('id','configDetailsGrid')
            .html('<table id="list1" width="100%"></table>'+
                    '<div id="gridpager"></div>'+
                '</div>')       
            .appendTo('#configDiv');    

            var grid = jQuery("#list1");

            grid.jqGrid({
     
              datatype: "local",
              colNames:['cfgId','','Name', 'Host', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By',''],
              colModel:[
                  {name:'cfgId',index:'cfgId', width:90, align:"right", hidden:true},
                  {name:'',index:'', width:15, align:"right",edittype:'checkbox',formatter: "checkbox",editoptions: { value:"True:False"},editable:true,formatoptions: {disabled : false}},
                  {name:'cfgName',index:'cfgName', width:90, align:"right"},
                  {name:'hostname',index:'hostname', width:90, align:"right"},
                  {name:'cfgDesc',index:'cfgDesc', width:90, align:"right"},
                  {name:'productId',index:'productId', width:60, align:"right"},
                  {name:'cfgType',index:'cfgType', width:60, align:"right"},
                  {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"right"},
                  {name:'emailAddress',index:'emailAddress', width:120, align:"right"},
                  {name:'absolutePath',index:'absolutePath', width:90, align:"right", hidden:true},
              ],
              rowNum:10,
             ...