List View

A flexible and virtualized list of repeated components. It supports attaching an array as a datasource and can be customized to display and interact with data with any combination of components.

Refer to our guide on building with list views to learn more.

Properties

Available properties for List View with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

NameTypeDescriptiondata{ [key: string]: unknown }[]

A datasource that determines the items in your repeatable.

direction'vertical' | 'horizontal'

The direction of the List View when layoutType is list. When layoutType is grid, this property is ignored

heightType'fixed' | 'auto'

Whether the height of the container is fixed or auto. When enabled for vertical list views, the list view is not virtualized.

hiddenboolean

Whether the component is visible.

itemWidthstring

The width of each item in a horizontal list view.

layoutType'list' | 'grid'

Whether to display the List View in a list or a grid.

maintainSpaceWhenHiddenboolean

Whether the component takes up space on the canvas if hidden is true.

marginstring

The amount of margin to render outside of the component.

maxHeightstring

The max height of the list view when the height type is auto. Defaults to 100vh.

numColumnsnumber

The number of columns for a grid view.

overflowType'scroll'

The overflow behavior when the contents exceeds the height of the component. Either scroll to display a scrollbar or hidden to clip the contents.

paddingstring

The amount of padding used within the container.

primaryKeyFieldNameOverridestring

The field under which the primary key is stored in instanceValues. Defaults to primaryKey.

showInEditorboolean

Whether the component remains visible in the editor if hidden is true.

Methods

Methods for interacting with List View. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionscrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

setHidden(hidden: boolean)

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

scrollToIndex(index: any, smooth: any)

Scroll to a specific index

clearInstanceValues()

Clear all instance values.

resetInstanceValues()

Reset all instance values to their default values.