Conditional Highlighting Table Rows – Revisited

With lots of data showing up in a table, it is helpful to highlight important points to the end-user in a visual way. A while back I wrote a blog showing how to color code the value in a column, in this entry we take it further showing how to have the indicator at the row level using badges and also how to color code the whole row.

While your initial instinct might be that changing the color of the whole row is a more clear indicator, that would be ignoring 8% of your male end-users who might be color blind. This is why our UI experts recommend to use a combination of text and color to achieve highlight effect.

In the demo video below we are showing how to leverage the Oracle JET badge component in a row. To add this to a table, drag the badge into the table to create a new column. Then use expression language to decide on the value and the class color coding used for the badge:

<span :class='[[ $current.row.salary> 3000 ? "oj-badge oj-badge oj-badge-danger": "oj-badge oj-badge oj-badge-info" ]]'>
<oj-bind-text value='[[ $current.row.salary > 3000 ? "High" : "OK" ]]'></oj-bind-text>
;</span>

In the second part of the demo, we are showing how to change the color of a complete row using the Oracle JET Row Template feature. Here we'll also be using a simple JavaScript function that will return the style we want to use (using an object returned value).

Then in the HTML we use the returned value in the style property of the row. Note that we need to use : in front of the style attribute (and the class attribute in the previous sample).

<oj-table scroll-policy="loadMoreOnScroll" class="oj-flex-item oj-sm-12 oj-md-12"

data="[[$page.variables.employeesListSDP]]"

columns='[{"headerText":"Name","field":"name"},{"headerText":"Salary","field":"salary"}]'>

<template slot='rowTemplate' data-oj-as='current'>

<tr :style="[[$page.functions.getColor($current.data.salary)]]">

<td>

<oj-bind-text value="[[current.data.name]]"></oj-bind-text>

</td>

<td>

<oj-bind-text value="[[current.data.salary]]"></oj-bind-text>

</td>

</tr>

</template>

</oj-table>

And we are using a small JavaScript function that looks like this:

  PageModule.prototype.getColor = function (Salary){
    if (Salary > 3000)return {"background-color":"green"}
    return {"background-color":"red"}
  }