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 dataTable = $('#samples').DataTable({
    'initComplete': function(settings, json){
		stuff(settings, json)
		},
    'processing': true,
    'serverSide': false,
    'pageLength': -1,
    'lengthMenu': [
      [100, 250, 500, -1],
      [100, 250, 500, 'All']
    ],
    ajax: {
      url: 'https://api.myjson.com/bins/174mi0',
      dataSrc: ''
    },
    columns: [
      {
        data: '',
        defaultContent: '0',
        visible: false
      },
      {
        data: '',
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox',
        targets: 1,
        orderData: [0]
      },
      {
        title: 'ID',
        'className': 'dt-left',
        'visible': false,
        data: 'ID'
      },
      {
        title: 'Name',
        'className': 'dt-left',
        data: 'Name'
      },
      {
        title: 'Region/Program',
        'className': 'dt-left',
        data: 'Region'
      },
      {
        title: 'Class',
        'className': 'dt-left',
        data: 'Class'
      },
      {
        title: 'Category',
        'className': 'dt-left',
        data: 'Category'
      },
      {
        title: 'QC Concerns',
        'className': 'dt-left',
        data: 'QC_comment'
      }
    ],
    rowId: function(a) {
    return 'id_' + a.ID;
  },
    select: {
      style: 'multi',
    },
    order: ([
      [4, 'asc'],
      [5, 'asc'],
      [3, 'asc']
    ]),
    orderFixed: [0, 'desc'],
    dom: 'Bfrtip',
    buttons: [{
      extend: 'csv',
      fieldBoundary: '',
      text: '<span class="fa fa-file-excel-o"></span> Download (ALL) or (SELECTED)',
      exportOptions: {
        columns: [6, 3],
        modifier: {
          search: 'applied',
          order: 'applied'
        }
      }
    },
    {
      text: 'Use Selected Library',
      action: function (e, dt, node, config) {
        alert('This buton needs to pass the Sample Name and Category columns to...