JSFiddle - React, Tailwind, and code Playground

by charleycartee

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sc-1.5.0/sl-1.2.6/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
<table class="dataTable columnFilter allHtml5Buttons table table-striped colvis" 
       border="0" cellpadding="0" cellspacing="0" data-responsive="true" 
       data-col-reorder="true"
       data-export-title="Test"
       >
  <thead>
    <tr >
      <th>Id</th>
      <th data-priority="1" class="initialSortDesc" >Activity Date</th>
      <th data-priority="3" class="selectFilter">Member</th>
      <th data-priority="4" data-aggregate="sum">Hours</th>
      <th data-aggregate="sum">Project</th>
      <th>FM Number</th>
      <th class="selectFilter">Activity Type</th>
      <th class="selectFilter">Phase</th>
      <th >County</th>
      <th > District</th>
      <th>Actions</th>
      <th>Short Description</th>
      <th>Batch Upload</th>
      <th data-priority="2" data-sortable="false" data-searchable="false">status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>10/01/2001</td>
      <td>Alice</td>
      <td>5</td>
      <td>1000</td>
      <td>Bar</td>
      <td>Lorem</td>
      <td><a href="#" title="Phase" data-toggle="popover" data-placement="top" data-content="Phase  explanation text">PD&amp;E</a></td>
     ...

JavaScript

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});

$( document ).ready(function() {
	
	initDataTables();
});

var customButtonTypes = {
	"linkButton":{
		action:function ( e, dt, node, config ) {location=config.url;}
	} 
}

function initDataTables() {
	$('.dataTable').each(function (){
		var exportTitle = "";
		if((typeof $(this).data("exportTitle") === 'undefined') || ($(this).data("exportTitle") == null)){
			exportTitle = "Data export";
		} else {
			exportTitle = $(this).data("exportTitle");
		}
		//Force data-responsive="true" to be width:100%
		if($(this).data("responsive") == true){
			$(this).css("width","100%");
		}
		var buttonConfig = [];
		if($(this).data("additionalButtons")){			
			var additionalButtonList = $(this).data("additionalButtons")
			for(var ii = 0; ii< additionalButtonList.length;ii++){
				var btnConfig = additionalButtonList[ii]
				if(btnConfig.baseType !== null){
					if(typeof(customButtonTypes[btnConfig.baseType]) === "object"){
						jQuery.extend( btnConfig, customButtonTypes[btnConfig.baseType])
					} else {
						if(typeof(console.log) === "function"){
							console.log("unsupported Button type");
						}
					}
				}
				buttonConfig.push(btnConfig);
			}
		}
		if($(this).hasClass("colvis"))	
			buttonConfig.push({extend:'colvis', "text":"Column Visibility", className:'btn-outline-secondary btn-default'});
		if($(this).hasClass("copyHtml5") || $(this).hasClass("allHtml5Buttons"))
			buttonConfig.push({extend:'copyHtml5', exportOptions: {columns: ':visible'}, title: exportTitle, className:'btn-outline-info btn-default'});
		if($(this).hasClass("excelHtml5") || $(this).hasClass("allHtml5Buttons"))
			buttonConfig.push({extend:'excelHtml5', exportOptions: {columns: ':visible'}, title: exportTitle, className:'btn-outline-info btn-default'});
		if($(this).hasClass("csvHtml5") || $(this).hasClass("allHtml5Buttons"))
			buttonConfig.push({extend:'csvHtml5', exportOptions: {columns: ':visible'}, title:...