Flex-table-card

[psadeazevedo (Paulo Azevedo)]

Thank you did something similar and worked well:

- type: custom:flex-table-card
    entities:
      include:
        - sensor.pylonH221020C30200158_c*
      exclude:
        - lowest
        - highest
    columns:
      - name: Pack#2
        data: state
        modify: |-
          if ( parseFloat(x) >= 3.480)
              '<div style="background-color:#3CB371;">' + x + '&nbsp;v</div>';
          else if ( x >= 3.330)
              '<div style="background-color:#e67300;">' + x + '&nbsp;v</div>';
          else if ( x < 3.330)
                '<div style="background-color:#cc0000;">' + x + '&nbsp;v</div>';
        align: center

Wondering if would be possible to add as well, the row number automatically before I print the x value. I mean, as we speak I have 15 rows, would nice to have something like the following :
Pack#1
Cell 0: 3.330 v
Cell 1: 3.370 v
Cell 2: 3:380 v
Cell n:

[Ildar_Gabdullin]

@psadeazevedo

the row number automatically

The only possible way is using an “auto-entities” card and its “template” option - but this a matter of a different topic.

[kbrown01]

Not sure this helps anyone but I just found out something I had no idea would work based on the documentation for this great card. I have been playing around for the past few hours trying to get a simple tooltip to display on column headers.

I had no idea that the “name” can accept a simple HTML snippet.

So you can do this as a column definition:

- name: '<div title="Total Games Played">GP</div>'

And get this:

[Ildar_Gabdullin]

Some more tests with “div”, “span” & “ha-icon” elements for a header:

Displaying in icon on a header:
– may be done by using an “icon” option;
– may by done by using “ha-icon” element.

code

  - type: custom:auto-entities
    card:
      type: custom:flex-table-card
      columns:
        - name: state
          data: state
          icon: mdi:circle
        - name: 'state<ha-icon icon="mdi:circle" style="color: red">'
          data: state
        - name: '<ha-icon icon="mdi:circle" style="color: red"></ha-icon>state'
          data: state
    filter:
      include:
        - entity_id: sun.sun

---

Both “div” & “span” may be used for headers.
A difference between them is that “div” elements are placed on different lines:

code

  - type: custom:auto-entities
    card:
      type: custom:flex-table-card
      columns:
        - name: '<div style="color: red">state in div</div>'
          data: state
        - name: '<span style="color: orange">state in span</span>'
          data: state
        - name: >-
            <div style="color: red">state in div</div><div style="color: cyan">state in div</div>
          data: state
        - name: >-
            <span style="color: orange">state in span</span><span style="color: lightgreen">state in span</span>
          data: state
    filter:
      include:
        - entity_id: sun.sun

---

Combining “div” & “span” with “ha-icon”:

code

  - type: custom:auto-entities
    card:
      type: custom:flex-table-card
      columns:
        - name: >-
            <div style="color: orange">state in div</div><ha-icon icon="mdi:circle" style="color: red">
          data: state
        - name: >-
            <span style="color: orange">state in span</span><ha-icon icon="mdi:circle" style="color: red">
          data: state
    filter:
      include:
        - entity_id: sun.sun

---

A similar “div” trick may be used to allocate content vertically (also, check How to show multiline data):

code

  - type: custom:auto-entities
    card:
      type: custom:flex-table-card
      columns:
        - name: >-
            <div style="color: orange">state top</div><div style="color: cyan">state bottom</div>
          data: state
          modify: >-
            '<div style="color: lightgreen">' + x + '</div><div style="color: magenta">' + x + '</div>'
        - name: state
          data: state
    filter:
      include:
        - entity_id: sun.sun

[kbrown01]

Great examples!

I am struggling with this one though, can’t seem to make it work and not exactly sure what (if any) quotes need escaping. In my example, I just put the title attribute value in as a string. It turns out that it is actually stored in JSON/Object just like the value. As in:

        - name: >-
            '<div title="' + x.stats.find(y=>y.abbreviation == "GP").displayName
            + '">GP</div>'

But that does not work as it seems to split up the string. I even tried this:

        - name: >-
            '<div title=" ' + 'Games Played' + ' ">GP</div>'

The result in the DOM is this:

<th class="left">'<div title=" ' + 'Games Played' + ' ">GP</div>'</th>

Which of course is incorrect as it is considering the single ’ and it look like this and the title is wrong.:

'

GP

'

Any ideas here? I was hoping to make this a more standard implementation not to (type in) repeat the data that is already inside the “x”.

And considering a picture is worthe many words, you can easily see here what is happening:

Things I tried:

1. Inverting quotes
2. Escaping quotes … "

Given your examples, it seems to me that the “data” can be multiple strings but the “name” is not treated the same and must be a single string.

[fokcuk (Serge)]

any way to display SQL data in the table?

[lumpypotato]

I am pulling minutes from transport_nsw to build a departure board.
It’s showing only minutes, which isnt very helpful for the time 1028 minutes in the future.
I"d like to make some tweaks but have no idea how.

1. Is there a way I can convert time in minutes into a 24 hour clock time?
   2 Is there a way to change 1 minute and 0 minute to show up as “Now”?
2. Is there a way to change the icon to the on position so it lights up between 2 and 0/now minutes?

type: custom:flex-table-card
sort_by: state
title: Busy bus stop
entities:
  include:
    - sensor.358_bellingen
    - sensor.358_bellwood
    - sensor.360_macksville
    - sensor.360_coffs_harbour
columns:
  - data: icon
    name: ' '
    align: center
  - data: route
    name: Route
    align: center
  - data: destination
    name: 'Service To:'
  - data: delay
    name: Delay
  - data: state
    modify: #1 some magic code to convert minutes shown in the column to 24hr departure clock time.
    name: Time
  - data: state
    name: 'in: '
    modify: #2 some magic code to show "Now" when the time is 1 and 0 minutes.    
    suffix: ' min'
#3 some more magical code to show the icon is in the "on" position between 2 and 0/now minutes?

[vingerha]

I cannot guess what your sensor provides, have a look here
flex-table-card/example-cfg-advanced-cell-formatting.md at master · custom-cards/flex-table-card · GitHub

[Lordlinhey]

Hi, I am hoping someone can help me with the flex-table-card operation as I just can’t get my head around the issue I have.

I am extracting the aircraft data from my raspPi which I can get from the received html data in Node Red (http://192.168.1.126:8080/data/aircraft.json). I have manipulated that data to remove any incomplete datasets and then I can receive each aircraft as a single payload with the attributes I want. That fills only 1 horizontal row, but nothing more as. it just overwrites until the last item.

(example sensor with attributes).

Reading a bit more I can see the data needs to be an array to fill subsequent rows, so I have joined each message as an array, but now I am stuck as I don’t know how to send this information to the HA flex card

(example Node Red output )

{“hex”:“4006b4”,“flight”:"TOM74L ",“alt_baro”:38000,“alt_geom”:39175,“gs”:450,“ias”:258,“tas”:462,“mach”:0.812,“track”:8,“track_rate”:0,“roll”:-0.2,“mag_heading”:13.7,“baro_rate”:-64,“geom_rate”:-32,“squawk”:“7455”,“emergency”:“none”,“category”:“A4”,“nav_qnh”:1013.6,“nav_altitude_mcp”:35008,“nav_heading”:14.8,“nav_modes”:[“vnav”,“tcas”],“lat”:49.965,“lon”:-3.808,“nic”:8,“rc”:186,“seen_pos”:0.4,“version”:2,“nic_baro”:1,“nac_p”:9,“nac_v”:1,“sil”:3,“sil_type”:“perhour”,“gva”:2,“sda”:2,“mlat”:[],“tisb”:[],“messages”:1017,“seen”:0,“rssi”:-12.9}
payload[1] … etc

I also tried the RESTFUL config to look at the json file but I can’t get that to work either
config

rest:
  - authentication: basic
    username: "admin"
    password: "password"
    scan_interval: 60
    resource: http://192.168.1.126:8080/data/aircraft.json
    sensor:
      - name: "fltaware"
        json_attributes_path: "$.response.aircraft"
        value_template: "OK"
        json_attributes:
          - "now"
          - "aircraft"
          - "flight"
          - "alt_baro"
          - "gs"
          - "track"
          - "lat"
          - "lon"

I would be greatful for any pointers to help
Thanks

[vingerha]

@Lordlinhey

send this information to the HA flex card

You mean you need a sensor that has the data in such a way that the FT card can display it?
From your incomplete/correct json I can not see all the values too and I have no time to analyse what/where
Are you stuck to FT card or do you just need a table view?
EDIT: you can send me a full json on a 1-on-1 chat…that is, I think you can send a file there

[Lordlinhey]

This is for anyone with a raspPi and Flightaware, that wants to integrate the received aircraft into Home Assistant.
I have now played around with this and if anyone else is interested in the answer, I am satisfied that this is a good solution.
*Credit goes to ‘vingerha’ for giving me some direction to solve the puzzle.

The resource for the data is automatically available on port 8080/data/aircraft.json

First setup the data collection via your configuration.yaml file

#Restful
  - platform: rest
    name: your_sensor_name
    resource: http://your ip address:8080/data/aircraft.json
    value_template: > 
      {{ value_json.aircraft | length }}
    method: GET
    scan_interval: 60 
    json_attributes:
      - "aircraft"
      - "flight"
      - "alt_baro"
      - "gs"
      - "track"
      - "lat"
      - "lon" 

(Note you can add whatever json attributes you want that are in the file and the scan is in seconds to your requirements)

Next set up the Cards in HA

You will need the 'Markdown Card 'and the ‘Flex Table Card’ to be installed in HA and set up in vertical stack card config.

In card 1
The Markdown card will give you an enhanced Title showing the number of Aircraft received
Ignore title and place the following in Content *

# **Received {{ (states.sensor.your_sensor_name.state) }} Aircraft** #

In card 2
the Flex-Table -Card is setup as follows:-

type: custom:flex-table-card
strict: true
sort_by:
  - aircraft-
entities:
  include: sensor.your_sensor_name*
columns:
  - name: HEX(code)
    data: aircraft
    modify: |
      if(x.flight != null )
        {x.hex}
        else {
          '<div style="color:red;">' + x.hex + '</div>';
      }
  - name: FLIGHT
    data: aircraft
    modify: |
      if(x.flight != null )
        {x.flight}
        else {
          '<div style="color:red;">' + "-" + '</div>';        
      }
  - name: SPEED (kt)
    data: aircraft
    modify: |
      if(x.gs != null )
        {x.gs}
        else {
          '<div style="color:red;">' + "-" + '</div>'
        }
  - name: ALT(ft)
    data: aircraft
    modify: |
      if(x.alt_baro != null )
        {x.alt_baro}
        else {
          '<div style="color:red;">' + "-" + '</div>'
        }
  - name: HEADING(deg)
    data: aircraft
    modify: |
      if(x.track != null )
        {x.track}
        else {
         '<div style="color:red;">' + "-" + '</div>'
        }
  - name: LAT(deg)
    data: aircraft
    modify: |
      if(x.lat != null )
        {x.lat}
        else {
         '<div style="color:red;">' + "-" + '</div>'
        }
  - name: LON(deg)
    data: aircraft
    modify: |
      if(x.lon != null )
        {x.lon}
        else {
         '<div style="color:red;">' + "-" + '</div>'
        }

This will give you a table with a title of the number of aircraft received and the table of the aircraft and attributes you choose.
As the reception from your own installation constantly changes, this is set to give you the Hex Code in Red, when the Flight callsign is not received and dashes where other data is not present.
It also places a sort of the complete data at the top of the table.

I hope that helps anyone else interested in showing the Flightware data in Home Assistant

[davypaterson]

Please help!

How do I use this card to show images from an RSS feed? I’ve tried everything but with no success.

My feed looks like this;

entries: 
- title: >-
    Nearly 250 Angus residents could be left without support services as care
    firm closes
  title_detail:
    type: text/plain
    language: null
    base: https://www.thecourier.co.uk/feed/
    value: >-
      Nearly 250 Angus residents could be left without support services as care
      firm closes
  links:
    - rel: alternate
      type: text/html
      href: >-
        https://www.thecourier.co.uk/fp/news/angus-mearns/4511707/care-about-angus-closure/
  link: >-
    https://www.thecourier.co.uk/fp/news/angus-mearns/4511707/care-about-angus-closure/
  comments: >-
    https://www.thecourier.co.uk/fp/news/angus-mearns/4511707/care-about-angus-closure/#respond
  authors:
    - name: Kieran Webster
  author: Kieran Webster
  author_detail:
    name: Kieran Webster
  published: Tue, Jun 27 12:42 PM
  tags:
    - term: Angus & The Mearns
      scheme: null
      label: null
    - term: Health & Wellbeing
      scheme: null
      label: null
    - term: Angus Council
      scheme: null
      label: null
    - term: Angus Health and Social Care Partenrship
      scheme: null
      label: null
  id: https://wpcluster.dctdigital.com/thecourier/?post_type=fp&p=4511707
  guidislink: false
  summary: A total of 27 jobs have been lost with the collapse of Care About Angus.
  summary_detail:
    type: text/html
    language: null
    base: https://www.thecourier.co.uk/feed/
    value: A total of 27 jobs have been lost with the collapse of Care About Angus.
  wfw_commentrss: >-
    https://www.thecourier.co.uk/fp/news/angus-mearns/4511707/care-about-angus-closure/feed/
  slash_comments: '0'
  media_thumbnail:
    - url: >-
        https://wpcluster.dctdigital.com/thecourier/wp-content/uploads/sites/12/2021/06/shutterstock_1185179128-e1622644309784-150x150.jpg
      width: '150'
      height: '150'
    - url: >-
        https://wpcluster.dctdigital.com/thecourier/wp-content/uploads/sites/12/2021/06/shutterstock_1185179128-e1622644309784-300x180.jpg
  href: ''
  media_content:
    - url: >-
        https://wpcluster.dctdigital.com/thecourier/wp-content/uploads/sites/12/2021/06/shutterstock_1185179128-e1622644309784-940x564.jpg
  content:
    - type: text/plain
      language: null
      base: https://www.thecourier.co.uk/feed/
      value: >-
        The company provided services for hundreds of elderly people in Angus.
        Image: Shutterstock/fizkes. 

[twproject]

Hi all,
how i can add “Cucina Velocità Motore” as 4th column?

type: custom:flex-table-card
title: Termostati Aernova
sort_by: friendly_name
entities:
  include:
    - climate.*cucina
    - sensor.cucina_velocita_motore
columns:
  - name: Room
    data: friendly_name
  - name: State
    data: state
  - name: Current Temperature
    data: current_temperature
    modify: if(x.length == 0){""}else{x}
  - name: Temperature Set
    data: temperature
    modify: if(x.length == 0){""}else{x}

[Ildar_Gabdullin]

Each row = one entity (exception - arrays).
Each column = an attribute of this entity or a result of processing these attributes.
So, you cannot place a another entity into some column. A workaround for template sensors - add this entity as an attribute.

[slimak]

Hi guys, perhaps you know, how to produce a “colspan”? Below is my table; row count is fixed, so I can address rows by index (CSS). I’d like the first cells in rows 4/5 to span over second column. Is that possible?

type: custom:flex-table-card
entities:
  include:
    - sensor.najnowsze_biegi_tablica_slownikow
title: Najnowsze biegi
css:
  tbody tr:nth-child(1): 'background-color:  #f8f9f9'
  tbody tr:nth-child(2): 'background-color:  #f8f9f9'
  tbody tr:nth-child(3): 'background-color:  #f8f9f9'
  tbody tr:nth-child(4): 'color: darkblue;background-color:  #e5e7e9  !important'
  tbody tr:nth-child(5): 'color: darkblue;font-weight: bold;background-color: #e5e7e9 !important'
columns:
  - name: Data i czas
    data: run
    modify: x.tm
    icon: mdi:clock-check-outline
  - name: Prędkość
    data: run
    modify: if (x.spd != '') { `${x.spd} km/h` } else { '' }
    align: right
    icon: mdi:speedometer
  - name: Dystans
    data: run
    modify: x.dist
    align: right
    icon: mdi:road-variant
    suffix: ' km'

[Ildar_Gabdullin]

Same as for a header row, check the 1st post → link to styles

[slimak]

Ah yes, somehow I missed it, thanks.
(it worked! )

[Ildar_Gabdullin]

The latest 0.7.3 update is magic - solves an issue with a huge CPU load.

[kbrown01]

I have been trying various options and I just want to know if this is possible or not.
Reading here: https://github.com/custom-cards/flex-table-card/blob/9d591eed17aefbb5c34f06f10d71f1c000a17fc7/docs/example-cfg-sorting-strict.md

Specifically something like this:

sort_by: [battery+, name-]

Is it at all possible to specify sort_by using the state of another entity?
As in … I have one or more input_select with known column ID names, and I would like to click them and dynamically change the sorting.

In pictures, change the input_select at the top and change the sort_by in the table:

In non-working pseudo code:

sort_by: "{{states('input_select.cellartracker_sort1')}}"

or

sort_by: "[[[states[input_select.cellartracker_sort1].state]]]"

I have tried many different ways and I cannot determine how.
NOTE: it seems that whatever method I use just returns the string that is contained in the sort_by and does not get the value of the input_select.

As in I tried this:

          - type: custom:decluttering-card
            template: cellartracker_settings
            variables:
              - sort: >-
                  {% set SORT = states('input_select.cellartracker_sort') -%}
                  x.{{SORT}}

And set the title as this:

decluttering_templates:
  cellartracker_settings:
    card:
      type: custom:flex-table-card
      title: '[[sort]]'

And it yields this:

I can only assume that the flex-table cannot accept templates for sort_by (or even title) or as shown below for modify:

      sort_by: row+
      columns:
        - hidden: true
          data: row
          modify: '[[sort]]'

This results in error (nothing displayed), but changing this to this:

      sort_by: row+
      columns:
        - hidden: true
          data: row
          modify: x.Country

Works perfect. So I guess there is no way to do anything to enable selectable sorting of columns.

[tvdsluijs (Theo van der Sluijs)]

Any idea how I can convert a float to currency.

Thank you in advance.

I have tried quite some code, but most is not recognized.