I don;t think the “+” is needed. Did you try not setting a width on the table?
Does not seem to make a difference if I add the + or not, so I removed it now.
I have tried with and without defining widths and using table-layout: fixed and flex. USing the same code for both tables (valve is a second table.
css:
table: 'padding: 0px 0px 0px 0px;'
tbody tr: 'user-select: text'
tbody tr td:first-child: 'width: 1%;white-space: nowrap;'
tbody tr td:nth-child(n+2): 'width: 1%;'
So far nothing worked.
No, in my example I specified a width only for a few 1st columns.
You may define width (or whatever) explicitly to each needed element - or use nth-child() for mass-defining.
1 Like
I think the problem may be the combination of custom:layout-card with the flex-table.
I cannot seem to get it to work properly, i.e. have two tables next to each other without padding/margins.
Example code
Summary
type: custom:layout-card
view_layout:
grid-area: dashboard3
layout_type: grid
layout:
grid-template-columns: auto auto
grid-template-rows: auto
grid-template-areas: |
"main1 main2"
cards:
- type: custom:flex-table-card
view_layout:
grid-area: main1
entities:
include: climate.*
sort_by: friendly_name
clickable: true
columns:
- name: ''
data: friendly_name
align: left
modify: x.replace("eQ-3 ", "").replace(" Climate", "")
- name: <div>Target<br>Temperature<br>°C</div>
data: temperature
align: center
modify: |-
if (x.length == 0)
"-"
else
if (parseInt(x) >= 4.5 )
'<span style="color:white;"><b>' + x + '</span>'
else
'<span style="color:grey;"><i>' + "Off" + '</span>'
- name: <div>Current<br>Temperature<br>°C</div>
data: current_temperature
align: center
modify: |-
if (x.length == 0)
'<span style="color:grey;"><i>' + "-" + '</span>'
else
x
- name: <div>Target<br>Humidity<br>%</div>
data: current_humidity
align: center
modify: |-
if (x.length == 0)
'<span style="color:grey;"><i>' + "-" + '</span>'
else
x
css:
table: 'padding: 0px 0px 0px 0px;'
tbody tr: 'user-select: text'
tbody tr td:first-child: 'width: auto;white-space: nowrap;'
tbody tr td:nth-child(n+2): 'width: auto;white-space: nowrap;'
th: 'border-bottom: 1px solid rgb(127,127,127);'
- type: custom:flex-table-card
view_layout:
grid-area: main2
entities:
include:
- sensor.eq3*valve
sort_by: friendly_name
clickable: true
columns:
- name: ''
data: friendly_name
align: center
modify: x.replace("eQ-3 ", "").replace(" Valve", "")
hidden: true
- name: <div>Valve<br><br>%</div>
data: state
align: center
modify: |-
if (x.length == 0)
"-"
else
if (x > 0 )
'<span style="color:white;">' + x + '</span>'
else
'<span style="color:grey;"><i>' + x + '</span>'
css:
table: 'padding: 0px 0px 0px 0px;'
tbody tr: 'user-select: text'
tbody tr td:first-child: 'width: auto;white-space: nowrap;'
tbody tr td:nth-child(n+2): 'width: auto;white-space: nowrap;'
th: 'border-bottom: 1px solid rgb(127,127,127);'
Results in
Looks like minimum column space used but card then not filled correctly.
Alternatively, card filled but then columns not minimum space.
Guess that is the choice. Entire card filled correctly or sub-card filled correctly.
Edit: this does not work. If there are two elements, using repositories.0.display_name really only lists exactly that first. In other words: I only get one row! So back to start, looking for a solution…
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
2 Likes
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
1 Like
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"
2 Likes
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 %}
}
1 Like
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