Made another iteration of this. I wanted to only show the ones that are actually active. To do that I had to use the custom “Auto Entities Card” (which the “Flex Table Card” also supports) to filter out the sensors with state “none”, but it does result in a cleaner table:
The yaml of the Cards look like this:
type: custom:auto-entities
filter:
include:
- entity_id: sensor.ev04_*_level
exclude:
- state: none
card:
type: custom:flex-table-card
title: Pollen
columns:
- name: Type
data: friendly_name
align: center
modify: x.split(" ")[1];
- name: Active
data: state
align: center
modify: |-
if (x == 'active')
'<ha-icon icon="mdi:flower-pollen">'
else
''
- name: ''
data: state
align: center
modify: |-
if (x == 'green')
'<ha-icon icon="mdi:flower-pollen">'
else
''
- name: ''
data: state
align: center
modify: |-
if (x == 'yellow')
'<ha-icon icon="mdi:flower-pollen">'
else
''
- name: ''
data: state
align: center
modify: |-
if (x == 'orange')
'<ha-icon icon="mdi:flower-pollen">'
else
''
- name: ''
data: state
align: center
modify: |-
if (x == 'red')
'<ha-icon icon="mdi:flower-pollen">'
else
''
- name: ''
data: state
align: center
modify: |-
if (x == 'purple')
'<ha-icon icon="mdi:flower-pollen">'
else
''
css:
tbody tr td:nth-child(1): 'width: 32px'
tbody tr td:nth-child(2): 'width: 32px'
tbody tr td:nth-child(3): 'background-color: green; width: 32px'
tbody tr td:nth-child(4): 'background-color: yellow; width: 32px'
tbody tr td:nth-child(5): 'background-color: orange; width: 32px'
tbody tr td:nth-child(6): 'background-color: red; width: 32px'
tbody tr td:nth-child(7): 'background-color: purple; width: 32px'