JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.datatables.net/download/build/jquery.dataTables.js"></script>
<div id="volume-table-container">
</div>
CSS
th.header {
color:red;
}
JavaScript
var containerID = "volume-table-container";
var tableID = "volume-display-table";
$('#' + containerID)
.append( '<table cellpadding="2" cellspacing="2" border="0" id="' + tableID + '"></table>');
var table = $('#' + tableID);
var widget = table.dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"aaData": [],
//"aaSorting": [[2, "desc"]],
"aoColumnDefs": [
{ "mDataProp": null, "sClass": "header", "sTitle": "Currently Not Sortable", "bVisible": false, "sWidth": "250px", "aTargets": [ 1,2,3,4,5,6 ] },
{ "mDataProp": "name", "sClass": "header", "sTitle": "Sortable", "sWidth": "400px", "aTargets": [ 0 ] }
]
});
//Add first column data
var data = {
name: 'show 2100081',
DT_RowId: "tvshow-2100081"
};
widget.fnAddData(data);
var data = {
name: 'show 2100156',
DT_RowId: "tvshow-2100156"
};
widget.fnAddData(data);
var data = {
name: 'show 2100198',
DT_RowId: "tvshow-2100198"
};
widget.fnAddData(data);
var data = {
name: 'show 2100077',
DT_RowId: "tvshow-2100077"
};
widget.fnAddData(data);
widget.fnSetColumnVis(1, true);
widget.fnSetColumnVis(6, true);
var response = {
'2100081': {
specificEntityVolume: 10,
allEntititiesVolume: 100
},
'2100156': {
specificEntityVolume: 20,
allEntititiesVolume: 200
},
'2100077': {
specificEntityVolume: 30,
allEntititiesVolume: 300
}
};
$.each(response, function(showSourceID, item) {
var tvShowRowIndex = widget.fnGetPosition(table.find('tbody tr#tvshow-' + showSourceID)[0]);
...