Flex-table-card

[russd]

Hi, I’m trying to get my temperature values individually colored, based on a value held in the sensor attributes (so each value cell is the color represented in the color attribute). Here are the entities and attributes:

Entity 	            State 	Attributes
sensor.hw_levels_0 	26.3 	sensor: 0        color: #0000ff
sensor.hw_levels_1	29.8 	sensor: 1        color: #0000ff
sensor.hw_levels_2 	33.9 	sensor: 2        color: #2700d8
sensor.hw_levels_3 	39.1 	sensor: 3        color: #5c00a3
sensor.hw_levels_4 	43.6 	sensor: 4        color: #8a0075
sensor.hw_levels_5 	45.6 	sensor: 5        color: #a0005f
sensor.hw_levels_6	45.9 	sensor: 6        color: #a3005c
sensor.hw_levels_7	46.9 	sensor: 7        color: #ad0052

I have a card which looks like this, displays the sensor and the temp OK, but without any color…

type: custom:flex-table-card
title: Hot Water Levels
entities:
  include: sensor.hw_levels*
columns:
  - name: Sensor
    data: sensor
    align: center
  - name: Temp
    data: state
    align: center
    suffix: ' °C'

If I then try and add a <div> using x.color which I hoped would pick up the color attribute

type: custom:flex-table-card
title: Hot Water Levels
entities:
  include: sensor.hw_levels*
columns:
  - name: Sensor
    data: sensor
    align: center
  - name: Temp
    data: state
    align: center
    modify: |
      '<div style="color: ' + x.color + '">;' + x + ' °C ;</div>'

it doesn’t work, it just displays the value (x °C) in black - I’ve tried all combinations I can find in this thread but nothing seems to work, as x.color doesn’t seem to exist and I don’t understand why

Any suggestions please?
Thanks, Russ

[vingerha]

Why would you want to, does your card data contain multiple currencies ? Or do you want it to change when you change your lovelace settings to another currency? Would showing € not be enough?
EDIT… I clearly donot have an immediate answer else I would have given that…just checking

[tvdsluijs (Theo van der Sluijs)]

Well, no I do not have multiple currency’s. However I would like to show a € … oh… thank you

"€ "+Number(a_price).toFixed(5)

[vingerha]

Hi, I have an integration with aviationstack that kicks back estimate arrival times but actually incorrect format
i.e.

2023-10-21T08:30:00+00:00

is correct only for the 08:30 part but as I am on CET, HA makes this

2023-10-21T10:30:00+02:00

any way to prevent utc/cet in the card?

EDIT: to be clear … the plane landed at 08:30 CET

[spry-salt]

I love this card. Is there a way to make a particular column clickable and have a defined action for that click? My use case is that I’ve got a list of device names in column 1, I want column 2 to show the on/off status of the devices, and I want column 3 to contain buttons that let me switch those devices on or off. Thanks for any tips!

[tvdsluijs (Theo van der Sluijs)]

It would be great if there is a way to do the if statements on states. Is that possible?

Something like
if (x.value == {{state_attr('sensor.temps','max')}})
Is that possible?

For setting the color on certain cells

[Ildar_Gabdullin]

@tvdsluijs

if statements on states

It is available, read docs.

          modify: |-
            if(x.length == 0) {
              "-"
            }
            else {
              ...
            }

@tvdsluijs

state_attr(‘sensor.temps’,‘max’)

Not possible.
You may only access attributes of the CURRENT object.

[tvdsluijs (Theo van der Sluijs)]

Okay but you can use multiple attributes in data: right?

So when I have a simple json like this

{"min': 1,
'max': 5,
raw_data: {
'01:00': 1.1,
'02:00': 1.5,
'03:00': 1.3,
and so on}
}

could I use min max and raw_data in one column?

  - name: high_low
    data: raw_today, min, max
    modify: |-
     # raw_data (and min and max) 

The raw data should be used as rows, I want to use min max to style

[kenwiens]

I really like the new column header sort feature, however I have some legacy formatting that is preventing me from using it. Here is my table:

The last 3 rows (summation) are always at the bottom because I use a hidden column (attribute) I call “master_sort_value” where I can specify that the 3 rows will always come after my data rows. within the data rows I sort by kWh today.

When I sort using the new feature - it sorts all data in a row - so my summation rows are no longer at the bottom. Is there some way to limit which rows the column header sort affects?

Are there other ways to achieve what I am doing here? What I have works perfectly - it’s just that I can’t use the column header sort feature.

title: Power Draw - kWh & Cost
entities:
  include:
    - sensor.*power_template
sort_by:
  - master_sort_value
  - state-
strict: true
clickable: true
columns:
  - data: display_name_for_table
    name: Device
  - data: current_power_draw
    name: W
    modify: parseFloat(x).toFixed(0)
  - data: state
    name: kWh TDY
    modify: parseFloat(x).toFixed(3)
  - data: power_cost_today
    name: $ TDY
    modify: parseFloat(x).toFixed(2)
  - data: power_draw_yesterday
    name: kWh YDA
    modify: parseFloat(x).toFixed(3)
  - data: power_cost_yesterday
    name: $ YDA
    modify: parseFloat(x).toFixed(2)
  - data: power_draw_this_week
    name: kWh TWk
    modify: parseFloat(x).toFixed(2)
  - data: power_draw_last_week
    name: kWh LWk
    modify: parseFloat(x).toFixed(2)
  - data: power_cost_last_week
    name: $ LWk
    modify: parseFloat(x).toFixed(2)
  - data: power_draw_last_billing_month
    name: kWh LBM
    modify: parseFloat(x).toFixed(2)
  - data: power_cost_last_billing_month
    name: $ LBM
    modify: parseFloat(x).toFixed(2)
  - data: power_draw_this_billing_month
    name: kWh TBM
    modify: parseFloat(x).toFixed(2)
  - data: power_cost_this_billing_month
    name: $ TBM
    modify: parseFloat(x).toFixed(2)
  - data: master_sort_value
    name: sort value
    hidden: true
css:
  tbody tr+: 'color: black'
  tbody tr:nth-child(25)+: 'background-color: orange; color: blue;'
  tbody tr:nth-child(26)+: 'background-color: yellow; color: black;'
  tbody tr:nth-child(27)+: 'background-color: green; color: yellow;'

Thanks!

[Ildar_Gabdullin]

@kenwiens

data: master_sort_value

Does it mean that your sensors have an attribute called “master_sort_value”? And only for these 3 entities this attribute has some value?

As for your case: consider creating ANOTHER table w/o a header for these 3 entities; place both tables one after one. Probably you will have to define column widths to “sync” these tables…

[kenwiens]

Yes, each sensor has that attribute.

I was thinking about the 2 table solution - I wasn’t sure if I could do this without a space in between the tables or not. I didn’t even think about column widths - and I suppose when looking at this on my phone where I expand and contract the size (with my fingers) to zoom in and out - that it might go weird as the main table would zoom and the summation row table would stay at its original width?

[Ildar_Gabdullin]

Vertical space may be fixed by card-mod.
“Syncing” widths here seems to be only done by fixing them - for both tables ((((. Yes, it would not be as convenient as adaptive widths.

[kbrown01]

The recent update of flex-table broke any use of the “title” attribute within custom HTML for headings. See Sports Standings and Scores - #292 by cyberphox and the two following posts. If confirmed I can post a GITHUB issue.

This will cause an error:

 - name: <div title="Games Played">GP</div>

This is fine:

 - name: <div>GP</div>

I assume this is related to the sorting feature.

[Ildar_Gabdullin]

@kbrown01

the “title” attribute within custom HTML

Could you explain a purpose of this attribute?

[kbrown01]

Many of my headings have either shortened names (like “GP” or “C”).
These stand for “Games Played” or “Clinch Indicatior”.
And the Clinch indicator is even deeper as it could be “e” for eliminated, “x” for in playoffs, etc.

I use the title attribute so a mouseover the heading pops the browser built in display of an alternate description. It can be something like this:

        - name: >-
            <div title="Clinch Indicator:&#10; * : Clinched Presidents' Trophy
            (Best Regular-Season Record)&#10; x : Clinched Playoff Berth&#10; -
            : In The Hunt&#10; e : Eliminated from Playoff Contention">C</div>

So the header of the table displays “C” and on mouse over it displays what “C” means as well as all the values in the column.

It saves real estate, I could of course put in just a markdown block with the “key” but I do not prefer that for many reasons (scrolling up/down). See W3Schools Tryit Editor

These headings then on mouseover popup their real meaning in longer words and not abbreviations.

[Ildar_Gabdullin]

So, a “title” attribute stands for a displayed tooltip for a header.
This is a rather useful feature.
Since I am very far my HA and cannot reproduce & confirm this feature stopped working - I suggest you to create an issue on GitHub. Add a SHORT code to describe the tooltip feature - and describe what was broken after the latest update. Maybe this issue will be converted to FR “add a tooltip” then.

[jeffcrum]

Yes. I am working with the dev on github for this. I have just not had a chance to give them the useful info. I hope to this weekend.

[kbrown01]

There was already an issue posted in Git so I added to it. It appears fixed in an upcoming release.

since update to v0.7.4 - error: "cannot set properties of null (setting 'onclick')"

[hkapanen (Harri Kapanen)]

Hi,
I’d need advice on how to deal with a space in an element’s name in an attributed list?
For example, I have a sensor with an attribute called ROUTES containing a list of dicts as follows:

[{'ROUTE': '159', 'DESTINATION': 'Matinkylä (M)', 'ARRIVAL TIME': '17:03:00'},
{'ROUTE': '158', 'DESTINATION': 'Matinkylä (M)', 'ARRIVAL TIME': '17:11:00'},
{'ROUTE': '159', 'DESTINATION': 'Matinkylä (M)', 'ARRIVAL TIME': '17:18:00'}]

The code below works nicely for all the elements but the offending “ARRIVAL TIME”:

      - type: "custom:flex-table-card"
        title: Oxfot
        entities:
          - sensor.oxfot_e4936_all
        columns:
          - name: Saapuu
            data: ROUTES
            modify: x.ARRIVAL TIME
          - name: Linja
            data: ROUTES
            modify: x.ROUTE
          - name: Määränpää
            data: ROUTES
            modify: x.DESTINATION

Any ideas on how to deal with this?
Thanks!

[kbrown01]

IMHO that is invalid JSON. Keys should use " and not ’
See JSON where a key is a string and a string begins and ends with "

Have you tried like:

modify: "x.ARRIVAL TIME"
or

modify: >-
    "x.ARRIVAL TIME"