---
title: "Handle Iterations · RUAL Documentation"
description: "Render lists and repeat structures without fighting the renderer."
canonical: https://docs.rual.nl/interfaces/iterations
language: en
---

# Iterations

Working with iterative, repeating content poses a significant challenge, particularly because we prioritize exceptionally fast rendering. Let's explore in depth how we maintain rapid performance with iterative content.

### When Iterative Components Are Used

Our system is designed to render precisely what you request. However, in certain scenarios, such as with [Advanced Datatables](https://docs.rual.nl/block-types/state%20ui/state_advanced_datatable), iterative content becomes necessary. By default, we supply content directly from [storage](https://docs.rual.nl/blueprints/storage), but sometimes this approach does not suffice.

Take, for instance, the need to display a status label within the datatable. One could utilize the `Row Map` function for this purpose, returning a `state` pin with the corresponding name. However, this method has a significant drawback: it necessitates rebuilding the entire component for each row from the backend and then fetching it on the frontend. In such situations, using iterate states offers a more efficient solution.

### How It Works

When you create, for instance, an [Advanced Datatable](https://docs.rual.nl/block-types/state%20ui/state_advanced_datatable), an outpin named `Row Component` becomes available. Dragging from this outpin leads to the creation of the `execute component` block.

Within this block, you can assign a [Custom Component](https://docs.rual.nl/interfaces/components) that the system will utilize for each row's individual column, reusing this component on the frontend to significantly enhance rendering speed. Additionally, backend-exclusive information can still be provided via the `Map Row` functionality, with the returned information from these being accessible to your component as well.

```
const { translate } = window.RUAL;

export default function CustomComponent({ uid, index, columns, row }) {
  return (
    <tr guid={row._meta.guid}>
      <td>
        <a href={`/users/${row._meta.guid}`}>
          {row.username}
        </a>
      </td>
      <td>
        {row.firstname} {row.lastname}
      </td>
      <td>
        <a href={`mailto:${row.email}`}>
          {row.email}
        </a>
      </td>
      <td>
        {translate(row.language)}
      </td>
    </tr>
  );
}
```

### Exposed Iterate Parameters

When using a Custom Component within iterators, the following parameters are automatically provided:

| parameter | example usage |
| --- | --- |
| `uid` | Unique identifier for the row |
| `index` | Position of the item (starting from 0) |
| `columns` | Array of columns displayed in datatable |
| `row` | row._meta.guid, row.username, row.firstname, row.lastname, row.email, row.language |

### Using a TR as the first item in the component

To make this work, please use a [`tr`](https://docs.rual.nl/block-types/state%20ui/state_tr) element as the first item in the row component. This ensures the component fits properly in the datatable.

### Enabling JSON Right Click

To enable the JSON right-click modal for a row, you must add `guid={row._meta.guid}` as a parameter to the [`tr`](https://docs.rual.nl/block-types/state%20ui/state_tr) element in the row render component.

### An Example

Below is a straightforward example demonstrating how to use iterate state components. Notably, in React, it's possible to return data without enclosing it within an HTML tag. This approach is highly recommended as fewer DOM nodes lead to faster rendering.

```
const { translate } = window.RUAL;

export default function CustomComponent({ uid, index, columns, row }) {
  return (
    <tr guid={row._meta.guid}>
      <td>
        <a href={`/users/${row._meta.guid}`}>
          {row.username}
        </a>
      </td>
      <td>
        {row.firstname} {row.lastname}
      </td>
      <td>
        <a href={`mailto:${row.email}`}>
          {row.email}
        </a>
      </td>
      <td>
        {translate(row.language)}
      </td>
    </tr>
  );
}
```