Fixed table with data points

Configuration Frontend
1

Hi,

I was looking for kind of a table that lists some structured information and would at best offer some additional formatting for the headers and row labels. Tbh, I couldn’t really find sth. doing what I was looking for, but then I am pretty new to Hassio also, so maybe I just didn’t look in the right spots?

Right now I use a combination of the custom vertical-stack-in-card, divider entity and glance cards to come up with this:

image
image986×1190 65.1 KB

This is already pretty ok for what I want, however the overall spacing is a bit too generous. Also I’d rather have the divider titles be labels at each row, but I couldn’t find a way to make this all kind of a simple small Excel-like table.

Any suggestions how to address that?

Regards, habitoti

2

This might help:

3

Thanks. I tried that, but it doesn’t properly align the “columns”, but rather adjusts them per row as fits. I also can’t get rid of the leading icon. Will play around a bit with the markdown card, maybe it let’s me generate a proper table…

4

So seems like Markdown does everything I need in this case. Added bonus: templating works OOB, so I can easily round the presented values as needed:

image
image748×691 67.7 KB

It’s a bit of a tedious writing, though:

type: markdown
content: >-
  &nbsp;  | &nbsp;<ha-icon icon="mdi:home"></ha-icon> | &nbsp;<ha-icon
  icon="mdi:transmission-tower"></ha-icon> | &nbsp;<ha-icon
  icon="mdi:solar-power"></ha-icon> | &nbsp;<ha-icon
  icon="mdi:battery-90"></ha-icon>

  --- |:--:|:---:|:---:|:---:

  **Aktuell** | {{ states('sensor.kostal_home_power') }} {{
  state_attr('sensor.kostal_home_power','unit_of_measurement') }} | &nbsp;{{
  states('sensor.kostal_power_grid')  }}  {{
  state_attr('sensor.kostal_power_grid','unit_of_measurement') }} | &nbsp;{{
  states('sensor.kostal_pv_power') }} {{
  state_attr('sensor.kostal_pv_power','unit_of_measurement') }} | &nbsp;{{
  states('sensor.kostal_battery_power')  }} {{
  state_attr('sensor.kostal_battery_power','unit_of_measurement') }}

  **Heute** | {{ states('sensor.kostal_home_consumption_day') | round(1) }} {{
  state_attr('sensor.kostal_home_consumption_day','unit_of_measurement') }} |
  &nbsp;{{ states('sensor.kostal_home_consumption_from_grid_day') | round(1) }} 
  {{
  state_attr('sensor.kostal_home_consumption_from_grid_day','unit_of_measurement')
  }} | &nbsp;{{ states('sensor.kostal_home_consumption_from_pv_day') | round(1)
  }} {{
  state_attr('sensor.kostal_home_consumption_from_pv_day','unit_of_measurement')
  }} | &nbsp;{{ states('sensor.kostal_home_consumption_from_battery_day') |
  round(1) }} {{
  state_attr('sensor.kostal_home_consumption_from_battery_day','unit_of_measurement')
  }}

  **Monat** | {{ states('sensor.kostal_home_consumption_month') | round(1) }} {{
  state_attr('sensor.kostal_home_consumption_month','unit_of_measurement') }} |
  &nbsp;{{ states('sensor.kostal_home_consumption_from_grid_month') | round(1)
  }}  {{
  state_attr('sensor.kostal_home_consumption_from_grid_month','unit_of_measurement')
  }} | &nbsp;{{ states('sensor.kostal_home_consumption_from_pv_month') |
  round(1) }} {{
  state_attr('sensor.kostal_home_consumption_from_pv_month','unit_of_measurement')
  }} | &nbsp;{{ states('sensor.kostal_home_consumption_from_battery_month') |
  round(1) }} {{
  state_attr('sensor.kostal_home_consumption_from_battery_month','unit_of_measurement')
  }}

  **Jahr**  | {{ states('sensor.kostal_home_consumption_year') | round(0) }} {{
  state_attr('sensor.kostal_home_consumption_year','unit_of_measurement') }} |
  &nbsp;{{ states('sensor.kostal_home_consumption_from_grid_year') | round(0)
  }}  {{
  state_attr('sensor.kostal_home_consumption_from_grid_year','unit_of_measurement')
  }}  | &nbsp;{{ states('sensor.kostal_home_consumption_from_pv_year') |
  round(0) }} {{
  state_attr('sensor.kostal_home_consumption_from_pv_year','unit_of_measurement')
  }} | &nbsp;{{ states('sensor.kostal_home_consumption_from_battery_year') |
  round(0) }} {{
  state_attr('sensor.kostal_home_consumption_from_battery_year','unit_of_measurement')
  }}
3 Likes
5

if you want to condense your table a bit with smaller spacing, you can grab modified version of text divider I created some time ago:

It allows for some more customizations of this component (font weight, color, spacing).

1 Like