How to Render a field collection item in a Twig template in tabular view

Question

I have a field collection field having four fields.

I want to display the record in tabular format.

What I have done.

Created a field twig template file.

Added the code like

{% for item in items %}
    <div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}

Twig file is working properly. But i need to display the content in tabular form.

Coming like

Required

Available Variables

Answer 1

There is not only one twig template, there are three levels of twig templates in a field collection field:

1) The field template for the field-collection field: field--field-collection.html.twig

2) The field-collection template itself: field-collection-item.html.twig

3) The field templates for the fields inside of the field collection: field--field-collection-item--field-field1.html.twig

When you are in the top level, the fields of the field collection are not built yet and you have no access to the rendered fields.

The best approach is probably to put the table structure in all three levels, in 1) the header and footer, in 2) the row and in 3) the cells.

There is one problem with this approach. In 1) you don't have the labels for the header. If you don't want to hardcode them, you can try to get them from the configuration of the field collection in a preprocess hook.