> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/template-editor/miscellaneous/repeater.md).
# Repeater
##  Introduction
While a Datagrid can be used to present the data in a table row by row in a tabular view, a Repeater can be used to present the records in a list one below the other (vertically stacked, but different from Datagrids) or side-by-side (horizontally stacked) or stacked in a grid (not to be confused with a Datagrid) of x records per row.
So, Repeaters also, like Datagrids, let you display data from a list (database list / transient list) on to the user interaction screen. However, unlike Datagrids, Repeaters do not have an 'on click row' option. But you can always add a Button in a Repeater. When a Button is clicked, WEM will then know which record is being referred to.
## Properties
All the properties except for ***Appearance*** are the same as explained in the previous page for Datagrid. Please refer there for more details on the common properties.
***Appearance: Layout -*** This property determines how the cards are arranged in a page. You could arrange the cards one below another in a ***vertical*** grid, one beside another in a ***horizontal*** grid or in a ***grid*** of multiple rows and multiple columns per row.
***Vertical -*** This is the default manner in which the cards are arranged one below another, as you see in step 6 of the Illustration. When the page size is specified, a page shows that many number of cards.
***Horizontal*** - This allows you to stack the cards one beside another.
Preview
You can see that the cards are jammed close to one another and there are too many cards in a row. For the former, make sure that you arrange the contents within the Repeater properly so as to include some empty vertical spacing. For the latter, make sure that you adjust the ***Page size*** property accordingly.
Preview
***Grid*** - This allows you to arrange the cards in a grid consisting of rows and configurable number of columns per row.
When you select this option, you get further options for selecting the *Grid render direction* and *Number of columns per row*.
*Grid render direction = Left to right* results in the cards being populated row 1 first and then row 2 and so on, whereas *Grid render direction = Top to bottom* results in the cards being populated column 1 first and then column 2 and so on.
*Number of columns* per view allows you to specify how many cards should be there in a row for diferent screen sizes.
The configuration in the above screenshot results in 4 cards per row, rendered left to right.
On the other hand, if the configuration was such that the rendering needs to be top to bottom, with 3 cards in a row, this is what happens...
## Illustrations
In our EMS use case, we were showing the clients list in a Datagrid in the 'Clients' Template Fragment. Let's now try to use Repeaters here instead.
1. Let's assume you have a blank canvas (Template Editor) in the 'Clients' Template Fragment. Let's also assume that we have a company logo (image) stored in the 'Clients' datalist.
2. In the Template Editor, click on the 'Repeater' icon and drag it to the canvas. This would prompt you to select a list.
3. For our example, select the 'Clients' list from the tree and click on 'Ok.
Adding a repeater
Repeater inserted
4. Instead of steps 2 and 3, there is another way of adding a Repeater to the Template Editor. Drag the list from the data model tree into the Template Editor. This will bring up an overlay from which you can choose to create a Repeater.
Adding a repeater
Repeater inserted
5. As you can see, the Repeater is empty. You can now design thw way you would like the information to be displayed in the Repeater. Let's design a Table within a Div that shows the company logo on the left and client id and name on the left.
{% hint style="info" %}
Read the pages for [Table](/platform/template-editor/layout/table.md) and [Div](/platform/template-editor/layout/div.md) if you would like to familiarize yourself with the topics
{% endhint %}
6. Press 'Save' and see what happens at run-time, while previewing the project. The clients list is now shown as cards.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.wem.io/platform/template-editor/miscellaneous/repeater.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.