JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="list2"></table>
<div id="pager2"></div>

JavaScript

var  mydata = [
        {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"20",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"30",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"40",invdate:null,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"50",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"60",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"70",invdate:null,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"80",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"90",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ];

jQuery("#list2").jqGrid({
    data: mydata,
    datatype: "local",
    height: "auto",
    gridview: true,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, key: true, sorttype:"int"},
		{name: 'invdate', index: 'invdate', search: false, editable: true, align: "left", width: 75, 
            formatter: function (cellvalue, options, rowObject) {
                return cellvalue === null ? "N/A" : $.fn.fmatter.call(this, "date", cellvalue, options, rowObject);
            }, formatoptions: { newformat: "m/d/Y" },
            editoptions: {
                            size: 20,
                            dataInit: function (el) {
                                $(el).datepicker({ dateFormat: 'mm/d/yy' });
                            },
                            defaultValue: function () {
                                var currentTime = new Date();
                                var month =...