JSFiddle - React, Tailwind, and code Playground

by BeerusDev

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju/jq-3.6.0/dt-1.11.3/r-2.2.9/rg-1.1.4/datatables.min.css"/>
 
    <script type="text/javascript" src="https://cdn.datatables.net/v/ju/jq-3.6.0/dt-1.11.3/r-2.2.9/rg-1.1.4/datatables.min.js"></script>
  
  </head>
  <body>
    <table id="example" class="display" style="width:100%">
      <thead>
        <tr>
          <th>Team</th>
          <th>Name</th>
          <th>Required By</th>
          <th>Frequency</th>
          <th>Training Link</th>
      </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </body>
</html>

CSS

table {
  text-align: center;
}

JavaScript

var teamData = [ 
  {
    "Team" : "Team 1",
    "Players" : [
    "Player 1",
    "Player 2",
    "Player 3",
    "Player 4"
    ]
  },
  {
  "Team" : "Team 2",
  "Players" : [
  "Player 5",
  "Player 6",
  "Player 7",
  "Player 8"
  ]
  }
];

var data = [
{
	"Team" : "Team 1",
  "RequiredBy" : "Coach",
  "Frequency" : "Annual",
  "Name" : "Training 1",
  "TrainingLink" : "https://www.google.com",
  "Notes" : "Testing"
},
{
	"Team" : "Team 1",
  "RequiredBy" : "League",
  "Frequency" : "Annual",
  "Name" : "Training 2",
  "TrainingLink" : "https://www.google.com",
  "Notes" : "Testing 2"
},
{
	"Team" : "Team 2",
  "RequiredBy" : "League",
  "Frequency" : "EOY",
  "Name" : "Training 3",
  "TrainingLink" : "https://www.google.com",
  "Notes" : null
},
{
	"Team" : "Team 2",
  "RequiredBy" : "Coach",
  "Frequency" : "Once",
  "Name" : "Training 1",
  "TrainingLink" : "https://www.google.com",
  "Notes" : null
},
];

var currentUser = "Player 6";

/* $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex, teamData ) {
     
    var searchTeam = data[0];
    
        if () {
            return true;
        }
        return false;
    }
);
 */
$(document).ready(function(){

	var collapsedGroups = {};
  var parent = '';
  var top = '';
  
  var table = $('#example').DataTable({
  data: data,
  	"columns" : [
   		{"data" : "Team", visible: false},
      {"data" : "Name"},
      {"data" : "RequiredBy"},
      {"data" : "Frequency"},
      {"data" : "TrainingLink",
      "render": function(data, type, full, meta) {
                    return '<a href="' + data + '">'+full.Name+'</a>';
                }},
     {"data" : "Notes", visible: false}
    ],
   columnDefs: [{
                "targets": "_all",
                "render": function(data, type, full, meta) {
                    if(data != null && data != undefined){
                      return type === 'display' ? '<div title="Notes: ' + full.Notes + '">' + data : data;
                    }
       ...