JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<div class="state_board table-container"></div>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> -->

CSS

.state_board table	{
	width:100%;
	border-top:3px solid #333333;
	border-bottom:1px solid #333333;
	border-collapse:collapse;
}
.state_board table th, .state_board table td	{
	padding:7px 10px 4px;
  background:#ffffff;
  border-bottom:1px solid #e4e4e4;
}
.state_board table thead th	{
	text-align:center;
	text-transform:uppercase;
	background:#eeeeee;
}

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 my-table'></table>");

  $.when($.get(csv_path)).then(
    function(data){      
      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>");
    });
}
    
    
        init_table({
        csv_path: 'https://ethercalc.net/h1d6vljl9v70.csv',
        element: 'table-container', 
        //allow_download: false,
        csv_options: {separator: ',', delimiter: '"'},
        datatables_options: {
            "paging": false, 
            "ordering": false,
            "info": ture,
            //"stripeClasses": [ 'strip1', 'strip2' ],
            "columnDefs": [{
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being...