JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.3/css/fixedColumns.bootstrap.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js"></script>

    
    <div class="container" id="stats_table">
        <table class="table table-striped" cellspacing="0" width="100%" id="mydata">
            <thead class="bg-primary"></thead>
        </table>
    </div>

CSS

/* Change size of header and row font */

th {
  font-size: 14px;
}

td {
  font-size: 14px;
}


/* Make border around table and align numbers*/

table {
  border: 1px solid;
  text-align: center;
}

tr,
th,
td {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: break-word;
}

JavaScript

$.noConflict();
        jQuery(document).ready(function( $ ) {

           
 
            //All possible table columns
            table_columns= [
                        { "title": "Team", data: 'team' },
                        { "title": "Season" , data: 'season'},
                        { "title": "GP" , data: 'games'},
                        { "title": "Game.ID" , data: 'game_id'},
                        { "title": "Date" , data: 'date'},
                        { "title": "Opponent" , data: 'opponent'},
                        { "title": "Strength" , data: 'strength'},
                        { "title": "TOI" , data: 'toi'},
                        { "title": "GF" , data: 'goals_f'},
                        { "title": "SF" , data: 'shots_f'},
                        { "title": "FF" , data: 'fenwick_f'},
                        { "title": "CF" , data: 'corsi_f'},
                        { "title": "GA" , data: 'goals_a'},
                        { "title": "SA" , data: 'shots_a'},
                        { "title": "FA" , data: 'fenwick_a'},
                        { "title": "CA" , data: 'corsi_a'},
                        { "title": "GF%" , data: 'GF%'},
                        { "title": "CF%" , data: 'CF%'},
                        { "title": "FF%" , data: 'FF%'},
                        { "title": "GF60" , data: 'goals_f_60'},
                        { "title": "SF60" , data: 'shots_f_60'},
                        { "title": "FF60" , data: 'fenwick_f_60'},
                        { "title": "CF60" , data: 'corsi_f_60'},
                        { "title": "GA60" , data: 'goals_a_60'},
                        { "title": "SA60" , data: 'shots_a_60'},
                        { "title": "FA60" , data: 'fenwick_a_60'},
                        { "title": "CA60" , data: 'corsi_a_60'},
                        { "title": "Sh%" , data: 'Sh%'},
                        { "title": "FSh%" , data: 'fSh%'},
                        { "title": "Sv%" , data: 'Sv%'},
  ...