Flex-table-card

[Ildar_Gabdullin]

@kbrown01

But I have 17 columns where I want basically the same logic.

If it is an absolutely same code for the “modify” option - consider using a yaml anchor (hope you are a mature man using yaml mode )
If you are thinking about calling a function with different attributes for different columns - then no ((.
As for a “formatter” - imho this is a function accepting ONE variable, i.e. “x”, so we cannot pass attributes.

But - what if our ONE function extracts all needed data from the “x”?
Imagine that “x” may be a complex object, then these inputs may be used in the same function used in all “modify” options for all needed columns.
This may work if you may construct such complex attributes, not if they come “as they are”.

[kbrown01]

Great information. I kinda like that approach. I will need to take a dive into it.

And yes … I am a ‘mature man’ at the age of 61, but with YAML … not so much. I lived my life in the XML+XSL world.

[Ildar_Gabdullin]

@kbrown01
Well, if you need any advice for yaml (why, how, …) - ask me!
My life was with QNX, C/C++, Fortran ))

[kbrown01]

In the spirit of sharing Flex Table setups, here is another one for NHL fans (specifically NHL Fantasy Hockey fans). Flex table with Starting Goalies for today.

Here is the REST sensor that gets the data:

##
## Starting Goalies
##
- platform: rest
  name: nhl_starting_goalies
  scan_interval: 3600
  resource: https://www.dailyfaceoff.com/_next/data/AARRTVjTYQ3P1ZXMqUh-M/starting-goalies.json
  value_template: "{{ value_json.pageProps.date }}"
  json_attributes_path: "$.pageProps"
  json_attributes:
    - data

Here is the Lovelace Flex Table with some Card-mod enhancements:

type: custom:flex-table-card
title: Starting Goalies
css:
  table+: 'padding: 0px; width: 1600px;'
  tbody tr:hover: 'background-color: green!important; color:white!important;'
card_mod:
  style: |
    ha-card {
        overflow: auto;
    }
    $: |
        .card-header {
           padding: 12px 0px 8px 4px!important;
           font-size: 16px!important;
           line-height: 18px!important;
           font-weight: bold!important;
         }
entities:
  include: sensor.nhl_starting_goalies
columns:
  - name: HOME
    data: data
    modify: >-
      '<div><img src="' + x.homeTeamLogoSvg + '" style="height:
      20px;vertical-align:middle;">&nbsp;' + x.homeTeamName + '</div>'
  - name: GOALIE
    data: data
    modify: x.homeGoalieName
  - name: RANK
    data: data
    modify: >-
      if(x.homeGoaliePositionRank === null ){'N/A'}else{x.homeGoaliePositionRank}
  - name: W
    data: data
    modify: x.homeGoalieWins
  - name: L
    data: data
    modify: x.homeGoalieLosses
  - name: OTL
    data: data
    modify: x.homeGoalieOvertimeLosses
  - name: SO
    data: data
    modify: x.homeGoalieShutouts
  - name: SVP
    data: data
    modify: x.homeGoalieSavePercentage
  - name: GAA
    data: data
    modify: x.homeGoalieGoalsAgainstAvg
  - name: AWAY
    data: data
    modify: >-
      '<div><img src="' + x.awayTeamLogoSvg + '" style="height:
      20px;vertical-align:middle;">&nbsp;' + x.awayTeamName + '</div>'
  - name: GOALIE
    data: data
    modify: x.awayGoalieName
  - name: RANK
    data: data
    modify: >-
      if(x.awayGoaliePositionRank == null ){'N/A'}else{x.awayGoaliePositionRank}
  - name: W
    data: data
    modify: x.awayGoalieWins
  - name: L
    data: data
    modify: x.awayGoalieLosses
  - name: OTL
    data: data
    modify: x.awayGoalieOvertimeLosses
  - name: SO
    data: data
    modify: x.awayGoalieShutouts
  - name: SVP
    data: data
    modify: x.awayGoalieSavePercentage
  - name: GAA
    data: data
    modify: x.awayGoalieGoalsAgainstAvg

And the result:

[psadeazevedo (Paulo Azevedo)]

Hi @Ildar_Gabdullin

first of all thank you for your work with flex-table-card! I was trying to find an easy way to manipulate my batteries cell information and your work just makes it easy. I was trying to acommodate some changes which I would like your confirmation. What I show bellow is a list of sensors which represent individually every cell voltage. I want to be able to change the font color or the background of the cell when it assumes a specific value, I’m sure this is possible, just doing some mistake on the code for sure:

The background color never changes…any inputs will be welcome.

Thank you!
Paulo

[Ildar_Gabdullin]

1. Avoid using tagging someone personally.
2. If you want any assistance with your code - post a code (formatted as a code), do not post screenshots of the code.
3. I dealt with JS a little, in C/C++ this code is WRONG:

switch(x)
{
  case x>12:
    ...
  case x>15:
    ...
}

[psadeazevedo (Paulo Azevedo)]

Cool thank you I’ll follow up the recommendations.Appreciate sharing the rules, I wasn’t truly aware of them.

[Ildar_Gabdullin]

Try using kind of this code:

          modify: |-
            if (x == ...)
              "none"
            else if (parseInt(x) >= 67)
              '<div style="color:green;">' + x + '</div>'
            else if (parseInt(x) >= 34)
              '<div style="color:orange;">' + x + '</div>'
            else
              '<div style="color:red;">' + x + '</div>'

[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.