---
url: https://developer.youcan.shop/themes/tags/tablerow.md
---

# `tablerow`

Generates an HTML table. Must be wrapped in opening `<table>` and closing `</table>` HTML tags. For a full list of attributes available within a tablerow loop, refer to the

::: info
Every `tablerow` provides a local variable [`tablerowloop`](#forloop-object).
:::

```liquid
{% tablerow item in array %}
  expression
{% endtablerow %}
```

* `item`: Item of the current array.
* `array`: Array to loop over.
* `expression`: Expression to render.

**Example:**

::: details Data

```json
{
  "products": [
    {
      "slug": "product-1",
      "price": 76
    },
    {
      "slug": "YouCan",
      "price": 100
    },
    {
      "slug": "product-2",
      "price": 30
    },
    {
      "slug": "product-3",
      "price": 124
    },
  ]
}
```

*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::

```liquid
<table>
  {% tablerow product in products %}
    {{ product.slug }}
  {% endtablerow %}
</table>
```

::: tip Output

```html
<table>
  <tr class="row1">
    <td class="col1">
      product-1
    </td>
    <td class="col2">
      YouCan
    </td>
    <td class="col3">
      product-2
    </td>
    <td class="col4">
      product-3
    </td>
  </tr>
</table>
```

:::

## Paramaters

### `cols`

Defines how many columns the tables should have.

**Example:**

::: details Data

```json
{
  "products": [
    {
      "slug": "product-1",
      "price": 76
    },
    {
      "slug": "YouCan",
      "price": 100
    },
    {
      "slug": "product-2",
      "price": 30
    },
    {
      "slug": "product-3",
      "price": 124
    },
  ]
}
```

*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::

```liquid
<table>
  {% tablerow product in products cols:2 %}
    {{ product.slug }}
  {% endtablerow %}
</table>
```

::: tip Output

```html
<table>
  <tr class="row1">
    <td class="col1">
      product-1
    </td>
    <td class="col2">
      YouCan
    </td>
  </tr>
  <tr class="row2">
    <td class="col1">
      product-2
    </td>
    <td class="col2">
      product-3
    </td>
  </tr>
</table>
```

:::

### `limit`

Exits the `tablerow` loop after a specific index.

**Example:**

::: details Data

```json
{
  "products": [
    {
      "slug": "product-1",
      "price": 76
    },
    {
      "slug": "YouCan",
      "price": 100
    },
    {
      "slug": "product-2",
      "price": 30
    },
    {
      "slug": "product-3",
      "price": 124
    },
  ]
}
```

*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::

```liquid
<table>
  {% tablerow product in products cols:2 limit:3 %}
    {{ product.slug }}
  {% endtablerow %}
</table>
```

::: tip Output

```html
<table>
  <tr class="row1">
    <td class="col1">
      product-1
    </td>
    <td class="col2">
      YouCan
    </td>
  </tr>
  <tr class="row2">
    <td class="col1">
      product-2
    </td>
  </tr>
</table>
```

:::

### `offset`

Starts the `tablerow` loop after a specific index.

**Example:**

::: details Data

```json
{
  "products": [
    {
      "slug": "product-1",
      "price": 76
    },
    {
      "slug": "YouCan",
      "price": 100
    },
    {
      "slug": "product-2",
      "price": 30
    },
    {
      "slug": "product-3",
      "price": 124
    },
  ]
}
```

*Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.*
:::

```liquid
<table>
  {% tablerow product in products cols:2 offset:2 %}
    {{ product.slug }}
  {% endtablerow %}
</table>
```

::: tip Output

```html
<table>
  <tr class="row1">
    <td class="col1">
      product-2
    </td>
    <td class="col2">
      product-3
    </td>
  </tr>
</table>
```

:::

### `range`

Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.

**Example:**

```liquid
<table>
  {% tablerow i in (1..4) %}
    {{ i }}
  {% endtablerow %}
</table>
```

::: tip Output

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

:::

## `forloop` object

### `col`

* Type: `number`
* Description: The 1-based index of the current column.

### `col0`

* Type: `number`
* Description: The 0-based index of the current column.

### `col_first`

* Type: `boolean`
* Description: Returns `true` if the current column is the first in the row. Returns `false` if not.

### `col_last`

* Type: `boolean`
* Description: Returns `true` if the current column is the last in the row. Returns `false` if not.

### `first`

* Type: `boolean`
* Description: Returns `true` if the current iteration is the first. Returns `false` if not.

### `index`

* Type: `number`
* Description: The 1-based index of the current iteration.

### `index0`

* Type: `number`
* Description: The 0-based index of the current iteration.

### `last`

* Type: `boolean`
* Description: Returns true if the current iteration is the last. Returns false if not.

### `length`

* Type: `number`
* Description: The total number of iterations in the loop.

### `rindex`

* Type: `number`
* Description: The 1-based index of the current iteration, in reverse order.

### `rindex0`

* Type: `number`
* Description: The 0-based index of the current iteration, in reverse order.

### `row`

* Type: `number`
* Description: The 1-based index of current row.

**Example object:**

```json
{
  "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
}
```