Skip to main content


Display a list or tile view for search results, recommendations, or pages using a repeating cell pattern. Click a cell to open a page or slideout panel.

Add data to a grid

Start by dragging the Grid component from the Components panel to the empty canvas.

Drag a grid from the components panel

The grid will load with an example dataset.

Example dataset within a grid component

To edit the grid with your own data:

  1. Customize the name and header for the grid
  2. Remove the default grid data and select 'Add a new API. In this example, we'll use a REST API.
Add a new API from the grid data

The REST API will use a simple JSON-based API for getting information on Harry Potter characters. In the API panel, add the URL,, and update the name of the API to getHpCharacters. Click "Run" to populate the grid with some of the resulting output.

Create a REST API step to get Harry Potter characters

We can also see the API resonse in the API panel's "Result" section, as well as by hovering over the Grid Data value {{getHpCharacters.response}}. Any of these attributes can now be used in the grid. Populate a grid using the response of an API that returns Harry Potter characters

Map data to grid cells

Next, we'll edit the grid so the cell elements pull from the previous API values. To configure each cell element, click the element and update its value to {{currentCell.<KEY>}} in the Properties panel. Here we'll change the image to {{currentCell.image}} and the text components to {{currentCell.dateOfBirth}} and{{}}

Populate each cell of a grid with a subset of the data returned from an API

Customize grid

Adjust the grid display and image size by increasing the Column Count to 4, and disable Fill the container on the image.

Increase the column count of the grid and disable the fill the container property on the image

We can also resize and organize elements within a grid cell.

Resize and organize the elements within the grid cells

Lastly, we can use JavaScript for further customization of text cells, such as setting conditional logic to only display the date of birth for a character if its returned in the API response, or changing the text color depending on the house.

Use conditional logic to dynamically update the character&#39;s DOB

Use conditional logic to dynamically update the character&#39;s house text color

Trigger action on cell click

When a grid cell is clicked, let's add a Slideout panel for more details about each character.

Use event handlers to open a slideout when a cell in the grid is clicked

Customize the slideout with components that reference the selected cell by adding the name of the grid, and dot referencing the property grid cell. For example, {{}}

Customize a slideout dynamically based on the selected cell of the grid

Grid Properties

Component Properties

Grid HeaderSet the grid title
Grid DataTakes in an array of objects and displays each as a cell in the grid
Column CountAdjust number of columns to display
Default Selected CellIndex of the cell to select and highlight by default (starts at 0)
Enable SearchAdd a search box within the grid to filter results
VisibleToggle the visibility of the component
Loading AnimationControls the loading state of the component, values are a boolean

Settable Properties

Property Via Form / Via RunJSTypeExample Value
Selected Cell / selectedCellIndexnumber0

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Grid, and dot referencing the property. For a Grid named Grid1:

Grid1.selectedCell.<KEY>Returns data from the selected cell, for example
Grid1.selectedCellIndexReturns the index of the selected cell, as a number, the first cell starts at 0
Grid1.cellsReturns an array of the data in the cells
Grid1.titleReturns the title of the component


The following events are triggered by user interactions with Grid components. Use event handlers to trigger actions in response to user events.

onCellClickedTrigger an action when a grid item is clicked