Flex-table-card

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

[russd]

Hi, I’m trying to get my temperature values individually colored, based on a value held in the sensor attributes (so each value cell is the color represented in the color attribute). Here are the entities and attributes:

Entity 	            State 	Attributes
sensor.hw_levels_0 	26.3 	sensor: 0        color: #0000ff
sensor.hw_levels_1	29.8 	sensor: 1        color: #0000ff
sensor.hw_levels_2 	33.9 	sensor: 2        color: #2700d8
sensor.hw_levels_3 	39.1 	sensor: 3        color: #5c00a3
sensor.hw_levels_4 	43.6 	sensor: 4        color: #8a0075
sensor.hw_levels_5 	45.6 	sensor: 5        color: #a0005f
sensor.hw_levels_6	45.9 	sensor: 6        color: #a3005c
sensor.hw_levels_7	46.9 	sensor: 7        color: #ad0052

I have a card which looks like this, displays the sensor and the temp OK, but without any color…

type: custom:flex-table-card
title: Hot Water Levels
entities:
  include: sensor.hw_levels*
columns:
  - name: Sensor
    data: sensor
    align: center
  - name: Temp
    data: state
    align: center
    suffix: ' °C'

If I then try and add a <div> using x.color which I hoped would pick up the color attribute

type: custom:flex-table-card
title: Hot Water Levels
entities:
  include: sensor.hw_levels*
columns:
  - name: Sensor
    data: sensor
    align: center
  - name: Temp
    data: state
    align: center
    modify: |
      '<div style="color: ' + x.color + '">;' + x + ' °C ;</div>'

it doesn’t work, it just displays the value (x °C) in black - I’ve tried all combinations I can find in this thread but nothing seems to work, as x.color doesn’t seem to exist and I don’t understand why

Any suggestions please?
Thanks, Russ

[vingerha]

Why would you want to, does your card data contain multiple currencies ? Or do you want it to change when you change your lovelace settings to another currency? Would showing € not be enough?
EDIT… I clearly donot have an immediate answer else I would have given that…just checking

[tvdsluijs (Theo van der Sluijs)]

Well, no I do not have multiple currency’s. However I would like to show a € … oh… thank you

"€ "+Number(a_price).toFixed(5)

[vingerha]

Hi, I have an integration with aviationstack that kicks back estimate arrival times but actually incorrect format
i.e.

2023-10-21T08:30:00+00:00

is correct only for the 08:30 part but as I am on CET, HA makes this

2023-10-21T10:30:00+02:00

any way to prevent utc/cet in the card?

EDIT: to be clear … the plane landed at 08:30 CET

[spry-salt]

I love this card. Is there a way to make a particular column clickable and have a defined action for that click? My use case is that I’ve got a list of device names in column 1, I want column 2 to show the on/off status of the devices, and I want column 3 to contain buttons that let me switch those devices on or off. Thanks for any tips!

[tvdsluijs (Theo van der Sluijs)]

It would be great if there is a way to do the if statements on states. Is that possible?

Something like
if (x.value == {{state_attr('sensor.temps','max')}})
Is that possible?

For setting the color on certain cells

[Ildar_Gabdullin]

@tvdsluijs

if statements on states

It is available, read docs.

          modify: |-
            if(x.length == 0) {
              "-"
            }
            else {
              ...
            }

@tvdsluijs

state_attr(‘sensor.temps’,‘max’)

Not possible.
You may only access attributes of the CURRENT object.

[tvdsluijs (Theo van der Sluijs)]

Okay but you can use multiple attributes in data: right?

So when I have a simple json like this

{"min': 1,
'max': 5,
raw_data: {
'01:00': 1.1,
'02:00': 1.5,
'03:00': 1.3,
and so on}
}

could I use min max and raw_data in one column?

  - name: high_low
    data: raw_today, min, max
    modify: |-
     # raw_data (and min and max) 

The raw data should be used as rows, I want to use min max to style