You're almost there! Please answer a few more questions for access to the Applications content. Complete registration
Interested in joining? Complete your registration by providing Areas of Interest here. Register

Change the color of a specific row in a table

Accepted answer
edited Aug 16, 2019 11:22AM in Visual Builder 1 comment


I have a table with a due date column that i want to display it with a deffirent color if the date is passed


Hi everyone,

I have a table that display many tasks, each one has a due date... i want if the date of the task is today or passed that row change color to red.

so the user can notice that task and do it first.

here is an image of my table.

also my table html code

Code Snippet

<div class="oj-flex">
    <oj-table summary="Sample Table" id="oj-table--1005519144-1" columns='[{"headerText":"Task","field":"taskType","template":"typeCellTemplate1"},{"headerText":"Status","field":"status"},{"headerText":"Priority","field":"priority"},{"headerText":"Due Date","field":"dueDate","template":"Due Date"},{"headerText":"Project Name","field":"opportunity","template":"projectNameCellTemplate5"},{"headerText":"Customer","field":"opportunity","template":"nameCellTemplate6"}]' selection-mode.row="single" selection-mode.column="single" on-selection-changed="[[ $page.listeners.oj_table_1005519144_1SelectionChanged ]]" data="[[$page.variables.getTaskFilteredTaskTypeListSDP]]" class="oj-flex-item oj-sm-12 oj-md-12">
        <template slot="typeCellTemplate1">
            <oj-bind-text value="[[ $ ]]"></oj-bind-text>
        <template slot="projectNameCellTemplate5">
            <oj-bind-text value="[[ $ ]]"></oj-bind-text>
        <template slot="nameCellTemplate6">

Howdy, Stranger!

Log In

To view full details, sign in.


Don't have an account? Click here to get started!