Use CSS to change the style of each row depending on the content – Documentation - Awesome Table Support

Templates are helpful in displaying your data. But if your template requires rules to be applied to specific CSS selectors, using Conditional Display is the best approach for this.

There are many applications for this method. To maintain brevity & simplicity, we will only cover three useful examples.

1 - Display element B if element A is empty

In this example, we have a table view displaying student information. Some have grades, and some don't. We would like to display "No grades yet" when necessary.

HTML template:

<h2>{{Name}}</h2> 
<p> {{Job}}</p> 
<div class="grades_container"> 
   <p>Grades : </p> 
   <p class="grades">{{Grades}}</p> 
   <p class="no_grades">No grades yet</p> 
</div>

CSS Style:

.grades_container{ 
background:lightgrey 
} 
.no_grades{
display:none 
} 
.grades:empty + .no_grades{ 
display:block 
}

Copy this template

2 - Display element B if element A's attribute is empty

In this example, we have a table view of team members. Some of them have profile photos while some don't. We need to customize the template so that it won't display a broken image when someone's {{photo}} column is empty - and instead display a generic avatar.

HTML template:

<img class="profilePicture" src='{{Picture}}'> 
<img class="noProfilePicture" src="yourDefaultLinkPicture"> 
<p>{{Name}} - {{Job}}</p>

CSS Style:

.noProfilePicture{ 
display:none 
} 
.profilePicture[src=""] { 
display: none; 
} 
.profilePicture[src=""]:empty + .noProfilePicture{ 
display: block; 
}

Copy this template

With this code, we keep a default image hidden with display:none; and we hide this image and display the default one if the src of profilePicture is empty.

3 - Display and style elements depending on their value

In this example, we will create a conditional template that will display a different content depending on the referenced-value of a {{marker}}. We are going to create a simple to do list: the task can either have 'done', 'postponed' or 'to do' as its status. Tasks that are done will also display a completion date.

HTML template:

<div class="taskContainer">
  <strong>{{Task}}</strong>
  <p data-status="{{Status}}" class="status"></p>
  <p class="date">Done the : {{Done the}}</p>
</div>

CSS Style:

.status[data-status="postponed"]:after {
 content : "This task was postponed.";
 color : orange
}

.status[data-status="to do"]:after {
 content : "This task still has to be done.";
 color : blue
}

.status[data-status="done"]:after {
 content : "This task is done ! ";
 color : green
}

.date { 
 display : none 
}

.status[data-status="done"] + .date {
 display : block
}

Copy this template

Comments

6 comments

Charles Riebeling December 10, 2018 20:50

How would this code look if I want to change formatting using the table formatting. For example, if I wanted to change the value in column B red depending on the corresponding value in column A.

Thanks!

Charlie

0

Awesome Table December 11, 2018 09:36
Hello Charles,

If you have two columns, "Content" and "Color". You could set up a template on the "Content" column that would look like that:
```
<p data-color="{{Color}}" class="content">{{Content}}</p>
```
```
.content[data-color="red"] {
 color : red
}

.content[data-color="green"] {
 color : green
}
```
If you need any further assistance, please create a ticket so I can give you more help.

Nicolas
0

Eric Johnston February 08, 2019 20:03

^ Charle's comment. On the Template tab of the spreadsheet, what would the column header be for the code?

I'm trying to make everything in the Content column be bold in the Awesome Table but only certain rows be a color based on the color column and I can not get it to work.

0

PADC February 09, 2019 21:13

Hi, All the examples here are form the = (equal) condition.

How do I change the color of a cell if the value is less than 0, is this possible?

I need to change color to red if a value in the column "AMOUNT" is less than 0.

Thanks.

0

Nicolas Gauvin February 12, 2019 10:30
Hello Eric,

You would need 3 columns:
- "Color": This column would have colors as data (color names like "red" or hex codes like "#ffffff)
- "Content": This column would have your text content
- "Template": This column should not have anything as its data (just the header).
In your template sheet create a column with "Template" as the header and the following as the second row:
```
<p data-color="{{Color}}" class="content">{{Content}}</p>
```
What to keep in mind:
- Make sure that all your columns are within the data range in DATA SOURCE > Range
- Make sure that your template is included in ADVANCED PARAMETERS > Templates Range
- You can change the names "Color", "Content" and "Template" but make sure to replicate the change everywhere
- You might want to hide the "Color" and "Content" columns as they are already used/displayed in the "Template" column. Please use the "Hidden" keyword
Please let me know if you need further help.

Nicolas
0

Nicolas Gauvin February 12, 2019 10:55

Hello PADC,

This is unfortunately not possible with Awesome Table.

Nicolas

0

Please sign in to leave a comment.

1 - Display element B if element A is empty

2 - Display element B if element A's attribute is empty

3 - Display and style elements depending on their value

Articles in this section