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
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 ))
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:
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
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>'
Thank you did something similar and worked well:
- type: custom:flex-table-card
entities:
include:
- sensor.pylonH221020C30200158_c*
exclude:
- lowest
- highest
columns:
- name: Pack#2
data: state
modify: |-
if ( parseFloat(x) >= 3.480)
'<div style="background-color:#3CB371;">' + x + ' v</div>';
else if ( x >= 3.330)
'<div style="background-color:#e67300;">' + x + ' v</div>';
else if ( x < 3.330)
'<div style="background-color:#cc0000;">' + x + ' v</div>';
align: center
Wondering if would be possible to add as well, the row number automatically before I print the x value. I mean, as we speak I have 15 rows, would nice to have something like the following :
Pack#1
Cell 0: 3.330 v
Cell 1: 3.370 v
Cell 2: 3:380 v
Cell n:
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:
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.
- 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:
- 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”:
- 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):
- 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