tablerow

Generates HTML table rows for every item in an array.

The tablerow tag must be wrapped in HTML <table> and </table> tags.

Tip

Every tablerow loop has an associated tablerowloop object with information about the loop.

Syntax

{% tablerow variable in array %}

expression

{% endtablerow %}

variable

The current item in the array.

array

The array to iterate over.

expression

The expression to render.

<table>

{% tablerow product in collection.products %}

{% endtablerow %}

</table>

<table>
  {% tablerow product in collection.products %}
    {{ product.title }}
  {% endtablerow %}
</table>

{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}

Output

<table>

Draught of Immortality

</td><td class="col2">

Glacier ice

</td><td class="col3">

Health potion

</td><td class="col4">

Invisibility potion

</td></tr>

</table>

tablerow tag parameters

cols

Syntax

{% tablerow variable in array cols: number %}

expression

{% endtablerow %}

You can define how many columns the table should have using the cols parameter.

<table>

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

{% endtablerow %}

</table>

<table>
  {% tablerow product in collection.products cols: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>

{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}

Output

<table>

Draught of Immortality

</td><td class="col2">

Glacier ice

</td></tr>

Health potion

</td><td class="col2">

Invisibility potion

</td></tr>

</table>

limit

Syntax

{% tablerow variable in array limit: number %}

expression

{% endtablerow %}

You can limit the number of iterations using the limit parameter.

<table>

{% tablerow product in collection.products limit: 2 %}

{% endtablerow %}

</table>

<table>
  {% tablerow product in collection.products limit: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>

{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}

Output

<table>

Draught of Immortality

</td><td class="col2">

Glacier ice

</td></tr>

</table>

offset

Syntax

{% tablerow variable in array offset: number %}

expression

{% endtablerow %}

You can specify a 1-based index to start iterating at using the offset parameter.

<table>

{% tablerow product in collection.products offset: 2 %}

{% endtablerow %}

</table>

<table>
  {% tablerow product in collection.products offset: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>

{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}

Output

<table>

Health potion

</td><td class="col2">

Invisibility potion

</td></tr>

</table>

range

Syntax

{% tablerow variable in (number..number) %}

expression

{% endtablerow %}

Instead of iterating over specific items in an array, you can specify a numeric range to iterate over.

Note

You can define the range using both literal and variable values.

<table>

{% tablerow i in (1..3) %}

{% endtablerow %}

</table>

{%- assign lower_limit = 2 -%}

{%- assign upper_limit = 4 -%}

<table>

{% tablerow i in (lower_limit..upper_limit) %}

{% endtablerow %}

</table>

<table>
  {% tablerow i in (1..3) %}
    {{ i }}
  {% endtablerow %}
</table>

{%- assign lower_limit = 2 -%}
{%- assign upper_limit = 4 -%}

<table>
  {% tablerow i in (lower_limit..upper_limit) %}
    {{ i }}
  {% endtablerow %}
</table>

Output

<table>

</td><td class="col2">

</td><td class="col3">

</td></tr>

</table><table>

</td><td class="col2">

</td><td class="col3">

</td></tr>

</table>

tablerowloop
object

Information about a parent tablerow loop.

Properties

col number: The 1-based index of the current column.
col_first boolean: Returns true if the current column is the first in the row. Returns false if not.
col_last boolean: Returns true if the current column is the last in the row. Returns false if not.
col0 number: The 0-based index of the current column.
first boolean: Returns true if the current iteration is the first. Returns false if not.
index number: The 1-based index of the current iteration.
index0 number: The 0-based index of the current iteration.
last boolean: Returns true if the current iteration is the last. Returns false if not.
length number: The total number of iterations in the loop.
rindex number: The 1-based index of the current iteration, in reverse order.
rindex0 number: The 0-based index of the current iteration, in reverse order.
row number: The 1-based index of current row.

{

"col": 1,

"col0": 0,

"col_first": true,

"col_last": false,

"first": true,

"index": 1,

"index0": 0,

"last": false,

"length": 5,

"rindex": 5,

"rindex0": 4,

"row": 1

}

{
  "col": 1,
  "col0": 0,
  "col_first": true,
  "col_last": false,
  "first": true,
  "index": 1,
  "index0": 0,
  "last": false,
  "length": 5,
  "rindex": 5,
  "rindex0": 4,
  "row": 1
}

Was this page helpful?

tablerow

Syntax

Output

tablerow tag parameters

cols

Syntax

Output

limit

Syntax

Output

offset

Syntax

Output

range

Syntax

Output

tablerowloopobject

Properties

tablerowloop
object