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.


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.


Whether the component is visible.


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.


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


The amount of margin to render outside of the component.


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


The number of columns for a grid view.


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


The amount of padding used within the container.


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


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


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


Clear all instance values.


Reset all instance values to their default values.