Thanks Bollewolle,
Your Javascript is more robust.
Indeed, the x;split is (x.split(" “)[2] for my case because my entity name prefix held already an underscore.
Here is still another variation with only cosmetic changes 
- use lighter colors for cells
- use various circle icons to give the idea of a grading severity.
Here is the code and the resulting imaging
- One with the full table (including all allergens even those not yet season monitored).
Use
exclude:
– state: replace here by none to get only the raw with monitored allergens
- One with the summary table (including only with allergens that are season monitored).
Use
exclude:
– state: none
Here is the card :
type: custom:auto-entities
filter:
include:
- entity_id: sensor.myhome_gerpinnes_*_level
exclude:
- state: put here none to get only the raw with monitored allergens
sort:
method: name
reverse: false
ignore_case: true
card:
type: custom:flex-table-card
title: null
columns:
- name: Allergène
data: friendly_name
align: center
modify: >-
function getTranslations(pollentype) {
const Translate = 1; // Set to 1 to apply translation table, set 0 to use originals
// Add your wanted translations here
const translations = {
"Oak": "Chêne",
"Alder": "Aulne",
"Grass": "Graminée",
"Birch": "Bouleau",
"Hazel": "Noisetier",
"Mugwort": "Armoise",
"Ash": "Frêne"
};
// if Translate is turned on then retrieve the translation, othwerise use the original value
return Translate ? (translations[pollentype] || pollentype) : pollentype;
}
// note that depending on your setup a different item of the array might
need to be set (e.g. [2] instead of [1])
var pollen = x.split(" ")[2];
// call the translation function
getTranslations(pollen);
- name: Saison
data: state
align: center
modify: |-
if (x == 'none')
'<ha-icon icon="mdi:void">'
else
'<ha-icon icon="mdi:eye-check-outline">'
- name: <ha-icon icon="mdi:circle-outline">
data: state
align: center
modify: |-
if (x == 'green')
'<ha-icon icon="mdi:flower-pollen">'
else
'<ha-icon icon="mdi:void">'
- name: <ha-icon icon="mdi:circle-slice-2">
data: state
align: center
modify: |-
if (x == 'yellow')
'<ha-icon icon="mdi:flower-pollen">'
else
'<ha-icon icon="mdi:void">'
- name: <ha-icon icon="mdi:circle-slice-4">
data: state
align: center
modify: |-
if (x == 'orange')
'<ha-icon icon="mdi:flower-pollen">'
else
'<ha-icon icon="mdi:void">'
- name: <ha-icon icon="mdi:circle-slice-6">
data: state
align: center
modify: |-
if (x == 'red')
'<ha-icon icon="mdi:flower-pollen">'
else
'<ha-icon icon="mdi:void">'
- name: <ha-icon icon="mdi:circle-slice-8">
data: state
align: center
modify: |-
if (x == 'purple')
'<ha-icon icon="mdi:flower-pollen">'
else
'<ha-icon icon="mdi:void">'
css:
tbody tr td:nth-child(1): "width: 16px; "
tbody tr td:nth-child(2): "width: 16px; "
tbody tr td:nth-child(3): "background-color: lightgreen; width: 16px"
tbody tr td:nth-child(4): "background-color: gold; width: 16px"
tbody tr td:nth-child(5): "background-color: coral; width: 1px"
tbody tr td:nth-child(6): "background-color: indianred; width: 16px"
tbody tr td:nth-child(7): "background-color: orchid; width: 16px"
I tried also a very short table but it does not work as I would like. For a better rendering the background of the last column should be green, yellow, orange, … depending on the severity but I’m not good enough to achieve it. And by the way, I’m against too heavy code.
Here is any way the result. Note that I use a unique background for all cells in the table otherwise some colors are not contrasted enough over a white or light gray. And, the colors are back to pure yellow, green, orange to get the right contrast. For severity, the circle will be filled up progressively and colored based on the level of allergens (but so far, it is the beginning of the season and the image cant show all variations)
type: custom:auto-entities
filter:
include:
- entity_id: sensor.myhome_gerpinnes_*_level
exclude:
- state: replace here by none to get only the raw with monitored allergens
sort:
method: name
reverse: false
ignore_case: true
card:
type: custom:flex-table-card
title: null
columns:
- name: Allergène
data: friendly_name
align: center
modify: >-
function getTranslations(pollentype) {
const Translate = 1; // Set to 1 to apply translation table, set 0 to use originals
// Add your wanted translations here
const translations = {
"Oak": "Chêne",
"Alder": "Aulne",
"Grass": "Graminée",
"Birch": "Bouleau",
"Hazel": "Noisetier",
"Mugwort": "Armoise",
"Ash": "Frêne"
};
// if Translate is turned on then retrieve the translation, othwerise use the original value
return Translate ? (translations[pollentype] || pollentype) : pollentype;
}
// note that depending on your setup a different item of the array might
need to be set (e.g. [2] instead of [1])
var pollen = x.split(" ")[2];
// call the translation function
getTranslations(pollen);
- name: Saison
data: state
align: center
modify: |-
if (x == 'none')
'<ha-icon icon="mdi:void">'
else
'<ha-icon icon="mdi:eye-check-outline">'
- name: Severity
data: state
align: center
modify: |-
switch ( x ) {
case 'green':
'<ha-icon icon="mdi:circle-outline" style="color: green" >'
break;
case 'yellow':
'<ha-icon icon="mdi:circle-slice-2" style="color: yellow" >'
break;
case 'orange':
'<ha-icon icon="mdi:circle-slice-4" style="color: orange">'
break;
case 'red':
'<ha-icon icon="mdi:circle-slice-6" style="color: red">'
break;
case 'purple':
'<ha-icon icon="mdi:circle-slice-8" style="color: purple">'
break;
default:
'<ha-icon icon="mdi:void">'
}
css:
tbody tr td:nth-child(1): "background-color: silver;width: 16px; "
tbody tr td:nth-child(2): "background-color: silver;width: 16px; "
tbody tr td:nth-child(3): "background-color: silver; width: 16px; "
