Skip to main content

The Image Grid component for Retool Apps

A content area to display images in a grid layout.

Version: Cloud and 3.234 Edge
Demo

Properties​

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

aspectRatio​

The ratio of width-to-height (e.g., 1.3 to use 4:3 ratio).

Type number
Format Float
Configurability Inspector
Examples
1.3

captionByIndex​

A list of captions for each item, by index.

Type array
Format Plain Text
Array values string
Configurability Read-only
Default
[]
Examples
["Caption 1", "Caption 2"]

clickable​

Whether there is an enabled Click event handler.

Type boolean
Format True/False
Configurability Inspector > Interaction > Event handlers
Default
false
Examples
true

clickableByIndex​

A list of boolean values for each item, by index, that reflect whether they have an enabled Click event handler.

Type array
Array values boolean
Configurability Read-only

columnCount​

The number of columns to display.

Type number
Configurability Inspector

columnMinWidth​

The minimum width of each column if columnType is responsive.

Type number
Configurability Inspector

columnType​

The type of columns to display.

Type string
Configurability Inspector
Allowed Values
ValueDescription
fixed

Fixed width.

responsive

Responsive width.

events​

A list of configured event handlers that trigger actions or queries.

Type array
Array values object
Configurability Inspector > Interaction > Event handlers
Array Object Properties

event​

The event that triggers the action. Refer to the events section for details of available events for this object.

Type string
Configurability Inspector > Interaction > Event handlers > Event

method​

The JavaScript method to perform when type is datasource, widget, state, or localStorage.

Type string
Configurability Inspector > Interaction > Event handlers > Edit event handler > Run script actions

type​

The type of action to perform.

Type string
Configurability Inspector > Interaction > Event handlers > Edit event handler > Action
Allowed Values
ValueDescription
datasource

Control query.

widget

Control component.

script

Run script.

state

Set variable.

localStorage

Set localStorage.

util

Perform utility action (e.g., Open URL or Confetti).

hiddenByIndex​

A list of items, by index, and whether they are hidden.

Type array
Array values boolean
Configurability Read-only
Default
[]
Examples
[true, false, true]

id​

The unique identifier (name).

Type string
Format Plain Text
Configurability Inspector
Default
imageGrid1
Examples
query1
button1

isHiddenOnDesktop​

Whether to show or hide this object in the desktop layout.

Type boolean
Format True/False
Configurability Inspector > Appearance > Advanced > Show on desktop
Default
false
Examples
true

isHiddenOnMobile​

Whether to show or hide this object in the mobile layout.

Type boolean
Format True/False
Configurability Inspector > Appearance > Advanced > Show on mobile
Default
true
Examples
true

maintainSpaceWhenHidden​

Whether to take up space on the canvas if hidden is true.

Type boolean
Format True/False
Configurability Inspector > Appearance > Advanced > Maintain space when hidden
Default
false
Examples
true

margin​

The amount of margin to render outside.

Type string
Format Plain Text
Configurability Inspector > Spacing > Margin
Allowed Values
ValueUI OptionDescription
4px 8pxNormal

Normal margin.

0None

No margin.

Default
4px 8px
Examples
4px 8px

showInEditor​

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

Type boolean
Format True/False
Configurability Inspector > Appearance > Advanced > Always show in edit mode
Default
false
Examples
true

srcByIndex​

A list of image URLs, by index.

Type array
Array values string
Configurability Read-only

style​

Custom style options.

Type object
Configurability Inspector > Appearance > style

tooltipByIndex​

A list of tooltips for each item, by index.

Type array
Array values string
Configurability Read-only
Default
[]
Examples
["Tooltip 1", "Tooltip 2"]

tooltipText​

The tooltip text to display next to the label on hover.

Type string
Format Markdown
Configurability Inspector > Content > Add-ons > Helper text
Default
null
Examples
Submit

Methods​

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

imageGrid.setHidden()​

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

Definition
imageGrid.setHidden(hidden)
Parameters

hidden​

Whether this object is hidden from view.

Type boolean
Format True/False
Default
false
Examples
true
Examples

Hide imageGrid.

imageGrid.setHidden(true);

Unhide imageGrid.

imageGrid.setHidden(false);

Events​

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

EventDescription
ClickAn item is clicked or pressed.