JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://datatables.net/download/build/nightly/jquery.dataTables.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<div class="container">
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Task</th>
<th>NextRun</th>
<th>NextRunSort</th>
<th>Status</th>
<th>StatusSort</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Task</th>
<th>NextRun</th>
<th>NextRunSort</th>
<th>Status</th>
<th>StatusSort</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Alpha</td>
<td><span title="Next: 7/23/14 4:00 PM">Today</span>
</td>
<td>201407231600</td>
<td>New</td>
<td>0</td>
</tr>
<tr>
<td>Bravo</td>
<td><span title="Next: 7/24/14 12:00 AM">Tomorrow</span>
</td>
<td>201407240000</td>
<td>Current</td>
<td>3</td>
</tr>
<tr>
<td>Charlie</td>
<td><span title="Next: 7/22/14 6:00 AM">Soon</span>
</td>
<td>201407220600</td>
<td>Past Due</td>
<td>1</td>
</tr>
<tr>
<td>Delta</td>
<td><span title="Next: 7/22/14 5:00 AM">Soon</span>
</td>
<td>201407220500</td>
<td>Past Due</td>
<td>1</td>
</tr>
<tr>
<td>Echo</td>
<td><span title="Next: 7/23/14 1:00 PM">Soon</span>
</td>
...
JavaScript
$(document).ready(function () {
var table = $('#example').DataTable({
order: [
[3, 'asc'],
[1, 'asc']
],
columns: [
null, {
orderData: 2
}, {
visible: false
}, {
orderData: 4
}, {
visible: false
}]
});
});