How to nicely output the sensor attribute which is a variable lenght list of IPv6 addresses

[drew-kun]

Hi everyone!
I cannot think of the way to output the list of IPv6 addresses nicely in lovelace.
I have a sensor from Android companion app sensor.android_ipv6_addresses containing the ip6_addresses attribute, which is a list of all IPv6 addresses of the device assigned at the moment (depending on the current network config, so the length of this list is variable of course).

I currently use this the following, but it loos nicely only when there is just one IP address in the list:

cards:
- type: vertical-stack
  cards:
  - type: entities
    entities:
      - type: custom:fold-entity-row
        padding: 0
        group_config:
          secondary_info: last-changed
        head:
          type: custom:multiple-entity-row
          name: IPv4
          icon: 'mdi:ip'
          entity: sensor.andrew_smartphone_public_ip_address
          show_state: false
          entities:
          - entity: sensor.andrew_smartphone_wifi_ip_address
            name: Private
            hide_if:
              value: "<not connected>"
        entities:
        - type: conditional
          entity: sensor.andrew_smartphone_ipv6_addresses
          conditions:
          - entity: sensor.andrew_smartphone_ipv6_addresses
            state_not: 0
          row:
            type: custom:multiple-entity-row
            name: IPv6
            icon: 'mdi:numeric-6-box'
            entity: sensor.andrew_smartphone_ipv6_addresses
            attribute: ip6_addresses

If there are more IPv6 (which is normal), the UI looks this way (Note, how it goes over the card borders on the right):

Ideally, I would like to have a multi-line list of all the IPv6 addresses (within the fold). But how to achieve that? The number of IPv6 addresses varies depending on the network config, so I cannot convert the info from the attribute to the individual template sensors etc…

What would you suggest in this case? I would appreciate your advises! Thank you.

[Ildar_Gabdullin]

Go to Dev tools → State
Select your entity.
Copy a content of your entity:

and then post it here.
A possible presentation of complex data depends on a structure.
For instance: a “zone” entity contains a “persons” attribute which is a list and may be shown in flex-table-card:

type: custom:flex-table-card
entities:
  include: zone.home
columns:
  - name: persons
    data: persons

In general, complex structures of a variable length may be shown in a stock Markdown card.

[drew-kun]

Hi @Ildar_Gabdullin Thank you for reply!
Here is the entity attributes (here it’s just a link-local ipv6 address but you can see it’s a list):

state_class: measurement
ip6_addresses:
  - fe80::b819:70d:7eba:24ff/64
unit_of_measurement: address(es)
icon: mdi:ip
friendly_name: Andrew Smartphone IPv6 addresses

Not sure how to make it look good in UI…

[Ildar_Gabdullin]

Good, then check my variant for “zone” above - similar structure.
Imho, using flex-table-card for ONE-column-table is a bit overkill, same table may be made in Markdown:

type: markdown
content: |-
  Persons
  :---:
  {% for PERSON in state_attr('zone.home','persons') -%}
    {{ PERSON }} {{"\n"}}
  {%- endfor %}
card_mod:
  style:
    ha-markdown $: |
      table {
        width: 100%;
      }
      th {
        background-color: orange;
      }
      tbody tr:nth-child(even) {
        background-color: lightgrey;
      }

[drew-kun]

But how can I add this table to my current structure (fold-entity-row with conditional)?
It seems to be impossible to use the markdown card in the custom:fold-entity-row…

        type: custom:fold-entity-row
        padding: 0
        group_config:
          secondary_info: last-changed
        head:
          type: section
          label: IP Info
        entities:
        - type: conditional
          entity: sensor.andrew_smartphone_ipv6_addresses
          conditions:
          - entity: sensor.andrew_smartphone_ipv6_addresses
            state_not: 0
          row:
            type: markdown
            entity: sensor.andrew_smartphone_ipv6_addresses
            content: |-
              IPv6 Addresses
              :---:
              {% for ipv6 in state_attr('sensor.andrew_smartphone_ipv6_addresses','ip6_addresses') %}
                {{ ipv6 }} {{"\n"}}
              {% endfor %}

Could you please advise?

[Ildar_Gabdullin]

@drew-kun

        entities:
        - type: conditional
          ...
          row:
            type: markdown

You cannot place a card (which Markdown is) as a row.
A workaround - wrap Markdown into hui-element.
Try this one untested:

        entities:
        - type: conditional
          ...
          row:
            type: custom:hui-element
            card_type: markdown
            ...

[drew-kun]

Thank you, that work… My last version of the yaml looks this way:

      - <<: *fold-entity-row
        head:
          type: custom:multiple-entity-row
          name: IPv4
          icon: 'mdi:ip'
          entity: sensor.andrew_smartphone_public_ip_address
          show_state: false
          entities:
          - entity: sensor.andrew_smartphone_wifi_ip_address
            name: Private
            hide_if:
              value: "<not connected>"
        entities:
        - type: conditional
          entity: sensor.andrew_smartphone_ipv6_addresses
          conditions:
          - entity: sensor.andrew_smartphone_ipv6_addresses
            state_not: 0
          row:
            type: custom:hui-element
            card_type: markdown
            icon: 'mdi:numeric-6-box'
            entity: sensor.andrew_smartphone_ipv6_addresses
            content: |-
              <ha-icon icon='mdi:numeric-6-box'></ha-icon> IPv6
              {% for ipv6 in state_attr('sensor.andrew_smartphone_ipv6_addresses','ip6_addresses') %}
                {{ ipv6 }} {{"\n"}}
              {% endfor %}

The result is:

Now here is the question… Is there any way to:
1 - remove the board around the markdown card?
2 - align the icon with the fold head icon so they are on the same level.
3 - can I also align IPv6 addresses to the right side of the card (so they will be located under the IPv4 Private address in this case)?

In short, I want this to have the same style/look (in terms of icon/text position) as in this picture (because it’s all in the same fold, just different nested subfolds):

[Ildar_Gabdullin]

Further alterations may be done by card-mod.
Go to the main card-mod thread & ask there.