JSFiddle - React, Tailwind, and code Playground

by raskalbass

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="http://YOURJQGRIDURL/jqGrid-4.5.2/js/jquery.jqGrid.src.js"></script>
<div class="row" id='oid_index_jqgrid'>
    <div class="col-xs-6 oid_index_jqgrid_col">
        <div class="col-md-6 oid_index_jqgrid">
            <table id="myOID"></table>
            <div id="pager1"></div>
        </div>
    </div>
</div>
<div class="modal fade" id='TIPS'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                	<h4 class="modal-title">TAXBLE STRIP</h4>

            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label>
                                <select class="form-control CUSIP_Form_Control">
                                    <option>A</option>
                                    <option>B</option>
                                    <option>C</option>
                                    <option>D</option>
                                    <option>E</option>
                               ...

CSS

/*!
 * Bootswatch v3.1.1
 * Homepage: http://bootswatch.com
 * Copyright 2012-2014 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
 html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden], template {
    display: none;
}
a {
    background: transparent;
}
a:active, a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b, strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
mark {
    background: #ff0;
    color: #000;
}
small {
    font-size: 80%;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 1em 40px;
}
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}
pre {
    overflow: auto;
}
code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
button {
    overflow: visible;
}
button, select {
    text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled], html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input {
    line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
   ...

JavaScript

$(function () {
    'use strict';
    var mydata = [{
        cusip: "<a href=modal_C.html>1234567890123456</a>",
        oid_type: "F",
        oid_type_desc: "TIPS"
    }, {
        cusip: "1234567890123456",
        oid_type: "S",
        oid_type_desc: "NQSI"
    }, {
        cusip: "1234567890123456",
        oid_type: "C",
        oid_type_desc: "CPDI"
    }

    ],
        $grid = $("#myOID"),
        viewParam = {
            bSubmit: "Save and Close",
            recreateForm: true,
            beforeShowForm: function ($form) {
                $form.find("td.DataTD").each(function () {
                    var html = $(this).html(); // &nbsp;<span>&nbsp;</span>
                    if (html.substr(0, 6) === "&nbsp;") {
                        $(this).html(html.substr(6));
                    }

                });
            }
        };

    $grid.jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ["CUSIP", "OID Code", "OID Type Description"],
        colModel: [{
            name: 'cusip',
            align: 'left',
            width: 120,
            sorttype: 'text',
            index: 'cusip'
        }, {
            name: 'oid_type',
            align: 'left',
            width: 90,
            sorttype: 'text',
            index: 'oid_type'
        }, {
            name: 'oid_type_desc',
            align: 'left',
            width: 440,
            sorttype: 'text',
            index: 'oid_type_desc'
        } ],
        rowNum: 15,
        rowList: [15],
        pager: '#pager1',
        gridview: true,
        autoWidth: true,
        //editable: true,
        rownumbers: false,
        //  onSelectRow: function (id) {
        //        $(this).jqGrid('viewGridRow', id, viewParam);
        //   },
        sortname: 'invdate',
        viewrecords: false,
        sortorder: 'desc',
        width: 650,
        shrinkToFit: false,
        height: "auto"
    });
});