ok found it
Started to use the flex table, very compact and nice. Can I empty rows, would like them as separation of diffrent data, also can I get the units from differnt sensors ie ‘data: state’?
Some icons are also missing when, ‘data: icon’…
If icon is not exposed as an attribute - then it will not be shown.
To show an empty row - make a font transparent. But you cannot skip a row - each set of data comes to a next row.
Unit is a separate attribute.
How do I sort by date correctly?
type: custom:flex-table-card
sort_by: entries
entities:
include: sensor.rss_feed_youtube*
columns:
- name: Video
data: entries
modify: >-
'<a href="' + x.link +'" target="_blank"><img src="' +
x.media_thumbnail[0].url + '"style="width: 10%"></a>'
- name: ''
data: entries
modify: x.published
Great, got some units, would be nice the were in the same column but this works for now. Going to try with templeate for the undefined.
A test with a space row ‘A—’, that’s a fake sensor, just figure out a temple that return spaces or maybe ‘-------’.
And the missing icons, I did select some in the GUI they were setup in customize or configuration before.
Thank’s for the tips.
/LA
Is there a way to do this? I have a sensor that has 2 attributes - team & events. I will have multiple sensors for each team as this is their schedule for the year. The Team has the team abbreviation in ‘team.abbreviation’. In this case ASU. It looks like this:
I will eventually send multiple sensors to this template but for right now just trying to get it to work. So Here is my card/whole dashboard setup:
views:
- title: Testing 23
path: testing-23
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 30% 1fr
grid-template-areas: |
"left right"
cards:
- type: markdown
content: Holding area for notes
view_layout:
grid-area: left
- type: custom:decluttering-card
template: ncaa_team_schedules
variables:
- title: Teams
- entity: sensor.ncaaf_arizona_state_university_schedule
- events: events
- team: team
Working template looks like this but not what I want:
ncaa_team_schedules:
card:
type: custom:flex-table-card
title: name
css:
table+: 'padding: 0px; width: 1200px;'
tbody tr td:first-child: 'width: 5%;'
tbody tr td:nth-child(2): 'width: 5%;'
tbody tr td:nth-child(n+2): 'width: 5%;'
tbody tr:hover: 'background-color: black!important; color:white!important;'
tbody tr td:nth-child(5): 'background-color: mintcream; color: white;'
card_mod:
style:
.: |
ha-card {
overflow: auto;
}
$: |
.card-header {
padding-top: 6px!important;
padding-bottom: 4px!important;
font-size: 14px!important;
line-height: 14px!important;
font-weight: bold!important;
}
sort_by: events+
entities:
include:
- '[[entity]]'
exclude: '[[excluded_entities]]'
columns:
- name: Game Date
data: '[[events]]'
modify: x.date.split('T')[0]
- name: Teams
data: '[[events]]'
modify: x.shortName
- name: Home Winner
data: '[[events]]'
modify: x.competitions[0].competitors[0].winner
- name: Away Team
data: '[[events]]'
modify: >-
'<div><img src="' +
x.competitions[0].competitors[1].team.logos[0].href + '"
style="height: 20px;vertical-align:middle;"> ' +
x.competitions[0].competitors[1].team.displayName + '</div>'
- name: Final Score
data: '[[events]]'
modify: |-
if (typeof x !== 'undefined' &&
typeof x.competitions[0].competitors[0].score !== 'undefined' &&
typeof x.competitions[0].competitors[1].score !== 'undefined') {
let content = '';
let icon = '<ha-icon icon="mdi:minus" style="fill:white;"></ha-icon>';
let home_score = x.competitions[0].competitors[0].score.value;
let away_score = x.competitions[0].competitors[1].score.value;
if (home_score > away_score) {
content = `<div style="font-size:20px;color:red;">${away_score}</div>` +
`<div style="font-size:20px;color:black;margin:0 5px;">-</div>` +
`<div style="font-size:20px;color:green;">${home_score}</div>`;
} else if (home_score < away_score) {
content = `<div style="font-size:20px;color:green;">${away_score}</div>` +
`<div style="font-size:20px;color:black;margin:0 5px;">-</div>` +
`<div style="font-size:20px;color:red;">${home_score}</div>`;
} else {
content = `<div style="font-size:20px;color:black;">${away_score}-${home_score}</div>`;
}
content = `<div style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;">` +
content +
`</div>`
content;
} else {
'';
}
- name: Home Team
data: '[[events]]'
modify: >-
'<div><img src="' +
x.competitions[0].competitors[0].team.logos[0].href + '"
style="height: 20px;vertical-align:middle;"> ' +
x.competitions[0].competitors[0].team.displayName + '</div>'
- name: Attendance
data: '[[events]]'
modify: x.competitions[0].attendance
What I want is to put a W(in) or L(oss) next to the score in the Final Score column for that teams schedule - So ASU would have a W in rows, 1,2,4 and L in 3.
So my thought was to use something like this:
modify: |-
if (x.competitions[0].competitors[0].winner === 'true' && '[[team]]'.abbreviation === x.competitions[0].competitors[0].team.abbreviation) {
return '<div style="color:green;"><ha-icon> W </ha-icon></div>';
} else {
return '<div style="color:red;"><ha-icon> L </ha-icon></div>';
}
Is that possible?
Thanks.
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:
- Add one more HIDDEN column for this attribute.
- This column must contain “modify” - convert the value BACK to a “normal” timestamp format like “2024-09-30 21:41”.
- Set a fixed sort for this hidden column & disable sorting by a header.
1 Like
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
modifyto parse the color data and temperature data, applying the hex color to thebackground-colorattribute:
- 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.