custom-cards / flex-table-card

Highly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept
GNU General Public License v3.0
198 stars 23 forks source link

Attributes as source of columns #72

Closed viktak closed 9 months ago

viktak commented 2 years ago

Hi,

This is more of a question rather than a bug...

At the beginning of the documentation I read: "first the candidate rows have to be queried using wildcarding/regular expressions, leading to a set of entities (candidates)" Does this mean the candidates must be entities? Here is what I would like to accomplish:

I have an entity, that has json string as an attribute. That json string is a number of "records". I would like to display it in HA. When I saw your component I got excited, but now I'm not so sure...

Here is a sample of my json:

[
  {
    "field1": "1648269597",
    "field2": "50:02:91:65:ac:a8",
    "field3": "192.168.1.103",
    "field4": "officedoor-3240",
    "field5": "*"
  },
  {
    "field1": "1648256271",
    "field2": "00:24:8c:66:7f:54",
    "field3": "192.168.1.222",
    "field4": "test",
    "field5": "01:00:24:8c:66:7f:54"
  },
  {
    "field1": "1648259323",
    "field2": "b8:27:eb:cf:ed:a6",
    "field3": "192.168.1.3",
    "field4": "pihole",
    "field5": "01:b8:27:eb:cf:ed:a6"
  },
  {
    "field1": "1648257943",
    "field2": "e0:cb:4e:b5:13:2c",
    "field3": "192.168.1.99",
    "field4": "homeassistant",
    "field5": "01:e0:cb:4e:b5:13:2c"
  },
  {
    "field1": "1648268067",
    "field2": "50:02:91:e0:a9:a3",
    "field3": "192.168.1.113",
    "field4": "vNode-E0A9A3",
    "field5": "*"
  }
]

I'd like to display this in a tabular format.

daringer commented 2 years ago

yes, generally json support is something to be done at some point. But for now you could simply use the modify attribute to select one item from your json object, like if you have this:

  {
    "field1": "1648268067",
    "field2": "50:02:91:e0:a9:a3",
    "field3": "192.168.1.113",
    "field4": "vNode-E0A9A3",
    "field5": "*"
  }

you can simply do modify: x.field1 in your 1st column, then modify: x.field2 and so on... this will easy work if your data is just one mapping (like: {foo: bar}), if on the other side you have a list of objects, like this: [{..], {..}, {..}] then the list-to-rows expansion might kick-in and automatically expand each item from the list into separate rows in which you the could use modify: x.field1 again... at least this is in theory how it should work :nerd_face:

viktak commented 2 years ago

Thanks for getting back to me.

I'm not sure what exactly you really mean: I presume, the latter one is applicable to me as my JSON is a list. However, I still only have one entity with the above JSON as one of the attributes. So I don't know how I would create a workable UI of it. If you could show me a minimal example... :)

Anyway, don't sweat over it, I'll wait for the native JSON handling happily. In the meantime I was able to use the config-template-card like this (hope someone will find it useful):

  - type: 'custom:config-template-card'
    variables:
      - states['sensor.hostnames'].state
      - ''' Network Hosts as of '''
      - states['sensor.hostnames'].attributes.lastUpdated
    entities:
      - sensor.hostnames
    card:
      type: custom:list-card
      entity: sensor.hostnames
      title: '${ vars[0] + vars[1] + vars[2] }'
      feed_attribute: hosts
      columns:
        - title: Hostname
          field: field4
        - title: IP Address
          field: field3
          style:
            - text-align: center
        - title: MAC Address
          field: field2
          style:
            - text-align: center
EdLeckert commented 9 months ago

This is how you would do it with a flex-table-card, using a single entity input_text.hostnames with an attribute hosts containing the text shown in the original comment.

Note that title is a simple string, so I don't believe you could have a dynamic title as in the previous comment.

type: custom:flex-table-card
title: Network Hosts
entities:
  include: input_text.hostnames
columns:
  - name: Hostname
    data: hosts
    modify: x.field4
  - name: IP Address
    data: hosts
    modify: x.field3
    align: center
  - name: MAC Address
    data: hosts
    modify: x.field2
    align: center

hosts

viktak commented 9 months ago

@EdLeckert: Thank you for your solution! I'm gonna give it a go, although my workaround gives me an identical result. Thanks again!