Skip to content
master
Switch branches/tags
Code

fold-entity-row

Fold away and hide rows in lovelace entities cards.

Installing

hacs_badge

Install using HACS or see this guide.

Quick Start

Add this to an entities card:

type: entities
entities:
  - light.bed_light
  - type: custom:fold-entity-row
    head: light.bed_light
    entities:
      - light.bed_light
      - light.ceiling_lights
      - light.kitchen_lights

This will show the row specified in head: with an arrow next to it. When clicked, the rows specified in entities: will be revealed.

fold-entity-row

NOTE: You wouldn't believe how many people miss the first line in this section.

Add this TO AN ENTITIES CARD.

This is NOT meant to be used except in an entities card. Any usage outside an entities card is entirely unsupported, and I won't help you fix it.

Usage

  • head: and any row in entities: can be customized in exactly the same ways as ordinary entities card rows.
type: custom:fold-entity-row
head:
  type: section
  label: Customizations
entities:
  - light.bed_light
  - entity: light.ceiling_lights
    name: A light
  - light.kitchen_lights
  • Options specified in group_config: will be applied to all rows in the fold.
type: custom:fold-entity-row
head:
  type: section
  label: group_config
group_config:
  secondary_info: last-changed
  icon: mdi:desk-lamp
entities:
  - light.bed_light
  - light.ceiling_lights
  - light.kitchen_lights
  • The left side padding can be adjusted by the padding: parameter (value in pixels).
type: custom:fold-entity-row
head:
  type: section
  label: padding
padding: 5
entities:
  - light.bed_light
  - light.ceiling_lights
  - light.kitchen_lights
type: custom:fold-entity-row
head: group.all_lights
  • Setting open: to true will make the fold open by default.
type: custom:fold-entity-row
head:
  type: section
  label: open
open: true
entities:
  - light.bed_light
  - light.ceiling_lights
  - light.kitchen_lights

options

  • Fold entity row will try to figure out if the header should be clickable to show and hide the fold or not. If it guesses wrong, you can help it with clickable: true or cickable: false.

Advanced

  • Folds can be nested
type: custom:fold-entity-row
head:
  type: section
  label: Nested
entities:
  - type: custom:fold-entity-row
    head: light.bed_light
    entities:
      - type: custom:fold-entity-row
        head: light.bed_light
        entities:
          - light.bed_light
type: custom:auto-entities
filter:
  include:
    - domain: sensor
card:
  type: custom:fold-entity-row
  head:
    type: section
    label: Automatically populated

advanced

  • If entity (not entities) is set and is a group, it will be expanded
type: custom:auto-entities
card:
  type: entities
  title: All groups
filter:
  include:
    - domain: group
      options:
        type: custom:fold-entity-row

image

  • If the header or any row in the group has the following tap-, hold- or double-tap-action defined, it will toggle the fold open or closed.
tap_action:
  action: fire-dom-event
  fold_row: true

More examples

All my test cases are available in the test/views directory.

You can a demo in docker by going to the test directory and running:

docker-compose up

Then going to http://localhost:8125 and logging in with username dev and password dev.

Or you could use the vscode devcontainer and run the task "Run hass".


Buy Me A Coffee