Sorry about that. You can put:
.type-custom-flex-table-card: "min-width: auto"
under css: while I think about the best way to handle this.
Hi, how to find out if the value of x is negative or how to check if the first letter of x is ‘-’
solved it. x[0]
I’m having trouble with getting my attribute array data into a table. Ive been reading but still stuck:
my template sensor has an attribute called cdr, which looks like this in the attribute data
cdr: [
{
“date”: “2025-06-15 12:16:45”,
“destination”: “phonenumberx”,
“disposition”: “ANSWERED”,
“Duration”: “0:06”
},
{
“date”: “2025-06-15 07:14:40”,
“destination”: “phonenumbery”,
“disposition”: “ANSWERED”,
“Duration”: “0:36”
}, etc
]
ive tried using this table code:
type: custom:flex-table-card
title: Logs
entities:
include: sensor.call_log_sensor
columns:
- name: Date
data: cdr.date- name: Destination
data: cdr.destination- name: Result
data: cdr.disposition- name: Duration
data: cdr.duration
but doesn’t generate any rows at all…
then this:
columns:
- name: Date
data: cdr
modify: x.date- name: Destination
data: cdr
modify: x.destination- name: Result
data: cdr
modify: x.disposition- name: Duration
data: x.duration
but that just gives me one row with 'undefinedundefinedundefined in each column. without the modify line, it just puts the whole array of entries in each cell as a giant string, so i just cant filter it down to each particular object
it seems like its an issue pathing to the proper items, maybe due to how the attribute is bracketed, or am i not using modify properly?
try
columns:
- attr_as_list: cdr
1 Like
I’m trying to format the color of each row based on an attribute. If the entity’s “wireless” attribute is true then the whole row is green else its blue.
I tried the below but it’s rendering an empty table after adding in the color formatting code (i removed the auto entities code here for simplicity sake). Any suggestions?
type: custom:flex-table-card
sort_by: last_seen
sort_desc: true
columns:
- name: Name
data: friendly_name
modify: |-
// Check if wireless attribute is true
if(entity?.attributes?.wireless === true) {
return '<span style="color: green;">' + x + '</span>';
} else {
return '<span style="color: blue;">' + x + '</span>';
}
There is no such a variable “entity”. Check examples for “modify”.
I have just set up the zha-network-card derivative of this card but I can’t work out how to display the table at the full width of the screen. At the moment, I see this:
How do I persuade the table to fill the available width of the dashboard?
The yaml looks like this:
title: Home
type: panel
cards:
- type: grid
cards:
- clickable: true
columns:
- name: Name
prop: name
- attr: available
id: available
modify: x || "false"
name: Online
- attr: manufacturer
name: Manufacturer
- attr: model
name: Model
- attr: ieee
name: IEEE
- name: NWK
prop: nwk
- attr: rssi
name: RSSI
- attr: lqi
name: LQI
- attr: last_seen
name: Last Seen
- attr: power_source
name: Power Source
- attr: quirk_class
name: Quirk
sort_by: manufacturer
type: custom:zha-network-card
Any column can now launch an external web page using tap actions:
columns:
- name: Trend
data: stocks.name
modify: |
'<ha-icon icon="mdi:trending-up";></ha-icon>'
tap_action:
action: url
url_path: https://finance.yahoo.com/quote/col[3]
- name: Stock
data: stocks.name
- name: Price USD
data: stocks.price
prefix: $
- name: Symbol
data: stocks.symbol
hidden: true
The flex-table-card on which the zha-network-card was based has recently been modified so that it will expand on a Sections view to fill the selected width. If you want to experiment, take a look at the latest version.
The change was simple. At the end of class FlexTableCard I added the lines:
getGridOptions() {
return {
columns: "full",
};
}
Another way is to set your view’s Layout to Panel (single card) mode. The flex-table-card must be the only card in the view, or must be the child of a container card such as a grid or vertical-stack.
Seems 0.7.9 broke the horizontal scrollbar example. It works after reverting back to 0.7.8
Version 1.0 fixes this. Horizontal scroll bars should work again, and the entire card should be constrained to its column. It should also respond to changes in column width on Section views.
Thank you for your reply. This is what I had done but it still wasn’t filling the available width. I’ll have another look when I am home again.
Thanks for the info.
I can not get it to work. The url opens the web page (https://finance.yahoo.com/quote/NIKL/) but it does not use the ticker (NIKL). I am getting a generic page.Which has the ticker in “My List”.
If I use the ticker (NIKL) in the Yahoo search field, going direckt to the tickers page.
I am getting the same url…?
And now at a sudden, it pick up regularMarketChangePercent as col[3]
TIPS: Nicle miners is way down. This ETF is a winner in a 5 years perspective…
UPDATE: Got it working. The col points at the GUIs flex-table column.
type: custom:flex-table-card
entities:
include:
- sensor.yahoofinance*
exclude:
- sensor.yahoofinance_tnx
- sensor.yahoofinance_nyicdx
columns:
- name: Trend
data: icon
tap_action:
action: url
url_path: https://finance.yahoo.com/quote/col[1]
- name: Ticker
data: symbol
hidden: true
- name: Aksje
data: friendly_name
- name: USD$
data: state
- name: ∆%
data: regularMarketChangePercent
Glad you figured it out. Also, when you use quotes, plural, in the URL, you get the My List page. When you use quote, singular, you get the stock page.
1 Like
Any ide why this does not work?
type: custom:flex-table-card
entities:
include:
- sensor.yahoofinance*
exclude:
- sensor.yahoofinance_tnx
- sensor.yahoofinance_nyicdx
columns:
- name: Trend
data: icon
tap_action:
action: url
url_path: https://finance.yahoo.com/quote/col[1]
- name: Ticker
data: symbol
hidden: true
- name: Aksje
data: friendly_name
- name: USD$
data: state
- name: ∆%
data: regularMarketChangePercent
align: right
modify: |-
if (parseInt(x) >= 0 )
'<div style="background-color: #6B8E23;">' + x + '</div>';
else if (parseInt(x) < 0 )
'<div style="background-color: #FA8072;">' + x + '</div>';
parsing as integer?
" The parseInt() function is used to parse a string and return an integer. When parseInt() is applied to a value that is a float (or a string representing a float), it truncates the decimal part and returns only the whole number."
Try parseFloat() ??
2 Likes
Of course the parseFloat(x) worked.
I am trying to develop a Flex-Table card to show statistics from a watertank system. My impression is that these cards are usually populated from an entity but I want to use the data I collect in a .csv file instead. I have not been successful and seem to have hit a wall and need help. Let me describe my project.
Data from the watertank systems is collected in a .csv file, 5 fields one containing a date and the other 4 numbers. the file is located at /config/refill_log.csv. I have run from Terminal “cat /config/refill_log.csv” and the reply is the 3 lines of dummy data I have put into my refill_log.csv file.
2025-08-01T09:14:00,250,1000,750,360
2025-08-01T14:45:00,300,950,650,420
2025-08-02T07:20:00,200,1000,800,380
My point here being that the file exists, the path is correct and HA can read the data.
Next I create the Flex_Table cad with the following YAML.
type: custom:flex-table-card
title: Refill Log
entities: []
file_path: /local/refill_log.csv
use_column_names: false
columns:
- name: Start Time
- name: Start Volume (L)
- name: End Volume (L)
- name: Liters Delivered
- name: Duration (s)
This configuration renders ok and the card shows the title and the field headings but not any data
I have deleted and reinstalled the Flex-Table card and can see in my desktop resources /hacsfiles/flex-table-card/flex-table-card.js?hacstag=15629205810 and also that the type is JavaScript-modul
Would be very grateful to know if it is possible to populate the card from a .csv fil and if what is wrong with my yaml or if other amendments must be made to my HA to enable this.
Not sure where you found file_path and use_column_names. They’re not supported in flex-table-card or mentioned in the docs. Also, in HA the path /local refers to the www folder, not config.
Anyway, the card does not natively support importing from a file…entities, entity attributes, actions including scripts, but not files.
If you can get your data into an entity attribute as a list of dicts, then you could load it from there. I thought perhaps using a python_script would work, but HA doesn’t allow file access for “security reasons”. Search around and you’ll find some suggestions for reading csv files into HA, but none seem to be straightforward.
If you can live with only the latest line in the file, HA has a File integration that does that.
Let us know if you find a good solution.
Yes it is certainly possible to populate the flex-table card from a .csv file
What is more, it takes very little to achieve this.
[{"id":"9ddf2f0773bbe17f","type":"file in","z":"6b44f4865618efa0","name":"File","filename":"/share/refill_log.csv","filenameType":"str","format":"lines","encoding":"none","allProps":false,"x":250,"y":980,"wires":[["8bed1dbb447a5b5a"]]},{"id":"b66f01cd48802b2b","type":"inject","z":"6b44f4865618efa0","name":"","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":980,"wires":[["9ddf2f0773bbe17f"]]},{"id":"8bed1dbb447a5b5a","type":"csv","z":"6b44f4865618efa0","name":"","spec":"rfc","sep":",","hdrin":"","hdrout":"none","multi":"mult","ret":"\\n","temp":"tstamp,ca,cb,cc,cd","skip":"0","strings":true,"include_empty_strings":true,"include_null_values":true,"x":390,"y":980,"wires":[["8909afaf89cb1f90"]]},{"id":"8909afaf89cb1f90","type":"ha-sensor","z":"6b44f4865618efa0","name":"File Array","entityConfig":"ed5747f3ca86b4c7","version":0,"state":"$count(payload)","stateType":"jsonata","attributes":[{"property":"data_array","value":"payload","valueType":"msg"}],"inputOverride":"allow","outputProperties":[],"x":540,"y":980,"wires":[[]],"server":""},{"id":"ed5747f3ca86b4c7","type":"ha-entity-config","server":"","deviceConfig":"","name":"SC File Array","version":6,"entityType":"sensor","haConfig":[{"property":"name","value":"File Array"},{"property":"icon","value":""},{"property":"entity_picture","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false}]
Home Assistant is very powerful, but it does not handle files or arrays of data well. Yes there is a file integration, and it can read a file, but only the last line.
As has been said above, any user file should be in one of the open directories, ideally /share as that is where shared data should go. You should not be trying to work with files inside the config directory.
I have spent a day trying to use the ‘call action’ in the flex-table-card but can’t even get the examples to work, so I am back to good-old Node-RED.
Node-RED is not that popular around here, but it is a full programming language, it is easy to use (once you have it installed) and it eats data arrays for breakfast. The File node reads the file, the CSV node turns this into an array, and using the HA WebSocket nodes and the Sensor node I can put the array row count into the entity state, and the full file array into an attribute. After that, using the flex-table-card is easy.
type: custom:flex-table-card
title: Reading CSV file into table
entities:
- sensor.file_array
columns:
- data: data_array
name: time
modify: x.tstamp
- data: data_array
modify: x.ca
name: A
- data: data_array
modify: x.cb
name: B
- data: data_array
modify: x.cc
name: C
I will admit that you have to install and setup Node-RED, and probably learn how to use it, but the payback in terms of being able to read files and APIs, process arrays, and then display just what you want is I believe worth the effort.
OK, yes it is possible, and you don’t need any additional components. All you need is a shell_command and a script.
As I said above, your refill_log.csv goes in config/www.
In configuration.yaml:
shell_command:
get_water_tank_readings: 'curl -s http://<HA IP>:8123/local/refill_log.csv'
In scripts.yaml (or configuration.yaml under script: if you don’t include scripts.yaml):
get_water_tank_values:
sequence:
- service: shell_command.get_water_tank_readings
response_variable: file_content
- variables:
new_file_content: >
{% set ns = namespace(rl="") %}
{%- set rows = file_content["stdout"].split() -%}
{% set ns.rl = '{ "refill_logs": [ {' %}
{%- for row in rows -%}
{% set cols = row.split(',') -%}
{%- for col in cols -%}
{% if loop.index == 1 %}
{% set ns.rl = ns.rl ~ '"startTime": "' ~ col ~ '", ' %}
{%- endif %}
{% if loop.index == 2 %}
{% set ns.rl = ns.rl ~ '"startVolume": ' ~ col ~ ', ' %}
{%- endif %}
{% if loop.index == 3 %}
{% set ns.rl = ns.rl ~ '"endVolume": ' ~ col ~ ', ' %}
{%- endif %}
{% if loop.index == 4 %}
{% set ns.rl = ns.rl ~ '"litersDelivered": ' ~ col ~ ', ' %}
{%- endif %}
{% if loop.index == 5 %}
{% set ns.rl = ns.rl ~ '"duration": ' ~ col %}
{%- endif %}
{%- endfor %}
{%- if loop.last %}
{% set ns.rl = ns.rl ~ '}' %}
{% else %}
{% set ns.rl = ns.rl ~ '},{' %}
{%- endif %}
{%- endfor %}
{% set ns.rl = ns.rl ~ '] }' %}
{{ ns.rl }}
- stop: All Done
response_variable: new_file_content
Finally, the flex-table-card:
type: custom:flex-table-card
title: Water Tank Refill Log
action: script.get_water_tank_values
entities: []
columns:
- name: Start Time
data: refill_logs.startTime
- name: Start Volume
data: refill_logs.startVolume
- name: End Volume
data: refill_logs.endVolume
- name: Liters Delivered
data: refill_logs.litersDelivered
- name: Duration (s)
data: refill_logs.duration
That’s it. The script will run whenever you load the flex-table-grid.