JSFiddle - React, Tailwind, and code Playground

by crashvector

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/datatables.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" media="screen" />
<script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
</head>
</html>
  <body>
    <div class="container">
      <table id="samples" class="display nowrap compact hover dt-left" width="100%"></table>
    </table>
	</form>
<script type="text/javascript" charset="utf8" src="JS/datatables2.js"></script>
</body>

JavaScript

$(document).ready( function () {	
var srcData = [
    {
        "ID": "1",
        "Name": "01_p11017",
        "Region": "GoM",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
        "QC_comment": "\r"
    },
    {
        "ID": "2",
        "Name": "02_p21017",
        "Region": "GoM",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
        "QC_comment": "\r"
    },
    {
        "ID": "3",
        "Name": "03_p31017",
        "Region": "GoM",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
        "QC_comment": "\r"
    },
    {
        "ID": "4",
        "Name": "04_p41017",
        "Region": "GoM",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
        "QC_comment": "\r"
    },
    {
        "ID": "5",
        "Name": "05_p11117",
        "Region": "GoM",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
        "QC_comment": "\r"
    },
    {
        "ID": "6",
        "Name": "06_p21117",
        "Region": "GoM",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
        "QC_comment": "\r"
    },
    {
        "ID": "7",
        "Name": "07_p31117",
        "Region": "GoM",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
        "QC_comment": "\r"
    },
    {
        "ID": "8",
        "Name": "08_p41117",
        "Region": "GoM",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
        "QC_comment": "\r"
    }];
  var table = $('#samples').DataTable( { 
	"processing": true,
	"serverSide": false,
	"pageLength": -1,
	"lengthMenu": [[100, 250, 500, -1], [100, 250, 500, "All"]],
data: srcData,    
	columns: [
      {
        data: '',
        defaultContent: '0',
        visible: false
      },
      {
        data: '',
        defaultContent: '',
        orderable: false,
       ...