My task involves populating a table with data. Specifically, I am focusing on coloring the data in the first year column according to certain conditions. The desired outcome is as follows:
+--------+------------+------+------+
| YEAR | 2022 | 2021 | 2020 |
+--------+------------+------+------+
| First | 0.2(color) | 0.5 | 0.8 |
+--------+------------+------+------+
| Second | 0.1(color) | 0.4 | 0.5 |
+--------+------------+------+------+
| Third | 0.3(color) | 0.9 | 0.2 |
+--------+------------+------+------+
| Fourth | 0.2(color) | 0.1 | 0.8 |
+--------+------------+------+------+
| Fifth | 0.6(color) | 0.4 | 0.2 |
+--------+------------+------+------+
The current method I have been using is displayed below:
+--------+------------+------------+------------+
| YEAR | 2022 | 2021 | 2020 |
+--------+------------+------------+------------+
| First | 0.2(color) | 0.5(color) | 0.8(color) |
+--------+------------+------------+------------+
| Second | 0.1 | 0.4 | 0.5 |
+--------+------------+------------+------------+
| Third | 0.3 | 0.9 | 0.2 |
+--------+------------+------------+------------+
| Fourth | 0.2 | 0.1 | 0.8 |
+--------+------------+------------+------------+
| Fifth | 0.6 | 0.4 | 0.2 |
+--------+------------+------------+------------+
Due to the unpredictable nature of changes in the first child element (as there is an arrow for navigating through displayed years), CSS alone cannot achieve this effect.
Sample HTML snippet:
<tbody>
<tr *ngFor="let row of titles">
<td>{{ row.title }}</td>
<ng-container *ngFor="let year of data">
<td [ngClass]="row.className">{{ year[row.dataFill]}}</td>
</ng-container>
</tr>
</tbody>
List of columns:
export const titles = (className) => [
{title: "First Title", dataFill: "first", className: className},
{title: "Second Title", dataFill: "second", className: className},
{title: "Third Title", dataFill: "third", className: className},
{title: "Fourth Title", dataFill: "fourth", className: className},
{title: "Fifth Title", dataFill: "fifth", className: className}
]
Related TypeScript function:
colorChange() {
const green = 'green';
const red = 'red';
const black = 'black';
this.titles.map(x => {
if(x.dataFill == 'first') {
if(this.data[0].first < this.data[1].first) {
x.className = green;
}
else if(this.data[0].first > this.data[1].first) {
x.className = red;
}
else {
x.className = black;
}
//etc..etc..
}
return x;
});
}
Associated CSS styling:
.green {
color: green;
}
.red {
color: red;
}
.black {
color: black;
}