[BUG-UI/UX] CustomField does render html tables with handlebars iteration

[eric-mc2]

Describe the bug

I would like to use HTML table tags in my CustomField template. But my tables are not rendering. The handlebars # each helper seems to be ignored in the table context, causing @key to be unbound and {{this}} to be bound to the top-level argilla object instead of the iteration item.

The Argilla docs show an example that renders a table using divs and styling. This is an acceptable workaround. If table tags are not supported, I would appreciate seeing a note in the documentation, as this took a while to diagnose.

To reproduce

To reproduce, I create a dataset where each record contains tabular data (a list of dicts). I render the tabular data as an unordered list (sanity check) and then as a table (test case).

import argilla as rg
template = """
<ul>
{{#each record.fields.fruits}}
<li>{{this.fruit}} are {{this.color}}</li>
{{/each}}
</ul>
<table>
<thead><tr><th>Fruit</th><th>Color</th></tr></thead>
<tbody>
{{#each record.fields.fruits}}
<tr>
<td>{{this.fruit}}</td><td>{{this.color}}</td>
</tr>
{{/each}}
</tbody>
</table>
"""
settings = rg.Settings(fields=[rg.CustomField(name="fruits",template=template)],
                                    questions=[rg.LabelQuestion(name="Fact", labels=["True", "False"])])
dataset = rg.Dataset(name="test", settings=settings)
dataset.create()

records = [
    rg.Record(fields={"fruits": {"0": {"fruit": "Apples", "color": "red"},
                                                 "1": {"fruit": "Apples", "color": "green"},
                                                 "2": {"fruit": "Bananas", "color": "yellow"}
                                                }
                                  }
                     )
]
dataset.records.log(records)

Expected behavior

The above example ought to produce a list like:

• Apples are red
• Apples are green
• Bananas are yellow

and a table like:

Fruit	Color
Apples	red
Apples	green
Bananas	yellow

Screenshots

It correctly renders the list, but does not render any table rows:

• Apples are red
• Apples are green
• Bananas are yellow

Fruit	Color
BLANK	BLANK

Environment

• Browser [e.g. chrome, safari]: firefox
• Argilla Version [e.g. 1.0.0]: 2.8.0

Additional context

No response

[github-actions]

This issue is stale because it has been open for 90 days with no activity.