JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.js"></script>
<table id="editFrequencyTable"></table>

JavaScript

var json = {
  "ProductName": "CowBell",
  "Email": "[email protected]",
  "HistoricalRecords": [],
  "FutureRecords": [{
    "RecurringOrderId": "4b281869-2890-4419-9051-2a55df0efa5d",
    "RecurrenceScheduleId": 4,
    "CustomerId": 247,
    "OrderGroupTypeId": 2,
    "ProductCode": "H107",
    "Quantity": 3,
    "UnitPrice": 9.97,
    "ExtendedPrice": 29.91,
    "OrderDate": "2016-04-01T00:00:00",
    "PoNumber": "P99",
    "BillingId": null,
    "LastModifiedBy": null,
    "LastModifiedDate": null,
    "ReasonForModification": null
  }, {
    "RecurringOrderId": "c8769800-b731-4c6d-bef9-3c7b976ef177",
    "RecurrenceScheduleId": 4,
    "CustomerId": 247,
    "OrderGroupTypeId": 2,
    "ProductCode": "H107",
    "Quantity": 3,
    "UnitPrice": 9.97,
    "ExtendedPrice": 29.91,
    "OrderDate": "2016-03-01T00:00:00",
    "PoNumber": "P99",
    "BillingId": null,
    "LastModifiedBy": null,
    "LastModifiedDate": null,
    "ReasonForModification": null
  }, {
    "RecurringOrderId": "764be1bb-2612-4306-8176-c7004dfc26c6",
    "RecurrenceScheduleId": 4,
    "CustomerId": 247,
    "OrderGroupTypeId": 2,
    "ProductCode": "H107",
    "Quantity": 3,
    "UnitPrice": 9.97,
    "ExtendedPrice": 29.91,
    "OrderDate": "2016-06-01T00:00:00",
    "PoNumber": "P99",
    "BillingId": null,
    "LastModifiedBy": null,
    "LastModifiedDate": null,
    "ReasonForModification": null
  }, {
    "RecurringOrderId": "884fb5ad-4463-4017-ab5d-d4de6fdeb48a",
    "RecurrenceScheduleId": 4,
    "CustomerId": 247,
    "OrderGroupTypeId": 2,
    "ProductCode": "H107",
    "Quantity": 3,
    "UnitPrice": 9.97,
    "ExtendedPrice": 29.91,
    "OrderDate": "2016-05-01T00:00:00",
    "PoNumber": "P99",
    "BillingId": null,
    "LastModifiedBy": null,
    "LastModifiedDate": null,
    "ReasonForModification": null
  }]
}

var efData = [];
$("#editFrequencyTable").jqGrid({
  data: json.FutureRecords,
  datatype: "local",
  loadonce: true,
  height: 'auto',
  marginLeft: 'auto',
 ...