JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

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">
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js"></script>
<div id="outerDiv" style="margin:5px;">
    <table id="list"></table>
</div>

CSS

.ui-datepicker, .ui-autocomplete { font-size: 12px; }
.ui-autocomplete .ui-menu-item div:not(.ui-state-active) {
    /* rservate space for the border, which will be visible on active items */
    border: 1px solid transparent;
}
.ui-autocomplete .ui-menu-item div.ui-state-active {
    /* ovewrite some default rules from jQuery UI */
    font-weight: normal;
    margin: 0;
}
.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"),
           ...