kamtschatka / lovelace-fold-entity-row

🔹 A foldable row for entities card, containing other rows

fold-entity-row

Fold away and hide rows in lovelace entities cards.

Installing

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.

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

• Setting head: to a group (including light group or cover group ) will populate the entities list with the entities of that group.

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

• 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

• Folds can be populated by any wrapping element that fills the entities: parameter, such as entity-filter or auto-entities

type: custom:auto-entities
filter:
  include:
    - domain: sensor
card:
  type: custom:fold-entity-row
  head:
    type: section
    label: Automatically populated

• 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

• 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".

---