I am loving this Flex-Table-Card - what an unbelievably flexible card. Can I put values next to an icon in a column?
Here is the code I have written and I am good with what I have now, but I would like to see the standings movement (up or down places) next to the icon
Here is part of my template code:
columns:
- name: Current Rank
data: '[[attribute]]'
modify: x.current
- name: Up-Down
data: '[[attribute]]'
modify: |-
if (x.current == x.previous)
'<ha-icon icon="mdi:minus" >'
else if (x.current > x.previous)
'<ha-icon icon="mdi:arrow-down" style="color:red;">' + " " + (x.current-x.previous)
else if (x.current < x.previous)
'<ha-icon icon="mdi:arrow-up" style="color:green;" >' + " " + (x.previous-x.current)
And this is what I am currently seeing but it is not adding the values to the right of the icon. Thanks.
Would like to have it look more like this
Update: Figured it out
Just simple formatting
columns:
- name: Current Rank
data: '[[attribute]]'
modify: x.current
- name: Up-Down
data: '[[attribute]]'
modify: |-
if (x.current == x.previous)
'<ha-icon icon="mdi:minus" >'
else if (x.current =="0")
'<ha-icon icon="mdi:bomb" >'
else if (x.previous == "0")
'<div><ha-icon icon="mdi:hand-clap" style="color:blue;"></ha-icon> ' + "New " + '</div>';
else if (x.current > x.previous)
'<div><ha-icon icon="mdi:arrow-down" style="color:red;"></ha-icon> ' + "Down "+ (x.current - x.previous) + '</div>';
else if (x.current < x.previous)
'<div><ha-icon icon="mdi:arrow-up" style="color:green;"></ha-icon> ' + "Up "+ (x.previous - x.current) + '</div>';
Is there a way to hide a row based on one of the column values?
Try using auto-entities as an”input filter” and exclude an entity dependently on it’s attribute.
Fab! That worked nicely. Thank-you
Is there a way to changing the color of the text by hovering.
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.
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…
