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>

Code

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

Data

{
  "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>

Output

<table>
  <tr class="row1">
<td class="col1">
    Draught of Immortality
  </td><td class="col2">
    Glacier ice
  </td><td class="col3">
    Health potion
  </td><td class="col4">
    Invisibility potion
  </td></tr>

</table>

Anchor to tablerow

tablerow tag parameters

Anchor to cols

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>

Code

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

Data

{
  "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>

Output

<table>
  <tr class="row1">
<td class="col1">
    Draught of Immortality
  </td><td class="col2">
    Glacier ice
  </td></tr>
<tr class="row2"><td class="col1">
    Health potion
  </td><td class="col2">
    Invisibility potion
  </td></tr>

</table>

Anchor to limit

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>

Code

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

Data

{
  "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>

Output

<table>
  <tr class="row1">
<td class="col1">
    Draught of Immortality
  </td><td class="col2">
    Glacier ice
  </td></tr>

</table>

Anchor to offset

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>

Code

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

Data

{
  "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>

Output

<table>
  <tr class="row1">
<td class="col1">
    Health potion
  </td><td class="col2">
    Invisibility potion
  </td></tr>

</table>

Anchor to range

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>

Code

<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>

Output

<table>
  <tr class="row1">
<td class="col1">
    1
  </td><td class="col2">
    2
  </td><td class="col3">
    3
  </td></tr>

</table><table>
  <tr class="row1">
<td class="col1">
    2
  </td><td class="col2">
    3
  </td><td class="col3">
    4
  </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

}

Was this page helpful?

Syntax

Code

Data

Output

Output

tablerow tag parameters

cols

Syntax

Code

Data

Output

Output

limit

Syntax

Code

Data

Output

Output

offset

Syntax

Code

Data

Output

Output

range

Syntax

Code

Output

Output

Properties

Example