List Component

Configuration Options
Theme Options


The list component is used to display multiple items in a horizontal, vertical or grid pattern. Based on the datasource, it renders each item in the datasource with a customized card.


When you drag in a list component, 2 empty cards get rendered on the canvas inside this component. Those are dropzones. You can drop in components from the library to design the card as per needed.

The design for the cards cannot vary between different items so any changes made to one will reflect in all the others.

Accessing list data from child components

When you render a list, you want each individual list item to have titles, subtitles etc based on the datasource item that it's representing. This can be done by accessing the self variable

For example, in a list of users, we want our text component inside the list item to show the name of the user.


In order to access the name of the user from within the list, we can access it using {{}}.

The list component will replace {{}} with the name stored in each list item key.

Configuration Options


Expected Type: String

The text that displays inside the list.


Expected Type: Object | Item

The datasource powering the list. Must be a list of items. For each item in the list, the list component renders a new card component. Card components can refer to the item's data using {{}}

The two empty cards shown when the list is empty are not shown in preview or the published app.

List Type

Expected Type: Vertical | Horizontal | Grid

Determines how the list is rendered.

  • Vertical Lays out all the elements vertically one after the other similar to rows.
  • Horizontal Lays out all the elements horizontally one after the other similar to columns.
  • Grid Lays out all the elements horizontally and vertically to form a grid.

Auto Height

Expected Type: String

Determines how the height of the list items are configured. If this is enabled, then the heights would be determined by the contents of the list item. (Useful when a paragraph of unknown length needs to be displayed).

If Disabled, you can manually configure the height of the list item but it will be the same across all items.


  • Click: Triggers whenever the list is clicked.
  • Double Click: Triggers whenever the list is clicked twice in quick succession.
  • Right Click: Triggers whenever the list is right-clicked.
  • Mouse Enter: Triggers whenever the mouse starts hovering over the component.
  • Mouse Leave: Triggers whenever the mouse stops hovering over the component.

Theme Options

  • Title Align: The title's text alignment. (Number | Pixels)
  • Title Color: The title's text color. (String | Hex)
  • Title Style: The title's text style. (Bold | Italic | Underline)
  • Text Size: The title's text size. (Number | Pixels)
  • Padding: The chart's padding. (Number | Pixels)
  • Shadow: The chart's shadow. (Shadow)
  • Border: The chart's border. You can also specify the radius for the edges. (Border)
  • Background Color: The chart's background color. (String | Hex)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. β†’