Flex-table-card

I have now used functions for the ‘type’ column. This fixes a problem I had sorting by this column and also highlights the type as red if down.

Using functions may have appeared in this thread already, and I missed it but this useful ‘issue’ in the Github project gives some additional pointers for Flex

https://github.com/custom-cards/flex-table-card/issues/75

My revised configuration follows:

type: custom:flex-table-card
title: Fing Devices
entities:
  - sensor.fing_devices_table
sort_by: x.name+
display_footer: true
columns:
  - name: Name
    data: devices
    modify: >-
      if (x.name && x.name.length > 0) {'<div style="font-weight: bold;">' +
      x.name +'</div>'} else {'-'}
    fallback: N/A
  - name: MAC Address
    data: devices
    modify: if (x.mac && x.mac.length > 0) {x.mac} else {'-'}
    fallback: N/A
  - name: IP Address
    data: devices
    modify: if (x.ip[0] && x.ip[0].length > 0) {x.ip[0]} else {'-'}
    fallback: N/A
    footer_type: text
    footer_text: Down/All
  - data: devices
    name: " "
    align: center
    modify: |-
      var StateCount = 0;  
      if (x.state =='UP')
        StateCount = 0; 
      if (x.state =='DOWN')   
        StateCount = 1; 
      StateCount
    footer_type: sum
    fallback: Unknown
  - data: devices
    name: "  "
    icon: mdi:arrow-up-drop-circle-outline
    align: center
    modify: |-
      var ICON = 'mdi:arrow-up-drop-circle-outline';  
      var ICONCOLOR = 'color:green'; 
      if (x.state =='UP')
        ICON = 'mdi:arrow-up-drop-circle-outline'; 
      if (x.state =='UP')  
        ICONCOLOR = 'color:green';
      if (x.state =='DOWN')   
        ICON = 'mdi:arrow-down-drop-circle-outline'; 
      if (x.state =='DOWN')           
        ICONCOLOR = 'color:red'; 
      '<ha-icon icon="' + ICON + '"  style="' + ICONCOLOR + '">'
    footer_type: count
    fallback: Unknown
  - name: Type
    data: devices
    modify: >-
      function getTypeColor(aLevel) {
        if (aLevel == undefined)
          return 'brown';
        else
        {
          if (aLevel == 'DOWN')
            return 'red';
          else
          if (aLevel == 'BLOCKED')
            return 'rgb(250,218,67)';
          else
            return 'green';
        }
      }
      function getTypeIcon(aLevel) {
        var icon;
        if (aLevel == undefined)
          icon = 'mdi:help-circle-outline';
        else if (aLevel == 'DESKTOP')
          icon = "mdi:monitor";
        else if (aLevel == 'GATEWAY')
          icon = "mdi:hub-outline";
        else if (aLevel == 'LAPTOP')
          icon = "mdi:laptop";
        else if (aLevel == 'LIGHT')
          icon = "mdi:lightbulb-outline";
        else if (aLevel  == 'LOUDSPEAKER')
          icon = "mdi:speaker-wireless";
        else if (aLevel  == 'MEDIA_PLAYER')
          icon = "mdi:play-network-outline";
        else if (aLevel  == 'MOBILE')
          icon = "mdi:cellphone";
        else if (aLevel  == 'NAS_STORAGE')
          icon = "mdi:nas";
        else if (aLevel  == 'PRINTER')
          icon = "mdi:printer";
        else if (aLevel  == 'RADIO')
          icon = "mdi:radio";
        else if (aLevel  == 'RASPBERRY')
          icon = "mdi:raspberry-pi";  
        else if (aLevel  == 'ROUTER')
          icon = "mdi:router";
        else if (aLevel  == 'SMART_CONTROLLER')
          icon = "mdi:hub";    
        else if (aLevel  == 'SMART_HOME')
          icon = "mdi:home-outline";
        else if (aLevel  == 'SMART_PLUG')
          icon = "mdi:power-plug-outline";  
        else if (aLevel  == 'STB')
          icon = "mdi:set-top-box";
        else if (aLevel  == 'SURVEILLANCE_CAMERA')
          icon = "mdi:cctv";     
        else if (aLevel  == 'TABLET')
          icon = "mdi:tablet";
        else if (aLevel  == 'TELEVISION')
          icon = "mdi:television";  
        else if (aLevel  == 'VOICE_CONTROL')
          icon = "mdi:account-voice";
        else if (aLevel  == 'WIFI')
          icon = "mdi:wifi";   
        else if (aLevel  == 'WIFI_EXTENDER')
          icon = "mdi:wifi-sync";                                                     
        else
          icon = "mdi:help-circle-outline";
        return (icon);
      }
      '<ha-icon icon="' + getTypeIcon(x.type) + '" style="width: 20px; height: 20px; color: ' + getTypeColor(x.state) + ';"></ha-icon>'
    align: center
    fallback: N/A
  - name: Make
    data: devices
    modify: if (x.make && x.make.length > 0) {x.make} else {'-'}
    fallback: N/A
  - name: Model
    data: devices
    modify: if (x.model && x.model.length > 0) {x.model} else {'-'}
    fallback: N/A
  - name: First Seen
    data: devices
    modify: |-
      if(x.first_seen == undefined)
      {"-"}
      else {
        var date = new Date(x.first_seen);
        String(date.getDate()).padStart(2,'0')+"/"+
        (String(date.getMonth()+ 1).padStart(2,'0'))+"/"+
        date.getFullYear()+
        " "+
        String(date.getHours()).padStart(2,'0')+":"+
        String(date.getMinutes()).padStart(2,'0')+":"+
        String(date.getSeconds()).padStart(2,'0')
      }    
  - name: Last Changed
    data: devices
    modify: |-
      if(x.last_changed == undefined)
      {"-"}
      else {
        var date = new Date(x.last_changed);
        String(date.getDate()).padStart(2,'0')+"/"+
        (String(date.getMonth()+ 1).padStart(2,'0'))+"/"+
        date.getFullYear()+
        " "+
        String(date.getHours()).padStart(2,'0')+":"+
        String(date.getMinutes()).padStart(2,'0')+":"+
        String(date.getSeconds()).padStart(2,'0')
      }
css:
  tbody tr td+: ""
  tbody tr td:nth-child(4)+: "opacity: 0.0; border-style: none none none none;"
  tfoot *: "border-style: none none none none;"

I have several areas with linked sensors-entities like e.g.:

area1

  • sensor.roomsensor1_temperature
  • sensor.roomsensor1_humidity

area2

  • sensor.roomsensor2_temperature
  • sensor.roomsensor2_humidity

now I would like to create a table in this format:

Room | Temperature | Humidty
area1 | 21.6°C | 44%
area2 | 22.7°C | 66%

How can I manage that?

By using ANOTHER card like Markdown.
Check here what a row can contain in flex-table-card.

Hi @Ildar_Gabdullin

Your example fails for me I’m afraid. I believe it might have something to do with the reference to config.entities.

For example, this works fine:

card_mod:
  style: >
    {%- if states('sensor.rht_sensor_temperature_fridge')|float(default=0) < 55 -%}
      {%- set COLOR = 'red' -%}
    {%- else -%}
      {%- set COLOR = 'green' -%}
    {%- endif -%}
      tbody tr:nth-child(odd) {
        color: {{COLOR}};
      }

But as soon as I add the line

{%- set ENTITY = config.entities[1].entity -%}

it fails to render any colours anymore. Can you see if there is a problem with config.entites? Should this variable always be available?

Here is my full configuration:

type: custom:flex-table-card
entities:
  include: sensor.rht_sensor_temperature*
sort_by: Temperature-
columns:
  - name: Room
    data: friendly_name
  - name: Temperature
    data: temperature
    suffix: " °C"
card_mod:
  style: >
    {%- set ENTITY = config.entities[1].entity -%}
    {%- if states('sensor.rht_sensor_temperature_fridge')|float(default=0) < 55
    -%}
      {%- set COLOR = 'blue' -%}
    {%- else -%}
      {%- set COLOR = 'green' -%}
    {%- endif -%}
      tbody tr:nth-child(odd) {
        color: {{COLOR}};
      }

Is the “config.entities” option - an array? No ))

Sorry, an you explain a little more. I’m not seeing much difference between your example and my attempt. You treat it as an array in your example with the line:

{%- set ENTITY = config.entities[ROW_INDEX].entity -%}

I am doing the same (but just hard-coded the index for testing purposes).

You also had a similar regex in your include statement.

So I’m not sure where I’m going wrong.

I am using auto-entities.
So, the “entities” option of flex-table-card becomes an array (list).

1 Like

Ah okay thanks, I see now.

I have used your “auto-entites” method to table entries, and it works nicely!Thank you!

type: custom:auto-entities
filter:
  include:
    - entity_id: sensor.rht_sensor_temperature*
card:
  type: custom:flex-table-card
  sort_by: temp_col-
  clickable: true
  columns:
    - name: Room
      data: friendly_name
      icon: mdi:home
      modify: x.split('RHT Sensor Temperature (')[1].replace(')','')
    - name: ""
      id: temp_col
      data: temperature
      icon: mdi:thermometer
      suffix: " °C"
      modify: parseFloat(x).toFixed(1)
      align: center
    - name: ""
      id: hum_col
      data: humidity
      icon: mdi:water-percent
      suffix: " %"
      modify: parseFloat(x).toFixed(0)
      align: center
  css:
    tbody tr+: "background-color: rgba(0,0,0,0) !important;"
    thead th: "padding-bottom: 10px !important;"
  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) < 5) -%}
        {%- set COLOR = '#799FCB' -%}
      {%- elif (states(ENTITY)|float(default=0) < 13) and
      (states(ENTITY)|float(default=0) > 5)  -%}
        {%- set COLOR = '#95B4CC' -%}
      {%- elif (states(ENTITY)|float(default=0) > 13) and
      (states(ENTITY)|float(default=0) < 17)  -%}
        {%- set COLOR = '#AFC7D0' -%}
      {%- elif (states(ENTITY)|float(default=0) > 17) and
      (states(ENTITY)|float(default=0) < 19)  -%}
        {%- set COLOR = '#FEC9C9' -%}
      {%- elif (states(ENTITY)|float(default=0) > 19)  -%}
        {%- set COLOR = '#F9665E' -%}
      {%- else -%}
        {%- set COLOR = 'white' -%}
      {%- endif -%}
        tbody tr[id^='{{ID}}'] td:nth-child(2) {
          color: {{COLOR}};
        }
      {% endfor %}
grid_options:
  columns: 12
  rows: auto

I wonder if @Ildar_Gabdullin you might be able to help with another problem. I would like to be able to click on either the temperature value or the humidity value, and have it bring up the relevant graph. At the moment, clicking either of them both brings up the same temperature graph:

Do you know how I can get it to take me to the humidity graphs instead when clicking on that value?

Thanks

You got ONE particular entity (sensor.xxx) with attributes like “temp” & “humidity” - and now expect to see more-info with a graph for a particular attribute? )

Yes I was under the impression we could graph the attributes. But I guess not from what you said.

But I do have in addition the humidity values as their own entities as well (with a state equal to the value of the humidity). Do you know if I can make the table in that way, whilst still preserving your row coloring method (i.e. you said it required auto-entities in order to work).

Something like this I assume would need to be in the filter:

filter:
  include:
    - entity_id: sensor.rht_sensor_temperature*
    - entity_id: sensor.rht_sensor_humidity*

But how to then distinguish which entities go into which column of the table, as well as how they get colored?

Thanks for your help

Only custom graph cards can do it.
Not sure about a history-explorer card (which you seem to use in more-info). But if it could - do not think it can show it in more-info. There is no more-info for an attribute.

ONE row = ONE entity.
You cannot place state of sensor.xxx in on column 1 and state of another sensor in column 2 - in same row.

@teeeeee how did you get the sensor data to pull in just the temp and humi? Are those from the same device? I have Bosch motion / temp / lux devices and I’d like to do what you have done. thx for the advice!

@Ltek Yes, both values come from the same device. I am using the Sonoff SNZB-02 sensors.

This is a zigbee sensor, and I am using Zigbee2MQTT to connect the sensor to Home Assistant. There is a setting in the Zigbee2MQTT page called “Home Assistant legacy attributes”, which will send the humidity value as an attribute for the temperature entity. So you can have both values stored in the same entity (which helps for displaying them both in the same row of the Flex-table-card). There is more detail on this here:

If you don’t have this option available for your sensor, you can always just make a new template sensor, which has the other values you want to display in the table as attributes. For example this might help with that. Documentation for the template sensor attribute syntax is here.

Great info, thank you. To ensure forward compatibility it prob best use a table card with the normal attributes, side-by-side. For a new HA user, all the workarounds are hard to keep track of.

Hi,
this card is overwhelming to be honest. I will just write what I want to do, perhaps someone can help me or point me into the right direction.
I have a sensor, that is “total_increasing”, which captures power data. Now I would like to the 1st measument of a month and the last one. Is this possible to do in the data generation ? Or will I have to make a seperate sensor for this ? Hope you can help me.

Means - you want historical data: each row is for some moment of time.
Not supported, AFAIK.
Consider Google Sheet integration and some automation adding data into a table. But here it is off-topic.

Thats a problem. Google sheets is not an option, because this system is running offline, i can only log in locally.
Perhaps someone else an idea ? Script to convert to a data array ? I hope there is a way…

If the server does not have an access to Internet (and thus Google sheets cannot be used) - then consider a good-old-times writing to a csv file in an automation…
I have seen topics in Configuration about this functionality.
As I said, this is an off-topic. Not sure we should discuss it here - unrelated to flex-table-card since it does not support historical data.

1 Like