JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<script src="http://cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<link rel="stylesheet" href="http://cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css">
<body id="home">
    <div id="drag" class="container-fluid center">
        <div class="row">
            <div class="col-md-12">
                <table id="stations">
                    <thead>
                        <tr>
                            <th>Call Letters</th>
                            <th>Channel</th>
                            <th>City</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p style="margin-top:10px;text-align:right">Data from <a href="https://stations.fcc.gov/find-station/">FCC</a>

                </p>
            </div>
        </div>
    </div>
    <div class="modal"></div>
</body>

CSS

body {
    font-family: Helvetica, sans-serif;
}
a {
    color: #0000e5;
}
a:hover {
    color: #0000B7;
}
select {
    background: #eee;
    border: 2px solid black;
    height: 26px;
    border-radius: 4px;
    padding-top: 4px;
    cursor: pointer;
}
input {
    background: #eee;
    border: 2px solid black;
    border-radius: 4px;
    padding-left: 7px;
}
.center {
    width:700px;
    margin: 0 auto;
    display: table;
}
table#stations {
    border-collapse: collapse;
}
table#stations tr.odd {
    background:#fff;
    border-bottom: 1px dotted black;
}
table#stations tr.odd:hover {
    background:#F7F7F7;
}
table#stations tr.even {
    background: #ddd;
    border-bottom: 1px dotted black;
}
table#stations tr.even:hover {
    background:#d2d2d2;
}
table#stations td, th {
    padding: 12px;
}
/*TABLE TOOLS*/
 button.DTTT_button, div.DTTT_button, a.DTTT_button {
    border: 2px solid #000;
    border-radius: 4px;
    box-shadow: none;
    background: #eee;
    height: 26px;
    padding-bottom: 21px;
    padding-top: 1px;
    font-size: inherit;
    font-weight: bold;
}
button.DTTT_button, div.DTTT_button, a.DTTT_button:hover {
    border: 2px solid #000;
    border-radius: 4px;
    box-shadow: none;
    background: #d2d2d2;
}
/*LOADING MODAL*/

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
 .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8) url('http://cbschicago.files.wordpress.com/2014/09/loading.gif?w=620&h=349&crop=1') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
 body.loading {
    overflow: hidden;
}
/* Anytime the body has the loading class,...

JavaScript

//Global variables
var searchQuery = $("#searchbox").val();
var table;

function dataTable() {
    //Permits operations from DataTables jQuery plugin
    table = $('#stations').DataTable({
        "pageLength": -1,
            "lengthMenu": [
            [10, 100, -1],
            [10, 100, "All"]
        ],
            "sDom": 'T<"clear">lfrtip',
            "tableTools": {
            "sSwfPath": "http://harryjstevens.com/stations/copy_csv_xls_pdf.swf",
                "aButtons": [
            //Download options
            {
                "sExtends": "csv",
                    "sButtonText": "Save search as .csv",
                    "oSelectorOpts": {
                    "filter": "applied",
                        "order": "current",
                        "page": "current"
                },
                    "sFileName": "Data - *.csv"
            }, ]
        }
    });

    //Fixed header plugin
    new $.fn.dataTable.FixedHeader(table);


    //Gives an ID to the search box and then grabs its value as you type. Still need
    //to figure out how to put the value into the file name.
    $('div#stations_filter.dataTables_filter label input').attr('id', 'searchbox');

    $("#searchbox").on("input", function () {
        searchQuery = $(this).val();
        console.log('The search is: ' + searchQuery);
        //now what?
    });


}

function getData() {
    //Loading modal
    $body = $("body");

    $(document).on({
        ajaxStart: function () {
            $body.addClass("loading");
        },
        ajaxComplete: function () {
            $body.removeClass("loading");
        }
    });

    $.get('https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%201YWx62yqYX1-TZFnTgLgYoyFniM39EvCkRgsYz0u6&key=AIzaSyB-QJux9WIJmey5IJYzPImNzg-xP1gpvU8', JSON, function (data) {

        a = data.rows;

        $.each(a, function (idx, elem) {

            $('table#stations TBODY').append('<tr><td><a target="_blank" href="' + elem[6] + '">' +...