Flex-table-card

mgosselink · December 19, 2022, 1:33pm

I’m using the flex-table to show some detailed weather informaton. For the wind bearing I’d like to show a rotated arrow using a ha-icon:

Schermafbeelding 2022-12-19 om 14.31.57

type: custom:flex-table-card
entities:
  include:
    - weather.forecast
columns:
  - name: Wind
    data: forecast
    modify: >-
      '<ha-icon icon="mdi:arrow-up">'

I tried css to rotate the arrow but every line has it’s own wind bearing. So using the css is cumbersome if the forecast has a lot of lines.

I tried:

    modify: '''<ha-icon icon="mdi:arrow-up" style="transform:rotate(45deg)">'''

That didn’t work either.

Does anyone have a hint?

Ildar_Gabdullin · December 19, 2022, 2:31pm

Check this:

input_number:
  test_angle:
    min: 0
    max: 360
    step: 5
    mode: slider

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_angle

  - type: custom:flex-table-card
    title: 'icon: rotate'
    entities:
      include:
        - input_number.test_angle
    columns:
      - name: value  ## column 1
        data: state
      - name: icon  ## column 2
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up">'''
      - name: icon colored  ## column 3
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up" style="color: red">'''
      - name: icon rotated (unstable)  ## column 4
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up" >'''
      - name: icon rotated (failed)  ## column 5
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up" >'''
      - name: icon rotated (failed)  ## column 6
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up" style="transform: rotate(45deg)" >'''
      - name: icon rotated (steps)  ## column 7
        data: state
        modify: |-
          var ICON = 'mdi:arrow-up';
          if (parseFloat(x) >= 315)
            ICON = 'mdi:arrow-top-left';
          else if (parseFloat(x) >= 270)
            ICON = 'mdi:arrow-left';
          else if (parseFloat(x) >= 225)
            ICON = 'mdi:arrow-bottom-left';
          else if (parseFloat(x) >= 180)
            ICON = 'mdi:arrow-down';
          else if (parseFloat(x) >= 135)
            ICON = 'mdi:arrow-bottom-right';
          else if (parseFloat(x) >= 90)
            ICON = 'mdi:arrow-right';
          else if (parseFloat(x) >= 45)
            ICON = 'mdi:arrow-top-right';
          '<ha-icon icon="' + ICON + '">'
    css:
      tbody tr:nth-child(1) td:nth-child(5) ha-icon+: 'color: cyan; transform: rotate(45deg)'
    card_mod:
      style:
        tbody tr:nth-child(1) td:nth-child(4) ha-icon $: |
          ha-svg-icon {
            {% set ANGLE = states('input_number.test_angle')|int %}
            transform: rotate({{ANGLE}}deg) !important;
          }

Column 4 - unstable:
Styling is done by card-mod. Refresh a page - see that the icon is rotated - but soon it will be restored to a previous state.

Column 5 - failed:
Styling is done by a native “css” option; color “cyan” is applied, rotation is not applied - probably because it should be applied to an element inside shadowRoot (“ha-svg-icon”).

Column 6 - failed:
Styling is done inside “modify” option, rotation is not applied - probably because it should be applied to an element inside shadowRoot (“ha-svg-icon”).

Column 7 - OK:
Different icons are used inside “modify”.

mgosselink · December 19, 2022, 5:44pm

Thanks Ildar voor trying the different solutions.

Ildar_Gabdullin · December 19, 2022, 5:52pm

IMHO for wind direction the last variant could be rather sufficient.

Ildar_Gabdullin · December 20, 2022, 6:04am

Displaying pictures:

Original idea of @alexandrechoske was described here, all credits to him!

type: custom:auto-entities
filter:
  include:
    - domain: person
card:
  type: custom:flex-table-card
  title: image
  columns:
    - name: object
      data: name
    - name: image
      data: entity_picture
      modify: '''<img src="'' + x + ''"style="width: 100%">'''
    - name: image
      data: entity_picture
  strict: true
sort:
  method: entity_id
  reverse: false

mgosselink · December 28, 2022, 5:56pm

Is it possible to use a template in the title like?:

title: {{ states('sensor.my_sensor') }}

Ildar_Gabdullin · December 28, 2022, 11:22pm

Templates are not supported for the “title” option. But you may use a Markdown card with “flex-table-card” in a vertical stack (plus additional styling with card-mod).

Alternatively, you may add ANY text for the “title” element by using card-mod.
Go to card-mod thread - 1st post - link at the bottom - “using after and before pseudocclasses”

mgosselink · December 29, 2022, 9:21pm

Thanks Ildar, I managed to get it working with adding the text to the title element via card-mod.

Ildar_Gabdullin · December 30, 2022, 11:50am

You mean to “after” pseudoclass?

mgosselink · December 30, 2022, 1:22pm

Yes, I do.

kbrown01 · January 13, 2023, 6:03pm

One feature I would love to see supported as I do not know how (without writing custom javascript) one could do it today. Maybe it could be done with modify, but I am not sure. I have a sensor that contains the flood level of (really any) NOAA tracked river. It parses the data from CSV into this sensor. See Create graph/automation based on river level - #8 by kbrown01 for more information.

What I want to achieve is to colorize row(s) based on some content. That said, I would think some generic solution that allowed for row color or cell color based on content would be ideal. If you see this real data:

The yellow area is “Above Monitor”, the red area “Above Flood”. I would welcome any solution that would allow me to colorize the rows (or even the cells but that is not ideal). Right now I have this.

type: custom:flex-table-card
title: Russian River Level
entities:
  include: sensor.russian_river_flood_data
columns:
  - name: Date/Time
    data: flooddata
    modify: x.valid
  - name: Level
    data: flooddata
    modify: x.level
    align: right
  - name: Trend
    data: flooddata
    modify: x.trend
    align: center
  - name: Status
    data: flooddata
    modify: x.status
  - name: Mode
    data: flooddata
    modify: x.mode

I was thinking of some YAML that would allow a person to specify that the column should also have the data in a @data-vaue attribute and that could be used with CSS to color specific cells. Perhaps it could be done with modify though.

kbrown01 · January 13, 2023, 7:20pm

To answer my own question (well at least half of it), I can do cells like this:

type: custom:flex-table-card
title: Russian River Level
entities:
  include: sensor.russian_river_flood_data
columns:
  - name: Date/Time
    data: flooddata
    modify: x.valid
  - name: Level
    data: flooddata
    modify: x.level
    align: right
  - name: Trend
    data: flooddata
    modify: x.trend
    align: center
  - name: Status
    data: flooddata
    modify: |-
      switch(x.status){
        case 'Above Monitor':
          '<div style="background-color: #FFE033;">' + x.status + '</div>';
          break;
        case 'Above Flood':
          '<div style="background-color: #F08080;">' + x.status + '</div>';
          break;
        default:
          x.status;
        }
  - name: Mode
    data: flooddata
    modify: x.mode

kbrown01 · January 14, 2023, 11:16pm

And to re-answer my question with enhancements:

type: custom:flex-table-card
entities:
  include: sensor.russian_river_flood_info
columns:
  - name: Date/Time
    data: flooddata
    modify: x.valid
  - name: Level
    data: flooddata
    modify: |-
      switch(x.status){
        case 'Above Monitor':
          '<div style="background-color:  #e67300;">' + parseFloat(x.level).toFixed(1) + '&nbsp;ft</div>';
          break;
        case 'Above Flood':
          '<div style="background-color: #cc0000;">' + parseFloat(x.level).toFixed(1) + '&nbsp;ft</div>';
          break;
        default:
          parseFloat(x.level).toFixed(1) + '&nbsp;ft';
        }
    align: center
  - name: Trend
    data: flooddata
    modify: |-
      switch(x.trend){
        case '+':
          '<ha-icon icon="mdi:arrow-up" style="color:  #e67300;">';
          break;
        case '-':
          '<ha-icon icon="mdi:arrow-down" style="color:  #3399ff;">';
          break;
        default:
          '<ha-icon icon="mdi:arrow-all">';
        }
    align: center

Now, move onto a better solution than scrolling the whole table which is terrible. The scrolling posted above in the author’s samples will not suffice. A table should scroll the body and not the whole table. Should be able to do that in pure CSS

EdwardTFN · February 16, 2023, 10:06pm

I’m also using the modify to deal with colors per cell, but in my case the color to be used is part of the data:

type: custom:flex-table-card
title: Västtrafik - Svingeln
strict: true
max_rows: 20
sort_by:
  - Departure+
entities:
  include: sensor.vasttrafik_departure_table
columns:
  - name: Sort column
    data: Departure
    align: center
    hidden: true
    modify: >-
      Math.round((Date.parse((x.rtDate ? x.rtDate : x.Date) + " " + (x.rtTime ?
      x.rtTime : x.Time)) - Date.now())/60000)
  - name: Line
    data: Departure
    modify: x.sname
    align: center
    hidden: true
    style: '''background-color: '' + x.bgColor + '';'' + ''color: '' + x.fgColor + '';'''
  - name: Line
    data: Departure
    modify: >-
      '<div style="padding: 1px 1px 4px 1px; height: 16px; color: ' + x.fgColor
      + '; background-color: ' + x.bgColor + '">&nbsp;' + x.sname +
      '&nbsp;</div>'
    align: center
  - name: Direction
    data: Departure
    modify: x.direction
  - name: Departure
    data: Departure
    align: center
    modify: |-
      if (typeof(x.rtTime) == "string" & typeof(x.rtDate) == "string") 
        { 
          var minutes = Math.round(Math.max(0,(Date.parse(x.rtDate + " " + x.rtTime) - Date.now())/60000));
          if (minutes>=60 || isNaN(minutes))
            {{ x.rtTime }}
          else if (minutes == 0)
            "Now"
          else
            {{ minutes }}
        }
      else
        { 
          var minutes = Math.round(Math.max(0,(Date.parse(x.date + " " + x.time) - Date.now())/60000));
          if (minutes>=60 || isNaN(minutes))
            {{ x.time }}
          else if (minutes == 0)
            "Now"
          else
            {{ minutes }}
        }
  - name: Platform
    data: Departure
    align: center
    modify: >-
      x.track + '&nbsp;<ha-icon icon="mdi:' +
      x.type.toLowerCase().replace("tram", "tram-side") +  '"></ha-icon>'
css:
  tbody tr:nth-child(odd): 'background-color: #535B64;'
  tbody tr:nth-child(even): 'background-color: #3C4650;'
style: |
  ha-card {
    --mdc-icon-size: 16px;
    background-color: #3C4650;
  }

kbrown01 · March 1, 2023, 9:55pm

@Ildar_Gabdullin … please take a look here and tell me where I am wrong.

I am trying to use flex-table to grab stats that are multiple layers deep. I do not see how this is possible as to me, nothing beyond data: myarray works. data: myarray.myarray does not nor anything I have tried to iterate over things.

Ildar_Gabdullin · March 1, 2023, 11:56pm

Split data into 2 sensors (western & eastern conferences):

template:
  - sensor:
      - name: test_sport_eastern_conf
        state: true  ###could be anything
        attributes:
          standings: >-
            {{ state_attr('sensor.mls_standings_test','children')[0].standings.entries }}

      - name: test_sport_western_conf
        state: true
        attributes:
          standings: >-
            {{ state_attr('sensor.mls_standings_test','children')[1].standings.entries }}

Then create smth like this for each conference:

type: custom:flex-table-card
title: Standings
entities:
  include: sensor.test_sport_western_conf
columns:
  - name: team
    data: standings
    modify: x.team.name
  - name: Games Played
    data: standings
    modify: |
      x.stats[0].displayValue
  - name: Losses
    data: standings
    modify: |
      x.stats[1].displayValue
  - name: Points
    data: standings
    modify: |
      x.stats[2].displayValue
  - name: Goals Against
    data: standings
    modify: |
      x.stats[3].displayValue
  - name: Goals For
    data: standings
    modify: |
      x.stats[4].displayValue
  - name: Draws
    data: standings
    modify: |
      x.stats[5].displayValue
  - name: Wins
    data: standings
    modify: |
      x.stats[6].displayValue
  - name: Point Deductions
    data: standings
    modify: |
      x.stats[7].value
  - name: Goal Difference
    data: standings
    modify: |
      x.stats[8].displayValue
  - name: Points Per Game
    data: standings
    modify: |
      x.stats[9].displayValue
  - name: Rank
    data: standings
    modify: |
      x.stats[10].displayValue
  - name: Rank Change
    data: standings
    modify: |
      x.stats[11].displayValue
  - name: Overall
    data: standings
    modify: |
      x.stats[12].displayValue

This is just an example.
Hope this will help you.

kbrown01 · March 2, 2023, 8:31pm

I guess I will live with the four sensor, four card approach …

Results:

kbrown01 · March 5, 2023, 7:00pm

Is is possible to use a column in which the data uses a “modify” as a “sort_by”? I have tried but it appears it is not possible. I was trying to extend the four sensors into a different view that combines them back into one card with all teams. I get the data, but I cannot sort this:

entities:
  include:
    - sensor.nhl_east_atlantic
    - sensor.nhl_east_metropolitan
    - sensor.nhl_west_central
    - sensor.nhl_west_pacific
sort_by: x.stats[6].displayValue+
columns:
  - name: Team
    data: entries
    modify: x.team.displayName
  - name: GP
    data: entries
    modify: x.stats[3].displayValue
  - name: W
    data: entries
    modify: x.stats[10].displayValue
  - name: L
    data: entries
    modify: x.stats[4].displayValue
  - name: OTL
    data: entries
    modify: x.stats[11].displayValue
  - name: PTS
    data: entries
    modify: x.stats[6].displayValue

The sort appears as if it can only take the data field and that is generic in this case because it uses modify to grab the exact data needed,

EdwardTFN · March 5, 2023, 7:57pm

When more than 1 column have the same source, it will sort by the first one, so in order to get to what you want, copy that column to the first column and then add hidden: true, so the column will be there, will be used for sorting, but won’t be visible.

Something like this:

entities:
  include:
    - sensor.nhl_east_atlantic
    - sensor.nhl_east_metropolitan
    - sensor.nhl_west_central
    - sensor.nhl_west_pacific
sort_by:
  - entries
columns:
  - hidden: true
    data: entries
    modify: x.stats[6].displayValue
  - name: Team
    data: entries
    modify: x.team.displayName
  - name: GP
    data: entries
    modify: x.stats[3].displayValue
  - name: W
    data: entries
    modify: x.stats[10].displayValue
  - name: L
    data: entries
    modify: x.stats[4].displayValue
  - name: OTL
    data: entries
    modify: x.stats[11].displayValue
  - name: PTS
    data: entries
    modify: x.stats[6].displayValue

kbrown01 · March 5, 2023, 8:03pm

Tried that, no bueno:

Even with the column not hidden it doesn;t work I can tell that even in the original because it would assume that the sort would be team name. Tried you sample too with no name, none of those work. Nothing sorts as far as I can see unless it is sorted by a direct attribute without “modify”

  - hidden: true
    data: entries
    modify: x.stats[6].displayValue

Now of course I could create a new sensor but no. It already is bad enough that NHL needs 5 sensors (and NFL 7, and MLB 7) just to have conference and division breakdowns.

EDIT: I did not put sort_by: entries!!!

That works!

That is huge. So now for my major sports card, I can have Divisional, Conference and Overall stats. Then onto what logic to apply for possibly implementing Wild Card