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"
},
{
	"Team" : "Team 1",
  "RequiredBy" : "League",
  "Frequency" : "Annual",
  "Name" : "Training 2",
  "TrainingLink" : "https://www.google.com"
},
{
	"Team" : "Team 2",
  "RequiredBy" : "League",
  "Frequency" : "EOY",
  "Name" : "Training 3",
  "TrainingLink" : "https://www.google.com"
},
{
	"Team" : "Team 2",
  "RequiredBy" : "Coach",
  "Frequency" : "Once",
  "Name" : "Training 1",
  "TrainingLink" : "https://www.google.com"
},
];

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"}
    ],
    dom: 'rt',
            rowGroup: {
            dataSrc: [
                'Team'
            ],
            startRender: function(rows, group, level) {
                var all;
                if (level === 0) {
                    top = group;
                    all = group;
                } else if (level === 1) {
                    parent = top + group;
                    all = parent;
                    if (!collapsedGroups[top]) {
                        return;
                    }
                } else {
                    if (!collapsedGroups[parent]) {
   ...