Flex-table-card

Probably the main reason of not using table in my setup is that for almost each sensor I have Entities card + graphs + buttons…
It will be great if you share some ideas of using this card.

For me - even only screenshots with description will be fine, w/o code.

How to reduce decimal accuracy as stated in other cards and the new HA version 2023.3.0?

Do you know how to decrease decimal accuracy for my senros in this card.

Capture d’écran 2023-03-09 171038

type: custom:flex-table-card
sort_by: state-
strict: true
max_rows: 10
clickable: true
entities:
  include:
    - sensor.conso_*_aujourdhui
    - sensor.pool_pump_energy_daily
    - sensor.polaris_energy_daily
    - sensor.all_lights_energy_daily
  exclude:
    - sensor.conso_pac_piscine_aujourdhui
    - sensor.atome_daily
    - sensor.conso_prod_solaire_aujourdhui
    - sensor.conso_zlinky_today
    - sensor.conso_zlinky_aujourdhui
    - sensor.spot_piscine_electric_consumption_kwh
columns:
  - data: friendly_name
    align: left
    name: Consommation Aujourd'hui
  - name: kW
    data: state
    align: center
    suffix: ' kW'
css:
  tbody tr:nth-child(1): 'color: #ff9800'
card_mod:
  style:
    .: |
      ha-card ha-markdown {
        padding:0px
      }
      ha-card ha-markdown.no-header {
        padding:0px
      }
    ha-markdown:
      $:
        ha-markdown-element: |
          h1 {
              font-weight: normal;
              font-size: 24px;
          }
          div {
              background-color:rgb(100, 100, 100);
              padding: 12px 12px;
              color:white;
              font-weight:normal;
              font-size:1.2em;
              border-top-left-radius: 5px; 
              border-top-right-radius: 5px; 
          }
          table{
            border-collapse: collapse;
            font-size: 0.9em;
            font-family: Roboto;
            width: auto;
            outline: 0px solid #393c3d;
            margin-top: 10px;
          } caption {
              text-align: center;
              font-weight: bold;
              font-size: 1.2em;
          } td {
              padding: 5px 5px 5px 5px;
              text-align: left;
              border-bottom: 0px solid #1c2020;
          }
          tr {
              border-bottom: 0px solid #1c2020;
          }
          tr:nth-of-type(even) {
              background-color: rgb(54, 54, 54, 0.3);
          }
          tr:last-of-type {
              border-bottom: transparent;
          }
          mark {
              background: #009767;
              color: #222627;
              border-radius: 10px;
              padding: 5px;
          }
          span {
              background: #EC4B34;
              color: #222627;
              border-radius: 10px;
              padding: 5px;
          }
          span {
              padding: 5px;
          }
          tr:nth-child(n+2) > td:nth-child(2) {
            text-align: left;
          }

For info, with new HA release 2023.3, we can change it, but it doesn’t work for this card.

Imho, there is TOO much hype & expectations about this “set precision” feature.
May be I am a special person - but I do not use this feature at all.
In many integrations (template, snmp, …) a user already may define any precision.
And this “set precision” feature only affects Frontend - internally states are intact (as it should be).
Again imho - cards should show “raw” intact data, not damaged by any next untested Frontend changes.
Check Github issues - currently people have problems with displaying data with changed precision.
If you really need to change a precision for some data in your flex-table - I recommend to use “modify”.

P.S. Please avoid posting a large code to demonstrate ONE issue.
MWE

Thanks
How to make that with « modify »?

  - type: custom:flex-table-card
    entities:
      include:
        - input_number.test_number_very_small
    columns:
      - name: value
        data: state
      - name: value .0
        data: state
        modify: Number(x).toFixed(0)
      - name: value .x
        data: state
        modify: Number(x).toFixed(1)
      - name: value .xx
        data: state
        modify: Number(x).toFixed(2)
      - name: value .xxx
        data: state
        modify: Number(x).toFixed(3)
      - name: value .xxxx
        data: state
        modify: Number(x).toFixed(4)
      - name: value .xxxxx
        data: state
        modify: Number(x).toFixed(5)
      - name: value .xxxxxx
        data: state
        modify: Number(x).toFixed(6)

Thank you very much

1 Like

Is there a way in flex-table to define a function to be used in many different “modify” commands?
Like for instance I have this:

modify: if(typeof x.stats.find(y=>y.abbreviation == 'CLINCH') !== 'undefined' ){x.stats.find(y=>y.abbreviation == 'CLINCH').displayValue}else{'-'}

But I have 17 columns where I want basically the same logic.

essentially in pseudo:

function getVal (findobj, colattr, valueiferror}{}

Using the above, it would be:

getVal('CLINCH','displayValue','-')

I would assume this is kindof contained here:

But this seems so specific as to not be something that is included in the flex-table, but could not be defined in some property to the table. Am I correct?

If it is an absolutely same code for the “modify” option - consider using a yaml anchor (hope you are a mature man using yaml mode :wink: )
If you are thinking about calling a function with different attributes for different columns - then no ((.
As for a “formatter” - imho this is a function accepting ONE variable, i.e. “x”, so we cannot pass attributes.

But - what if our ONE function extracts all needed data from the “x”?
Imagine that “x” may be a complex object, then these inputs may be used in the same function used in all “modify” options for all needed columns.
This may work if you may construct such complex attributes, not if they come “as they are”.

Great information. I kinda like that approach. I will need to take a dive into it.

And yes … I am a ‘mature man’ at the age of 61, but with YAML … not so much. I lived my life in the XML+XSL world.

@kbrown01
Well, if you need any advice for yaml (why, how, …) - ask me!
My life was with QNX, C/C++, Fortran ))

1 Like

In the spirit of sharing Flex Table setups, here is another one for NHL fans (specifically NHL Fantasy Hockey fans). Flex table with Starting Goalies for today.

Here is the REST sensor that gets the data:

##
## Starting Goalies
##
- platform: rest
  name: nhl_starting_goalies
  scan_interval: 3600
  resource: https://www.dailyfaceoff.com/_next/data/AARRTVjTYQ3P1ZXMqUh-M/starting-goalies.json
  value_template: "{{ value_json.pageProps.date }}"
  json_attributes_path: "$.pageProps"
  json_attributes:
    - data

Here is the Lovelace Flex Table with some Card-mod enhancements:

type: custom:flex-table-card
title: Starting Goalies
css:
  table+: 'padding: 0px; width: 1600px;'
  tbody tr:hover: 'background-color: green!important; color:white!important;'
card_mod:
  style: |
    ha-card {
        overflow: auto;
    }
    $: |
        .card-header {
           padding: 12px 0px 8px 4px!important;
           font-size: 16px!important;
           line-height: 18px!important;
           font-weight: bold!important;
         }
entities:
  include: sensor.nhl_starting_goalies
columns:
  - name: HOME
    data: data
    modify: >-
      '<div><img src="' + x.homeTeamLogoSvg + '" style="height:
      20px;vertical-align:middle;">&nbsp;' + x.homeTeamName + '</div>'
  - name: GOALIE
    data: data
    modify: x.homeGoalieName
  - name: RANK
    data: data
    modify: >-
      if(x.homeGoaliePositionRank === null ){'N/A'}else{x.homeGoaliePositionRank}
  - name: W
    data: data
    modify: x.homeGoalieWins
  - name: L
    data: data
    modify: x.homeGoalieLosses
  - name: OTL
    data: data
    modify: x.homeGoalieOvertimeLosses
  - name: SO
    data: data
    modify: x.homeGoalieShutouts
  - name: SVP
    data: data
    modify: x.homeGoalieSavePercentage
  - name: GAA
    data: data
    modify: x.homeGoalieGoalsAgainstAvg
  - name: AWAY
    data: data
    modify: >-
      '<div><img src="' + x.awayTeamLogoSvg + '" style="height:
      20px;vertical-align:middle;">&nbsp;' + x.awayTeamName + '</div>'
  - name: GOALIE
    data: data
    modify: x.awayGoalieName
  - name: RANK
    data: data
    modify: >-
      if(x.awayGoaliePositionRank == null ){'N/A'}else{x.awayGoaliePositionRank}
  - name: W
    data: data
    modify: x.awayGoalieWins
  - name: L
    data: data
    modify: x.awayGoalieLosses
  - name: OTL
    data: data
    modify: x.awayGoalieOvertimeLosses
  - name: SO
    data: data
    modify: x.awayGoalieShutouts
  - name: SVP
    data: data
    modify: x.awayGoalieSavePercentage
  - name: GAA
    data: data
    modify: x.awayGoalieGoalsAgainstAvg

And the result:

2 Likes

Hi @Ildar_Gabdullin

first of all thank you for your work with flex-table-card! I was trying to find an easy way to manipulate my batteries cell information and your work just makes it easy. I was trying to acommodate some changes which I would like your confirmation. What I show bellow is a list of sensors which represent individually every cell voltage. I want to be able to change the font color or the background of the cell when it assumes a specific value, I’m sure this is possible, just doing some mistake on the code for sure:

The background color never changes…any inputs will be welcome.

Thank you!
Paulo

  1. Avoid using tagging someone personally.
  2. If you want any assistance with your code - post a code (formatted as a code), do not post screenshots of the code.
  3. I dealt with JS a little, in C/C++ this code is WRONG:
switch(x)
{
  case x>12:
    ...
  case x>15:
    ...
}

Cool thank you I’ll follow up the recommendations.Appreciate sharing the rules, I wasn’t truly aware of them.

Try using kind of this code:

          modify: |-
            if (x == ...)
              "none"
            else if (parseInt(x) >= 67)
              '<div style="color:green;">' + x + '</div>'
            else if (parseInt(x) >= 34)
              '<div style="color:orange;">' + x + '</div>'
            else
              '<div style="color:red;">' + x + '</div>'

Thank you did something similar and worked well:

- type: custom:flex-table-card
    entities:
      include:
        - sensor.pylonH221020C30200158_c*
      exclude:
        - lowest
        - highest
    columns:
      - name: Pack#2
        data: state
        modify: |-
          if ( parseFloat(x) >= 3.480)
              '<div style="background-color:#3CB371;">' + x + '&nbsp;v</div>';
          else if ( x >= 3.330)
              '<div style="background-color:#e67300;">' + x + '&nbsp;v</div>';
          else if ( x < 3.330)
                '<div style="background-color:#cc0000;">' + x + '&nbsp;v</div>';
        align: center

Wondering if would be possible to add as well, the row number automatically before I print the x value. I mean, as we speak I have 15 rows, would nice to have something like the following :
Pack#1
Cell 0: 3.330 v
Cell 1: 3.370 v
Cell 2: 3:380 v
Cell n:

The only possible way is using an “auto-entities” card and its “template” option - but this a matter of a different topic.

Not sure this helps anyone but I just found out something I had no idea would work based on the documentation for this great card. I have been playing around for the past few hours trying to get a simple tooltip to display on column headers.

I had no idea that the “name” can accept a simple HTML snippet.

So you can do this as a column definition:

- name: '<div title="Total Games Played">GP</div>'

And get this:

image

3 Likes

Some more tests with “div”, “span” & “ha-icon” elements for a header:

Displaying in icon on a header:
– may be done by using an “icon” option;
– may by done by using “ha-icon” element.

code
  - type: custom:auto-entities
    card:
      type: custom:flex-table-card
      columns:
        - name: state
          data: state
          icon: mdi:circle
        - name: 'state<ha-icon icon="mdi:circle" style="color: red">'
          data: state
        - name: '<ha-icon icon="mdi:circle" style="color: red"></ha-icon>state'
          data: state
    filter:
      include:
        - entity_id: sun.sun

Both “div” & “span” may be used for headers.
A difference between them is that “div” elements are placed on different lines:

code
  - type: custom:auto-entities
    card:
      type: custom:flex-table-card
      columns:
        - name: '<div style="color: red">state in div</div>'
          data: state
        - name: '<span style="color: orange">state in span</span>'
          data: state
        - name: >-
            <div style="color: red">state in div</div><div style="color: cyan">state in div</div>
          data: state
        - name: >-
            <span style="color: orange">state in span</span><span style="color: lightgreen">state in span</span>
          data: state
    filter:
      include:
        - entity_id: sun.sun

Combining “div” & “span” with “ha-icon”:

code
  - type: custom:auto-entities
    card:
      type: custom:flex-table-card
      columns:
        - name: >-
            <div style="color: orange">state in div</div><ha-icon icon="mdi:circle" style="color: red">
          data: state
        - name: >-
            <span style="color: orange">state in span</span><ha-icon icon="mdi:circle" style="color: red">
          data: state
    filter:
      include:
        - entity_id: sun.sun

A similar “div” trick may be used to allocate content vertically (also, check How to show multiline data):

code
  - type: custom:auto-entities
    card:
      type: custom:flex-table-card
      columns:
        - name: >-
            <div style="color: orange">state top</div><div style="color: cyan">state bottom</div>
          data: state
          modify: >-
            '<div style="color: lightgreen">' + x + '</div><div style="color: magenta">' + x + '</div>'
        - name: state
          data: state
    filter:
      include:
        - entity_id: sun.sun
1 Like