JSFiddle - React, Tailwind, and code Playground

by Sandeep Gupta

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<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.min.js"></script>
<table id="grid"></table>

JavaScript

var data = [[48803, "DSK1", "", "", "02200220", "OPEN"], [48769, "APPR", "", "", "77733337", "ENTERED"]];
var lastsel = "";

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'From date', 'To date', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 30,
        sorttype: "date"},
    {
        name: 'from date',
        index: 'from_date',
        width: 90,
    	align: 'left',
    	editable: true,
        editoptions: { dataInit: function (elem) { $(elem).datepicker(); } }
    },
    {
        name: 'to date',
        index: 'to_date',
        width: 90,
    	align: 'left',
    	editable: true,
        editoptions: { dataInit: function (elem) { $(elem).datepicker(); } }
    },
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    onSelectRow: function (id) {
        console.log(id);
            if (id && id !== lastsel) {
                jQuery('#grid').jqGrid('saveRow', lastsel);
                jQuery('#grid').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },
    caption: "Stack Overflow Example",
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

var names = ["id", "thingy", "from date", "to date", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

/*
$("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
*/
$("#grid").jqGrid('setGridParam', {ondblClickRow:...