createRowTitlePlugin

Create a row-title plugin

import { createRowTitlePlugin } from "@roku-sdk/flex-grid/row-titles";

createRowTitlePlugin<T>(cfg: RowTitleConfig): InitGridPlugin<T>

Description

Create a row-title plugin. Pass the returned object in FlexGridConfig.plugins.

Parameters

Name	Type	Description
`cfg`	RowTitleConfig

Return values

Returns InitGridPlugin<T>.

Example

import { createRowTitlePlugin } from "@roku-sdk/flex-grid/row-titles";
createRowTitlePlugin({ height: 44, renderRowTitle: row => <label text={`Row ${row}`} /> });

Types

RowTitleConfig

Row Title Config configuration and callbacks.

Name	Type	Description
`height`	`number`	Height in pixels reserved above the row's card top edge for the title. The chrome group is translated up by this amount so the title sits above the cards.
`renderRowTitle`	`(row: number, ctx: RowTitleContext) => Element`	Return a JSX element to render as the title for row `r`. The `ctx` accessors are reactive; read them inside JSX props, `createEffect`, or `createMemo`. Never destructure `ctx` or read its accessors at the top level.

RowTitleContext

Reactive context passed to renderRowTitle on every render.

Name	Type	Description
`column`	`Accessor<number>`	Reactive accessor for the focused column index within the grid.
`isFocused`	`Accessor<boolean>`	Reactive accessor; true when this row is the currently focused row.
`numCols`	`Accessor<number>`	Reactive accessor for the logical column count of the current row.