Twig foreach array shortcut for tables

[Jessica]

I like the fact that Twig has the shortcuts "Twig has shortcuts for common patterns, like having a default text displayed when you iterate over an empty array:"

{% for user in users %}
    * {{ user.name }}
{% else %}
    No user have been found.
{% endfor %}

How can you use this if you're generating a table?

For example, I have this:

<table class="table table-bordered table-striped table-hover">
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Actions</th>
            </tr>

            {% for service in services_table %}
            <tr>
                <td>{{ service.name }}</td>
                <td>{{ service.description }}</td>
                   <td>
                        <a class="btn btn-mini btn-primary btn-block" href="{{ path('admin_edit_service', {'id':service.id}) }}"><i class="icon-pencil icon-white" title="Edit"></i> Edit</a>

                        <a class="btn btn-mini btn-danger btn-block" href="{{ path('admin_delete_service', {'id':service.id}) }}"><i class="icon-trash icon-white" title="Delete"></i> Delete</a>
                    </td>
                </tr>
{% endfor %}
            </table>

If I wanted to use the shortcut {% else %} block to display a message, I'd have already started the table header. So what I've been doing instead is wrapping the above code in an

{% if services_table|length %} ... {% else %}

which is less elegant.

 

How do you handle this? Display the table including headers if there are rows, otherwise display an else message?

[kicken]

I typically do something like this for empty tables:

<table class="table table-bordered table-striped table-hover">
	<tr>
		<th>Name</th>
		<th>Description</th>
		<th>Actions</th>
	</tr>

	{% for service in services_table %}
	<tr>
		<td>{{ service.name }}</td>
		<td>{{ service.description }}</td>
		<td>
			<a class="btn btn-mini btn-primary btn-block" href="{{ path('admin_edit_service', {'id':service.id}) }}"><i class="icon-pencil icon-white" title="Edit"></i> Edit</a>

			<a class="btn btn-mini btn-danger btn-block" href="{{ path('admin_delete_service', {'id':service.id}) }}"><i class="icon-trash icon-white" title="Delete"></i> Delete</a>
		</td>
	</tr>
	{% else %}
	<tr>
		<td colspan="3">No Records</td>
	</tr>
	{% endfor %}
</table>

If you want to omit the table entirely though then you're stuck just doing an if/else statement around the whole thing.

[Jessica]

Thanks Kicken - I personally think it looks nicer without the table at all, but I guess that's really a personal preference. My boss thinks it looks better with the table headers (This is my personal project, but we had the same issue at work)

[Psycho]

I prefer to include the table and headers even when there are no records. It makes the layout consistent. I look at the scenario where a user might be doing multiple searches. One search might return multiple pages of records, another only one page and yet another with no records. when the user does a search with no records they are going to be presented with a screen that looks and feels the same. Plus, just throwing a "no records found" in the middle of the page can look odd - if not done right.

 

But, yes, it is a personal preference.