JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>foo</th>
            <th>var</th>
            <th>zee</th>
        </tr>
    </thead>
</table>

JavaScript

$(document).ready(function () {
    //#1 - setup local data source
    var tdata = [{
        "foo": 1,
            "bar": 2,
            "zee": 3
    }, {
        "foo": 4,
            "bar": 5,
            "zee": 6
    }, {
        "foo": 7,
            "bar": 8,
            "zee": 9
    }];

    //#2 - setup datatable
    var table = $('#example').DataTable({
        "data": tdata,
            "columns": [{
            "data": "foo"
        }, {
            "data": "bar"
        }, {
            "data": "zee"
        }]
    });


    //#3 - change all of the data to Alpha
    var tdata = [{
        "foo": "a",
            "bar": "b",
            "zee": "c"
    }, {
        "foo": "d",
            "bar": "e",
            "zee": "f"
    }, {
        "foo": "g",
            "bar": "h",
            "zee": "i"
    }];



    //#4 - refresh the table
    table.rows().invalidate().draw();


    //#5 - dump vars to console. Notice how the local var and the context of .data() don't match even though we invalidated() it
    console.log("Data source is currently:");
    console.log(tdata);
    console.log("Table data is currently:");
    console.log(table.data());



});