JSFiddle - React, Tailwind, and code Playground

by hm123

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
	<title>hadithmv.github.io</title>
	<meta name="description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- === === EXTERNAL CSS === === -->
<!-- DT COMBINED CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/se-2.2.13/jq-3.2.1/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-html5-1.4.2/b-print-1.4.2/datatables.min.css"/>

<!-- === EMBEDDED CSS === -->
<!-- ===  /EMBEDDED CSS === -->

    </head>
        <body>

	<div class="row">
		<div class="col-xs-12">
			<h1></h1>
			<p></p>
		</div> <!-- /colxs12 -->
	</div> <!-- /row -->

	<div class="row">
		<div class="col-xs-12">
			
<!-- UI MODAL -->

<button class="ui button create_btn" type="button" id="test">UI Modal</button>

<div class="ui modal sModal">

<div class="actions">
    <div class="ui button">
      UI Modal
    </div>
    <div class="ui deny button">
      Close
    </div>
  </div>

  <div class="content">
    <div id="ntable_insert"></div>
  </div> <!-- /UI MODAL -->

		</div> <!-- /colxs12 -->
	</div> <!-- /row -->

	<div class="row">
		<div class="col-xs-12">
			<div class="footnotes">
				<h4></h4>
				<p></p>
			</div> <!-- /footnotes -->
		</div> <!-- /colxs12 -->

		<div class="col-xs-12">
			<div class="footer">
				<p></a>
				</p>
				<p></p>
			</div> <!-- /footer -->
		</div> <!-- /colxs12 -->
	</div> <!-- //row === -->

<!-- === === JS === === -->
<!-- TT DT COMBINED JS -->
<script type="text/javascript" src="https://hadithmv.github.io/js/tt.dt.min.js"></script>

<!-- MARK JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.0/jquery.mark.min.js"></script>
<script type="text/javascript"...

CSS

/*fit search boxes within columns*/
thead input { width: 100%; }

/*vertically aligns column text to top*/
table.dataTable tbody td { vertical-align: top; }

/*aligns and directs text in select columns, sets fonts*/
.dataTable tbody td.col_1 {
    text-align: left; 
    direction: ltr; }
.dataTable tbody td.col_2 {
    text-align: center; }
.dataTable tbody td.col_3 {
    text-align: right;
    direction: ltr;
}

/*top and botton margin spacing between cells*/
.dataTable td { 
    margin: 15px 0;}

JavaScript

//google sheets key

var key =

"https://docs.google.com/spreadsheets/d/113QZOTS9JQ1WGfwjwQrOpErUBJTAnaBmdjP0_OjA53c/pubhtml?gid=489792061&single=true";

//"data" refers to the sheets column name, no spaces,capitals, punctuation, numbers
//"title" is rendered column header text

var columns = [{
 "data": "company",
  "title": "Company"
}, {
  "data": "violations",
  "title": "Claims"
}, {
  "data": "total-award",
  "title": "Total Awarded"
}];

$(document).ready(function() {

  function initializeTabletopObject() {
    Tabletop.init({
      key: key,
      callback: function(data, tabletop) {
          //call up datatables function
          writeTable(data); },
      simpleSheet: true,
       debug: false
                 });
  }

  initializeTabletopObject();

  function writeTable(data) {
    
    //select main div and insert table into html
     $('#ntable_insert').html(
      '<table cellpadding="0" cellspacing="0" border="0" class="ui very basic small striped table table-condensed table-responsive" id="mySelection"></table>'
    ); //End of table insert
      
     // Add header to table
 $("#mySelection").append('<thead><tr><th>Company</th><th>Claims</th><th>Total Awarded</th></tr><tr><th>Company</th><th>Claims</th><th>Total Awarded</th></tr></thead>'); //End of add header



    //initialize the DataTable object and put settings in
     table=$("#mySelection").DataTable({

      "orderCellsTop": true, //Moves the sorting icons to the first header row
      "mark": true,
      "autoWidth": false,
      "data": data,
      "columns": columns,
      "order": [[0, "asc"]], //display order on column
      "pagingType": "full_numbers",
      "lengthMenu": [ 10, 2, 3, 5, 100 ], //display range of pages
      "columnDefs": [ { className: "col_1", "targets": [0] },
                      { className: "col_2", "targets": [1] },
                      { className: "col_3", "targets": [2] } ], //select columns to css aligns
      "language": {"search": "Search globally...