JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<p>Click the <strong>second</strong> column!</p>
<table id="test_sort">
<thead>
<tr>
<th>Month</th>
<th>Totals</th>
</tr>
</thead>
<tbody>
<tr>
<td><span style="display:none;">01</span>January</td>
<td>1081</td>
</tr>
<tr>
<td><span style="display:none;">02</span>February</td>
<td>1271</td>
</tr>
<tr>
<td><span style="display:none;">03</span>March</td>
<td>1288</td>
</tr>
<tr>
<td><span style="display:none;">04</span>April</td>
<td>1305</td>
</tr>
<tr>
<td><span style="display:none;">05</span>May</td>
<td>1316</td>
</tr>
<tr>
<td><span style="display:none;">06</span>June</td>
<td>612</td>
</tr>
<tr>
<td><span style="display:none;">07</span>July</td>
<td>697</td>
</tr>
<tr>
<td><span style="display:none;">08</span>August</td>
<td>732</td>
</tr>
<tr>
<td><span style="display:none;">09</span>September</td>
<td>799</td>
</tr>
<tr>
<td><span style="display:none;">10</span>October</td>
<td>818</td>
</tr>
<tr>
<td><span style="display:none;">11</span>November</td>
<td>837</td>
</tr>
<tr>
<td><span style="display:none;">12</span>December</td>
<td>899</td>
</tr>
</tbody>
</table>
CSS
#test_sort {
margin: 0;
width: 80%;
}
th {
text-align: left;
}
.right, th.right {
text-align: right;
}
p {
text-align: right;
width: 80%;
}
.a {
position: absolute;
}
.b {
margin-left: 10px;
}
JavaScript
function number_format(number, decimals, dec_point, thousands_sep) {
number = (number + '')
.replace(/[^0-9+\-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + (Math.round(n * k) / k)
.toFixed(prec);
};
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n))
.split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '')
.length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1)
.join('0');
}
return s.join(dec);
}
function _formatStuff(data, type, row, meta)
{
var output = number_format(data);
if ( !!~row[0].indexOf('October') ) {
output += ' <span class="a"><span class="b">(current)</span></span>';
}
return output;
}
$('#test_sort').dataTable({
columns: [
{},
{render: _formatStuff, sType:'formatted-num'}
],
columnDefs: [
{targets: 1, className: 'right'}
],
paging: false,
searching: false,
info: false
});