How to correctly output a Table Field?

Question

I have set up a Matrix field with three blocks, each contains a Table field.

Each table has one column - a single line text field.

When I call these tables into the template with this code, each row is echoed twice:

{% for block in entry.projectFacts.limit(3) %}
    <div class="panel panel-default">
    {% switch block.type %}
        {% case 'code' %}
            {% if block.codePoints | length %}
                <ul>
                    {% for items in block.codePoints %}

                        /* Outputs "Array" */
                        {{ items }}

                        {% for wtf in items %}
                            /* Outputs identical content & wrapper twice */
                            <li>{{ wtf }}</li>
                        {% endfor %}

                    {% endfor %}
                </ul>
            {% endif %}
    </div>
{% endfor %}

I'd be delighted if someone were able to point out what I need to do differently.

Answer 1

I suppose in your example codePoints is the actual Table field.

In order to output the table rows, the template should look like this:

{% if block.codePoints | length %}
    <ul>
    {% for row in block.codePoints %}
         {# Assuming 'text' is the column handle of the text field #}
        <li>{{ row.text }}</li> 
    {% endfor %}
    </ul>
{% endif %}

You get a double output because every row contains an array containing each table field twice, it looks like this:

array(2) { ["col1"]=> string(4) "Some" ["text"]=> string(4) "Some" }

That's why when loop over items you get every text twice.

I hope this helps.

Answer 2

Craft adds those extra elements to each array of table cells only if there's column handles defined in your Table Field.

This allows you to not only access a cell's value via row.col1, row.col2, etc. but also using the columns handle, e.g. row.price.

If you don't want to use this feature or programatically loop the cells, don't define column handles!