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, iterative content becomes necessary. By default, we supply content directly from 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, 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 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.
Exposed Iterate Parameters
When using a Custom Component within iterators, the following parameters are automatically provided:
| Parameter | Description |
|---|---|
uid |
A unique identifier for this datatable row, ensuring distinct references. |
index |
The position of the item within the datatable, starting from 0. |
columns |
An array representing the columns displayed in the datatable when this iterate state is rendered. |
row |
An object containing all the data fields of the current document being rendered. |
Using a TR as the first item in the component
To make this work, please use a 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 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.
