The only possible way is using an “auto-entities” card and its “template” option - but this a matter of a different topic.
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:
3 Likes
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
1 Like
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:
- Inverting quotes
- 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.
any way to display SQL data in the table?
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.
- 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”? - 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?
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
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
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
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
1 Like
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.
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}
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.
1 Like
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'
Same as for a header row, check the 1st post → link to styles
Ah yes, somehow I missed it, thanks.
(it worked! 
)
The latest 0.7.3 update is magic - solves an issue with a huge CPU load.
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.
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.
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