JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<a id="blubb"> destroy </a>

<table id="messages_table" class="display" cellspacing="0" width="100%" class="test">
    <thead>
        <tr>
            <th>Status</th>
            <th>Date</th>
        </tr>
    </thead>
</table>

JavaScript

var table;
var table_data = [{
    "status": "Ungelesen",
    "date": "2015-03-06 16:31:32+00:00",
    "id": 5
}];

$(document).ready(function () {
    prepare_table();

});

function prepare_table() {
    table = $('#messages_table').DataTable({
        "processing": true,
            "order": [
            [2, "desc"]
        ],
            "columns": [{
            "data": "status",
                "orderable": false,
        }, {
            "data": "date",
                "type": "date",
        }, {
            "data": "id",
                "visible": false,
        }, ],
            "data": table_data,
    });
}




$("#blubb").on("click", function () {
    table.destroy();
    prepare_table();
});