Flex-grid

A pooled, virtualized 2D grid for RSG TypeScript apps, for the rows of cards, shelves and poster grids that show many items at once

Cells come from a recycled pool and only the rows near the viewport exist, so a grid with hundreds of items stays within what a device can hold. You describe the geometry and the cell component, choose a focus strategy for each axis, and add optional plugins such as row titles, a focus highlight or zoom-on-focus. The grid owns scrolling and focus movement inside itself.

Pages

Page	Description
_resetGlobalHooksForTest	Reset global hook installation state.
binarySearchFloor	Finds the last sorted position that does not exceed a target.
buildCumY	Builds cumulative vertical positions for rows with different heights.
buildUniformCumX	Builds cumulative horizontal positions for equally sized items.
buildVariableCumX	Builds cumulative horizontal positions for items with different widths.
clearDirty	Called by the engine after it has processed all dirty rows in a tick.
composeHorizontalStrategy	Compose a base horizontal strategy with zero or more row-specific extensions.
computeBobRowReserve	Computes the extra row spacing reserved by the bob plugin.
computeBobY	Computes the vertical position below a row for the bob plugin.
computeDataRow	Determine the data row index displayed in a given vertical pool slot, given the focused row and pool window parameters.
computeEndZoneStartRow	Finds the first row in the fixed-focus end zone.
computeScrollYForRow	Computes the vertical translation that pins a row at the fixed focus line.
computeTotalContentHeight	Computes the content height without a trailing row gap.
computeUniformPoolSize	Compute pool dimensions for a uniform grid (all cells share one cellSize).
computeVariablePoolSize	Compute pool dimensions for a variable-geometry grid (rows may differ in cell size).
computeVirtualX	Computes a horizontal position for a column in a looping row.
createBobPlugin	Create a bob-in-the-middle plugin.
createDirectionalPinnedFocusXExtension	Pins the focused item's left edge to the X coordinate selected by getAlign.
createEmptyPlaceholderPlugin	Create an empty/loading placeholder plugin.
createFlexGrid	createFlexGrid — description pending.
createFlexGridEngine	Creates the low-level layout engine for a grid.
createFocusHighlightPlugin	Create a focus-highlight plugin.
createGridStore	Create a new GridStore with numRows rows, all initially undefined (loading).
createNavigationController	Creates the low-level grid navigation controller.
createPerfPlugin	Creates grid performance instrumentation for console output or reactive counters.
createPinnedFocusXExtension	Pin the focused item's left edge to a fixed screen X (hero banner carousel).
createPool	createPool — description pending.
createRowBackdropPlugin	One backdrop node per region in the grid's back scroll layer: behind every row, scrolling with them, and gliding with the rows when a row Y offset opens above or inside it.
createRowCardsClipPlugin	Clips a row's cards to a rect that moves with the row but not with its horizontal scroll, so the cards scroll through it and a card is cut at its edge with its motion untouched.
createRowTitlePlugin	Create a row-title plugin.
createScrollXOffsetExtension	Subtracts an offset from the base strategy's scroll X for matching focus states.
createSmoothScrollBridgePlugin	Makes scroll state available to cell templates through their grid key.
defineFlexGrid	Returns a Solid component that renders a grid configured through FlexGridRuntimeProps.
findNearestSortedIndex	Finds the sorted position nearest to a target within a prefix.
fixedFocusStrategy	fixedFocusStrategy — description pending.
fixedFocusWrapStrategy	fixedFocusWrapStrategy — description pending.
floatingFocusStrategy	floatingFocusStrategy — description pending.
floatingFocusYStrategy	floatingFocusYStrategy — description pending.
gridScrollMs	Reads the grid's current per-step scroll duration in milliseconds.
isGridSmoothScrolling	Reads whether a grid is currently performing a held smooth scroll.
isPerfGridPlugin	Identifies performance plugins during grid initialization.
matchRow	Matches a single row index.
matchRowWhen	Matches when a predicate on the row index returns true.
resolveFocusConfig	Resolves focus options for the grid implementation.
resolveGridPlugins	Resolves plugin entries during grid initialization.
setNumRows	Grow or shrink the store's row count.
setRow	Update a single row in place.
setRows	Update multiple contiguous rows in place.
withZoomFocus	Returns a cell template that scales on focus via the grid tween primitive.
Flex-grid types	Types shared by several `@roku-sdk/flex-grid` exports.

Updated about 4 hours ago

What’s Next

_resetGlobalHooksForTest

Did this page help you?