JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/natural.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.js"></script>
<table id="testTable">
<thead>
<tr>
<th>Brand</th>
<th>Count</th>
<th>GBV</th>
</tr>
</thead>
</table>
JavaScript
var data =
[{
Brand: "Toyota",
Count: 33423,
GBV: 242445
}, {
Brand: "Ford",
Count: 23558,
GBV: 334343
}, {
Brand: "Honda",
Count: 9466,
GBV: 933455
}, {
Brand: "Chrysler",
Count: 3344,
GBV: 57533
}, {
Brand: "Mercedes",
Count: 3566,
GBV: 23535
}, {
Brand: "Acura",
Count: 75475,
GBV: 59633
}];
function formatToCommaSeparatedNumber(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function formatMoney(value)
{
var s=accounting.formatMoney(value,"$",0);
if(s==="$-0")
{
s="$0"
}
return s;
}
var keys = Object.keys(data[0])
var i = 0;
var aryJSONColTable = [];
//adding text next to Count
function updateItemCount(data) {
for(var key in data) {
var value = data[key];
console.log(value)
if (value.Brand == 'Toyota') {
value.Count = formatToCommaSeparatedNumber(value.Count) + ' Toyota Purchases';
} else if (value.Brand == 'Ford') {
value.Count = formatToCommaSeparatedNumber(value.Count) + ' Ford Purchases';
} else if (value.Brand == 'Honda') {
value.Count = formatToCommaSeparatedNumber(value.Count) + ' Honda Purchases';
} else if (value.Brand == 'Chrysler') {
value.Count = formatToCommaSeparatedNumber(value.Count) + ' Chrysler Purchases';
} else if (value.Brand == 'Mercedes') {
value.Count = formatToCommaSeparatedNumber(value.Count) + ' Mercedes Purchases';
} else if (value.Brand == 'Acura') {
value.Count = formatToCommaSeparatedNumber(value.Count) + ' Acura Purchases';
}
}
}
//if below function executed then column no longer sorted
updateItemCount(data);
keys.forEach(function(key) {
var target = i;
var defaultParams = {
"sTitle": key,
"targets": target,
"orderable": true,
"data": key,
"render": function(data, supportedType, full, meta) {
...