Flex-table-card

Try this.

type: custom:flex-table-card
entities:
  include: sensor.hacs
columns:
  - name: name
    data: repositories
    modify: x.name
  - name: installed
    data: repositories
    modify: x.installed_version
  - name: available
    data: repositories
    modify: x.available_version

image

2 Likes

Oh that works beautifully now, thank you very much!

                type: entities
                entities:
                  - entity: sensor.hacs
                    name: HACS Repositories
                  - type: custom:flex-table-card
                    title: ''
                    clickable: true
                    entities:
                      include: sensor.hacs
                      exclude: null
                    columns:
                      - name: ' Verfügbare HACS-Updates'
                        data: repositories
                        modify: x.display_name
                        prefix: '▶ '
                        suffix: ''
                        align: left
                        icon: hacs:hacs
                      - name: ''
                        data: repositories
                        modify: x.available_version
                        prefix: ''
                        suffix: ''
                        align: left
                        icon: hacs:hacs
                    css:
                      thead th: 'display: none;'

I’ve tried searching this topic for it but perhaps I’m not finding the correct search terms. But is there any way to filter out records from a table? E.g. I have a flex-table-card showing the passing busses at a busstop:

This data is coming from an integration that provides ALL the passages as an array in the next_passages attribute like so:

The integration doesn’t allow filtering, it always shows all the passages, but is there a way to handle this in the flex-table-card?

This is my current config:

type: custom:flex-table-card
title: Wittekaproenenplein, Gent
entities:
  include: sensor.brugsepoort_gent
columns:
  - name: Line
    data: next_passages
    modify: >-
      '<div class= "line-number" style="padding: 1px 1px 4px 1px; height:
      16px; color: #' + x.line_number_colourFrontHex + '; background-color: #'
      + x.line_number_colourBackHex + '; border-color: #' +
      x.line_number_colourBackBorderHex + '">&nbsp;' + x.line_number_public +
      '&nbsp;</div>'
    align: center
  - name: Type
    data: next_passages
    modify: >-
      '&nbsp;<ha-icon icon="mdi:' + x.line_transport_type.toLowerCase() + 
      '"></ha-icon>'
  - name: Towards
    data: next_passages
    modify: x.final_destination
  - name: Due in (min)
    data: next_passages
    modify: x.due_in_min
  - name: RT/C
    data: next_passages
    modify: |-
      if (x.cancelled)
        '<ha-icon icon="mdi:cancel">'
      else if (x.is_realtime)
        '<ha-icon icon="mdi:signal-variant">'
      else
        ''
    align: center
card_mod:
  style: |
    .line-number{
      display:block;
      float:left;
      min-width:2.75em;
      text-align:center;
      font-weight:700;
      color:#fff;
      border-radius:4px;
      border:3px solid #000;
      margin-left:0rem;
      margin-right:0.75rem;
      font-size:1rem;
      line-height:1.5em;
    }

Thanks in advance!

Is there a way to limit the amount of row in a flex table?
For example limit it to 5:

entities:
include:
- sensor.vertrektijden

Where the sensor has a list (array) of departures.

Yes

max_rows: 5
1 Like

Thanks. That was very easy

Here is my project… Vertrektijden (departures) of a specific trainstation.
image

Card

type: custom:flex-table-card
title: Utrecht
entities:
  include:
    - sensor.utrecht_vertrektijden
max_rows: 5
columns:
  - name: Vertrek
    data: departures
    modify: >-
      var dep_time = new Date(x.departureTime);  dep_time =
      String(dep_time.getHours()).padStart(2,'0')+":"
      +String(dep_time.getMinutes()).padStart(2,'0'); dep_time; if (x.delay ==
      '0')
        dep_time 
      else  {
        dep_time + '<div style="font-size: 14px;color: red">' + " +" + x.delay +'</div>';
      }  
  - name: Naar/Opmerking
    data: departures
    modify: |-
      if (x.via == null) 
         x.destination
      else {
        x.destination + '\n' + '<div style="font-size: 14px">' + x.via + '</div>' 
      } 
  - name: Spoor
    data: departures
    modify: >-
      '<img src="/local/images/NS/platform.png" style="position: absolute";>' +
      '<div style="position: relative;top:50%;left:50%;transform:
      translate(-50%, 50%);text-align: center;";>' + x.platform + '</div>'
  - name: ' '
    data: departures
    modify: |-
      if (x.company="NS")
        '<img src="/local/images/NS/NS_logo.png" style="height: 10px;">' + '<br>' + x.transportType
      else {
        x.company + x.transportType
      }
css:
  table+: 'border-spacing: 0px;'
  tbody tr:nth-child(odd): >-
    background-color: #FFFFFF; color: #1C316C ; font-weight:bold;
    vertical-align: top;
  tbody tr:nth-child(even): >-
    background-color: #D7E0EC; color: #1C316C ; font-weight:bold;
    vertical-align: top;
  thead th: 'background-color: #D7E0EC;  color: #1C316C;  text-align:left !important;'
  td:nth-child(1)+: 'color: #1C316C; font-size: 18px'
  td:nth-child(2)+: 'color: #1C316C; font-size: 18px'
  td:nth-child(3)+: 'color: #1C316C; font-size: 18px;'

configuration.yaml

rest:
  - authentication: basic
    scan_interval: 60
    resource: 'https://www.rijdendetreinen.nl/ajax/departures?station=Ut'
    sensor:
      - name: "Utrecht vertrektijden"
        value_template: "OK"
        json_attributes:
          - "departures"
2 Likes

So, I am working on some system monitoring views with my glances data. Rather than use a bar chart or apexcharts for one of my NAS’ hard drives, I thought I would use a declutter template and flex-table. I have the data perfectly, but thought I could build on other’s work here to show the percentage in a cell.

Here is what I have so far:

decluttering_templates:
  raid:
    card:
      type: custom:auto-entities
      filter:
        include: '[[entity]]'
      card:
        type: custom:flex-table-card
        title: '[[title]]'
        css:
          table+: 'padding: 0px; width: 99%!important;'
          tbody tr:hover: 'background-color: green!important; color:white!important;'
          tbody tr:nth-child(odd)+: 'background-color: medium-grey;'
          tbody td:nth-child(2)+: >-
            background-color: green;
            width: 80px!important;
            line-height: 24px!important;
        card_mod:
          style:
            .: |
              ha-card {
                overflow: auto;
                padding-bottom: 4px!important;
                font-size: 18px !important;
                line-height: 24px!important;
              }
            $: |
              .card-header {
                 background-color: green;
                 padding-top: 6px!important;
                 font-size: 20px!important;
                 line-height: 20px!important;
                 font-weight: bold!important;
               }
        entities:
          include: '[[entity]]'
          exclude: '[[excluded_entities]]'
        columns:
          - name: <div title="Name">Name </div>
            data: '[[attribute]]'
            modify: x.name
          - name: image
            data: entity_picture
            modify: '''<img src="" style="background-color: red!important; line-height: 24px!important;width: ''+ 40 + ''px;">'''
          - name: <div title="GB">Available </div>
            data: '[[attribute]]'
            modify: x.Available
          - name: <div title="GB">Used </div>
            data: '[[attribute]]'
            modify: x.Used
          - name: <div title="GB">Total </div>
            data: '[[attribute]]'
            modify: x.Total
          - name: <div title="GB">Pct </div>
            data: '[[attribute]]'
            modify: x.Pct

and my card:

          - type: custom:decluttering-card
            template: raid
            variables:
              - title: TVS RAID
              - entity: sensor.tvs_raids
              - attribute: entries

which gives me:

Any ideas on how to turn that image into more of a barchart?

Is it possible to use somehow templates in the column name? I would like to add dates to the column for the last 7 days in descending order.

Use a data template with a small table (depending on how granular you want it). Like for instance if 10% increments are OK, then a table with 10 columns and color the appropriate number of cells based in the value %.

Possible with using card-mod:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
  - type: custom:auto-entities
    filter:
      include:
        - domain: light
    card:
      type: custom:flex-table-card
      columns:
        - name: name
          data: name
        - name: ''
          data: brightness
      card_mod:
        style: |
          thead th:nth-child(2)::after {
            {% if is_state('input_boolean.test_boolean','on') -%}
            content: "flag is 1";
            {%- else -%}
            content: "flag is 0";
            {%- endif %}
          }

image

1 Like

any solution?

Nope, haven’t found anything myself and there were no answer on this topic either. Don’t think it’s possible.

I think you need auto-entities to template the selection before passing it to the flex-table-card.

Are there any CARD alternatives for showing a table ?

I had been searching and this was my first hit in the forum therefore the question about alternatives before I start digging into this one cause tables will make a lot of work I guess.

thanks

A standard markdown can be used in some cases.
In fact, using jinja in markdown allows to create complex loops/logics - and some cases may be not implemented by flex-table-card + auto-entities.
But markdown do not have features like “sort by a header”.

1 Like

Okay, thanks for your fast reply cause you can judge about that.
I have no clue what jinja is as I had no clue what flex table card was till I started reading your topic this morning and saw a lot of nice example and a vivid community.

I just wanna make sure that I would not choose the wrong card if there would be something else easier to achieve.

Here is my current “basic solution” for a solar power roof which is powering 7 or 8 inverters finally and comes along with about 12 strings. And those are not equal cause different parts of the roof got smaller or bigger panels, so each of these strings can have a different Wp even though all facing south.

What I wanted to check and analyze is the perfomance or power / 1 kWp installed.
Just to make these strings comparable.
Maybe 4 items below each other x 11 strings are 44 elements

but that is not possible with basic HA as you can see here with just 8 strings

Yes, horrible, but if you start from scratch and simply need the figures and get behind how to format these then it is a good point to start with.

Do you have any idea which kind of table you would recommand cause there have been presented a lot in the whole topic ?

My focus is good readability, so bigger fonts than the tiny stuff cause my dad has only 1 eye left is just 85 years but loves to get into new modern stuff and therefore it must fit his needs and please his eyes

The items per string will be

Watt per kWp
Watt of the string

kWh per kWp
kWh of the string

Wp installed of the string

It is just a visualisation of sensors and the math is done in the yaml file.
Pi 4 reboot time has increased since I started the inverter sensor implementation cause 8 inverter x 34 sensors means a support of 270 sensors feeded by mqtt and now the reboot time has increased a lot cause I have now gaps, missing data cause by a full reboot.

I have installed it and started reading but it looks like that most examples are based on node red and also are extracting data out of a sensor which then are sorted or displayed.

Maybe I have not found the right example to start with.

I just need a kind of table with heade on the top and first column a line description and then I would place a sensor into each cell.

Any ideas about that ?

Hi, I am struggling to construct modify / js but ‘x’ behaves not as expected (for me)
Can anyone maybe explain how to return data from a modify?

I have the following

{
  aircraft: {
    'F-GRXB': {
      'callsign': 'AFR15MQ ',
      'registration': 'F-GRXB',
      'icao24': '3946e1',
      'type': 'A319'
    },
    'OE-FZA': {
      'callsign': 'EJU300Q ',
      'registration': 'OE-FZA',
      'icao24': '44058f',
      'type': 'C510'
    }
  }
}

I tried this but it only kicks back the last element

I tried building an array but then it only kicks back the array.

I would suggest you align your 8 “inverters” Vertically, and “divide” the Multiple Strings in 2 or more Separate Tables ( Depending upon what the “Values” presents (i.e in Categories)

|Unit “inverter, what ever” | Leistung 1 | Leistung 2 | Energ… | etc.

.......................................................................................................
U1.1:01                264 W     739 W   0.7 kWh   Etc.
U1.2:W1.3              251 W     672 W   0.6 kWh
U2.1:W1.2              264 W
etc ...

Yes with 11 “strings” you have to use Several Tables, use your imagination to “combine” relevant Numbers/results/Values, in Separate Tables ( Or use custom:multiple-entity-row, if it suits you )

( Not that i know why you want to “repeat” … #1LEISTUNG , in All Columns

PS: The 14 Digits Number seems quite irrelevant to “Show” for a 85 year old, with bad vision ! , consider i.e “Multiply” & “Rounding” this to something “meaningful” , If it’s meaningful at all !

1 Like