JSFiddle - React, Tailwind, and code Playground

by redoak2000

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<div id="outerDiv" style="margin:5px;">
    <table id="list"></table>
</div>

CSS

.select2-dropdown { font-size: 12px; }
.select2-selection {
    font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}
.select2-container--default .select2-results__option:not(.ui-state-hover) {
    /* rservate space for the border, which will be visible on hover items */
	border: 1px solid transparent;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    /* we use css properties of .ui-state-highlight */
    /*background: #fbec88 url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/images/ui-bg_flat_55_fbec88_40x100.png") 50% 50% repeat-x;*/
    border: 1px solid #fad42e;
	background: #fbec88;
	color: #363636;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    /* we use css properties of .ui-state-hover and the color of .ui-state-active */
    border: 1px solid #79b7e7;
	background: #d0e5f5 url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
	/*font-weight: bold;*/
	/*color: #1d5987;*/
    color: rgb(225, 112, 9);
}

JavaScript

$(function () {
    "use strict";
    var mydata = [
        { id: "10",	 name: "test",	ship_via: "TNT", total: "" },
        { id: "20",	 invdate: "2016-09-01", name: "test2",	note: "note2",	amount: 300.00, tax: 20.00, closed: false, ship_via: "FedEx", total: 320.00 },
        { id: "30",	 invdate: "2016-09-01", name: "test3",	note: "note3",	amount: 400.00, tax: 30.00, closed: false, ship_via: "FedEx", total: 430.00 },
        { id: "40",	 invdate: "2016-10-04", name: "test4",	note: "note4",	amount: 200.00, tax: 10.00, closed: true,  ship_via: "DHL", total: 210.00 },
        { id: "50",	 invdate: "2016-10-31", name: "test5",	note: "note5",	amount: 300.00, tax: 20.00, closed: false, ship_via: "FedEx", total: 320.00 },
        { id: "60",	 invdate: "2016-09-06", name: "test6",	note: "note6",	amount: 400.00, tax: 30.00, closed: false, ship_via: "FedEx", total: 430.00 },
        { id: "70",	 invdate: "2016-10-04", name: "test7",	note: "note7",	amount: 200.00, tax: 10.00, closed: true,  ship_via: "TNT", total: 210.00 },
        { id: "80",	 invdate: "2016-10-03", name: "test8",	note: "note8",	amount: 300.00, tax: 20.00, closed: false, ship_via: "FedEx", total: 320.00 },
        { id: "90",	 invdate: "2016-09-01", name: "test9",	note: "note9",	amount: 400.00, tax: 30.00, closed: false, ship_via: "TNT", total: 430.00 },
        { id: "100", invdate: "2016-09-08", name: "test10", note: "note10", amount: 500.00, tax: 30.00, closed: true,  ship_via: "DHL", total: 530.00 },
        { id: "110", invdate: "2016-09-08", name: "test11", note: "note11", amount: 500.00, tax: 30.00, closed: false, ship_via: "FedEx", total: 530.00 },
        { id: "120", invdate: "2016-09-10", name: "test12", note: "note12", amount: 500.00, tax: 30.00, closed: false, ship_via: "FedEx", total: 530.00 }
    ],
        $grid = $("#list"),
        initDatepicker = function (elem, options) {
            var self = this, $elem = $(elem),
                $gBox = $(this).closest(".ui-jqgrid"),
           ...