Iterations

On an Advanced Datatable, render custom rows with a Custom Component on the Row Component outpin. The frontend reuses that one component for every row, instead of rebuilding a component per row on the backend.

This page is for maintaining existing state pages. On a web page, a row is a template: see web_foreach and Lists.

Use iterative components when a row needs more than storage content

Our system is designed to render precisely what you request. On Advanced Datatables, content comes directly from storage by default, but sometimes that does not suffice.

Take a status label within the datatable. You could use the Row Map function and return a state pin with the corresponding name, but that rebuilds the entire component for each row on the backend and then fetches it on the frontend. Iterate states are more efficient.

Drag from Row Component and assign a Custom Component

1. Create the block

   An Advanced Datatable has an outpin named Row Component. Dragging from it creates the execute component block.

2. Assign your component

   Assign a Custom Component in that block. The system uses it for each row's individual column, reusing it on the frontend to enhance rendering speed.

3. Add backend data if needed

   Backend-exclusive information can still be provided via the Map Row functionality; what it returns is accessible to your component as well.

Parameters a row component receives

Add a guid to enable the JSON right-click

To enable the JSON right-click modal for a row, add guid={row._meta.guid} as a parameter to the tr element in the row render component.

An example row component

In React, it is possible to return data without enclosing it within an HTML tag. This 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>
  );
}