Color coding cells in a table based on the cell value using Jinja templates

Question

I have a simple flask app and need to display a table of values, with the cell backgrounds colour coded based on the cell value according to thresholds. I'm generating the table content as follows:

  {% block dashboard_table2 %}
      <table>
      {% for row in data %}
          {% for item in row %}
              <td>{{ item }}</td>
          {% endfor %}
      </tr>
      {% endfor %}
      </table>
  {% endblock %}

I tried wrapping the values in style tags like this in Python but it didn't work:

  if int(value) <= 10:
      value = '<p style="background-color:Red">' + value + '</p>'

I'm guessing the CSS for the page is overriding the style attribute. I also tried just setting the text color attribute instead of background-color but no dice. Any suggestions on a good way to do this? I'd like to have a concise way to specify threshold values that aren't hard-coded in the templates.

Solution 1

The easiest way would be to put this display logic in your template:

<table>
    {% for row in data %}
    <tr>
        {% for item in row %}
            {% if item <= 10 %}
                <td class="under-limit">{{ item }}</td>
            {% else %}
                <td>{{ item }}</td>
            {% endif %}
        {% endfor %}
    </tr>
    {% endfor %}
</table>

Then, in your CSS you can use:

.under-limit { background-color: red; }

Solution 2

<table>
   {% for row in row %}
       {% if item <= 10 %}
       <tr style ="background-color: red">
           <td> {{ item }} </td>
       </tr>
       {% else %}
       <tr>
           <td> {{ item }} </td>
       </tr>
       {% endif %}
    {% endfor %}
</table>

This works for me.