Try this.
type: custom:flex-table-card
entities:
include: sensor.hacs
columns:
- name: name
data: repositories
modify: x.name
- name: installed
data: repositories
modify: x.installed_version
- name: available
data: repositories
modify: x.available_version
Oh that works beautifully now, thank you very much!
type: entities
entities:
- entity: sensor.hacs
name: HACS Repositories
- type: custom:flex-table-card
title: ''
clickable: true
entities:
include: sensor.hacs
exclude: null
columns:
- name: ' Verfügbare HACS-Updates'
data: repositories
modify: x.display_name
prefix: '▶ '
suffix: ''
align: left
icon: hacs:hacs
- name: ''
data: repositories
modify: x.available_version
prefix: ''
suffix: ''
align: left
icon: hacs:hacs
css:
thead th: 'display: none;'
I’ve tried searching this topic for it but perhaps I’m not finding the correct search terms. But is there any way to filter out records from a table? E.g. I have a flex-table-card showing the passing busses at a busstop:
This data is coming from an integration that provides ALL the passages as an array in the next_passages attribute like so:
The integration doesn’t allow filtering, it always shows all the passages, but is there a way to handle this in the flex-table-card?
This is my current config:
type: custom:flex-table-card
title: Wittekaproenenplein, Gent
entities:
include: sensor.brugsepoort_gent
columns:
- name: Line
data: next_passages
modify: >-
'<div class= "line-number" style="padding: 1px 1px 4px 1px; height:
16px; color: #' + x.line_number_colourFrontHex + '; background-color: #'
+ x.line_number_colourBackHex + '; border-color: #' +
x.line_number_colourBackBorderHex + '"> ' + x.line_number_public +
' </div>'
align: center
- name: Type
data: next_passages
modify: >-
' <ha-icon icon="mdi:' + x.line_transport_type.toLowerCase() +
'"></ha-icon>'
- name: Towards
data: next_passages
modify: x.final_destination
- name: Due in (min)
data: next_passages
modify: x.due_in_min
- name: RT/C
data: next_passages
modify: |-
if (x.cancelled)
'<ha-icon icon="mdi:cancel">'
else if (x.is_realtime)
'<ha-icon icon="mdi:signal-variant">'
else
''
align: center
card_mod:
style: |
.line-number{
display:block;
float:left;
min-width:2.75em;
text-align:center;
font-weight:700;
color:#fff;
border-radius:4px;
border:3px solid #000;
margin-left:0rem;
margin-right:0.75rem;
font-size:1rem;
line-height:1.5em;
}
Thanks in advance!
Is there a way to limit the amount of row in a flex table?
For example limit it to 5:
entities:
include:
- sensor.vertrektijden
Where the sensor has a list (array) of departures.
Yes
max_rows: 5
Thanks. That was very easy
Here is my project… Vertrektijden (departures) of a specific trainstation.
Card
type: custom:flex-table-card
title: Utrecht
entities:
include:
- sensor.utrecht_vertrektijden
max_rows: 5
columns:
- name: Vertrek
data: departures
modify: >-
var dep_time = new Date(x.departureTime); dep_time =
String(dep_time.getHours()).padStart(2,'0')+":"
+String(dep_time.getMinutes()).padStart(2,'0'); dep_time; if (x.delay ==
'0')
dep_time
else {
dep_time + '<div style="font-size: 14px;color: red">' + " +" + x.delay +'</div>';
}
- name: Naar/Opmerking
data: departures
modify: |-
if (x.via == null)
x.destination
else {
x.destination + '\n' + '<div style="font-size: 14px">' + x.via + '</div>'
}
- name: Spoor
data: departures
modify: >-
'<img src="/local/images/NS/platform.png" style="position: absolute";>' +
'<div style="position: relative;top:50%;left:50%;transform:
translate(-50%, 50%);text-align: center;";>' + x.platform + '</div>'
- name: ' '
data: departures
modify: |-
if (x.company="NS")
'<img src="/local/images/NS/NS_logo.png" style="height: 10px;">' + '<br>' + x.transportType
else {
x.company + x.transportType
}
css:
table+: 'border-spacing: 0px;'
tbody tr:nth-child(odd): >-
background-color: #FFFFFF; color: #1C316C ; font-weight:bold;
vertical-align: top;
tbody tr:nth-child(even): >-
background-color: #D7E0EC; color: #1C316C ; font-weight:bold;
vertical-align: top;
thead th: 'background-color: #D7E0EC; color: #1C316C; text-align:left !important;'
td:nth-child(1)+: 'color: #1C316C; font-size: 18px'
td:nth-child(2)+: 'color: #1C316C; font-size: 18px'
td:nth-child(3)+: 'color: #1C316C; font-size: 18px;'
configuration.yaml
rest:
- authentication: basic
scan_interval: 60
resource: 'https://www.rijdendetreinen.nl/ajax/departures?station=Ut'
sensor:
- name: "Utrecht vertrektijden"
value_template: "OK"
json_attributes:
- "departures"
So, I am working on some system monitoring views with my glances data. Rather than use a bar chart or apexcharts for one of my NAS’ hard drives, I thought I would use a declutter template and flex-table. I have the data perfectly, but thought I could build on other’s work here to show the percentage in a cell.
Here is what I have so far:
decluttering_templates:
raid:
card:
type: custom:auto-entities
filter:
include: '[[entity]]'
card:
type: custom:flex-table-card
title: '[[title]]'
css:
table+: 'padding: 0px; width: 99%!important;'
tbody tr:hover: 'background-color: green!important; color:white!important;'
tbody tr:nth-child(odd)+: 'background-color: medium-grey;'
tbody td:nth-child(2)+: >-
background-color: green;
width: 80px!important;
line-height: 24px!important;
card_mod:
style:
.: |
ha-card {
overflow: auto;
padding-bottom: 4px!important;
font-size: 18px !important;
line-height: 24px!important;
}
$: |
.card-header {
background-color: green;
padding-top: 6px!important;
font-size: 20px!important;
line-height: 20px!important;
font-weight: bold!important;
}
entities:
include: '[[entity]]'
exclude: '[[excluded_entities]]'
columns:
- name: <div title="Name">Name </div>
data: '[[attribute]]'
modify: x.name
- name: image
data: entity_picture
modify: '''<img src="" style="background-color: red!important; line-height: 24px!important;width: ''+ 40 + ''px;">'''
- name: <div title="GB">Available </div>
data: '[[attribute]]'
modify: x.Available
- name: <div title="GB">Used </div>
data: '[[attribute]]'
modify: x.Used
- name: <div title="GB">Total </div>
data: '[[attribute]]'
modify: x.Total
- name: <div title="GB">Pct </div>
data: '[[attribute]]'
modify: x.Pct
and my card:
- type: custom:decluttering-card
template: raid
variables:
- title: TVS RAID
- entity: sensor.tvs_raids
- attribute: entries
which gives me:
Any ideas on how to turn that image into more of a barchart?
Is it possible to use somehow templates in the column name? I would like to add dates to the column for the last 7 days in descending order.
Use a data template with a small table (depending on how granular you want it). Like for instance if 10% increments are OK, then a table with 10 columns and color the appropriate number of cells based in the value %.
Possible with using card-mod:
type: vertical-stack
cards:
- type: entities
entities:
- input_boolean.test_boolean
- type: custom:auto-entities
filter:
include:
- domain: light
card:
type: custom:flex-table-card
columns:
- name: name
data: name
- name: ''
data: brightness
card_mod:
style: |
thead th:nth-child(2)::after {
{% if is_state('input_boolean.test_boolean','on') -%}
content: "flag is 1";
{%- else -%}
content: "flag is 0";
{%- endif %}
}
any solution?
Nope, haven’t found anything myself and there were no answer on this topic either. Don’t think it’s possible.
I think you need auto-entities to template the selection before passing it to the flex-table-card.
Are there any CARD alternatives for showing a table ?
I had been searching and this was my first hit in the forum therefore the question about alternatives before I start digging into this one cause tables will make a lot of work I guess.
thanks
A standard markdown can be used in some cases.
In fact, using jinja in markdown allows to create complex loops/logics - and some cases may be not implemented by flex-table-card + auto-entities.
But markdown do not have features like “sort by a header”.
Okay, thanks for your fast reply cause you can judge about that.
I have no clue what jinja is as I had no clue what flex table card was till I started reading your topic this morning and saw a lot of nice example and a vivid community.
I just wanna make sure that I would not choose the wrong card if there would be something else easier to achieve.
Here is my current “basic solution” for a solar power roof which is powering 7 or 8 inverters finally and comes along with about 12 strings. And those are not equal cause different parts of the roof got smaller or bigger panels, so each of these strings can have a different Wp even though all facing south.
What I wanted to check and analyze is the perfomance or power / 1 kWp installed.
Just to make these strings comparable.
Maybe 4 items below each other x 11 strings are 44 elements
but that is not possible with basic HA as you can see here with just 8 strings
Yes, horrible, but if you start from scratch and simply need the figures and get behind how to format these then it is a good point to start with.
Do you have any idea which kind of table you would recommand cause there have been presented a lot in the whole topic ?
My focus is good readability, so bigger fonts than the tiny stuff cause my dad has only 1 eye left is just 85 years but loves to get into new modern stuff and therefore it must fit his needs and please his eyes
The items per string will be
Watt per kWp
Watt of the string
kWh per kWp
kWh of the string
Wp installed of the string
It is just a visualisation of sensors and the math is done in the yaml file.
Pi 4 reboot time has increased since I started the inverter sensor implementation cause 8 inverter x 34 sensors means a support of 270 sensors feeded by mqtt and now the reboot time has increased a lot cause I have now gaps, missing data cause by a full reboot.
I have installed it and started reading but it looks like that most examples are based on node red and also are extracting data out of a sensor which then are sorted or displayed.
Maybe I have not found the right example to start with.
I just need a kind of table with heade on the top and first column a line description and then I would place a sensor into each cell.
Any ideas about that ?
Hi, I am struggling to construct modify / js but ‘x’ behaves not as expected (for me)
Can anyone maybe explain how to return data from a modify?
I have the following
{
aircraft: {
'F-GRXB': {
'callsign': 'AFR15MQ ',
'registration': 'F-GRXB',
'icao24': '3946e1',
'type': 'A319'
},
'OE-FZA': {
'callsign': 'EJU300Q ',
'registration': 'OE-FZA',
'icao24': '44058f',
'type': 'C510'
}
}
}
I tried this but it only kicks back the last element
I tried building an array but then it only kicks back the array.
I would suggest you align your 8 “inverters” Vertically, and “divide” the Multiple Strings in 2 or more Separate Tables ( Depending upon what the “Values” presents (i.e in Categories)
|Unit “inverter, what ever” | Leistung 1 | Leistung 2 | Energ… | etc.
.......................................................................................................
U1.1:01 264 W 739 W 0.7 kWh Etc.
U1.2:W1.3 251 W 672 W 0.6 kWh
U2.1:W1.2 264 W
etc ...
Yes with 11 “strings” you have to use Several Tables, use your imagination to “combine” relevant Numbers/results/Values, in Separate Tables ( Or use custom:multiple-entity-row, if it suits you )
( Not that i know why you want to “repeat” … #1LEISTUNG , in All Columns
PS: The 14 Digits Number seems quite irrelevant to “Show” for a 85 year old, with bad vision ! , consider i.e “Multiply” & “Rounding” this to something “meaningful” , If it’s meaningful at all !