JSFiddle - React, Tailwind, and code Playground

by Jared

HTML

<title>Health Check</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dataTables.bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.csv.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script src="js/csv_to_html_table.js"></script>
<script>
  $(document).ready(function() {
    var descriptions = {
      "HostGeneralInfo.csv": "<h3> Description </h3> <p>This report is utilized to understand what type of physical hosts are in your environment."

    }
    $('.nav .dropdown-menu a').click(function(event) {
      event.preventDefault();
      location.hash = $(this).attr('href');
      var description = descriptions[$(this).attr('href')];
      $('#description').html(description);

      init_table({
        csv_path: '../rawdata/' + $(this).attr('href'),
        element: 'table-container',
        allow_download: true,
        csv_options: {
          separator: ',',
          delimiter: '"'
        },
        datatables_options: {
          "paging": true,
          "deferRender": true,
          "searching": true
        }
      });

    });


    if (window.location.hash) {
      $('a[href="' + window.location.hash.substring(1) + '"]').click();

    }

  });

</script>



<body>

  <nav class="navbar navbar-default">
    <div class="container-fluid">

      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">Hub</a>
      </div>



      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle"...

CSS

div.dataTables_length label {
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}

div.dataTables_length select {
  width: 75px;
  display: inline-block;
}

div.dataTables_filter {
  text-align: right;
}

div.dataTables_filter label {
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
}

div.dataTables_filter input {
  margin-left: 0.5em;
  display: inline-block;
  width: auto;
}

div.dataTables_info {
  padding-top: 8px;
  white-space: nowrap;
}

div.dataTables_paginate {
  margin: 0;
  white-space: nowrap;
  text-align: right;
}

div.dataTables_paginate ul.pagination {
  margin: 2px 0;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  div.dataTables_wrapper > div.row > div,
  div.dataTables_length,
  div.dataTables_filter,
  div.dataTables_info,
  div.dataTables_paginate {
    text-align: center;
  }
  div.DTTT {
    margin-bottom: 0.5em;
  }
}

table.dataTable td,
table.dataTable th {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

table.dataTable {
  clear: both;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  position: relative;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  font-family: 'Glyphicons Halflings';
  opacity: 0.5;
}

table.dataTable thead .sorting:after {
  opacity: 0.2;
  content: "\e150";
  /* sort */
}

table.dataTable thead .sorting_asc:after {
  content: "\e155";
  /* sort-by-attributes */
}

table.dataTable thead .sorting_desc:after {
  content: "\e156";
  /* sort-by-attributes-alt */
}

div.dataTables_scrollBody table.dataTable thead...

JavaScript

function init_table(options) {

  options = options || {};
  var csv_path = options.csv_path || "";
  var el = options.element || "table-container";
  var allow_download = options.allow_download || false;
  var csv_options = options.csv_options || {};
  var datatables_options = options.datatables_options || {};

  $("#" + el).html("<table class='table table-striped table-condensed' id='my-table'></table>");

  $.when($.get(csv_path)).then(
    function(data) {

      data = data.replace(/[\r|\r\n]/g, "\n");

      var csv_data = $.csv.toArrays(data, csv_options);

      var table_head = "<thead><tr>";

      for (head_id = 0; head_id < csv_data[0].length; head_id++) {
        table_head += "<th>" + csv_data[0][head_id] + "</th>";
      }

      table_head += "</tr></thead>";
      $('#my-table').append(table_head);
      $('#my-table').append("<tbody></tbody>");

      for (row_id = 1; row_id < csv_data.length; row_id++) {
        var row_html = "<tr>";

        for (col_id = 0; col_id < csv_data[row_id].length; col_id++) {
          row_html += "<td>" + csv_data[row_id][col_id] + "</td>";
        }

        row_html += "</tr>";
        $('#my-table tbody').append(row_html);
      }

      $("#my-table").DataTable(datatables_options);

      if (allow_download)
        $("#" + el).append("<p><a class='btn btn-info' href='" + csv_path + "'><i class='glyphicon glyphicon-download'></i> Download as CSV</a></p>");
    });
}








/*! DataTables Bootstrap 3 integration
 * ©2011-2014 SpryMedia Ltd - datatables.net/license
 */

/**
 * DataTables integration for Bootstrap 3. This requires Bootstrap 3 and
 * DataTables 1.10 or newer.
 *
 * This file sets the defaults and adds options to DataTables to style its
 * controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
 * for further information.
 */
(function(window, document, undefined) {

  var factory = function($, DataTable) {
    "use strict";


    /* Set the defaults for DataTables...