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:
code
- 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:
code
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:
code
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
code
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;'
code
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;'
code
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.
code
- 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:
code
- 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
code
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:
code
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):
code
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:
code
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:
code
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:
code
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:
code
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:
code
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:
code
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:
code
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.
code
- 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):
Code
- 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.
code
- 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'