### Basic Flex Cells Card Initialization

Source: https://github.com/michalowskil/flex-cells-card/blob/main/README.md

This snippet demonstrates the basic YAML configuration required to instantiate the custom flex-cells-card component in a Home Assistant dashboard.

```yaml
type: 'custom:flex-cells-card'
```

--------------------------------

### Configure Interactive Input Controls with Attribute Editing (YAML)

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

This YAML configuration demonstrates how to set up interactive input controls for entities, allowing users to edit attributes directly. It supports various controls like sliders for brightness and position, a temperature slider for climate entities, boolean toggles, select dropdowns, and color controls for hue and saturation. Dependencies include the entity being configured and the associated service for attribute editing.

```yaml
rows:
  # Slider control for brightness
  - cells:
      - type: entity
        value: light.bedroom
        align: right
        use_entity_unit: false
        attribute: attributes.brightness
        attr_edit:
          enabled: true
          service: light.turn_on
          field: brightness
          control: slider
          min: 0
          max: 255
          step: 1
        scale_in_min: 0
        scale_in_max: 255
        scale_out_min: 0
        scale_out_max: 100
        unit: "ῶν"
        precision: 0

  # Cover position slider
  - cells:
      - type: entity
        value: cover.bedroom_blinds
        attribute: attributes.current_position
        attr_edit:
          enabled: true
          service: cover.set_cover_position
          field: position
          control: slider
          min: 0
          max: 100
          step: 1
        show_control_value_right: true
        unit: "ῶν"

  # Climate temperature control
  - cells:
      - type: entity
        value: climate.ac_unit
        attr_edit:
          enabled: true
          service: climate.set_temperature
          field: temperature
          control: slider
          min: 16
          max: 30
          step: 1
        unit: "°C"
        show_control_value_right: true

  # Boolean toggle (switch)
  - cells:
      - type: entity
        value: input_boolean.notifications
        show_control: true

  # Select dropdown
  - cells:
      - type: entity
        value: input_select.radio_station
        show_control: true

  # Hue/saturation color controls
  - cells:
      - type: entity
        value: light.rgb_light
        attr_edit:
          enabled: true
          service: light.turn_on
          field: hs_color
          control: color  # Hue slider
      - type: entity
        value: light.rgb_light
        attr_edit:
          enabled: true
          service: light.turn_on
          field: hs_color
          control: color_sat  # Saturation slider
          min: 1
          max: 100
          step: 1
```

--------------------------------

### Inserting Cells and Rows with FCC Tag (HTML)

Source: https://github.com/michalowskil/flex-cells-card/blob/main/README.md

Demonstrates how to use the `<fcc>` tag to insert specific cells, rows, or the entire table within an HTML structure. It also shows how to use `mode='text'` for dynamic content insertion.

```html
<style>
  /* custom styles for the whole table */
</style>
<fcc />
```

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

--------------------------------

### Apply Custom CSS to Rows and Cells

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Demonstrates how to enable custom CSS for individual cells and entire rows. It shows how to target td and tr elements to modify styles like border-radius, background colors, and visibility.

```yaml
rows:
  - cells:
      - type: entity
        value: light.lamp
        entity_display: icon
        custom_css_enabled: true
        custom_css: |
          td {
            border-radius: 20px;
            height: 30px;
            background: var(--divider-color);
          }
      - type: entity
        value: light.lamp
        attribute: attributes.brightness
        custom_css_enabled: true
        custom_css: |
          td .ctrl-wrap,
          td .ctrl-range {
            width: 100%;
          }
          .ctrl-value {
            width: 40px;
          }
    custom_css_enabled: true
    custom_css: |
      tr {
        background-color: rgba(255, 152, 0, 0.2);
      }
  - cells:
      - type: entity
        value: cover.blinds
        attribute: last_changed
        datetime_format: REL_SHORT
    custom_css_enabled: true
    custom_css: |
      tr {
        display: none;
      }
```

--------------------------------

### Basic Flex Cells Card Configuration

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Demonstrates the fundamental structure of the Flex Cells Card, including rows, cells with different content types (string, icon, entity), alignment, and basic card-level styling like column count and padding. This configuration is suitable for creating simple data tables or control panels.

```yaml
type: custom:flex-cells-card
rows:
  - cells:
      - type: string
        value: ""
        align: left
      - type: string
        value: Temperature
        align: right
      - type: string
        value: Humidity
        align: right
  - cells:
      - type: icon
        value: mdi:sofa-outline
        align: left
      - type: entity
        value: sensor.living_room_temperature
        align: right
        use_entity_unit: true
        precision: 1
      - type: entity
        value: sensor.living_room_humidity
        align: right
        use_entity_unit: true
        precision: 1
column_count: 3
card_padding: 0
header_from_first_row: true
zebra: true
cell_padding:
  top: 4
  right: 8
  bottom: 4
  left: 7
column_widths:
  - 40px
  - auto
  - 100px
```

--------------------------------

### Configure Dynamic Row Visibility Rules

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Shows how to control row visibility based on entity state conditions. This configuration hides a row when a specific light entity is turned off.

```yaml
rows:
  - cells:
      - type: entity
        value: light.rgb_light
        attr_edit:
          enabled: true
          service: light.turn_on
          field: hs_color
          control: color
    merge_columns: true
    dyn_row_rules:
      - conditions:
          - entity: light.rgb_light
            attr: ""
            op: "="
            val: "off"
            val2: ""
        match: all
        bg: ""
        fg: ""
        visibility: hidden
```

--------------------------------

### Implement Per-Cell HTML Templates

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Illustrates how to use custom HTML templates within cells. The <fcc> tag is used to embed data or other cells, allowing for complex layout structures within a single grid cell.

```yaml
rows:
  - cells:
      - type: entity
        value: binary_sensor.motion_living_room
        entity_display: icon
        style:
          icon_size: 10px
        custom_template_enabled: true
        custom_template_html: |-
          <fcc row="2" col="4" /><br/>
          <span style="font-size: 10px;">
            <fcc row="12" col="2" as="text" />
          </span>
        dyn_color:
          - conditions:
              - entity: ""
                attr: ""
                op: "="
                val: "on"
            match: all
            overwrite: icon
            icon: mdi:checkbox-blank-circle
      - type: entity
        value: cover.bedroom_blinds
        entity_display: icon
        custom_template_enabled: true
        custom_template_html: |
          <span style="font-size: 10px; text-transform: capitalize;">
            <fcc row="11" col="4" as="text" />
            <fcc row="11" col="3" as="text" />
          </span>
          <br/>
          <fcc row="5" col="3" /><br/>
          <span style="font-size: 10px;">
            <fcc row="11" col="2" as="text" />
          </span>
```

--------------------------------

### Implement Row Separators and Sorting in Flex Cells Card (YAML)

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

This YAML configuration illustrates the use of row separators to visually divide sections within the Flex Cells Card and enables column sorting. Separators can be styled with various properties like color, style, thickness, and margin. Sorting can be applied to specific columns, with options to control the sort order (ascending/descending) and whether separators are hidden during sorting.

```yaml
type: custom:flex-cells-card
rows:
  # Indoor sensors header
  - cells:
      - type: string
        value: ""
      - type: string
        value: Temperature
      - type: string
        value: Humidity
  # Indoor sensor rows
  - cells:
      - type: string
        value: Living Room
      - type: entity
        value: sensor.living_room_temp
        precision: 1
      - type: entity
        value: sensor.living_room_humidity
        precision: 1
  - cells:
      - type: string
        value: Bedroom
      - type: entity
        value: sensor.bedroom_temp
        precision: 1
      - type: entity
        value: sensor.bedroom_humidity
        precision: 1

  # Separator
  - type: separator
    separator:
      color: "#d0d7de"
      background: ""
      style: dashed  # solid, dashed, dotted
      thickness: 1.5
      length: 100%
      align: stretch
      opacity: 1
      margin_top: 0
      margin_bottom: 0
    cells: []

  # Outdoor sensors
  - cells:
      - type: string
        value: Balcony
      - type: entity
        value: sensor.balcony_temp
        precision: 1
      - type: entity
        value: sensor.balcony_humidity
        precision: 1

column_count: 3
header_from_first_row: true
zebra: true
zebra_ignore_separators: true
sort_columns:
  - 2  # Sort by temperature column (0-indexed)
sort_desc: false
hide_separators_on_sort: false
```

--------------------------------

### Flex Cells Card with Auto-Entities Integration (YAML)

Source: https://github.com/michalowskil/flex-cells-card/blob/main/README.md

This configuration demonstrates how to use the Flex Cells Card in conjunction with the auto-entities card to dynamically generate tables. It leverages entity_row_template to define the structure of rows, including headers and cells, and uses tokens for entity data. The auto-entities card handles entity filtering and card parameter passing.

```yaml
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
```

--------------------------------

### Per-Cell Custom HTML Templates (YAML)

Source: https://github.com/michalowskil/flex-cells-card/blob/main/README.md

Illustrates how to enable and define custom HTML templates for individual cells using `custom_template_enabled: true` and `custom_template_html`. This allows embedding other cells or dynamic content within a cell.

```yaml
rows:
  - cells:
      - type: entity
        value: media_player.lg_webos_smart_tv
        align: center
        custom_template_enabled: true
        use_entity_unit: true
        entity_display: icon
        tap_action:
          action: toggle
        custom_template_html: |- 
          this is <span style="color: red">cell</span> 1
          <br/>
          <fcc row="1" col="1" />
          <br />
          entity_picture as image:
          <br />
          <img src="<fcc row='1' col='1' as='text' />" />
        attribute: entity_picture
        style:
          background: "#f7ff85"
      - type: string
        value: aaaaaaaaa
        align: center
        style:
          background: "#b8fff3"
        custom_template_enabled: true
        custom_template_html: |- 
          this is cell 2 with<br />content coming from cell 1
          <br/>
          <fcc row="1" col="1" />
          <br/>
          cell 2 content: <fcc row="1" col="2" />
          <br />
          This comes from row 2 col 2:
          <br />
          <fcc row="2" col="2" style="width: 100px; text-align: center; border: 1px dashed red;" />
  - cells:
      - type: string
        value: bbbbbbbbbbb
        align: left
        style:
          background: "#c2d4ff"
      - type: icon
        value: mdi:airplane
        align: right
        style:
          background: "#85ff93"
    dyn_row_rules: []
column_count: 2
card_padding: ""
overflow_x: true
header_from_first_row: false
zebra: false
narrow_breakpoint: ""
text_size: ""
cell_padding:
  top: 4
  right: 0
  bottom: 4
  left: 0
custom_template_enabled: false
custom_template_html: ""
type: custom:flex-cells-card
```

--------------------------------

### Define Interactive Tap, Hold, and Double-Tap Actions

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Configures interactivity for card cells, including toggling entities, navigating to paths, or executing service calls. Supports distinct behaviors for different touch triggers.

```yaml
rows:
  - cells:
      - type: entity
        value: light.living_room
        entity_display: icon
        tap_action:
          action: toggle
      - type: string
        value: "Kitchen"
        tap_action:
          action: navigate
          navigation_path: /config/areas/area/kitchen
      - type: icon
        value: mdi:skip-next
        align: center
        tap_action:
          action: perform-action
          perform_action: media_player.media_next_track
          target:
            entity_id: media_player.spotify
          data: {}
      - type: icon
        value: mdi:circle
        style:
          color: "#ff9800"
          icon_size: 20px
        tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            entity_id: light.led_strip
          data:
            rgb_color: [255, 184, 0]
            brightness_pct: 5
        double_tap_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            entity_id: light.led_strip
          data:
            rgb_color: [255, 184, 0]
            brightness_pct: 50
        hold_action:
          action: perform-action
          perform_action: light.turn_on
          target:
            entity_id: light.led_strip
          data:
            rgb_color: [255, 184, 0]
            brightness_pct: 100
```

--------------------------------

### Configure Dynamic Conditional Styling Rules

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Defines how to apply conditional styling to cells based on entity states or attributes. Supports logical operators (AND/OR) and allows modification of colors, text, or icons.

```yaml
rows:
  - cells:
      - type: entity
        value: sensor.temperature
        align: right
        use_entity_unit: true
        precision: 1
        dyn_color:
          - conditions:
              - entity: sensor.temperature
                attr: ""
                op: ">="
                val: "25"
                val2: ""
            match: all
            bg: ""
            fg: red
            overwrite: ""
          - conditions:
              - entity: sensor.temperature
                attr: ""
                op: ">="
                val: "20"
                val2: ""
              - entity: sensor.temperature
                attr: ""
                op: "<"
                val: "25"
                val2: ""
            match: all
            bg: "#ffff0033"
            fg: orange
            overwrite: ""
          - conditions:
              - entity: binary_sensor.battery_charging
                attr: ""
                op: "="
                val: "on"
                val2: ""
              - entity: sensor.battery_level
                attr: ""
                op: "="
                val: "100"
                val2: ""
            match: all
            bg: ""
            fg: red
            overwrite: text
            text: "disconnect!"
          - conditions:
              - entity: ""
                attr: ""
                op: "="
                val: "on"
                val2: ""
            match: all
            bg: ""
            fg: ""
            overwrite: icon
            icon: mdi:battery-charging
```

--------------------------------

### Dynamic Rules for Conditional Styling

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Configure dynamic rules to change cell appearance (colors, icons, text) based on entity states or attribute values. Supports multiple conditions with AND/OR logic.

```APIDOC
## Dynamic Rules for Conditional Styling

### Description
Dynamic rules allow changing cell appearance based on entity states or attribute values. Rules support multiple conditions with AND/OR logic and can modify colors, icons, text content, or hide cells entirely.

### Method
Not Applicable (Configuration)

### Endpoint
Not Applicable (Configuration)

### Parameters
#### Request Body (Example for `dyn_color`)
- **conditions** (list) - Required - A list of conditions to evaluate.
  - **entity** (string) - Required - The entity ID to check.
  - **attr** (string) - Optional - The attribute of the entity to check.
  - **op** (string) - Required - The operator to use (e.g., "=", ">=", "<").
  - **val** (string) - Required - The value to compare against.
  - **val2** (string) - Optional - A second value for range comparisons.
- **match** (string) - Required - Logic for combining conditions ("all" for AND, "any" for OR).
- **bg** (string) - Optional - Background color to apply.
- **fg** (string) - Optional - Foreground color to apply.
- **overwrite** (string) - Optional - Type of overwrite ("text", "icon").
- **text** (string) - Optional - Custom text to display when `overwrite` is "text".
- **icon** (string) - Optional - Icon to display when `overwrite` is "icon".

### Request Example
```yaml
rows:
  - cells:
      - type: entity
        value: sensor.temperature
        align: right
        use_entity_unit: true
        precision: 1
        dyn_color:
          - conditions:
              - entity: sensor.temperature
                attr: ""
                op: ">="
                val: "25"
                val2: ""
            match: all
            bg: ""
            fg: red
            overwrite: ""
```

### Response
#### Success Response (200)
Not Applicable (Configuration)

#### Response Example
Not Applicable (Configuration)
```

--------------------------------

### Format Entity Values and Text Overrides

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Configures display formatting for entity states and attributes. Supports relative time formats, custom text patterns, and static label overrides.

```yaml
rows:
  - cells:
      - type: entity
        value: binary_sensor.motion
        attribute: last_changed
        datetime_format: REL_SHORT
      - type: entity
        value: sensor.last_update
        attribute: last_changed
        datetime_format: REL
      - type: entity
        value: light.lamp
        datetime_format: "[light is: ]RAW"
      - type: entity
        value: light.bedroom_lamp
        datetime_format: "Bedroom"
```

--------------------------------

### Tap, Hold, and Double-Tap Actions

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Define interactive actions for cells, including toggling, showing more info, navigating, opening URLs, or calling services.

```APIDOC
## Tap, Hold, and Double-Tap Actions

### Description
Each cell supports tap, hold, and double-tap actions for interactivity. Actions include toggle, more-info, navigate, URL, perform-action (service calls), and none.

### Method
Not Applicable (Configuration)

### Endpoint
Not Applicable (Configuration)

### Parameters
#### Request Body (Example for Actions)
- **tap_action** (object) - Defines the action on tap.
  - **action** (string) - Required - The type of action (e.g., "toggle", "navigate", "perform-action").
  - **navigation_path** (string) - Required if `action` is "navigate" - The path to navigate to.
  - **perform_action** (string) - Required if `action` is "perform-action" - The service to call.
  - **target** (object) - Required if `action` is "perform-action" - The target entity for the service call.
    - **entity_id** (string) - Required - The entity ID.
  - **data** (object) - Optional - Data payload for the service call.
- **hold_action** (object) - Defines the action on hold (same structure as `tap_action`).
- **double_tap_action** (object) - Defines the action on double-tap (same structure as `tap_action`).

### Request Example
```yaml
rows:
  - cells:
      - type: entity
        value: light.living_room
        entity_display: icon
        tap_action:
          action: toggle
      - type: string
        value: "Kitchen"
        tap_action:
          action: navigate
          navigation_path: /config/areas/area/kitchen
      - type: icon
        value: mdi:skip-next
        align: center
        tap_action:
          action: perform-action
          perform_action: media_player.media_next_track
          target:
            entity_id: media_player.spotify
          data: {}
```

### Response
#### Success Response (200)
Not Applicable (Configuration)

#### Response Example
Not Applicable (Configuration)
```

--------------------------------

### Dynamic Text Cell Styling with FCC Tag (YAML)

Source: https://github.com/michalowskil/flex-cells-card/blob/main/README.md

Shows how to dynamically set CSS styles for a text-type cell using the `mode='text'` attribute within the `<fcc>` tag, driven by entity states in YAML.

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

--------------------------------

### Flex Cells Card - Advanced Cell Types

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Illustrates the configuration for various advanced cell types within the Flex Cells Card, including string cells with custom styling, icon cells, entity cells displaying states or icons, and entity cells that display specific attributes with custom units. This allows for highly customized data presentation.

```yaml
rows:
  # String cell - static text
  - cells:
      - type: string
        value: "Room Name"
        align: left
        style:
          text_transform: uppercase
          bold: true
          color: "#333333"
          background: var(--divider-color)

  # Icon cell - MDI icons
  - cells:
      - type: icon
        value: mdi:thermometer
        align: center
        style:
          icon_size: 24px
          color: var(--primary-text-color)

  # Entity cell - displays entity state
  - cells:
      - type: entity
        value: sensor.temperature
        align: right
        use_entity_unit: true
        precision: 1
        entity_display: icon  # Options: state, icon

  # Entity with attribute
  - cells:
      - type: entity
        value: weather.home
        attribute: attributes.temperature
        align: right
        use_entity_unit: false
        unit: "°C"
        precision: 1
```

--------------------------------

### Define Custom HTML Card Layout

Source: https://context7.com/michalowskil/flex-cells-card/llms.txt

Configures a custom layout for a climate card using HTML and CSS within the flex-cells-card. The <fcc> tag is used to inject specific cells into the custom structure.

```yaml
type: custom:flex-cells-card
rows:
  - cells:
      - type: entity
        value: climate.ac
        entity_display: icon
  - cells:
      - type: entity
        value: climate.ac
        attribute: current_temperature
        unit: "°C"
  - cells:
      - type: entity
        value: climate.ac
        attr_edit:
          enabled: true
          service: climate.set_temperature
          field: temperature
          control: slider
          min: 16
          max: 30
          step: 1
        show_control_value_right: true
column_count: 1
custom_template_enabled: true
custom_template_html: |-
  <style>
    .row { display: flex; flex-wrap: wrap; }
    .col-1 { flex: 0 0 50px; margin-bottom: 10px; }
    .col-2 { flex: 1 1 110px; min-width: 110px; padding-left: 10px; }
  </style>
  <div class="row">
    <div class="col col-1"><fcc class="icon" row="1" col="1" /></div>
    <div class="col col-2">
      <b>Living room</b>
      <div><fcc class="current-temp" row="2" col="1" /></div>
      <div class="slider"><fcc class="target-temp" row="3" col="1" /></div>
    </div>
  </div>
```

--------------------------------

### Inject Raw Entity Values into Text Overrides

Source: https://github.com/michalowskil/flex-cells-card/blob/main/README.md

Use the RAW token within the 'Date/Time format & Text override' field to display unformatted entity values. This is useful for custom text labels.

```text
[light is: ]RAW
```

--------------------------------

### Embed Custom HTML Templates in Flex Cells

Source: https://github.com/michalowskil/flex-cells-card/blob/main/README.md

Use the custom <fcc> tag to embed cells within other cells. This allows for nested layouts while maintaining dynamic rules and custom CSS.

```html
<fcc row="1" col="2" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.