Flex-table-card

[typxxi (wolf)]

Thanks for the idea and suggestions.

What I have shared were simply all sensors added by the integration and for my own comparison and first impressions.

The old men is interesting in tech, so he is aware that strings are beneficial especially in such circumstances where you have 2 chimneys for the oil central heating and a second one from the wood oven, then also a central dormer of 7m width causing shadowing issues as the trees beyond the border of the property.

So he wants to know the current power and the energy produced so far which now has been moved for him into a floorpanel of the roof .

As you can see the dormer is dividing the souther roof in 2 halfs which have 2 different angles cause in the west or left part the white part is a a wintergarden with a glas roof and left of that green panel you can see the wood oven chimney and its shadow nearly reaching the second line of panels.

But I will use your suggestion for the table needed for the analysis during the day.
Thanks a lot !

UPDATE: the figures on the panels are showing current power in W / kWp and not per string cause the strings have different sizes and some use different panels.
Therefore this is power per kWp for a string.

The 3 totals below on the bottom are for 2 different accounting systems with green and yellow while the total / sum is in the middle:
right now 1,7 kW power in the late noon

the floor plan has a title which I had cut away to keep it more compact where it is refering to power / kWp

[ChequeM8]

Did you get anywhere with not scrolling the column titles, just the body? Thanks.

[Captain_Harlock]

Hello everyone,
an unusual question regarding @Ildar_Gabdullin’s card:
How can I represent the attribute values ​​of the following sensor in a table with two columns (name and value)?
Thanks

[Ildar_Gabdullin]

@Captain_Harlock

regarding @Ildar_Gabdullin’s card:

Not my card, I just created the thread.

[Captain_Harlock]

@Ildar_Gabdullin

Not my card, I just created the thread.

Ok, so congratulations for creating the thread.
Do you have any suggestions regarding my question?
Thanks

[jeffcrum]

Well, that is a great way to NOT get any help.

No one is obligated to spend the time they do helping people with their questions. Understand that it often takes a LOT of time playing around with code and testing before answering.

So, here is a hint for you to go play and test:
You need to do something to turn those attributes into key/value pairs that can then go into flex-table-card and mapped to the two columns you want them in. Multiple ways to do it. Have fun.

[ando2040]

Hi, I have a question on combining multiple similar entities into a table please, displaying one row per entity. It looks like the flex-table-card ought to be able to help, but although this works with one entity, it stops working as soon as I add the second entity (which contains identical attribute names). What am I missing? Or will this never work?

One entity output:

Two entity output:

type: custom:flex-table-card
entities:
  include: >-
    binary_sensor.octopus_energy_target_best_agile_one_hour
    binary_sensor.octopus_energy_target_best_agile_two_hour
columns:
  - data: next_duration_in_hours
    modify: ''
    name: Hours
  - data: next_time
    modify: >-
      (new Date(x)).toLocaleString("en-GB", {hour:"2-digit", minute:"2-digit",
      timeZoneName:"short"})
    name: Start
  - data: overall_average_cost
    modify: x*100
    name: Price (p)

[jeffcrum]

entities:
  include:
    - binary_sensor.octopus_energy_target_best_agile_one_hour
    - binary_sensor.octopus_energy_target_best_agile_two_hour

or

entities:
  include: binary_sensor.octopus_energy_target_best_agile*

[teskanoo]

@Captain_Harlock

How can I represent the attribute values ​​of the following sensor in a table with two columns (name and value)?

If I recall correctly there is a CSS solution to transpose the data in a table…

I think this was it.

tr { display: block; float: left; }
th, td { display: block; }

[ando2040]

@jeffcrum

binary_sensor.octopus_energy_target_best

Thank you! I hoped it was something stupid but I couldn’t see it - and although I read about the wildcard I thought that would make it harder to debug, not easier and I didn’t try it!

[nhuythuy (Thuy Nguyen)]

Hi all,

I am newbie to HASS. I can extract and display single value from a .json payload (as the .json payload example below) on the GUI without any issue. I tried to find similar issue as I have today but still cannot find any similar issue/solution so I am creating this topic.

I have 2 door sensors monitoring door open/close state with open duration of each sensor as .json payload below:

{
"main_door": false,
"main_door_open_duration": 0,
"back_door": true,
"back_door_open_duration": 10,
"version": "1.1"
}

I would like to use flex-table-card to display state + open duration of both sensors like this (read only):

I tried to created a mqtt sensor in configuration.yaml file, but I cannot get it work

This is my mqtt sensor config.:

mqtt:
  sensor:
    - name: "DoorMainX"
      state_topic: "home/main/sensor/states"
      value_template: '{{ value_json.main_door, value_json.main_door_lo |float|round(0) }}'

I also tried with template sensor in configuration.yaml file as below but it does not work neither:

template:
- sensor:
  - name: DoorMainY
    state: "{{ states('sensor.entrance_main_door'), states('sensor.entrance_main_door_opened_duration') }}"

With those above configuration, I received only table as below (missing duration):

Could you please help me to get separated State, Duration columns with correct information? Please show me which file I should add/modify configuration also (as a newbie needed)

Thanks in advance!

Thuy

[Captain_Harlock]

@teskanoo

If I recall correctly there is a CSS solution to transpose the data in a table…

I think this was it.

tr { display: block; float: left; }
th, td { display: block; }

Hello and thanks for the reply.
Please, could you give me a complete practical example of how I could create the table with the two columns?
Thanks again

[teskanoo]

Sorry Giovanni, I do not have a complete example, I was just offering you a proposed solution using CSS alone to transpose the elements in your existing table.

How to apply CSS to a table is described here.

Examples - CSS / Low-Level Formatting

css:
  # Float all rows to the left
  'tr': 'display: block; float: left;'

  # Display columns as rows
  'th, td': 'display: block;'

A more flexible solution would probably be obtained by first massaging your data into the correct JSON data structure that sorts your needs.

For this you would need to create a template sensor based on your actual sensor.

The data structure you would create in the template sensor state would be a list of objects { }

[
    {
        "name" : "Driver",
        "value" : "Epsom X10 Series",
    },
    {
        "name" : "PrintJobs",
        "value" : "None",
    },
    {
        "name" : "IsBusy",
        "value" : false,
    },
]

This is what your template sensor might look like, you would need to change the ‘sensor.dell_xxxxxxxxxxxxxxxx’ to the appropriate sensor name

template:
  - sensor:
      - name: "Printer Data for Flex Table Card"
        unique_id: "printer_data_for_flex_table_card"
        state: >
          {%- set SENSOR = 'sensor.dell_xxxxxxxxxxxxxxxx' -%}
          {%- set ns = namespace(results= []) -%}
          {%- for key,item in states[SENSOR].attributes.items() -%}
            {%- set new_row =  {  'attribute_name': key,  'attribute_value': item } -%}
            {%- set ns.results =  ns.results + [new_row] -%}
          {%- endfor -%}
          {{- ns.results -}}

Then in your flex table card you tell it to get its data from your template sensor (sensor.printer_data_for_flex_table_card) instead of the actual sensor.

Here is some example output of the above template sensor (using one of my power outlet sockets)

 {%- set SENSOR = 'switch.laundry_suite_plug_upper_switch' -%}

[
  {
    "attribute_name": "friendly_name",
    "attribute_value": "Laundry Suite Plug Upper 01"
  },
  {
    "attribute_name": "manufacturer",
    "attribute_value": "Third Reality, Inc"
  },
  {
    "attribute_name": "vendor",
    "attribute_value": "Third Reality, Inc"
  },
  {
    "attribute_name": "device_class",
    "attribute_value": "outlet"
  },
  {
    "attribute_name": "model",
    "attribute_value": "3RSP02028BZ"
  },
  {
    "attribute_name": "icon",
    "attribute_value": "mdi:power-socket-us"
  },
  {
    "attribute_name": "unit_no",
    "attribute_value": 18
  },
]
``

[Captain_Harlock]

Hi @teskanoo
I tried with CSS:

@teskanoo

css:
  # Float all rows to the left
  'tr': 'display: block; float: left;'

  # Display columns as rows
  'th, td': 'display: block;'

but couldn’t get it to work…
So I followed your second advice:

@teskanoo

A more flexible solution would probably be obtained by first massaging your data into the correct JSON data structure that sorts your needs.

I created this template sensor:

template:
  - sensor:
      - name: "Printer Data for Flex Table Card"
        unique_id: "printer_data_for_flex_table_card"
        state: >
          {%- set SENSOR = 'sensor.dell_xps_printers_epson_xp810_xp_810series' -%}
          {%- set ns = namespace(results= []) -%}
          {%- for key,item in states[SENSOR].attributes.items() -%}
            {%- set new_row = { 'attribute_name': key, 'attribute_value': item } -%}
            {%- set ns.results = ns.results + [new_row] -%}
          {%- endfor -%}
          {{- ns.results -}}

The template seems to work correctly and it creates the JSON:

But, after restarting HA, in “Developer tools” I see “unknown”:

Please I would like to ask you two things:

1. Shouldn’t I find the values ​​of the newly created sensor in the “STATES” tab?

2. Once I get the custom sensor working, is the following code correct to retrieve the data in the flex table card?

Thanks

[teskanoo]

I think you’re seeing ‘unknown’ for the template sensor because there is a hard limit of 255 characters for the state of any entity.

The JSON data that your base entity creates is clearly longer than 255 characters and therefore exceeds that limit.

You may be able to get it under the limit by altering the ‘column names’ er have used

You could change ‘attribute_name’ to ‘n’
You could change ‘attribute_value’ to ‘v’

That will save you 27 characters per row of output

template:
  - sensor:
      - name: "Printer Data for Flex Table Card"
        unique_id: "printer_data_for_flex_table_card"
        state: >
          {%- set SENSOR = 'sensor.dell_xps_printers_epson_xp810_xp_810series' -%}
          {%- set ns = namespace(results= []) -%}
          {%- for key,item in states[SENSOR].attributes.items() -%}
            {%- set new_row = { 'n': key, 'v': item } -%}
            {%- set ns.results = ns.results + [new_row] -%}
          {%- endfor -%}
          {{- ns.results -}}

if that does not make it short enough, you will have to relocate the data for the table to become an attribute of the template sensor (‘flex_data:’) instead of being the ‘state:’ of the template sensor

template:
- sensor:
  - name: "Printer Data for Flex Table Card"
    unique_id: "printer_data_for_flex_table_card"
    # We are going to use the printer's state as the state for the template sensor
    state: >
      {%- set SENSOR = 'sensor.dell_xps_printers_epson_xp810_xp_810series' -%}
      {{- states( SENSOR ) -}}

    attributes:
      flex_data: >
        {%- set SENSOR = 'sensor.dell_xps_printers_epson_xp810_xp_810series' -%}
        {%- set ns = namespace(results= []) -%}
        {%- for key,item in states[SENSOR].attributes.items() -%}
          {#- Filtering: You can filter out attributes you don't need here -#}
          {%- if key in ['icon', 'friendly_name'] -%}
            {%- continue -%}
          {%- endif -%}
          {#- End Filtering -#}
          {%- set new_row = { 'attribute_name': key, 'attribute_value': item } -%}
          {%- set ns.results = ns.results + [new_row] -%}
        {%- endfor -%}
        {{- ns.results -}}

And your Flex Table config looks (something) like this.
You only need the YAML data: key defined when you are getting the data from an attribute

type: 'custom:flex-table-card'
entities:
  include: 'sensor.dell_xps_printers_epson_xp810_xp_810series'
columns:
- name: Name
  data: flex_data
  modify: x.attribute_name
- name: Value
  data: flex_data
  modify: x.attribute_value

[Captain_Harlock]

@teskanoo

You may be able to get it under the limit by altering the ‘column names’ er have used

By changing the column names the final JSON contains 1228 characters…

[{'n': 'Name', 'v': 'EPSON-XP810 (XP-810 Series)'}, {'n': 'Jobs', 'v': 0}, {'n': 'Location', 'v': 'http://[fe80::ae18:26ff:fe67:2d38%20]:80/WSD/DEVICE'}, {'n': 'Driver', 'v': 'EPSON XP-810 Series'}, {'n': 'PrintJobs', 'v': []}, {'n': 'Status', 'v': 'Offline'}, {'n': 'AveragePagesPerMinute', 'v': 0}, {'n': 'HasPaperProblem', 'v': False}, {'n': 'IsBusy', 'v': False}, {'n': 'IsDoorOpened', 'v': False}, {'n': 'IsInError', 'v': False}, {'n': 'IsInitializing', 'v': False}, {'n': 'IsNotAvailable', 'v': False}, {'n': 'IsOffline', 'v': True}, {'n': 'IsIOActive', 'v': False}, {'n': 'IsOutOfMemory', 'v': False}, {'n': 'IsOutOfPaper', 'v': False}, {'n': 'IsPaperJammed', 'v': False}, {'n': 'IsOutputBinFull', 'v': False}, {'n': 'IsManualFeedRequired', 'v': False}, {'n': 'IsPaused', 'v': False}, {'n': 'IsPendingDeletion', 'v': False}, {'n': 'IsPowerSaveOn', 'v': False}, {'n': 'IsPrinting', 'v': False}, {'n': 'IsProcessing', 'v': False}, {'n': 'IsPublished', 'v': False}, {'n': 'IsQueued', 'v': False}, {'n': 'IsTonerLow', 'v': False}, {'n': 'IsWaiting', 'v': False}, {'n': 'IsWarmingUp', 'v': False}, {'n': 'NeedUserIntervention', 'v': False}, {'n': 'PrintingIsCancelled', 'v': False}, {'n': 'icon', 'v': 'mdi:printer'}, {'n': 'friendly_name', 'v': 'DELL-XPS EPSON-XP810 (XP-810 Series)'}]

@teskanoo

if that does not make it short enough, you will have to relocate the data for the table to become an attribute of the template sensor (‘flex_data:’) instead of being the ‘state:’ of the template sensor

In this way, I get the following error in the logs:

Invalid config for 'template' at configuration.yaml, line 396: expected a dictionary for dictionary value 'sensor->0->attributes', got "flex_data:\n {%- set SENSOR = 'sensor.dell_xps_printers_epson_xp810_xp_810series' -%}\n {%- set ns = namespace(results= []) -%}\n {%- for key,item in states[SENSOR].attributes.items() -%}\n {#- Filtering: You can filter out attributes you don't need here -#}\n {%- if key in ['icon', 'friendly_name'] -%}\n {%- continue -%}\n {%- endif -%}\n {#- End Filtering -#}\n {%- set new_row = { 'attribute_name': key, 'attribute_value': item } -%}\n {%- set ns.results = ns.resul...

I think depends on the ‘0’ that returns the code line 2:

[teskanoo]

@teskanoo

    attributes: >
      flex_data:
        {%- set SENSOR = 'sensor.dell_xps_printers_epson_xp810_xp_810series' -%}
        {%- set ns = namespace(results= []) -%}

It was a typo by me - I put the ‘>’ in the wrong place to start the jinja code. It should be (now corrected above)

    attributes:
      flex_data: >
        {%- set SENSOR = 'sensor.dell_xps_printers_epson_xp810_xp_810series' -%}
        {%- set ns = namespace(results= []) -%}

[binhton]

I am trying to create table listing daily energy consumption from my Victron inverter, PV generation, and Grid import like this from Solar Assistant. I can’t find instruction to do that. Anyone can point me to an example?

[Captain_Harlock]

It works!
Your help was truly providentialI.
Thank you very much for your patience, kindness and collaboration

[Captain_Harlock]

Hi!
I had inserted the code of the custom sensor (template) directly into the configuration.yaml file and it worked correctly.
Then, however, I created a package with all the printer sensors in which I also inserted this custom sensor (template) in this way:

template:
  sensors:
    printer_data_for_flex_table_card:
      friendly_name: "Printer Data for Flex Table Card"
      # We are going to use the printer's state as the state for the template sensor
      value_template: >
        {% set SENSOR = 'sensor.dell_xps_printers_epson_xp810_xp_810series' %}
        {{ states( SENSOR ) }}
      attributes:
        flex_data: >
          {% set SENSOR = 'sensor.dell_xps_printers_epson_xp810_xp_810series' %}
          {% set ns = namespace(results= []) %}
          {% for key,item in states[SENSOR].attributes.items() %}
            {# Filtering: You can filter out attributes you don't need here #}
            {% if key in ['icon', 'friendly_name'] %}
              {% continue %}
            {% endif %}
            {# End Filtering #}
            {% set new_row = { 'attribute_name': key, 'attribute_value': item } %}
            {% set ns.results = ns.results + [new_row] %}
          {% endfor %}
          {{ ns.results }}

but I receive the following error:

Invalid config for 'template' at packages/package_stampante.yaml, line 105: 'attributes' is an invalid option for 'template', check: sensors->printer_data_for_flex_table_card->attributes

Plase, could you still help me solve this problem?
Thanks