JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Load Button-->
 
 
<div class = "col-xs-1" style="position:relative; left:200px; top:-20px;">
            <button type="button" id="loadButton" class="btn btn-primary btn-md btn-block">Load</button>
        </div>
        
<div class="container" id="stats_table">
        <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="mydata">
            <thead class="text-primary"></thead>
        </table>
</div>

JavaScript

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

				//Here's where the ajax call takes place..., just left that out because the problem is just with 
        //destroying and adding a column. But the same idea is here.
				$("#loadButton").click(function(){
        Table.destroy();

       Table = $('#mydata').DataTable({
               data: [
                  {'col1': 'foo'},
                  {'col2': 'foo'},
                  {'col3': 'foo'},
                  {'col4': 'foo'},
                  {'col5': 'foo'},
                  {'col6': 'foo'},
                  {'col7': 'foo'},
                  {'col8': 'foo'},
                  {'col9': 'foo'}
                  
         			],
              columns: [
                  { "title": "Name", data: 'name' },
                  { "title": "Player Id" , data: 'player_id'},
                  { "title": "Game Id" , data: 'game_id'},
                  { "title": "Saves" , data: 'saves'},
                  { "title": "Goals" , data: 'goals'},
                  { "title": "Misses" , data: 'misses'},
                  { "title": "Sv%" , data: 'Sv%'},
                  { "title": "Miss%" , data: 'Miss%'},
                  { "title": "George" , data: 'Miss%'}
                ],
                info: false,
                "searching":   false,
                "pageLength": 50,
                "scrollX": true,
                //"autoWidth": false, 
                buttons: [
                   'csv'
                ],
           });
        
});


//Generic Initialization
Table = $('#mydata').DataTable({

        data:[],
        columns: [
               { "title": "Name", data: 'name' },
               { "title": "Player Id" , data: 'player_id'},
               { "title": "Game Id" , data: 'game_id'},
               { "title": "Saves" , data: 'saves'},
               { "title": "Goals" , data: 'goals'},
               { "title": "Misses" , data: 'misses'},
               { "title": "Sv%" , data: 'Sv%'},
               {...