Entities and Text (Markdown) in a Table Card

Configuration Frontend
8

As I said in your “new” thread, it makes helping you much easier, if you stay in one thread for one topic. :slight_smile: Thanks!

And here we go:

I see you want to use the suggested markdown-card. That is only one way to go about that, but let’s start with this, you might want to change that in the future.

As the name states, this card uses Markdown as it’s language, see here for a nice, little “cheat-sheet” on Markdown language:

For what you want to achieve, let’s start with the table itself:

||Level|Range|Charging|Plugged|
|---|---|---|---|---|
|Audi|xx%|xxKM|true|true|
|Renault|xx%|xxKM|true|true|

This is the code, and it displays like this:

Level Range Charging Plugged
Audi xx% xxKM true true
Renault xx% xxKM true true

Now that we have a structure, let’s go over the fields, and see, how we can display what you need.

As you do have some calculations to do, it makes sense, to setup your numbers upfront, and use them downwards in the table. Looks something like this:

type: markdown
content: >
  {%  set audi_level = states('sensor.audi_percentage_level') %}
  {% if audi_level > 0 and audi_level <= 10 %}
  {% set icon_audi_level = 'mdi:battery-10' %}
  {% elif audi_level > 10 and audi_level <= 20 %}
  {% set icon_audi_level = 'mdi:battery-20' %}
  {% elif audi_level > 20 and audi_level <= 30 %}
  {% set icon_audi_level = 'mdi:battery-30' %}
  {% elif audi_level > 30 and audi_level <= 40 %}
  {% set icon_audi_level = 'mdi:battery-40' %}
  {% elif audi_level > 40 and audi_level <= 50 %}
  {% set icon_audi_level = 'mdi:battery-50' %}
  {% elif audi_level > 50 and audi_level <= 60 %}
  {% set icon_audi_level = 'mdi:battery-60' %}
  {% elif audi_level > 60 and audi_level <= 70 %}
  {% set icon_audi_level = 'mdi:battery-70' %}
  {% elif audi_level > 70 and audi_level <= 80 %}
  {% set icon_audi_level = 'mdi:battery-80' %}
  {% elif audi_level > 80 and audi_level <= 90 %}
  {% set icon_audi_level = 'mdi:battery-90' %}
  {% elif audi_level > 90 %}
  {% set icon_audi_level = 'mdi:battery' %}
  {% endif %}
  {%  set renault_level = states('sensor.renault_percentage_level') %}
  {% if renault_level > 0 and renault_level <= 10 %}
  {% set icon_renault_level = 'mdi:battery-10' %}
  {% elif renault_level > 10 and renault_level <= 20 %}
  {% set icon_renault_level = 'mdi:battery-20' %}
  {% elif renault_level > 20 and renault_level <= 30 %}
  {% set icon_renault_level = 'mdi:battery-30' %}
  {% elif renault_level > 30 and renault_level <= 40 %}
  {% set icon_renault_level = 'mdi:battery-40' %}
  {% elif renault_level > 40 and renault_level <= 50 %}
  {% set icon_renault_level = 'mdi:battery-50' %}
  {% elif renault_level > 50 and renault_level <= 60 %}
  {% set icon_renault_level = 'mdi:battery-60' %}
  {% elif renault_level > 60 and renault_level <= 70 %}
  {% set icon_renault_level = 'mdi:battery-70' %}
  {% elif renault_level > 70 and renault_level <= 80 %}
  {% set icon_renault_level = 'mdi:battery-80' %}
  {% elif renault_level > 80 and renault_level <= 90 %}
  {% set icon_renault_level = 'mdi:battery-90' %}
  {% elif renault_level > 90 %}
  {% set icon_renault_level = 'mdi:battery' %}
  {% endif %}
  {% set audi_icon_charging = 'mdi:check-circle' if is_state('binary_sensor.audi_charging', 'on') else 'mdi:minus-circle' %}
  {% set renault_icon_charging = 'mdi:check-circle' if is_state('binary_sensor.renault_charging', 'on') else 'mdi:minus-circle' %}
  {% set audi_icon_plugged = 'mdi:check-circle' if is_state('binary_sensor.audi_plugged', 'on') else 'mdi:minus-circle' %}
  {% set renault_icon_plugged = 'mdi:check-circle' if is_state('binary_sensor.renault_plugged', 'on') else 'mdi:minus-circle' %}
  ||Level|Range|Charging|Plugged|
  |---|---|---|---|---|
  |Audi|<ha-icon icon="{{ icon_audi_level}}"></ha-icon> {{ audi_level }}%|<ha-icon icon="mdi:ev-station"></ha-icon> {{ states('sensor.audi_range') }}KM|{{ audi_icon_charging }}|{{ audi_icon_plugged }}|
  |Renault|<ha-icon icon="{{ icon_renault_level}}"></ha-icon> {{ renault_level }}%|<ha-icon icon="mdi:ev-station"></ha-icon> {{ states('sensor.renault_range') }}KM|{{ renault_icon_charging }}|{{ renault_icon_plugged }}|

This is in no way “nice” code, that couldn’t be made more elegant and foremost shorter, but I thought it might be more explaining.

First you set a variable {% set variable_name = 'something' %} and use it later on. This is not necessary per se, but if you’d put all that code into one table cell, you won’t be able to read through it anymore. So you do the work first, and just use that later on in the actual table.

I’m sure there will be some questions, don’t hesitate to ask. :slight_smile: