Skip to main content

Rows

CollectionView row styles live under top-level rows. A row's settingsKey resolves to one of these styles and controls the row implementation, row height, cell footprint, default cell style, focus behavior, and loading behavior.

{
  "rows": {
    "regular": {
      "rowType": "HorizontalRow",
      "height": 260,
      "cellSize": [384, 216],
      "cellSettingsKey": "cells.poster",
      "focusedScale": 1.08
    },
    "featured": {
      "$extends": "rows.regular",
      "height": 430,
      "cellSize": [640, 360],
      "cellSettingsKey": "cells.featured"
    }
  }
}

Row Types​

Common row types include:

  • HorizontalRow: a horizontal rail of cells.
  • GridRow: a multi-column grid row.
  • ListRow: a vertical list inside the collection.
  • custom row classes when the whole row should be a real Hosanna view.

Core Fields​

  • rowType: row implementation.
  • height: row height in design points.
  • cellSize: default cell footprint.
  • cellSettingsKey: default cells.* style rendered by each DynamicCell.
  • focusedScale: scales focused cells when the row applies focused state.
  • focus animation settings: configure horizontal and vertical focus movement behavior.
  • dynamic row settings: configure rows backed by dataSourceConfig.

Rows own layout and interaction policy. Cells own the view tree inside each item. See Cells for cells.* definitions.

Row Overrides​

settingsOverrides on a runtime row are deep-merged into the resolved row style. Use this for one-off row variants without creating another global style key.

this.dataSource.appendRows([
  {
    id: 'heroRow',
    settingsKey: 'rows.regular',
    settingsOverrides: {
      height: 430,
      cellSize: [640, 360],
      cellSettingsKey: 'cells.hero',
    },
    items: heroItems,
  },
]);

Mixed Cell Rows​

Rows can opt into item-selected cell styles with useMixedCellStyleKeys:

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

When enabled, an item-level cellSettingsKey can override the row default for that item.

Runtime Behavior​

The row style describes presentation. The data source owns row data, row insertion/removal, item updates, request triggers, tab metadata, and callbacks. See CollectionView Rows and Settings for the CollectionView integration model.