So far there was no dedicated thread for this great card.
Let’s discuss this card in this thread.
Styling the card (own methods + card-mod)
How to style a header
Using “div”, “span” & “ha-icon” for a header
How to set a fixed width for a column
Adding a tooltip for a header by @kbrown01
Rounding a number
Displaying a weblink
How to convert timestamp data into DD/MM/YYYY format
How to show multiline data
Rotating an icon
Displaying pictures
Arrays
Dynamic titles in a header
Styling the card:
This post contains examples of styling the flex-table-card.
Basically the own “css” option is used; in some cases card-mod is used too.
The main description is provided here.
Whole table:
Zero padding, colored common border:
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: brightness
data: brightness
- *ref_column
strict: true
css:
table+: >-
border: 1px solid cyan;
padding: 0px;
No internal borders:
type: vertical-stack
cards:
- type: markdown
content: |
no borders
style: |
ha-card {
color: red;
}
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
Custom internal borders:
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
th+: &ref_border_style 'border: 1px solid red;'
td+: *ref_border_style
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
td+: 'border: 1px solid red;'
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
tbody tr+: 'border-top: 1px solid red;'
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
th:nth-of-type(n+2)+: &ref_border_style 'border-left: 1px solid red;'
td:nth-of-type(n+2)+: *ref_border_style
Note that adding “border-collapse: collapse” removes a padding around the table.
If you need the padding - add it by card-mod:
card_mod:
style: |
div {
padding: 16px;
}
Horizontal scrollbar:
Better to use in combination with zero padding.
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: brightness
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
table+: 'padding: 0px'
card_mod:
style: |
ha-card {
overflow: auto;
}
Horizontal & vertical scrollbars:
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 13
card:
type: custom:flex-table-card
columns:
- &ref_column
name: brightness
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
table+: 'padding: 0px'
card_mod:
style: |
ha-card {
overflow: auto;
max-height: 200px;
}
Header:
Various styles:
a) background-color:
– all cells = magenta
– cells 2, 4, 5, 6 = custom colors
b) text-align:
– all cells = left
– cells 1, 6 = custom alignment
c) color for text:
– all cells = default
– cells 1, 5, 6 = custom color
d) color for border:
– all cells = default
– cells 1, 6 = same as for text
– cell 5 = custom color
e) border style:
– all cells = 1px solid
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
thead th: >-
background-color: magenta;
text-align: left !important;
font-weight: 300;
border: 1px solid;
thead th:first-child: >-
text-align: center !important;
color: cyan;
thead th:nth-child(2): >-
background-color: lightgreen;
thead th:nth-child(4): >-
background-color: rgba(0,0,255,0.2);
thead th:nth-child(5): >-
background-color: rgb(255,255,255);
color: red;
border-color: cyan;
thead th:last-child: >-
background-color: yellow;
color: orange;
text-align: right !important;
Hidden header:
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
thead th: 'display: none;'
Hidden header (partially):
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
thead th: 'color: transparent;'
thead th:first-child: >-
color: unset;
background-color: lightgreen;
thead th:last-child: >-
color: unset;
background-color: yellow;
Merged-like header:
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
th+: >-
border-bottom: 1px solid rgb(127,127,127);
text-align: left !important;
th:nth-of-type(n+2)+: &ref_style_border >-
border-left: 1px solid rgb(127,127,127)
td:nth-of-type(n+2)+: *ref_style_border
th:nth-of-type(2)+: &ref_style_merged_header >-
border-left: none;
color: transparent;
th:nth-of-type(5)+: *ref_style_merged_header
card_mod:
style: |
div {
padding: 16px;
}
Rows:
Same background color for all rows:
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
tbody tr+: >-
background-color: rgba(0,255,0,0.4) !important;
Individual styles:
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 7
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
tbody tr+: 'color: red'
tbody tr:nth-child(odd)+: 'background-color: rgba(0,255,0,0.4);'
tbody tr:nth-child(even)+: 'background-color: rgba(255,255,0,0.4);'
tbody tr:nth-child(4)+: >-
background-color: orange;
color: blue;
Styling on hovering:
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
card_mod:
style: |
tbody tr:hover {
background-color: coral !important;
}
Columns:
Various styles:
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
tbody tr td+: >-
background-color: yellow;
color: red;
tbody tr td:nth-child(odd)+: >-
background-color: pink;
tbody tr td:first-child+: >-
background-color: cyan;
color: white;
border: 1px solid black;
text-align: left;
tbody tr td:last-child+: >-
background-color: orange;
Changing a column’s width:
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
- *ref_column
- *ref_column
strict: true
css:
tbody tr td:first-child+: 'width: 50%;'
tbody tr td:last-child+: 'width: 30%;'
Cells:
type: vertical-stack
cards:
- type: markdown
content: |
обращение к ячейке + align
style: |
ha-card {
color: red;
}
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
tbody tr:nth-child(4)+: >-
background-color: orange;
color: blue;
tbody tr:nth-child(4) td+: >-
text-align: center;
tbody tr:nth-child(4) td:nth-child(3)+: >-
background-color: yellow;
color: red;
text-align: left;
How to style dynamically dependently on some conditions:
This way to style a card dynamically may only be used if a condition is set dependently on some entity - not on a value in a particular grid cell (for which the next way may be used).
Assume we need to style a cell (same for a row, a column, a header, a whole card) dependently on some “input_boolean”.
A possible way is using card-mod:
– define a variable by card-mod dynamically;
– use this variable in the native “css” option.
- type: entities
entities:
- entity: input_boolean.test_boolean
name: change color
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 4
card:
type: custom:flex-table-card
columns: *ref_brightness_right_6cols
strict: true
card_mod:
style: |
ha-card {
{% if is_state('input_boolean.test_boolean','on') %}
--my-background-color: yellow;
{% else %}
--my-background-color: cyan;
{% endif %}
}
css:
tbody tr:nth-child(4) td:nth-child(3)+: 'background-color: var(--my-background-color);'
One more method proposed on GitHub by other people:
there is a way to style a particular cell conditionally by using a “modify” option with specifying a “div” or a “span” element (also check this - Using “div”, “span” & “ha-icon” for a header):
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- name: brightness
data: brightness
- name: "div"
data: brightness
modify: |-
if (x == undefined)
"none"
else if (parseInt(x) >= 100 )
'<div style="color:cyan;">more</div>'
else
'<div style="color:red;">less</div>'
- name: "span"
data: brightness
modify: |-
if (x == undefined)
"none"
else if (parseInt(x) >= 100 )
'<span style="color:cyan;">more</span>'
else
'<span style="color:red;">less</span>'
strict: true
How to provide an ability to select text:
Solution provided by daringer here.
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_0
name: hhh
data: brightness
align: right
- *ref_0
- *ref_0
- *ref_0
- *ref_0
- *ref_0
strict: true
css:
tbody tr+: 'user-select: text'
How to replace the content of a cell using the modify option (or via CSS)?
I need some help with displaying the same data from multiple sensors (daily and quarterly utility meters with different tariffs) of the same type in columns of a flex-table-card.
Could anyone help?
Does anybody know if area_name can be used in data?
I tried with
type: custom:auto-entities
filter:
include:
- entity_id: sensor.eq3_batt*
card:
type: custom:flex-table-card
title: Climate
clickable: true
columns:
- data: area_name
name: Room
- data: state
name: State
but just get “undefinedundefined”.
So far area info is not a part of a state object.
You only may get an area as a part of a “conventional” HA templates:
{{area_name("device_tracker.ac66u")}}
{{area_id("device_tracker.ac66u")}}
but these templates are not supported by flex-table-card.
Also, I do not know any similar methods in Java.
I have been able (with support from thomas and marius) to get it working with the entities card.
So the question would be if it might be possible to somehow combine the flex-table-card with config-template or something similar?
type: custom:auto-entities
filter:
include:
- entity_id: sensor.eq3_batt*
options:
type: custom:template-entity-row
name: '{{ area_name(''this.entity_id'') }}'
card:
type: entities
that was the answer
Ideally, the area info must be a part of a “state object”. It is not now - and we have to use these template extensions like “area_id(…)”. Otherwise - this attribute would be available for JS code…
Hi, noob here.
I’m trying to create a table with temperature readings at specific times throughout the day.
So for example:
---------------------------------- 7am----10am----1pm
----------------------Sensor 1----20------21-------18
----------------------Sensor 2----25------30-------27
I use multiple command line sensors to retrieve a value from the default SQLite database(utilizing SQL queries in python and transforming that data to floats).
Now every sensor gives me one reading for a specific time, so the first sensor gives the value at 7 am, the second gives the value at 10 am, etc…
How can I display different entities’ values in each column of the flex table card?
1 row = 1 entity.
Each column may contain:
sensor.my_sensor.state);sensor.my_sensor.my_attribute);Foo(sensor.my_sensor.state));Foo(sensor.my_sensor.my_attribute)),but not these:
sensor.my_sensor.state + sensor.my_sensor.my_attribute + sensor.my_sensor.my_attribute_2);Means - you need to PREPARE data before displaying them in flex-table-card - probably define a template sensor with attributes storing all your data.
@Ildar_Gabdullin thanks for answering so quickly.
OK, the one-row=one-entity policy is what I feared.
So how do I define a template sensor with all the necessary attributes?
If I understood you correctly, I need a new entity in my database with one collum for each value at a specific time.
So how can I do that and how will I feed it values?
Will the same entity be usable with other dashboard cards?
Any links to guides I can follow?
You need to create a template sensor which is not to be discussed in this thread.
Info related to creating a template sensor may be found here:
I am using the flex-card to show some stock data (yahoo finance integration).
Is there a way to make a column data (lets say the stock price) having the url, embedded (https://finance.yahoo.com/quote/AAPL), so when clicking on the cell value, you go to the web site?
If yes, how to I code this, https://finance.yahoo.com/quote/ and then adding the value to the url?
type: custom:auto-entities
filter:
include:
- entity_id: sensor.some_sensor
card:
type: custom:flex-table-card
columns:
- name: object
data: state
- name: object
data: some_attribute
modify: '''<a href="'' + x + ''">Link</a>'''
Thanks. The link works when
- name: Link
data: symbol
modify: '''<a href=https://finance.yahoo.com/quote/'' + x + ''>Y</a>'''
Is it possible to use the url for the icon column, so the icon (arrows) becomes the url-link?
Somthing like, witch do not work:
type: custom:flex-table-card
entities:
include: sensor.yahoofinance*
columns:
- name: Trend
data: icon
modify: '''href=https://finance.yahoo.com/quote/'' + x.symbol + ' ' + ' target="_blank"''
- name: Råvarer
data: friendly_name
- name: Pris $US
data: state
- name: ∆%
data: regularMarketChangePercent
- name: Link
data: symbol
modify: '''<a href=https://finance.yahoo.com/quote/'' + x + ''>Y</a>'''
May be, try to create it by using html, have not tried yet.
My skills are limited, so trying with cut and paste… The code over does not work and cant find other examples.
So are my skills)) never wrote HTML stuff before.
Will try to do it in a week when will be free a bit.
hey, can you share more details how you did the table? I mean the Yahoo Finance infos in a table.
Thanks.
try this btw.