Flex-table-card

Ildar_Gabdullin · November 10, 2023, 3:34pm

It is available, read docs.

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

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

tvdsluijs · November 15, 2023, 9:07am

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 · November 16, 2023, 8:59pm

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 · November 16, 2023, 11:17pm

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 · November 16, 2023, 11:32pm

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 · November 16, 2023, 11:35pm

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 · November 17, 2023, 12:51am

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 · November 17, 2023, 6:58pm

Could you explain a purpose of this attribute?

kbrown01 · November 17, 2023, 7:08pm

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 · November 17, 2023, 8:18pm

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 · November 17, 2023, 10:58pm

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 · November 18, 2023, 2:40pm

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

github.com/custom-cards/flex-table-card

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

opened 04:16AM - 16 Nov 23 UTC

PeterKawa

Hi, Since version v0.7.4 I get this error in lovelace cards where i use flex-…table-card in combination with auto-entities card: `cannot set properties of null (setting 'onclick')` When I install v0.7.3 again there's no error whatsoever. YAML of one such card: ``` type: custom:auto-entities filter: include: - entity_id: switch.* state: 'on' exclude: - entity_id: switch.*kaar* - entity_id: switch.*kers* - entity_id: switch.*lant* - entity_id: switch.rol* - entity_id: switch.*led* - entity_id: switch.*lamp* - entity_id: switch.*cloud* - entity_id: sensor.*state* - entity_id: curtain.8 card: type: custom:flex-table-card max_rows: 35 strict: true clickable: true title: (flex-table + auto-entities) css: table+: 'border: 20;' columns: - name: '' data: name icon: mdi:lightbulb-alert-outline suffix: '' align: center - name: '' data: state icon: mdi:lightbulb-on-10 align: right - name: Last update data: last_updated suffix: ' hrs' fmt: hours_passed - name: Last update data: last_updated suffix: ' min' modify: Math.round(((Date.now() - Date.parse(x)) / 36000.) * 0.6 ) sort: method: friendly_name reverse: false numeric: false ignore_case: true ``` Screenshot of error: ![image](https://github.com/custom-cards/flex-table-card/assets/74005072/952e2f49-5110-4b6e-89f5-4be39bd91654) When editing the card, it shows no error at the bottom, but the preview on the right only shows an alert: ![image](https://github.com/custom-cards/flex-table-card/assets/74005072/47214caa-7545-4f98-a84d-9adaa2efaf1e) Thanks in advance, Peter

hkapanen · November 18, 2023, 3:02pm

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 · November 18, 2023, 3:19pm

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"

hkapanen · November 18, 2023, 3:32pm

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.

kbrown01 · November 18, 2023, 3:36pm

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

hkapanen · November 18, 2023, 3:46pm

Unfortunately neither work.

kbrown01 · November 18, 2023, 3:51pm

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

hkapanen · November 18, 2023, 3:54pm

Yes, that works. Many thanks!!

hkapanen · November 19, 2023, 2:23pm

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?