Highlighting the max and min column in a table made with DataTables.
Using the initComplete option to call a function that sorts each column into an array and then check what index it is in the array to determine the maximum and minimum value.
[0] is the first (maximum) whilst [1] would be the second.Finding the last vale which is the lowest (red) is done by counting the array and finding the index that is length – 1
$("#the-table-id").DataTable({ paginate: false, bFilter: false, bInfo: false, scrollX: true, initComplete: function () { let api = this.api(); api.columns(":not(:first)").every(function () { let col = this.index(); let data = this.data() .unique() .map(function (value) { return parseInt(value); }) .toArray() .sort(function (a, b) { return b - a; }); let length = data.length; api.cells(null, col).every(function () { let cell = parseInt(this.data()); if (cell === data[0]) { $(this.node()).css("background-color", "rgb(172, 240, 172)"); } else if (cell === data[length - 1]) { $(this.node()).css("background-color", "rgba(255, 85, 85, 0.32)"); } }); }); } });
CodePen example: