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.
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: