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 Params
When utilizing a Custom Component within iterators, the following parameters will be automatically provided:
| Parameter | Description |
|---|---|
column |
An object that includes the .field and .guid of the specific column being rendered. |
row_result |
An object representing the complete result of the current row, enabling the use and combination of other columns. |
row_index |
The index of the current row being rendered. |
row_data |
The specific data for this column in the current row as would be rendered by the backend. This might also include a state from the Map Row, although this is generally discouraged due to potential impacts on rendering speed. |
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.
