Flex-table-card

Thanks for the answer.
The first column gives a better result, but is still wrong:

type: custom:flex-table-card
sort_by: entries
entities:
  include: sensor.rss_feed*
columns:
  - name: ''
    data: entries
    modify: x.published
  - name: Video
    data: entries
    modify: >-
      '<a href="' + x.link +'" target="_blank"><img src="' +
      x.media_thumbnail[0].url + '"style="width: 10%"></a>'

flex-sort

First or second column - does not matter. Sorting is same. See a possible solution above.

I’m sorry I don’t see what’s wrong? That looks sorted to me by date correctly in the first column unless you want newest first then change your sort - https://github.com/custom-cards/flex-table-card/blob/0f0260f170660309906358254b8bb1ed7c301f63/docs/example-cfg-sorting-strict.md.

Or are you saying that the date is getting pulled incorrectly? If so that is not a flex-table problem.

1 post

the attribute is “published: 08.10.24 16:00”

Can you please describe it better?
I don’t quite understand what needs to be done.
Thank you very much!

You need to parse a value “DD.MM.YY hh:mm” and convert to a timestamp. Have no idea how it can be done in JS.

I am having an issue that I cannot figure out dealing with the Sports Standings that makes heavy use of flex table.

One field breaks the page with the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'displayValue')
    at eval (eval at <anonymous> (flex-table-card.js?hacstag=156292058077:413:42), <anonymous>:1:44)
    at flex-table-card.js?hacstag=156292058077:413:42
    at Array.map (<anonymous>)
    at DataRow.render_data (flex-table-card.js?hacstag=156292058077:402:35)
    at flex-table-card.js?hacstag=156292058077:122:47
    at Array.map (<anonymous>)
    at DataTable.add (flex-table-card.js?hacstag=156292058077:122:32)
    at flex-table-card.js?hacstag=156292058077:708:26
    at Array.forEach (<anonymous>)
    at FlexTableCard._fill_card (flex-table-card.js?hacstag=156292058077:704:18)
eval @ VM39381:1
(anonymous) @ flex-table-card.js?hacstag=156292058077:413
render_data @ flex-table-card.js?hacstag=156292058077:402
(anonymous) @ flex-table-card.js?hacstag=156292058077:122
add @ flex-table-card.js?hacstag=156292058077:122
(anonymous) @ flex-table-card.js?hacstag=156292058077:708
_fill_card @ flex-table-card.js?hacstag=156292058077:704
set hass @ flex-table-card.js?hacstag=156292058077:691
_createCard @ decluttering-card.js?hacstag=188686483100:192
Promise.then
set hass @ decluttering-card.js?hacstag=188686483100:186
value @ hui-card.ts:164
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1261
_$Ej @ reactive-element.ts:1233Understand this error

This field is within a larger set of things, only showing a snippet here:

        - name: <div>HOME</div>
          data: '[[attribute]]'
          modify: x.stats.find(y=>y["abbreviation"] == 'HOME').displayValue
        - name: <div>AWAY</div>
          data: '[[attribute]]'
          modify: x.stats.find(y=>y["abbreviation"] == 'AWAY').displayValue
        - name: <div>GF</div>
          data: '[[attribute]]'
          modify: x.stats.find(y=>y["abbreviation"] == 'GF').value
        - name: <div>GA</div>
          data: '[[attribute]]'
          modify: x.stats.find(y=>y["abbreviation"] == 'GA').value
        - name: <div>DIFF</div>
          data: '[[attribute]]'
          modify: x.stats.find(y=>y["abbreviation"] == 'DIFF').value
        - name: <div>Last</div>
          data: '[[attribute]]'
          modify: x.stats.find(y=>y["abbreviation"] == 'L10').displayValue
        - name: <div>STRK</div>
          data: '[[attribute]]'
          modify: x.stats.find(y=>y["abbreviation"] == 'STRK').value

Focusing on the data, again a snippet, it looks like this:

    {
        "id": "2",
        "name": "Home",
        "abbreviation": "HOME",
        "displayName": "Home",
        "shortDisplayName": "HOME",
        "description": "Home Record",
        "type": "home",
        "summary": "1-0-0",
        "displayValue": "1-0-0"
      },
      {
        "id": "3",
        "name": "Road",
        "abbreviation": "AWAY",
        "displayName": "Away",
        "shortDisplayName": "AWAY",
        "description": "Away Record",
        "type": "road",
        "summary": "0-0-0",
        "displayValue": "0-0-0"
      },
      {
        "id": "5",
        "name": "Last Ten Games",
        "abbreviation": "L10",
        "displayName": "Last Ten Games",
        "shortDisplayName": "L10",
        "description": "Record last 10 games",
        "type": "lasttengames",
        "summary": "1-0-0",
        "displayValue": "1-0-0, 0 PTS"
      },

As you can see from the above … the fields HOME, AWAY and L10 are all nearly the same in construction, at the same level. If I include L10 in the decluttering template, it errors as above and nothing is displayed. If I remove just L10, everyything works (obviously without the L10 field).

I have tried instead to use the “type” thinking that “L10” was bad, but it also does not work. I tried changing the name from “L10” but that does not work. THere is just something in that “L10” that is breaking flex-table with that error.

I can provide any other diagnostics I can, but I have run out of ideas.

The error itself does not mention “L10”. It mentions “displayName”, you have 3 items with this attribute.
Excude other 2 values from the card, leave only L10 - what will you see?

Yes, it is the L10 field and underneath the “displayValue” is the attribute.
Hang on for more, I think I know the issue.

Typical ESPN, it appears the “L10” field is missing on teams that have yet to play a game which should end in a few days as the season just started (or I have other JS for that to catch a bad field that I can wrap it).

And HOME, AWAY fields that are identically formatted and in the data returned from ESPN but exist at season start. Just L10 (which are the last 10 games) does not appear until they have played a game.

You are happy man )))
So, to solve the issue you need to check a presence of this entry.

Yep.

        - name: <div>L10</div>
          data: '[[attribute]]'
          modify: >-
            if(typeof x.stats.find(y=>y.abbreviation == 'L10') !== 'undefined'
            ){x.stats.find(y=>y["abbreviation"] == 'L10').summary}else{'-'}

Works a charm.

I would note that long ago I posted an enhancement request that I would have used. Using a plugin I would actually apply a function to all the fields and pass in field name and the attribute I wanted. I tested and it works great but it gets wiped after every update so I stopped using it.

2 Likes

I made use of flex table card to keep track of my many labels that are applied to entities, devices, automations and more.