Cells

CollectionView cells are fragment styles stored under top-level cells. A DynamicCell resolves the selected cells.* key, creates the fragment tree from views.base, and applies state updates such as normal, focused, and selected.

{
  "cells": {
    "poster": {
      "$supportsDataMap": true,
      "views": {
        "base": [
          { "id": "poster", "subType": "Poster", "width": 384, "height": 216 },
          { "id": "title", "subType": "Label", "y": 232, "width": 384 }
        ],
        "normal": {
          "poster": { "uri": "${data.posterUrl}" },
          "title": { "text": "${data.title}" }
        },
        "focused": {
          "poster": { "scale": [1.05, 1.05] }
        },
        "selected": {
          "poster": { "opacity": 0.85 }
        }
      }
    }
  }
}

See Fragments for the full fragment model, including constraints, data maps, lifecycle, callbacks, and provider behavior.

Selecting a Cell Style

Rows choose their default cell style with cellSettingsKey:

{
  "rows": {
    "regular": {
      "rowType": "HorizontalRow",
      "height": 260,
      "cellSize": [384, 216],
      "cellSettingsKey": "cells.poster"
    }
  }
}

The row controls the cell footprint. The cell style controls the view tree rendered inside that footprint.

Mixed Cell Styles

When a row enables useMixedCellStyleKeys, each item can provide a cellSettingsKey. Use this for editorial rows, featured cards, ad insertions, or any row where the first item is visually different from the rest.

{
  "rows": {
    "mixedRail": {
      "rowType": "HorizontalRow",
      "height": 430,
      "cellSize": [384, 216],
      "cellSettingsKey": "cells.posterSmall",
      "useMixedCellStyleKeys": true
    }
  }
}

{
  id: 'hero',
  title: 'Hero',
  cellSettingsKey: 'cells.posterLarge',
}

Data And Callbacks

Cell fragments can read item data, call registered callbacks, and use FragmentView callback hooks when the fragment is rendered inside a wrapper. Keep data mapping declarative in AppConfig and keep callback implementations in TypeScript.

{
  "views": {
    "base": [
      { "id": "cta", "subType": "Button", "text": "${data.callToAction}" }
    ],
    "focused": {
      "cta": {
        "onSelected": "openDetails"
      }
    }
  }
}

Row Runtime Data

Cell styles describe presentation. The CollectionView data source owns row data, dynamic loading, request triggers, tab metadata, and row callbacks. See CollectionView Data Source and Events for runtime row behavior.