Flex-table-card

tobilektri · August 6, 2024, 6:22pm

Hello everyone,

I have a problem that is only marginally related to the flex-table. However, I can’t get the trips of my car into the home assistant as a table.

Under the URL http://192.168.2.207:5000/vehicles/trips there is a list of all trips. It looks like this, for example:

[
  {
    "altitude_diff": 0,
    "consumption": 1.38,
    "consumption_km": 12.5454545454545,
    "distance": 11,
    "duration": 22,
    "id": 1,
    "mileage": 431.2,
    "speed_average": 30,
    "start_at": "Mon, 05 Aug 2024 05:09:43 GMT"
  },
  {
    "altitude_diff": 15,
    "consumption": 2.76,
    "consumption_km": 16.8292682926829,
    "distance": 16.4,
    "duration": 42.4666666666667,
    "id": 2,
    "mileage": 447.6,
    "speed_average": 23.1711145996861,
    "start_at": "Mon, 05 Aug 2024 15:12:40 GMT"
  },
  {
    "altitude_diff": -22,
    "consumption": 1.38,
    "consumption_km": 12.3214285714285,
    "distance": 11.2,
    "duration": 18.7333333333333,
    "id": 3,
    "mileage": 463.1,
    "speed_average": 35.8718861209966,
    "start_at": "Tue, 06 Aug 2024 05:37:48 GMT"
  },
  {
    "altitude_diff": 31,
    "consumption": 2.3,
    "consumption_km": 14.7435897435898,
    "distance": 15.6,
    "duration": 22.7166666666667,
    "id": 4,
    "mileage": 479.2,
    "speed_average": 41.2032281731474,
    "start_at": "Tue, 06 Aug 2024 15:18:52 GMT"
  }
]

I would now like to display this data in a table, with time, distance and consumption.

But I can’t manage to transfer the data to a sensor using a RESTful sensor.

I have already tried the following:

  - platform: rest
    name: corsa_e_trips
    resource: http://192.168.2.207:5000/vehicles/trips
    scan_interval: 60
    value_template: "{{ value_json }}"

Then the sensor is unknown. The same occours if i use

    value_template: "{{ value }}"

What works a little is the following:

  - platform: rest
    name: corsa_e_trips
    resource: http://192.168.2.207:5000/vehicles/trips
    scan_interval: 60
    value_template: "{{ value_json | length }}"
    json_attributes:
      - altitude_diff
      - consumption
      - consumption_km
      - distance
      - duration
      - id
      - mileage
      - speed_average
      - start_at

But then I only get the first value in the status attributes, not a list of all values. This of course means that the table-card cannot render a list.

Can someone help me how I can either get the JSON into a property or what I have to adjust so that I can display the trips in a table?

Thank you all very much!

Edit: If someone could try it out and adjust it themselves, that would help me a lot.
The JSON data would be available here: https://my-json-server.typicode.com/tobilektri/hassio-json/corsae

mihai.negru · September 4, 2024, 6:34am

Hello, I have the energi data service that feteches the data of electricity prices every day.

I want to be able to have 24 rows each with the hour of the day. Can I somehow fetch the hour from the “raw_today” attribute?

unit: kWh
raw_today:

hour: ‘2024-09-03T00:00:00+02:00’
price: 2.174
hour: ‘2024-09-03T01:00:00+02:00’
price: 2.113
hour: ‘2024-09-03T02:00:00+02:00’
price: 2.099
hour: ‘2024-09-03T03:00:00+02:00’
price: 2.112
hour: ‘2024-09-03T04:00:00+02:00’
price: 2.141
hour: ‘2024-09-03T05:00:00+02:00’
price: 2.177
hour: ‘2024-09-03T06:00:00+02:00’
price: 2.47
hour: ‘2024-09-03T07:00:00+02:00’
price: 2.699
hour: ‘2024-09-03T08:00:00+02:00’
price: 2.564
hour: ‘2024-09-03T09:00:00+02:00’
price: 2.396
hour: ‘2024-09-03T10:00:00+02:00’
price: 2.236
hour: ‘2024-09-03T11:00:00+02:00’
price: 2.154
hour: ‘2024-09-03T12:00:00+02:00’
price: 2.105
hour: ‘2024-09-03T13:00:00+02:00’
price: 2.085
hour: ‘2024-09-03T14:00:00+02:00’
price: 2.099
hour: ‘2024-09-03T15:00:00+02:00’
price: 2.122
hour: ‘2024-09-03T16:00:00+02:00’
price: 2.165
hour: ‘2024-09-03T17:00:00+02:00’
price: 2.773
hour: ‘2024-09-03T18:00:00+02:00’
price: 3.669
hour: ‘2024-09-03T19:00:00+02:00’
price: 4.766
hour: ‘2024-09-03T20:00:00+02:00’
price: 4.816
hour: ‘2024-09-03T21:00:00+02:00’
price: 3.243
hour: ‘2024-09-03T22:00:00+02:00’
price: 2.557
hour: ‘2024-09-03T23:00:00+02:00’

Maybe someone could give me a hint on how to get to the wanted result_

Ildar_Gabdullin · September 4, 2024, 6:43am

Check if this can help you.

bburwell · September 4, 2024, 6:00pm

I am loving this Flex-Table-Card - what an unbelievably flexible card. Can I put values next to an icon in a column?

Here is the code I have written and I am good with what I have now, but I would like to see the standings movement (up or down places) next to the icon

Here is part of my template code:

 columns:
        - name: Current Rank
          data: '[[attribute]]'
          modify: x.current
        - name: Up-Down
          data: '[[attribute]]'
          modify: |-
            if (x.current == x.previous)
              '<ha-icon icon="mdi:minus" >'
            else if (x.current > x.previous)
              '<ha-icon icon="mdi:arrow-down" style="color:red;">' + " " + (x.current-x.previous)
            else if (x.current < x.previous)
              '<ha-icon icon="mdi:arrow-up" style="color:green;" >' + " " + (x.previous-x.current)

And this is what I am currently seeing but it is not adding the values to the right of the icon. Thanks.

Would like to have it look more like this

Update: Figured it out
Just simple formatting

columns:
        - name: Current Rank
          data: '[[attribute]]'
          modify: x.current
        - name: Up-Down
          data: '[[attribute]]'
          modify: |-
            if (x.current == x.previous)
              '<ha-icon icon="mdi:minus" >'
            else if (x.current =="0")
              '<ha-icon icon="mdi:bomb" >'
            else if (x.previous == "0")
              '<div><ha-icon icon="mdi:hand-clap" style="color:blue;"></ha-icon>&nbsp;' +  "New " + '</div>';
            else if (x.current > x.previous)
              '<div><ha-icon icon="mdi:arrow-down" style="color:red;"></ha-icon>&nbsp;' +  "Down "+ (x.current - x.previous) + '</div>';
            else if (x.current < x.previous)
              '<div><ha-icon icon="mdi:arrow-up" style="color:green;"></ha-icon>&nbsp;' + "Up "+ (x.previous - x.current) + '</div>';

kaybie · September 11, 2024, 3:26pm

Is there a way to hide a row based on one of the column values?

Ildar_Gabdullin · September 11, 2024, 9:01pm

Try using auto-entities as an”input filter” and exclude an entity dependently on it’s attribute.

kaybie · September 11, 2024, 9:53pm

Fab! That worked nicely. Thank-you

Novan007 · September 23, 2024, 10:50am

Is there a way to changing the color of the text by hovering.

Novan007 · September 23, 2024, 3:50pm

ok found it

LasseA · September 26, 2024, 4:07am

Started to use the flex table, very compact and nice. Can I empty rows, would like them as separation of diffrent data, also can I get the units from differnt sensors ie ‘data: state’?
Some icons are also missing when, ‘data: icon’…

Ildar_Gabdullin · September 26, 2024, 10:19am

If icon is not exposed as an attribute - then it will not be shown.

Ildar_Gabdullin · September 26, 2024, 10:21am

To show an empty row - make a font transparent. But you cannot skip a row - each set of data comes to a next row.

Ildar_Gabdullin · September 26, 2024, 10:23am

Unit is a separate attribute.

newneo · September 26, 2024, 10:57am

How do I sort by date correctly?

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

flex-tablet-card-sortirung

LasseA · September 26, 2024, 8:01pm

Great, got some units, would be nice the were in the same column but this works for now. Going to try with templeate for the undefined.
A test with a space row ‘A—’, that’s a fake sensor, just figure out a temple that return spaces or maybe ‘-------’.
And the missing icons, I did select some in the GUI they were setup in customize or configuration before.
Thank’s for the tips.
/LA

bburwell · September 28, 2024, 11:24pm

Is there a way to do this? I have a sensor that has 2 attributes - team & events. I will have multiple sensors for each team as this is their schedule for the year. The Team has the team abbreviation in ‘team.abbreviation’. In this case ASU. It looks like this:

I will eventually send multiple sensors to this template but for right now just trying to get it to work. So Here is my card/whole dashboard setup:

views:
  - title: Testing 23
    path: testing-23
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 30% 1fr
          grid-template-areas: |
            "left right"
        cards:
          - type: markdown
            content: Holding area for notes
            view_layout:
              grid-area: left
          - type: custom:decluttering-card
            template: ncaa_team_schedules
            variables:
              - title: Teams
              - entity: sensor.ncaaf_arizona_state_university_schedule
              - events: events
              - team: team

Working template looks like this but not what I want:

ncaa_team_schedules:
    card:
      type: custom:flex-table-card
      title: name
      css:
        table+: 'padding: 0px; width: 1200px;'
        tbody tr td:first-child: 'width: 5%;'
        tbody tr td:nth-child(2): 'width: 5%;'
        tbody tr td:nth-child(n+2): 'width: 5%;'
        tbody tr:hover: 'background-color: black!important; color:white!important;'
        tbody tr td:nth-child(5): 'background-color: mintcream; color: white;'
      card_mod:
        style:
          .: |
            ha-card {
              overflow: auto;
            }
          $: |
            .card-header {
              padding-top: 6px!important;
              padding-bottom: 4px!important;
              font-size: 14px!important;
              line-height: 14px!important;
              font-weight: bold!important;
            }
      sort_by: events+
      entities:
        include:
          - '[[entity]]'
        exclude: '[[excluded_entities]]'
      columns:
        - name: Game Date
          data: '[[events]]'
          modify: x.date.split('T')[0]
        - name: Teams
          data: '[[events]]'
          modify: x.shortName
        - name: Home Winner
          data: '[[events]]'
          modify: x.competitions[0].competitors[0].winner
        - name: Away Team
          data: '[[events]]'
          modify: >-
            '<div><img src="' +
            x.competitions[0].competitors[1].team.logos[0].href + '"
            style="height: 20px;vertical-align:middle;">&nbsp;' +
            x.competitions[0].competitors[1].team.displayName + '</div>'
        - name: Final Score
          data: '[[events]]'
          modify: |-
            if (typeof x !== 'undefined' &&
                typeof x.competitions[0].competitors[0].score !== 'undefined' &&
                typeof x.competitions[0].competitors[1].score !== 'undefined') {
              let content = '';
              let icon = '<ha-icon icon="mdi:minus" style="fill:white;"></ha-icon>';
              let home_score = x.competitions[0].competitors[0].score.value;
              let away_score = x.competitions[0].competitors[1].score.value;


              if (home_score > away_score) {
                content = `<div style="font-size:20px;color:red;">${away_score}</div>` +
                          `<div style="font-size:20px;color:black;margin:0 5px;">-</div>` +
                          `<div style="font-size:20px;color:green;">${home_score}</div>`;
              } else if (home_score < away_score) {
                content = `<div style="font-size:20px;color:green;">${away_score}</div>` +
                          `<div style="font-size:20px;color:black;margin:0 5px;">-</div>` +
                          `<div style="font-size:20px;color:red;">${home_score}</div>`;
              } else {
                content = `<div style="font-size:20px;color:black;">${away_score}-${home_score}</div>`;
              }
                            
              content = `<div style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;">` +
                content +
                `</div>`
                
              content;
            } else {
              '';
            }
        - name: Home Team
          data: '[[events]]'
          modify: >-
            '<div><img src="' +
            x.competitions[0].competitors[0].team.logos[0].href + '"
            style="height: 20px;vertical-align:middle;">&nbsp;' +
            x.competitions[0].competitors[0].team.displayName + '</div>'
        - name: Attendance
          data: '[[events]]'
          modify: x.competitions[0].attendance

What I want is to put a W(in) or L(oss) next to the score in the Final Score column for that teams schedule - So ASU would have a W in rows, 1,2,4 and L in 3.

So my thought was to use something like this:

modify: |-
   if (x.competitions[0].competitors[0].winner === 'true' && '[[team]]'.abbreviation === x.competitions[0].competitors[0].team.abbreviation) {
     return '<div style="color:green;"><ha-icon>&nbsp; W </ha-icon></div>';
   } else {
     return '<div style="color:red;"><ha-icon>&nbsp; L </ha-icon></div>';
   }

Is that possible?

Thanks.

newneo · September 30, 2024, 8:28am

Can’t anyone help me? Sort by date!?
My Post !!!

bburwell · September 30, 2024, 11:31pm

Have you tried moving the date entry to the first column? As far as I know that is the only column automatically sorted. If you like the flow you have then create another 1st column with the date and then hide it.

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>'

Ildar_Gabdullin · September 30, 2024, 11:39pm

Is this attribute really has a format “DD.MM.YY hh:mm” ?
Then it will not be properly sorted.
A possible way:

Add one more HIDDEN column for this attribute.
This column must contain “modify” - convert the value BACK to a “normal” timestamp format like “2024-09-30 21:41”.
Set a fixed sort for this hidden column & disable sorting by a header.

LasseA · October 4, 2024, 4:12am

Partly solved, got a nicer look, my oppinment, for sepatator and added some for ‘unknown’.
Did like this:

template:
    - name: A____
      unit_of_measurement: 'm/s'
      icon: mdi:arrow-right-bold-outline
      state: >
        {% if true %} -666 {% endif %}    
    - name: X____
      icon: mdi:arrow-right-bold-outline
      state: >
        {% if true %} ------  {% endif %}

        columns:  
          - name: ''
            data: icon
            align: center
          - name: Sensor
            data: friendly_name
            align: left
            modify: |-
                if (x == "A____")
                 '<div style="color:lightblue;">-------</div>'
                 else  x            
          - name: Value
            data: state
            align: left
            modify: |-
                if (x == "unknown")
                    '<div style="color:red;">------</div>'
                else if (x == -666)
                    '<div > </div>'
                 else  x
          - name: ' '
            data: unit_of_measurement
            align: left
            modify: |-
                if (x == "m/s")
                 '<div > </div>'
                 else  x