Flex-table-card

Ildar_Gabdullin · September 15, 2022, 4:47am

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
Hide a row dependently on an attribute’s value

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

Ildar_Gabdullin · September 15, 2022, 4:48am

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:
fle

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'

e-raser · September 16, 2022, 3:17pm

How to replace the content of a cell using the modify option (or via CSS)?

alexandrechoske · September 22, 2022, 2:10am

I managed to figure out, but struggling on CSS hahah

Edit:
Voilaa

EinSchwerd · September 29, 2022, 9:41am

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?

AleXSR700 · October 25, 2022, 10:46pm

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”.

Ildar_Gabdullin · October 26, 2022, 12:16pm

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.

AleXSR700 · October 26, 2022, 4:14pm

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

Ildar_Gabdullin · October 26, 2022, 5:59pm

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…

odyskat · November 1, 2022, 5:05pm

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?

Ildar_Gabdullin · November 1, 2022, 6:00pm

1 row = 1 entity.
Each column may contain:

a state (sensor.my_sensor.state);
an attribute’s value (sensor.my_sensor.my_attribute);
a processed state’s value (Foo(sensor.my_sensor.state));
a processed attribute’s value (Foo(sensor.my_sensor.my_attribute)),

but not these:

a combination of a state & attributes (sensor.my_sensor.state + sensor.my_sensor.my_attribute + sensor.my_sensor.my_attribute_2);
data from another sensors.

Means - you need to PREPARE data before displaying them in flex-table-card - probably define a template sensor with attributes storing all your data.

Update: check this also.

odyskat · November 1, 2022, 6:21pm

@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?

Ildar_Gabdullin · November 1, 2022, 7:07pm

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:

Tomahawk · November 6, 2022, 8:27pm

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?

Ildar_Gabdullin · November 6, 2022, 8:50pm

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>'''

Tomahawk · November 7, 2022, 11:27am

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>'''

Ildar_Gabdullin · November 7, 2022, 11:31am

May be, try to create it by using html, have not tried yet.

Tomahawk · November 7, 2022, 11:38am

My skills are limited, so trying with cut and paste… The code over does not work and cant find other examples.

Ildar_Gabdullin · November 7, 2022, 12:48pm

So are my skills)) never wrote HTML stuff before.
Will try to do it in a week when will be free a bit.

alexandrechoske · November 7, 2022, 1:04pm

hey, can you share more details how you did the table? I mean the Yahoo Finance infos in a table.
Thanks.

try this btw.

How to use an image as a link in HTML?.