Container

Group components in a card. It supports scaling with content or remaining a fixed size with overflow options, showing or hiding sections of content or separating into multiple views, and can be disabled to prevent interaction with nested components.

Properties

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

NameTypeDescriptionclickableboolean

Whether the component has an enabled Click event handler.

currentViewIndexnumber | null

The index of the currently selected view

currentViewKeystring | number | boolean | null | undefined

The key of the currently selected view

disabledboolean

Whether user input, interaction, or selection is disabled.

enableFullBleedboolean

Whether the container is in full bleed mode, where it can only contain a single component which expands to fit the available space.

footerPaddingstring

The amount of padding used within the footer.

headerPaddingstring

The amount of padding used within the header.

heightType'auto' | 'fixed'

Whether the height automatically resizes to fit content or is a fixed size.

hiddenboolean

Whether the component is visible.

hoistFetchingboolean

Whether to display a loading indicator whenever nested components are fetching data.

hoveredboolean

Whether the component is currently hovered.

itemMode'static'

The configuration mode for option lists. Either dynamic for mapped options or static for manual options.

loadingboolean

Whether to display a loading indicator.

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.

overflowType'scroll' | 'hidden'

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.

showBodyboolean

Whether to display the body of the component if heightType is auto.

showBorderboolean

Whether to show the border around the component.

showFooterboolean

Whether to display the footer area of the component.

showFooterBorderboolean

Whether to show the border above the footer area.

showHeaderboolean

Whether to display the header area of the component.

showHeaderBorderboolean

Whether to show the border under the header area.

showInEditorboolean

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

tooltipTextstring

The text to display in a tooltip on hover or focus.

transition'none' | 'fade' | 'slide'

The transition animation to use when switching views

viewKeys(string | number | boolean | null | undefined)[]

An array of all view keys

views{ key: string | number | boolean | null | undefined, label: string, tooltip: string, hidden: boolean, disabled: boolean }[]

Settings for each view. All properties except key are used by linked components that control this container, such as Tabs.

Events

Events are triggered by user interactions with Container. Use event handling to trigger queries or other actions in response to events.

NameDescriptionClick

A user clicks the component. Clicking on a nested component only triggers this event on Container if the nested component is not configured to handle click events directly.

Change

A user changes the current value.

Methods

Methods for interacting with Container. 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.

setShowBody(showBody: boolean)

Set showBody value for the container

setShowHeader(showHeader: boolean)

Set showHeader value for the container

setShowFooter(showFooter: boolean)

Set showFooter value for the container

setHidden(hidden: boolean)

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

setDisabled(disabled: boolean)

Set the disabled value to toggle whether the input field is disabled. Defaults to true without a parameter.

setCurrentView(viewKey: boolean | string | number | void)

Set the current view of the container by key. No-op if the key is not valid.

setCurrentViewIndex(viewIndex: number)

Set the current view of the container by index. No-op if the index is out of bounds.

showPreviousView(wrap: boolean | void)

Show the previous view of the container. Does nothing if the current view is the first view.

showPreviousVisibleView(wrap: boolean | void)

Show the previous view of the container. Does nothing if the current view is the first view.

showNextView(wrap: boolean | void)

Show the next view of the container. Does nothing if the current view is the last view.

showNextVisibleView(wrap: boolean | void)

Show the next visible view of the container. Does nothing if the current view is the last view.

Related components