v0.4.0 - Header Rows Support

What's New

Header Rows

Add configurable header rows that can be placed at any position in the grid. Header cells support:

• Flexible Positioning: Place headers at any row index (top, middle, bottom, or combination)
• Column Spanning: Each header cell can span 1 to all columns
• Text Alignment: Configure left, center (default), or right alignment
• Custom Styling: Override font size, weight, color, and background color per cell
• Smart Defaults: Inherit card-level settings when not specified

Header rows count toward the total row count, so a 5-row grid with 1 header row will have 4 entity rows.

Configuration Example

type: custom:indicator-grid-card
columns: 5
rows: 6
header_rows:
  - row_index: 0
    cells:
      - text: Living Room
        colspan: 3
      - text: Bedroom
        colspan: 2
  - row_index: 3
    cells:
      - text: Basement
        colspan: 5
        font_size: 20px
entities:
  # 4 non-header rows x 5 columns = 20 entities
  - entity: light.living_room_1
  # ... etc

Visual Editor Support

Full visual editor support for header rows:

• Add/remove header rows
• Configure row index
• Add/remove header cells
• Set colspan and alignment
• Customize styling per cell

Installation

Download indicator-grid-card.js from the assets below and copy to your config/www/ directory, or install via HACS.

See the README for full documentation.