entries is a list, each element is a dictionary, isn’t it?
Then how this “sort_by” is supposed to work?
What you should have done and you did not - specifying an ID for a particular column and selecting this ID for sorting.
Exacty. Understood. At first I had tried with the wrong “sort_by” and thught it over. The missing link is from @EdwardTFN. I would not have “guessed” that given a frankly not-sortable entry yet “sort_by” is provided , it sorts by the first column
Right now working perfectly for Divisional, Conference and Overall. Just need to think through the logic of wildcard.
Division:
Conference:
Overall:
Nice)
Hope your home has become much smarter with this sport info)))
Seriously, so far I have found only one application in my HA for this card - some tech info about network switches, that is all…
LOL!
I have a simplistic view. I hate going to other Apps/Websites. I like in all in one thing. Especially one that does not track everything I do.
Flex table has help me with River Flood status and now Sports scores and standings.
All lights, music, tv remotes, internet status, cell phones, calendars … and yes even Pokemon for the kids.
I post most all the results and YAML and such on GIT for others.
Probably the main reason of not using table in my setup is that for almost each sensor I have Entities card + graphs + buttons…
It will be great if you share some ideas of using this card.
For me - even only screenshots with description will be fine, w/o code.
How to reduce decimal accuracy as stated in other cards and the new HA version 2023.3.0?
Do you know how to decrease decimal accuracy for my senros in this card.
type: custom:flex-table-card
sort_by: state-
strict: true
max_rows: 10
clickable: true
entities:
include:
- sensor.conso_*_aujourdhui
- sensor.pool_pump_energy_daily
- sensor.polaris_energy_daily
- sensor.all_lights_energy_daily
exclude:
- sensor.conso_pac_piscine_aujourdhui
- sensor.atome_daily
- sensor.conso_prod_solaire_aujourdhui
- sensor.conso_zlinky_today
- sensor.conso_zlinky_aujourdhui
- sensor.spot_piscine_electric_consumption_kwh
columns:
- data: friendly_name
align: left
name: Consommation Aujourd'hui
- name: kW
data: state
align: center
suffix: ' kW'
css:
tbody tr:nth-child(1): 'color: #ff9800'
card_mod:
style:
.: |
ha-card ha-markdown {
padding:0px
}
ha-card ha-markdown.no-header {
padding:0px
}
ha-markdown:
$:
ha-markdown-element: |
h1 {
font-weight: normal;
font-size: 24px;
}
div {
background-color:rgb(100, 100, 100);
padding: 12px 12px;
color:white;
font-weight:normal;
font-size:1.2em;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
table{
border-collapse: collapse;
font-size: 0.9em;
font-family: Roboto;
width: auto;
outline: 0px solid #393c3d;
margin-top: 10px;
} caption {
text-align: center;
font-weight: bold;
font-size: 1.2em;
} td {
padding: 5px 5px 5px 5px;
text-align: left;
border-bottom: 0px solid #1c2020;
}
tr {
border-bottom: 0px solid #1c2020;
}
tr:nth-of-type(even) {
background-color: rgb(54, 54, 54, 0.3);
}
tr:last-of-type {
border-bottom: transparent;
}
mark {
background: #009767;
color: #222627;
border-radius: 10px;
padding: 5px;
}
span {
background: #EC4B34;
color: #222627;
border-radius: 10px;
padding: 5px;
}
span {
padding: 5px;
}
tr:nth-child(n+2) > td:nth-child(2) {
text-align: left;
}
For info, with new HA release 2023.3, we can change it, but it doesn’t work for this card.
Imho, there is TOO much hype & expectations about this “set precision” feature.
May be I am a special person - but I do not use this feature at all.
In many integrations (template, snmp, …) a user already may define any precision.
And this “set precision” feature only affects Frontend - internally states are intact (as it should be).
Again imho - cards should show “raw” intact data, not damaged by any next untested Frontend changes.
Check Github issues - currently people have problems with displaying data with changed precision.
If you really need to change a precision for some data in your flex-table - I recommend to use “modify”.
P.S. Please avoid posting a large code to demonstrate ONE issue.
MWE
Thanks
How to make that with « modify »?
- type: custom:flex-table-card
entities:
include:
- input_number.test_number_very_small
columns:
- name: value
data: state
- name: value .0
data: state
modify: Number(x).toFixed(0)
- name: value .x
data: state
modify: Number(x).toFixed(1)
- name: value .xx
data: state
modify: Number(x).toFixed(2)
- name: value .xxx
data: state
modify: Number(x).toFixed(3)
- name: value .xxxx
data: state
modify: Number(x).toFixed(4)
- name: value .xxxxx
data: state
modify: Number(x).toFixed(5)
- name: value .xxxxxx
data: state
modify: Number(x).toFixed(6)
Thank you very much
1 Like
Is there a way in flex-table to define a function to be used in many different “modify” commands?
Like for instance I have this:
modify: if(typeof x.stats.find(y=>y.abbreviation == 'CLINCH') !== 'undefined' ){x.stats.find(y=>y.abbreviation == 'CLINCH').displayValue}else{'-'}
But I have 17 columns where I want basically the same logic.
essentially in pseudo:
function getVal (findobj, colattr, valueiferror}{}
Using the above, it would be:
getVal('CLINCH','displayValue','-')
I would assume this is kindof contained here:
But this seems so specific as to not be something that is included in the flex-table, but could not be defined in some property to the table. Am I correct?
If it is an absolutely same code for the “modify” option - consider using a yaml anchor (hope you are a mature man using yaml mode 
)
If you are thinking about calling a function with different attributes for different columns - then no ((.
As for a “formatter” - imho this is a function accepting ONE variable, i.e. “x”, so we cannot pass attributes.
But - what if our ONE function extracts all needed data from the “x”?
Imagine that “x” may be a complex object, then these inputs may be used in the same function used in all “modify” options for all needed columns.
This may work if you may construct such complex attributes, not if they come “as they are”.
Great information. I kinda like that approach. I will need to take a dive into it.
And yes … I am a ‘mature man’ at the age of 61, but with YAML … not so much. I lived my life in the XML+XSL world.
@kbrown01
Well, if you need any advice for yaml (why, how, …) - ask me!
My life was with QNX, C/C++, Fortran ))
1 Like
In the spirit of sharing Flex Table setups, here is another one for NHL fans (specifically NHL Fantasy Hockey fans). Flex table with Starting Goalies for today.
Here is the REST sensor that gets the data:
##
## Starting Goalies
##
- platform: rest
name: nhl_starting_goalies
scan_interval: 3600
resource: https://www.dailyfaceoff.com/_next/data/AARRTVjTYQ3P1ZXMqUh-M/starting-goalies.json
value_template: "{{ value_json.pageProps.date }}"
json_attributes_path: "$.pageProps"
json_attributes:
- data
Here is the Lovelace Flex Table with some Card-mod enhancements:
type: custom:flex-table-card
title: Starting Goalies
css:
table+: 'padding: 0px; width: 1600px;'
tbody tr:hover: 'background-color: green!important; color:white!important;'
card_mod:
style: |
ha-card {
overflow: auto;
}
$: |
.card-header {
padding: 12px 0px 8px 4px!important;
font-size: 16px!important;
line-height: 18px!important;
font-weight: bold!important;
}
entities:
include: sensor.nhl_starting_goalies
columns:
- name: HOME
data: data
modify: >-
'<div><img src="' + x.homeTeamLogoSvg + '" style="height:
20px;vertical-align:middle;"> ' + x.homeTeamName + '</div>'
- name: GOALIE
data: data
modify: x.homeGoalieName
- name: RANK
data: data
modify: >-
if(x.homeGoaliePositionRank === null ){'N/A'}else{x.homeGoaliePositionRank}
- name: W
data: data
modify: x.homeGoalieWins
- name: L
data: data
modify: x.homeGoalieLosses
- name: OTL
data: data
modify: x.homeGoalieOvertimeLosses
- name: SO
data: data
modify: x.homeGoalieShutouts
- name: SVP
data: data
modify: x.homeGoalieSavePercentage
- name: GAA
data: data
modify: x.homeGoalieGoalsAgainstAvg
- name: AWAY
data: data
modify: >-
'<div><img src="' + x.awayTeamLogoSvg + '" style="height:
20px;vertical-align:middle;"> ' + x.awayTeamName + '</div>'
- name: GOALIE
data: data
modify: x.awayGoalieName
- name: RANK
data: data
modify: >-
if(x.awayGoaliePositionRank == null ){'N/A'}else{x.awayGoaliePositionRank}
- name: W
data: data
modify: x.awayGoalieWins
- name: L
data: data
modify: x.awayGoalieLosses
- name: OTL
data: data
modify: x.awayGoalieOvertimeLosses
- name: SO
data: data
modify: x.awayGoalieShutouts
- name: SVP
data: data
modify: x.awayGoalieSavePercentage
- name: GAA
data: data
modify: x.awayGoalieGoalsAgainstAvg
And the result:
2 Likes
first of all thank you for your work with flex-table-card! I was trying to find an easy way to manipulate my batteries cell information and your work just makes it easy. I was trying to acommodate some changes which I would like your confirmation. What I show bellow is a list of sensors which represent individually every cell voltage. I want to be able to change the font color or the background of the cell when it assumes a specific value, I’m sure this is possible, just doing some mistake on the code for sure:
The background color never changes…any inputs will be welcome.
Thank you!
Paulo
2 Likes
- Avoid using tagging someone personally.
- If you want any assistance with your code - post a code (formatted as a code), do not post screenshots of the code.
- I dealt with JS a little, in C/C++ this code is WRONG:
switch(x)
{
case x>12:
...
case x>15:
...
}
Cool thank you I’ll follow up the recommendations.Appreciate sharing the rules, I wasn’t truly aware of them.
Try using kind of this code:
modify: |-
if (x == ...)
"none"
else if (parseInt(x) >= 67)
'<div style="color:green;">' + x + '</div>'
else if (parseInt(x) >= 34)
'<div style="color:orange;">' + x + '</div>'
else
'<div style="color:red;">' + x + '</div>'