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 Category;
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"
    },
    {
        "ID": "9",
        "Name": "09_p11217",
        "Region": "GoM",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
        "QC_comment": "\r"
    },
    {
        "ID": "10",
        "Name": "1-1m",
        "Region": "R7",
        "Class": "unknown",
        "Category": "unknown",
        "QC_flag": "0",
       ...