Flex-table-card

Thank you very much, will go this way.

Works like a charm (with csv export), thanks once again, your help was fantastic :slight_smile:

Please add a link to your solution into your post or - if it was not published - a code inside “Hide Details”. Would be useful for other people.

Hey hey,

thanks for inspiration and new ideas. I’m new to that extension but have no clue how to start solving my problem.
I have multiple fyta plant sensors, but instead every flower get its own card, I want to have a summarized view. Here a peek in my currently set-up:

I just want a Table, left the written entities, on top a picture of the plant, name and species. The cell data are the values in color of the status. Maybe in the next step I would sort for next watering, pending fertilizing, need of lighter place…

My apologies if it isn’t understandable, I just want to find a way to start this project.

Thanks :slight_smile:

One row = 1 entity.
If you need to show states of different entities in columns, you can only use Markdown card which supports tables.

So i have a table of IP addresses. I want to modify it so it uses each ip to list the name of the VLAN instead (i.e. if starts with 192.168.1 then “Secure Network”, if starts with 192.168.2 then “IoT Network”, etc.).

Is that possible to format?

  type: custom:flex-table-card
  columns:
    - name: Name
      data: friendly_name
    - name: IP Address
      data: ip

Check examples with “modify”

Thanks! Got it working with the below:

type: custom:flex-table-card
  columns:
    - name: Name
      data: friendly_name
    - name: IP Address
      data: ip
      modify: |-
        if(x.startsWith("192.168.1")) {
          "Secure VLAN"
        }
        else if(x.startsWith("192.168.10")) {
          "IoT VLAN"
        }
        else if(x.startsWith("192.168.20")) {
          "Cameras VLAN"
        }
        else {
          x
        }

Suggest to close the issue you created in GitHub.


When I remove modify: x.moment no data shows up but [object]
But I also need to modify the date and thats not working without x.moment.

this is working wel with my postnl parcels but not with the dhl parcels moment:

I was able to solve this:

  - name: Date
    data: parcels.receivingTimeIndication.moment
    modify: |-
      if(x.moment.length == 0) {"-"} else {
        var date = new Date(x.moment);
        String(date.getDate()).padStart(2,'0')+"-"+
        (String(date.getMonth()+ 1).padStart(2,'0'))+"-"+
        date.getFullYear()+
        " "+
        String(date.getHours()).padStart(2,'0')+":"+
        String(date.getMinutes()).padStart(2,'0')+":"+
        String(date.getSeconds()).padStart(2,'0')
      }

How can I combine/merge/concatenate 2 tables into 1 ?

I use this:

type: conditional
conditions:
  - condition: or
    conditions:
      - condition: numeric_state
        entity: sensor.postnl_delivery
        above: 0
      - condition: numeric_state
        entity: sensor.dhl_packages
        above: 0
card:
  type: markdown
  card_mod:
    style:
      ha-markdown$: |
        table {
          width: 100%;
        }
        thead {
          font-weight: bold;
        }
        ha-icon {           
             --icon-primary-color: #44739e;
        }        
  content: |
    <header style="display: flex; align-items: flex-end;">
      <ha-icon icon="mdi:package-variant" style="vertical-align: bottom;"></ha-icon>
      <font size="5">Pakketjes</font>
    </header>
    <table>
    <thead>
      <tr>
        <td>Bezorger</td>
        <td>Pakket</td>
        <td>Datum</td>
        <td>Tijd</td>
      </tr>
    </thead>
    <tbody>
    {% for package in state_attr('sensor.postnl_delivery', 'enroute') %}
      {% if package.planned_date is not none and package.planned_from is defined and package.planned_to is defined %}
      <tr>
        <td>PostNL</td>
        <td>{{ package.name }}</td>
        <td>{{ as_timestamp(package.planned_date) | timestamp_custom('%-d %b') }}</td>
        <td>{{ as_timestamp(package.planned_from) | timestamp_custom('%H:%M') }} - {{ as_timestamp(package.planned_to) | timestamp_custom('%H:%M') }}</td>
      </tr>
      {% endif %}
    {% endfor %}

    {% for package in state_attr('sensor.dhl_packages', 'parcels') %}
      {% if package.receivingTimeIndication is not none and package.receivingTimeIndication.start is defined and package.receivingTimeIndication.end is defined %}
      <tr>
        <td>DHL</td>
        <td>{{ package.sender.name if package.sender is defined else 'Unknown' }}</td>
        <td>{{ as_timestamp(package.receivingTimeIndication.start) | timestamp_custom('%-d %b') }}</td>
        <td>{{ as_timestamp(package.receivingTimeIndication.start) | timestamp_custom('%H:%M') }} - {{ as_timestamp(package.receivingTimeIndication.end) | timestamp_custom('%H:%M') }}</td>
      </tr>
      {% endif %}
    {% endfor %}


    </tbody>
    </table>

And it looks like this:


Only this time 2 packages from DHL are comming.
If something comming from postnl it will add to the list

Not related to flex-table-card, you are using Markdown.
Oh, sorry, you posted a possible solution, my fault.
Btw, it is possible to add a grid to the table by card-mod.

@csfolmer
thanks !! it helped me a bit further but isn’t indeed a solution for the flex table card.

But I now have issue I can’t get value of dhl enroute packages.
i tried this in sensors.yaml:
dhl_enroute:
friendly_name: “dhl_enroute”
value_template: >
{% if state_attr(‘sensor.dhl_package.enroute’, ‘unavailable’))
“0”
{% else %}
“{{ state_attr(‘sensor.dhl_package’, ‘enroute’) | list | count }}”
{% endif %}
but doesn’t work.

If the attribute state is unavailable I want count 0 and if listed it must get the count on list value.

Does anybody know what’s the right syntax ?

Hi @Yamiteiru

I’ve just released a custom Fyta plant card that might help as a starting point for your project. It displays individual plant data with color-coded indicators based on status values (green for perfect, yellow for needs attention, red for critical).

While my card is designed for individual plants, you could potentially use it as inspiration or a base for creating your tabular view. The card already handles all the color-coding logic and entity detection from Fyta sensors, which could save you significant development time.

For a table view like you’re describing, you might look into combining this with either a custom table card or using the auto-entities card with custom styling. Feel free to fork my repository if you’d like to adapt it for your summarized view with sorting capabilities!

Hi I have a sensor with an attribute containing a dictionary with for the current and the past 12 months the peak consumption with its timestamp (coming from a Belgian digital meter). I want to show these in a table.
With a markdown card this is fairly easy:

type: markdown
title: Peaks
content: |-
  <table width="100%">
    <tr>
      <th align="center" width="20%">Month</th>
      <th align="center" width="30%">Peak</th>
      <th align="center" width="50%">Time</th>
    </tr>
    {% for key, value in state_attr('sensor.verbruik_elek_quart_month', 'peaks').items() %}
    <tr>
      <td align="center">{{ key }}</td>
      <td align="center">{{ value.value }}</td>
      <td align="center">{{ value.time }}</td>
    </tr>
    {% endfor %}
  </table>

But I cannot figure it out to get this in a flex-table like this:

Month Peak Time
2403 8.874 13th 17:00:00
2404 8.113 03th 23:30:00
2405 8.052 16th 00:30:00

Data is looking like this (a dictionary of dictionaries):

peaks: >
        {
'2403': {'time': '2024-03-13T17:00:00.000Z', 'value': 8.874}, 
'2404': {'time': '2024-04-03T23:30:00.000Z', 'value': 8.113}, 
'2405': {'time': '2024-05-16T00:30:00.000Z', 'value': 8.052}, 
'2406': {'time': '2024-06-05T23:00:00.000Z', 'value': 8.356},
...
'2503': {'time': '2025-03-22T18:30:00.000Z', 'value': 5.177}}

I tried like below (proposed by CoPilot :slight_smile: ), but I don’t manage to get the data in the dictionary.

type: custom:flex-table-card
title: Piekverbruiken
entities:
  include: sensor.verbruik_elek_quart_month
columns:
  - name: Month
    data: peaks
    modify: x
  - name: Peak
    data: peaks
    modify: x.value
  - name: Time
    data: peaks
    modify: x.time

gives:

Month Peak Time
[object Object] undefinedundefinedundefined undefinedundefinedundefined

I would appreciate any help.

Posting a screenshot from Dev tools - State for this sensor may help users to understand a structure of the sensor.

Below is the screenshot.

I think you also can see the structure for the for loop in the markdown example (using the same sensor)

  {% for key, value in state_attr('sensor.verbruik_elek_quart_month', 'peaks').items() %}
  <tr>
    <td align="center">{{ key }}</td>
    <td align="center">{{ value.value }}</td>
    <td align="center">{{ value.time }}</td>
  </tr>
  {% endfor %}

Anyone else’s broken with 2025.5.0 - now throwing an error - “x.replace is not a function”

type: custom:flex-table-card
title: SA CFS Fire Danger Ratings
entities:
  include: sensor.sa_cfs*
columns:
  - data: friendly_name
    name: Region
    modify: x.replace('SA CFS ', '')
  - data: day_1_rating
    name: Today
    align: center
    modify: |-
      if (x == "No Rating")
        "No Rating"
      else if (x == "Moderate")
        '<div style="background-color:#35C300;">Moderate</div>'
      else if (x == "High")
        '<div style="background-color:#FFDD00;">High</div>'
      else if (x == "Extreme")
        '<div style="background-color:#FF7A00;">Extreme</div>'
      else if (x == "Catastrophic")
        '<div style="background-color:#BD0000;color:#FFFFFF;">Catastrophic</div>'
      else x

What kinds of values are returned by “sensor.sa_cfs*”? Are there any numerics or objects?

Try this:

String(x).replace('SA CFS ', ‘’);