JSFiddle - React, Tailwind, and code Playground

by gunjan_prmr

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>

<table id="grid"></table>
<div id="myDialogBox" title="Basic dialog"></div>

CSS

.ui-search-input img.ui-datepicker-trigger {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 1px;
}

JavaScript

$(function() {
  "use strict";
  
  $("#myDialogBox").dialog({
    autoOpen: false
  });
  
  $("#grid").jqGrid({
    colModel: [
    { name: "BatchID", label: "Batch ID", align: "center"}, 
    { name: "Status",  label: "Status", align: "center", formatter: "select", 
       formatoptions: { value: "CAN:Canceled; COM:Completed; PEN:Pending", defaultValue: "PEN" },
       stype: "select", searchoptions: { value: ":Pending;CAN:Canceled; COM:Completed"} },
    { name: "StartRunDate", label: "Start Run Date", align: "center", sorttype:"date", 
      formatter: function (cellval, opions, rawdata, act) {
          return $.fn.fmatter.call(this, "date", cellval, opions, rawdata, act) ; },
      formatoptions: { srcformat: "m/d/Y" },
      searchoptions: {
          sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
          attr: {
              placeholder: "m/d/yyyy",
              style: "width: 110px; display: inline-block;"
          },
          dataInit: function (elem, options) {
                $(elem).datepicker({
                    showOn: "button",
                    buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
            buttonImageOnly: true
                });
            }
      } },
    { name: "StartRunTime", label: "Start Run Time", align: "center", sorttype:"time", formatter: "time" },  
    { name: "EndRunDate", label: "End Run Date", align: "center",  editable:true, sorttype:"date" },
    { name: "EndRunTime", label: "End RunTime", align: "center",  editable:true, sorttype:"time" },
    { name: "Action",  label: "Action", align: "center", formatter: "showlink"}, 
    { name: "JobID",  label: "Job ID", align: "center" }, 
    { name: "JobName",  label: "Job Name", align: "center"}, 
    { name: "ConceptName", label: "Concept Name", align: "center" }, 
    { name: "StartDate", label: "Start Date", align: "center" }, 
    { name: "EndDate", label: "End Date", align: "center" }, 
    { name: "Frequency", label:...