JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<script src="//cdn.datatables.net/tabletools/2.0.0/js/TableTools.min.js"></script>
<script src="//cdn.datatables.net/1.8.2/js/jquery.dataTables.min.js"></script>
<div>
    <table id="dashboard">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

JavaScript

var columnData= [{
    "mDataProp": function(obj) {
        return obj.id;
    }
}, {
    "mDataProp": function(obj) {
        return obj.name;
    }
}, {
    "mDataProp": function(obj) {
        return obj.dep;
    }
}];
var rowData = [{
    "name":"Joe",
    "id":"1",
    "dep":"CSC"
}, {
    "name":"Jerald",
    "id":"2",
    "dep":"IT"
}, {
    "name":"Jack",
    "id":"3",
    "dep":"ECE"
}, {
    "name":"Rose",
    "id":"4",
    "dep":"EEE"
}];
function updateColumn(){
    var oTable = $("#dashboard").dataTable();
    //Updating the department column of the row which has id 2
    oTable.fnUpdate("Mech", $("tr#2")[0],2); //Updating
    oTable.fnDraw(); //Redraw
}
$('#dashboard').dataTable({
    "bPaginate": true,
    "bJQueryUI": true,
    "bLengthChange": true,
    "bFilter": true,
    "bDestroy": true,
    "bSort": true,
    "bInfo": true,
    "bAutoWidth": false,
    "bServerSide": false,
    "sDom": 'T<"clear"><"H"flr>t<"F"i>',
    "sPaginationType": "input",
    "bProcessing": true,
    "iDisplayLength": 25,
    "aaData": rowData,
    "aoColumns": columnData,
    "bStateSave": true,
    "aaSorting": [
        [2, 'asc']
    ],
    "oTableTools": {
        "aButtons": [
            {
                "sExtends": "xls",
                "sButtonText": "Export data as CSV",
                "mColumns": "visible"
            }
        ]
    },
    "fnDrawCallback": function(oSettings) {
        updateColumn();
    },
    "fnRowCallback": function(nRow, aData, iDisplayIndex) {
        nRow.setAttribute('id', aData.id);
        return nRow;
    }
});