Highlight min and max column values in an Interactive Report

Highlight maximum and minimum column values in an Interactive Report (or grid) with a couple of lines of JavaScript and CSS.

Demo

Create an Interactive Report region (static ID IR_STATIC_ID) with the following source SQL;

select 'Product 1' as PRODUCT, 100 as VALUE_1, 200 as VALUE_2, 121 as VALUE_3 from DUAL

UNION

select 'Product 2' as PRODUCT, 103 as VALUE_1, 140 as VALUE_2, 99 as VALUE_3 from DUAL

UNION

select 'Product 3' as PRODUCT, 1 as VALUE_1, 2 as VALUE_2, 120 as VALUE_3 from DUAL

UNION

select 'Product 4' as PRODUCT, 10 as VALUE_1, 7 as VALUE_2, 124 as VALUE_3 from DUAL

UNION

select 'Product 5' as PRODUCT, 432 as VALUE_1, 632 as VALUE_2, 134 as VALUE_3 from DUAL

UNION

select 'Product 6' as PRODUCT, 34 as VALUE_1, 333 as VALUE_2, 166 as VALUE_3 from DUAL

Add this to execute when page loads;

$(function(){

    var cols = []

    var trs = $('#IR_STATIC_ID tr')

    var data =$.each(trs , function(index, tr){

      $.each($(tr).find("td").not(":first"), function(index, td){

        cols[index] = cols[index] || [];

        cols[index].push($(td).text())

      })

    });

    cols.forEach(function(col, index){

      var max = Math.max.apply(null, col);

      var min = Math.min.apply(null, col)

      $('#IR_STATIC_ID tr').find('td:eq('+(index+1)+')').each(function(i, td){

        $(td).toggleClass('u-color-1-text', +$(td).text() === max)

        $(td).toggleClass('u-color-2-text', +$(td).text() === min)  

      })

    })

  })

Inline CSS, change this to suit.

.u-color-1-text{

    font-weight: 700;

    font-size: larger;

}

    

.u-color-2-text{

    color:red !Important;

    font-weight: 500;

    font-size: larger;

}

Your grid min and max values will now be highlighted.