Flex-table-card

Share your Projects! Dashboards & Frontend
267

Styling dependently on an entity value (and other entities if needed):

It is possible to compose a cell’s content dependently on an entity’s state/attribute (example):

  1. We can compose a cell belonging to a state - and dependently on this state.
  2. We can compose a cell belonging to an attribute - and dependently on this attribute (some more possibilities are available if an attribute is a list or a dictionary, but let’s not consider this for simplicity).

“Compose” means “add a ha-icon element”, “add a span element”, “set css property”.

Here is a way to use card-mod dependently on a particular row’s entity state/attributes:
Assume there is a simple table:
image

type: custom:auto-entities
filter:
  include:
    - entity_id: sensor.ac66u_snmp_*_temp
card:
  type: custom:flex-table-card
  columns:
    - name: ""
      data: icon
    - name: name
      data: friendly_name
    - name: value
      data: state

We need to style smth dependently on an entity’s state/attributes - like an icon’s & value’s color dependently on a value.
If a placement of entities is fixed - i.e. if “sensor.xxx” is always in the 1st row, “sensor.yyy” is always in the 2nd row etc - it is possible to use fixed CSS selectors like:

        tbody tr td:nth-child(1) ha-icon {
          {% if states('sensor.xxx')|float(default=0)  > ... -%}
          --icon-primary-color: red;
          {%- else -%}
          --icon-primary-color: green;
          {%- endif %}
        }

But a placement may be random, may change after sorting etc.
Luckily every row has an id containing an entity_id - and this helps to do this:

  card_mod:
    style: |
      {% for ROW_INDEX in range(config.entities|count) -%}
        {%- set ENTITY = config.entities[ROW_INDEX].entity -%}
        {%- set ID = 'entity_row_' + ENTITY -%}
        {%- if states(ENTITY)|float(default=0) > 55 -%}
          {%- set COLOR = 'red' -%}
        {%- else -%}
          {%- set COLOR = 'green' -%}
        {%- endif %}
        tbody tr[id^='{{ID}}'] td:nth-child(1) ha-icon {
          --icon-primary-color: {{COLOR}};
        }
        tbody tr[id^='{{ID}}'] td:nth-child(3) {
          color: {{COLOR}};
        }
      {% endfor %}

which causes this styling independently on a current sorting:
image

In this particular example a styling depends on THIS entity’s state/attributes - but ofc ANY other entity may be involved ))).

2 Likes