JSFiddle - React, Tailwind, and code Playground

by Jaikrat Tariyal

HTML

<link rel="stylesheet" href="&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css">
<link rel="stylesheet" href="https://www.filamentgroup.com/examples/daterangepicker/jquery-ui-daterangepicker.css">
<link rel="stylesheet" href="https://www.filamentgroup.com/examples/daterangepicker/ui.theme.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js"></script>
<script src="https://www.filamentgroup.com/examples/daterangepicker/daterangepicker.jQuery.js"></script>
<table id="list"><tr><td/></tr></table>
<div id="pager"/>

JavaScript

jQuery(document).ready(function () {
            var mydata = [
                {id:"1", invdate:"2015-10-01",name:"test",  note:"note",  amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"2", invdate:"2015-10-02",name:"test2", note:"note2", amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3", invdate:"2015-09-01",name:"test3", note:"note3", amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"4", invdate:"2015-10-04",name:"test4", note:"note4", amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"5", invdate:"2015-10-05",name:"test5", note:"note5", amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6", invdate:"2015-09-06",name:"test6", note:"note6", amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"7", invdate:"2015-10-04",name:"Test7", note:"note7", amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"8", invdate:"2015-10-03",name:"test8", note:"note8", amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"9", invdate:"2015-09-01",name:"test9", note:"note9", amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"2015-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",total:"530.00"},
                {id:"11",invdate:"2015-09-08",name:"Test11",note:"note11",amount:"500.00",tax:"30.00",total:"530.00"},
                {id:"12",invdate:"2015-09-10",name:"test12",note:"note12",amount:"500.00",tax:"30.00",total:"530.00"}
            ];

var myGrid = $("#list");
myGrid.jqGrid({
datatype: "local",
data: mydata,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
      {name:'id',index:'id', width:65, sorttype: 'int'},
      {name:'invdate',index:'invdate', width:120, align:'center', sorttype:'date',
         formatter:'date', formatoptions: {newformat:'m/d/y'},
         searchoptions: {
            sopt: ['eq','ne'],
            dataInit : function (elem) {
              ...