search

custom-cards / flex-table-card

Highly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept
GNU General Public License v3.0
198 stars 23 forks source link

Feature Request: Icons instead of name #16

Closed gw1gw1 closed 4 years ago

gw1gw1 commented 4 years ago

Hi,

It would be great if we could have an icon as column headers instead of names.

Thanks

icons-as-header

daringer commented 4 years ago

uha, good idea.

For sure easy to do a hacky solution, but there likely is a "right way" in homeassistant. The regular entity card does it, I guess. So do you wanna choose from the common icon-set by name, or do you want to actually insert arbitrary icons by linking? But yeah, shouldn't be to challenging: consider it in progress :+1:

gw1gw1 commented 4 years ago

Ideally I would like to be able to select the icon I want. Maybe adding a new option at 2nd-level options called icon and then be able to pick the mdi icon we want.

type: custom:flex-table-card
            title: Temperature & Humidity
            entities:
              include:
                - sensor.0x00158d00032316c2_temperature
                - sensor.0x00158d000346476a_temperature
                - sensor.0x00158d0002b54177_temperature
                - sensor.0x00158d0002b5b640_temperature
                - sensor.0x00158d0002b5419e_temperature
                - sensor.0x00158d0002b51986_temperature
                - sensor.0x00158d0002b54160_temperature
            columns:
              - name: Room
                attr: friendly_name
              - name: Temperature
                icon: mdi:temperature-celsius
                attr: temperature
                suffix: °C
              - name: Humidity
                icon: mdi:water
                attr: humidity
                suffix: '%'

Sorry for the indentation, using my phone at the moment 😂

daringer commented 4 years ago

done, simply use as you would expect...

name is not replaced, but the icon is placed left of it, if you would like to have no name just omit it from the configuration and if icon is set for this column it will be shown without any further text.

For alignment use align and consider using css for more detailed css-stylesheet adaptations

daringer commented 4 years ago

oh and consider posting an example picture + config here, really need to re-organize the examples...

gw1gw1 commented 4 years ago

Well done !! Works great. Need to improve a bit my CSS but love it.

flex-table-with-icons

Here is my code:

title: Temperature & Humidity
css:
  table+: "border: 20px solid white; border-collapse: collapse;"
  thead+: "font-size: x-large; color: #44739e"
  td+: "height: 28px;"
  tbody tr:nth-child(even): "background-color: #F5F5F5; "
entities:
  include:
    - sensor.0x00158d00032316c2_temperature
    - sensor.0x00158d000346476a_temperature
    - sensor.0x00158d0002b54177_temperature
    - sensor.0x00158d0002b5b640_temperature
    - sensor.0x00158d0002b5419e_temperature
    - sensor.0x00158d0002b51986_temperature
    - sensor.0x00158d0002b54160_temperature
columns:
  - attr: friendly_name
    icon: mdi:city
  - attr: temperature
    suffix: °C
    icon: mdi:thermometer
    align: right
  - attr: humidity
    icon: mdi:water-percent
    suffix: '%'
    align: right