Flex Cells Card

A Lovelace card for Home Assistant that lets you add icons, text, entities, attributes, or input controls in flexible cell layouts — fully configurable from a visual editor (EN/PL/IT/DE), so no documentation is required to get started.

If you like this card, please consider giving it a ⭐ on GitHub:

Features

• Mix cells with Icon / Text / Entity / Metadata / Input Control
• Dynamic Rules: Color & Content Overrides
• Sorting by one or more columns in one or more groups
• Using icons and colors assigned to entities by the system
• Per-cell actions: tap, hold, double-tap (mobile-friendly)
• Per-cell alignment, text transform, color, size, letter spacing
• Entities with unit handling and optional precision
• Visual editor, drag-and-drop rows/columns, zebra rows, responsive columns
• HTML templates thanks to which the card can look exactly as you want (HTML and CSS knowledge required)
• Each cell and row allows you to configure custom CSS, you don’t need to use “card_mod” for this

Installation

Choose one installation method, via HACS or manually.

HACS

1. In HACS use the search bar and type Flex Cells Card.
2. Install the card.
3. The resource is added automatically as /hacsfiles/flex-cells-card/flex-cells-card.js.
4. Reload browser cache or refresh resources in Home Assistant if needed.
5. If you previously added this repo as a custom repository, you can remove that entry now.

Manual

1. Download flex-cells-card.js from the latest release and place it under
   config/www/flex-cells-card/flex-cells-card.js.
2. Add a resource in Edit Dashboard → ⋮ → Manage resources:
   /local/flex-cells-card/flex-cells-card.js (type: JavaScript module).
3. Hard refresh the browser.

Usage

Add the card in the UI and configure everything from the visual editor.

Video

Olli from the YouTube channel @smarterkram recorded a video explaining this card. If you know German, I encourage you to watch it https://www.youtube.com/watch?v=oh36grjbPDQ

Tips & Tricks

• How sorting works
  • Sorting works “after applying” dynamic rules, meaning what’s visible is sorted.
  • Sorting works even if the column being sorted is hidden (breakpoint).
• Dynamic rules
  • If you see the value “null” for an attribute in developer tools and want to use it in dynamic rules, don’t enter “null” but leave value input empty. Empty means “null”.
• Available colors
  • You can specify colors in various formats, one of which is variables, for example “var(–state-active-color)”. You can find a list of variables at this link.
• Search & Replace
  • If you want to perform the same action on multiple rows/cells, use the code editor and the “search & replace” function - to see additional options press Ctrl + F in code editor. For example, if you want to remove all underlines, search for “underline: true” and replace it with “underline: false”.

Templates

• Templates, in addition to standard HTML tags, support their own tag:
  <fcc row="3" col="5" /> - inserts the selected cell
  <fcc row="3" /> - inserts the selected row
  <fcc /> - inserts the entire table, which looks the same as without templates. This allows you to write custom CSS for the entire table:

  <style>
    ...
  </style>
  <fcc />
  

• If you want a non-fcc-table element to be dynamic (for example, <div>), you can use the mode="text" attribute (alias as="text") for a text-type cell. For example, you can set a dynamic rule like this:

  - cells:
      - type: string
        value: "display: none;"
        align: left
        style:
          text_transform: ""
        dyn_color:
          - entity: light.hue_bulb
            attr: ""
            op: "="
            val: "on"
            bg: ""
            fg: ""
            overwrite: text
            overwrite_entity: ""
            overwrite_attr: ""
            text: "display: flex;"
  

  to use this cell like this:

  <div style="<fcc mode='text' row='1' col='1' />">
      test
  <div>
  

• The appearance and rules assigned to cells/rows should work in templates.

Examples

• Temperature/Humidity - a simple table divided into three groups, with sorting by the temperature column performed independently in each group. Here you’ll find the simplest example of a dynamic rule that changes color to red when the temperature exceeds a specified value. Read more…

  

• Media Player (template) - FCC template example (HTML, CSS). Read more…

  

• Batteries - displaying the device’s battery status. An example of using dynamic rules to overwrite an icon when an entity doesn’t provide it correctly. Read more…

  

• Slider Lights - brightness control, on/off, display more-info (custom CSS). Read more…

  

• Cover - window blind control (custom CSS). Read more…

  

• Climate template - another example of an FCC template (HTML, CSS). Read more…

  

• Button lights - turning on/off lighting, setting color/brightness (custom CSS). Read more…

  

• Input controls - this is only a presentation of the appearance of the FCC controls. Read more…

  

• Hue and saturation - an example of using sliders to control hue and saturation. It also demonstrates how to use presets for lighting. Read more…

  

• Sports table - tracking sports data using auto-entities and TeamTracker. Read more…

  

Translations

If you’d like to help translate FCC editor, or improve an existing translation, please do so! You don’t have to translate everything - just one string will do - and it’s not difficult.

Quick start for translators:

• Open the Crowdin project and log in.
• Pick your language (or request it if it’s missing - note that the Request New Language button doesn’t work, so you have to let me know via forum or GitHub).
• Translate a few strings in any language and save - partial translations are welcome.
• Finally, apply the Unsaved Translations filter to each edited language, and if anything displays there, save it. Any unsaved translations will not be included in the project!

Auto-entities

Experimental feature! I do not plan to evolve it to parity with full FCC. With auto-entities you lose:

• per-row features (separators, merge_columns, dyn_row_rules, custom row CSS/classes, row-level actions),
• mixed/multi-row layouts (e.g., custom headers, separators between groups),
• the FCC visual editor (you see the auto-entities editor; the row template is YAML-only).

FCC accepts an entities array (e.g., from auto-entities). If entities is present, FCC builds rows from it; classic rows keep working as before. Control the generated table with entity_row_template (optional header and cells). Tokens: @entity, @friendly_name, @name, @state, @attr:<attribute>, @icon.

Example with auto-entities:

type: custom:auto-entities
card_param: entities
card:
  type: custom:flex-cells-card
  entity_row_template:
    header:
      - type: string
        value: Icon
      - type: string
        value: Name
      - type: string
        value: State
    cells:
      - type: entity
        value: "@entity"
        entity_display: icon
      - type: string
        value: "@friendly_name"
      - type: entity
        value: "@entity"
  column_count: 3
filter:
  include:
    - domain: light

Changelog

• v0.21.0 —
  • Added experimental entities support (auto-entities/monster-card style) with entity_row_template and token substitution; legacy rows remain unchanged.
  • Added Italian translation, thanks to echopage1964.
• v0.20.0 —
  • Added sliders for hue and saturation.
  • Integrating FCC with crowdin.com.
• v0.19.0 —
  • Added proper ha-card wrapper and removed the custom border so the card behaves like a normal Lovelace card (e.g., looks correct inside vertical-stack-in-card). Kept the “card” class intact, so any existing CSS targeting it should still work.
  • Added RAW token to “Date/Time format & Text override” so you can inject the unformatted value; e.g., set the format to “[light is: ]RAW” to render “light is: on”.
  • Fixed FCC template parsing to only consider “mode/as” attributes for “text” mode and accept row/column values ​​in single quotes.
• v0.18.0 —
  • Added attribute editing using slider and switch.
• v0.17.0 —
  • Added “AND/OR” logical operators in dynamic rules.
  • Added new fields in dynamic cell rules for the “Overwrite with entity/metadata” option: Date/Time format & Text override, Entity display, Rescale.
  • Fixed an issue related to changing the number of columns and the disappearance of unsaved dynamic rules.
  • Fixed an issue related to the column width for the “auto” value.
• v0.16.0 —
  • Added advanced copy and paste of table configuration.
• v0.15.0 —
  • Added custom HTML templates.
  • Added custom CSS for cells and rows (also works in templates), “card_mod” is no longer needed!
  • Added new domains. The existing list of domains (input_boolean, input_number, input_select, input_button, input_datetime, input_text) that the editor considers as “input controls” has been expanded with new ones: switch, number, select, button, datetime, date, time, text.
  • Added REL and REL_SHORT tokens in the “Date/Time format & Text override” field, they return a localized description of the time elapsed (full and short).
  • Added support for “mode” variable for input_number. Now you can render a box in addition to the slider.
  • Added ability to hide values next to the slider (input_number).
  • Improved “Nothing” behavior in “Tap & Hold Actions”.
  • Fixed separator width when breakpoint hides column.
  • Improved clickable area on “Show control” and “Use unit from entity” labels.
• v0.14.0 —
  • Added column merging.
  • Added entity/metadata overrides.
• v0.13.0 —
  • Added separators and sorting by groups.
  • Added dynamic rules for the entire row.
• v0.12.0 —
  • Added metadata (instead of attributes), now we have access to all data.
  • Improved “Text size (default)” in the main settings, it no longer affects icon size.
  • Added icon size settings (entity-derived icon).
  • Changed “Date/Time format” to “Date/Time format & Text override”. Now we can override the entity value even if it doesn’t contain a date/time.
  • Minor visual improvements.
• v0.11.0 —
  • Added use of system-assigned icons and colors for entities.
  • Changed the decimal separator to use the system settings.
  • Disabled the default underline for entities.
• v0.10.0 —
  • Added dynamic sorting by single or multiple columns.
  • Added a “tips & tricks” section to the readme.md.
  • Fixed the dropdown list display in dynamic rules.
• v0.9.0 —
  • Added German translation, thanks to Olli and Thomas.
  • Added displaying an icon on the input_button if configured.
  • Added ability to select a background color without the need for dynamic rules.
• v0.8.0 —
  • Added formatting for input_datetime.
• v0.7.0 —
  • Added controls for input types: boolean, number, select, button, datetime, text.
  • Added “Appearance & Style” section in the card editor for easier navigation.
• v0.6.0 —
  • Added dynamic icons.
• v0.5.0 —
  • Added dynamic coloring/hiding/masking.
  • Minor visual improvements.
• v0.4.0 —
  • Added entity attributes with per-attribute rescaling (Input/Output min/max).
  • Fixed tap & hold so secondary actions (e.g., setting brightness) work alongside the primary action.
  • Fixed header/last row background overflow when card padding is set to 0.
• v0.3.0 —
  • Added inline color picker with live preview.
• v0.2.0 —
  • Added per-cell actions: tap / hold / double-tap.
• v0.1.x —
  • First basic release of the card.

Screenshots

Example YAML

type: 'custom:flex-cells-card'