JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/bootstrap.min.js"></script>
<script src="http://www.ok-soft-gmbh.com/bootstrap/select2/3.4.3/select2.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.css">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap-theme.css">
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/bootstrap/select2/3.4.3/select2.css">
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/css/ui.jqgrid.css">
<body>
      <table id="list"><tr><td></td></tr></table>
      <div id="pager"></div>
</body>

CSS

<style type="text/css">
        html, body { font-size: 75%; }
        .ui-jqgrid table {border-collapse: separate}
        .ui-jqgrid .ui-pg-input, .ui-jqgrid .ui-pg-selbox {height: 17px}
        .ui-jqgrid .ui-pg-table {padding-bottom: 0}
        .ui-jqdialog .select2-container .select2-choice {
            height: auto;
            padding-top: 1px;
            padding-left: 0.2em;
            padding-bottom: 2px;
            line-height: 15px;
        }
        .ui-jqdialog .select2-container .select2-choice .select2-arrow b {
            background-position: 0 -4px;
        }
        .ui-jqdialog.select2-drop { padding: 0px; }
        .ui-jqdialog .select2-results .select2-result-label {
            padding: 2px;
        }
    </style>

JavaScript

var BldSelectOptionId = function (data)
					 {
    					var html = "<select>", length = data.length, i, item;
    					html += '<option value= 0></option>';
    					for (i = 0; i < length; i++) {
        					item = data[i];
        					html += '<option value=' + item.id + '>' + item.value + '</option>';
    					}
    					return html + "/<select>";
					 }

var select2 = function(element) {
                                $(element).width(122).select2({

                                    dropdownCssClass: "ui-widget ui-jqdialog"
                                });
                            }
/*----------------------------------------------------------*/
$(function () {
            "use strict";
            var mydata = [
                    { id: "10",  invdate: "2007-10-01", name: "test1",  note: "note1",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "30",  invdate: "2007-10-01", name: "test1",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "40",  invdate: "2007-10-04", name: "test3",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "50",  invdate: "2007-09-31", name: "test2",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "60",  invdate: "2007-10-04", name: "test1",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "70",  invdate: "2007-10-04", name: "test1",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "80",  invdate: "2007-09-08", name:...