Eleventy project logo

Eleventy Splitting Category Data Across Two Table Columns

Print Friendly and PDF

Posted: November 18, 2023 | Categories: Eleventy

The Categories list on this site is getting pretty long, so one of the things I wanted to do this weekend was migrate the Unordered List (<ul></ul>) the site used today into a two column table. I asked Bard and it generated relatively useless code for me; after three tries I finally got something that looked like it would work, but didn't.

As I poked around in the Liquid docs, I noticed that Liquid has a https://shopify.github.io/liquid/tags/iteration/ tag I could use for this. Basically you give it a collection and number of columns and it automatically generates columns for you.

{% tablerow product in collection.products cols:2 %}
{{ product.title }}
{% endtablerow %}

With that in mind, I replaced the site's Category page content with the following code:

{% if categories.length > 0 %}
{% tablerow catData in categories cols:2 %}
<a href="{{ "/" | htmlBaseUrl }}categories/{{ catData.category | slugify }}/">{{ catData.category }}</a>
Count: {{ catData.count }}
{% if catData.description.length > 0 %}
{{ catData.description }}
{% endif %}
{% endtablerow %}
{% else %}
<p>No category data to display</p>
{% endif %}

It generates the columns exactly as expected and saved me a lot of work hand crafting Liquid code to do it.

Next Post: Outlook Windows Delete Empty Inbox Folders

Previous Post: Using UDP Broadcast to Synchronize Actions Across Arduino Devices

If this content helps you in some way, please consider buying me a coffee.

Header image: Eleventy Project Home Page.