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

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

Summary

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

Content

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="[[ $current.data.type ]]"></oj-bind-text>
        </template>
        <template slot="projectNameCellTemplate5">
            <oj-bind-text value="[[ $current.data.projectName ]]"></oj-bind-text>
        </template>
        <template slot="nameCellTemplate6">
     
Tagged:

Howdy, Stranger!

Log In

To view full details, sign in.

Register

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