Have you tried moving the date entry to the first column? As far as I know that is the only column automatically sorted. If you like the flow you have then create another 1st column with the date and then hide it.
columns:
- name: ''
data: entries
modify: x.published
- name: Video
data: entries
modify: >-
'<a href="' + x.link +'" target="_blank"><img src="' +
x.media_thumbnail[0].url + '"style="width: 10%"></a>'
Is this attribute really has a format “DD.MM.YY hh:mm” ?
Then it will not be properly sorted.
A possible way:
Partly solved, got a nicer look, my oppinment, for sepatator and added some for ‘unknown’.
Did like this:
template:
- name: A____
unit_of_measurement: 'm/s'
icon: mdi:arrow-right-bold-outline
state: >
{% if true %} -666 {% endif %}
- name: X____
icon: mdi:arrow-right-bold-outline
state: >
{% if true %} ------ {% endif %}
columns:
- name: ''
data: icon
align: center
- name: Sensor
data: friendly_name
align: left
modify: |-
if (x == "A____")
'<div style="color:lightblue;">-------</div>'
else x
- name: Value
data: state
align: left
modify: |-
if (x == "unknown")
'<div style="color:red;">------</div>'
else if (x == -666)
'<div > </div>'
else x
- name: ' '
data: unit_of_measurement
align: left
modify: |-
if (x == "m/s")
'<div > </div>'
else x
Any idea why ha_online comes like this
and not like this as - type: entities
Never did get a reply to my question (#disappointed), but I managed to solve it…
The key was when I realised that it wasn’t possible to reference a secondary attribute (in this case color), so I pass the data in one field, separated by a delimiter, for example:
sensor.hw_levels_0 color: 0/#00ff00/44.1
I then used modify to parse the color data and temperature data, applying the hex color to the background-color attribute:
- type: custom:flex-table-card
sort_by: sensor+
title: Hot Water Levels
entities:
include:
- sensor.hw_levels*
columns:
- name: Temp
data: color
align: center
modify: >
'<div style="font-weight: bold;color: white; background-color: ' +
x.split("/")[1] + '">' + x.split("/")[2] + ' °C </div>'
Which gives the following type of output…
Thanks for the answer.
The first column gives a better result, but is still wrong:
type: custom:flex-table-card
sort_by: entries
entities:
include: sensor.rss_feed*
columns:
- name: ''
data: entries
modify: x.published
- name: Video
data: entries
modify: >-
'<a href="' + x.link +'" target="_blank"><img src="' +
x.media_thumbnail[0].url + '"style="width: 10%"></a>'
First or second column - does not matter. Sorting is same. See a possible solution above.
I’m sorry I don’t see what’s wrong? That looks sorted to me by date correctly in the first column unless you want newest first then change your sort - https://github.com/custom-cards/flex-table-card/blob/0f0260f170660309906358254b8bb1ed7c301f63/docs/example-cfg-sorting-strict.md.
Or are you saying that the date is getting pulled incorrectly? If so that is not a flex-table problem.
the attribute is “published: 08.10.24 16:00”
Can you please describe it better?
I don’t quite understand what needs to be done.
Thank you very much!
You need to parse a value “DD.MM.YY hh:mm” and convert to a timestamp. Have no idea how it can be done in JS.
I am having an issue that I cannot figure out dealing with the Sports Standings that makes heavy use of flex table.
One field breaks the page with the following error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'displayValue')
at eval (eval at <anonymous> (flex-table-card.js?hacstag=156292058077:413:42), <anonymous>:1:44)
at flex-table-card.js?hacstag=156292058077:413:42
at Array.map (<anonymous>)
at DataRow.render_data (flex-table-card.js?hacstag=156292058077:402:35)
at flex-table-card.js?hacstag=156292058077:122:47
at Array.map (<anonymous>)
at DataTable.add (flex-table-card.js?hacstag=156292058077:122:32)
at flex-table-card.js?hacstag=156292058077:708:26
at Array.forEach (<anonymous>)
at FlexTableCard._fill_card (flex-table-card.js?hacstag=156292058077:704:18)
eval @ VM39381:1
(anonymous) @ flex-table-card.js?hacstag=156292058077:413
render_data @ flex-table-card.js?hacstag=156292058077:402
(anonymous) @ flex-table-card.js?hacstag=156292058077:122
add @ flex-table-card.js?hacstag=156292058077:122
(anonymous) @ flex-table-card.js?hacstag=156292058077:708
_fill_card @ flex-table-card.js?hacstag=156292058077:704
set hass @ flex-table-card.js?hacstag=156292058077:691
_createCard @ decluttering-card.js?hacstag=188686483100:192
Promise.then
set hass @ decluttering-card.js?hacstag=188686483100:186
value @ hui-card.ts:164
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1261
_$Ej @ reactive-element.ts:1233Understand this error
This field is within a larger set of things, only showing a snippet here:
- name: <div>HOME</div>
data: '[[attribute]]'
modify: x.stats.find(y=>y["abbreviation"] == 'HOME').displayValue
- name: <div>AWAY</div>
data: '[[attribute]]'
modify: x.stats.find(y=>y["abbreviation"] == 'AWAY').displayValue
- name: <div>GF</div>
data: '[[attribute]]'
modify: x.stats.find(y=>y["abbreviation"] == 'GF').value
- name: <div>GA</div>
data: '[[attribute]]'
modify: x.stats.find(y=>y["abbreviation"] == 'GA').value
- name: <div>DIFF</div>
data: '[[attribute]]'
modify: x.stats.find(y=>y["abbreviation"] == 'DIFF').value
- name: <div>Last</div>
data: '[[attribute]]'
modify: x.stats.find(y=>y["abbreviation"] == 'L10').displayValue
- name: <div>STRK</div>
data: '[[attribute]]'
modify: x.stats.find(y=>y["abbreviation"] == 'STRK').value
Focusing on the data, again a snippet, it looks like this:
{
"id": "2",
"name": "Home",
"abbreviation": "HOME",
"displayName": "Home",
"shortDisplayName": "HOME",
"description": "Home Record",
"type": "home",
"summary": "1-0-0",
"displayValue": "1-0-0"
},
{
"id": "3",
"name": "Road",
"abbreviation": "AWAY",
"displayName": "Away",
"shortDisplayName": "AWAY",
"description": "Away Record",
"type": "road",
"summary": "0-0-0",
"displayValue": "0-0-0"
},
{
"id": "5",
"name": "Last Ten Games",
"abbreviation": "L10",
"displayName": "Last Ten Games",
"shortDisplayName": "L10",
"description": "Record last 10 games",
"type": "lasttengames",
"summary": "1-0-0",
"displayValue": "1-0-0, 0 PTS"
},
As you can see from the above … the fields HOME, AWAY and L10 are all nearly the same in construction, at the same level. If I include L10 in the decluttering template, it errors as above and nothing is displayed. If I remove just L10, everyything works (obviously without the L10 field).
I have tried instead to use the “type” thinking that “L10” was bad, but it also does not work. I tried changing the name from “L10” but that does not work. THere is just something in that “L10” that is breaking flex-table with that error.
I can provide any other diagnostics I can, but I have run out of ideas.
The error itself does not mention “L10”. It mentions “displayName”, you have 3 items with this attribute.
Excude other 2 values from the card, leave only L10 - what will you see?
Yes, it is the L10 field and underneath the “displayValue” is the attribute.
Hang on for more, I think I know the issue.
Typical ESPN, it appears the “L10” field is missing on teams that have yet to play a game which should end in a few days as the season just started (or I have other JS for that to catch a bad field that I can wrap it).
And HOME, AWAY fields that are identically formatted and in the data returned from ESPN but exist at season start. Just L10 (which are the last 10 games) does not appear until they have played a game.
You are happy man )))
So, to solve the issue you need to check a presence of this entry.
Yep.
- name: <div>L10</div>
data: '[[attribute]]'
modify: >-
if(typeof x.stats.find(y=>y.abbreviation == 'L10') !== 'undefined'
){x.stats.find(y=>y["abbreviation"] == 'L10').summary}else{'-'}
Works a charm.
I would note that long ago I posted an enhancement request that I would have used. Using a plugin I would actually apply a function to all the fields and pass in field name and the attribute I wanted. I tested and it works great but it gets wiped after every update so I stopped using it.
I made use of flex table card to keep track of my many labels that are applied to entities, devices, automations and more.
I have a table with some customized row colors. Is there a way to choose a different color when the user is in dark mode?
So, for example I have this:
css:
tbody tr:nth-child(-n+8): "background-color: #d4edda !important"
It is possible by card-mod - you will have to use card-mod for THIS particular style instead of a native “css” option.
Described here: main card-mod thread - 1st post - link at the bottom - others - how to change styles in light and dark modes
Is there a known issue with the sorting of monetary values or am I misusing it?
If I leave the card alone (and let sort_by: state+ do its thing), It works. But if I click on the headers, I don’t get the right sorting:
The “Distance” column sorts properly. The last one (which displays the age of the information) doesn’t (even if I remove the prefix and show only numbers:
The sorting by price column doesn’t work either if I remove sort_by: state+
type: custom:flex-table-card
sort_by: state+
clickable: true
max_rows: 5
entities:
include:
- sensor.station_*SP98
columns:
- data: entity_picture
align: center
name: ""
modify: "'<img src=\"' + x + '\"style=\"height: 35px\">'"
- data: fuel_type
align: center
name: ""
icon: mdi:gas-station
- data: address,city
multi_delimiter: ", "
align: left
name: ""
- icon: mdi:currency-eur
data: state
name: ""
align: center
- data: distance
modify: x + " km"
name: Distance
- icon: mdi:calendar-clock
name: ""
data: days_since_last_update
align: center
prefix: J+
layout_options:
grid_columns: full
I’d like column 5 to be column 4 multiplied by 43 (the price of a liter multiplied by the capacity = the price of a full tank).
It works if I don’t use auto_format :
Not with it true:
Just in case, I tried :
I’m sure some of you will tell me it works exactly as expected but I can assure you, as a user (and not a Javascript developer or a computer wizard of some sort), it’s extremely disconcerting.
So I imagine I should turn auto_format off and then apply a modify: to each column to replace the . with a , and add the unit?
