JSFiddle - React, Tailwind, and code Playground

by Brian Houlihan

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="https://rawgit.com/hkalbertl/jquery.appendGrid/master/jquery.appendGrid-development.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/hkalbertl/jquery.appendGrid/master/jquery.appendGrid-development.js"></script>
<table id="tblAppendGrid"></table>

JavaScript

$(function() {
  var thisYear = new Date().getFullYear();
  $('#tblAppendGrid').appendGrid({
    caption: 'RMA Entries',
    columns: [{
      name: 'asset',
      display: 'Asset'
    }, {
      name: 'nonassetrma',
      display: 'Non-Asset RMA',
      type: 'select',
      ctrlOptions: { 0: '{Choose}', 1: 'Yes', 2: 'No'},
    }, {
      name: 'origin',
      display: 'Shipping Method',
      type: 'ui-autocomplete',
      uiOption: {
        source: [
          'Hong Kong',
          'Taiwan',
          'Japan',
          'Korea',
          'US',
          'Others'
        ]
      },
      ctrlCss: {
        width: '120px'
      }
    }, {
      name: 'stockIn',
      display: 'Submit Date',
      type: 'ui-datepicker',
      ctrlAttr: {
        maxlength: 10
      },
      ctrlCss: {
        width: '120px'
      },
      uiOption: {
        dateFormat: 'yy/mm/dd'
      }
    }],
    initData: [{
      'asset': 'Paris',
      'nonassetram': 1,
      'origin': 'UPS',
      'stockIn': '2011/01/30'
    }, {
      'album': 'To be Free',
      'nonassetram': 2,
      'origin': 'UPS',
      'stockIn': '2011/02/26'
    }]
  });
});