JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.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>
<input type="button">add row</button>

JavaScript

console.clear();
$.jgrid.formatter.date.masks.dbmsDate = "m/d/Y";
$.jgrid.formatter.date.masks.userDate = "d-m-Y";
$.jgrid.formatter.date.reformatAfterEdit = true;

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

var grid = jQuery("#myTable");
grid.jqGrid({
    colModel : [
        { name: "order", width: 70, align: "right", formatter: "integer" },
        { name: "desc",  width: 100 },
        { name: "date",  width: 80, 
             formatter: "date", 
             formatoptions: {"srcformat": "dbmsDate", "newformat": "userDate" }, 
             editable: true, 
             edittype: "text", 
             editrules: { date: true}                    
        }
    ],
    height: "auto",
    datastr: myData,
    datatype: "jsonstring",
    jsonReader: { "root": function(obj){return obj;} },
    onSelectRow: function(rowid) {
        jQuery("#myTable").jqGrid("editRow", rowid, { "keys" : true });
    }
});