Flex-table-card

Share your Projects! Dashboards & Frontend
111

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

112

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:

image
image1772×876 99 KB

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!

113

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…

114

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?

115

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.

116

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.

117

Could you explain a purpose of this attribute?

118

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.

image
image1656×916 169 KB

1 Like
119

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.

120

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.

1 Like
121

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

122

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!

123

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"
124

Thanks for the suggestions! Unfortunately the first errors out as the original code and the second one prints literally “x.ARRIVAL TIME” instead of the value. The data comes from a custom integration outside my control, so cannot change its format.

125

how about:

modify: >-
    {x.ARRIVAL TIME}

Or

modify: x.["ARRIVAL TIME"]

I would think the last one using bracket notation should work. I cannot remember if you use “.” and [ ] or just [ ] as in:

modify: x["ARRIVAL TIME"]
126

Unfortunately neither work.

127

See mod above … x should represent each route so x["ARRIVAL TIME"] without the dot should be correct.

128

Yes, that works. Many thanks!!

1 Like
129

I’d like to change the colour of the first row depending on the value of the sensor state (row data comes from it’s attributes). Static colour change is easy with CSS options, but how to make it dynamic?

130

Use a native styling option - but use a user-defined variable instead of a color.
Define this variable dynamically by card-mod.

Update 24.11.23: added a description of this method here.

1 Like