# Template Tags

## Variables

The following variables are available in both Simple Table and Simple Grid tag pairs.

```
{row_id}
{total_rows}
{total_columns}
{count}
{index}
{heading_row}
{is_first_row}
{is_last_row}
{switch="a|b"}
```

## Parameters

* `prefix=""`\
  \&#xNAN;*The prefix parameter is no longer necessary for Simple Grid fields as of version 1.7. It is deprecated and may not work as expected . It still works in Simple Table fields.*
* `backspace=""`

## Template Code Examples

### Heading Rows

As of version 1.5 of Simple Grids & Tables you can optionally enable adding a Heading Row button to each grid or table field. When a Heading Row is added it will span all columns in the grid or table field, which requires slightly different rendering behavior in the template. The Heading Row variable name can not be changed and it's behavior is the same in both a Simple Grid and Simple Table field, thus the following template logic can be used when rendering either field in the template.

```html
<table>
{simple_table_or_grid_field}
    {if heading_row}
        <tr switch="{switch='odd|even'}">
            <th colspan="{total_columns}">{heading_row}</th>
        </tr>
    {if:else}
        // render columns as noted in examples below
    {/if}
{/simple_table_or_grid_field}
</table>
```

### Simple Table (standalone)

Note you can optionally prefix all of Simple Grid and Simple Table field variables with the `prefix=""` parameter.

Since Simple Table does not have named columns, all of the column values are available with the `{value}` variable. The `{column_heading}` variable will print the column values from the first row for every row in the loop. If you're using the first row as a heading, then this variable can be useful to improve accessibility, or simply having to not hard-code the value of the first row in your templates.

{% tabs %}
{% tab title="EE" %}

<pre class="language-html"><code class="lang-html">{exp:channel:entries channel="grids" entry_id="1"}
<strong>    &#x3C;table>
</strong>    {simple_table_field prefix="st:"}
        &#x3C;tr data-id="{st:row_id}" class="{switch='odd|even'}">
            {st:columns}
                {if st:is_first_row}
                    &#x3C;th data-id="{st:column_id}">
                        {st:value} or {st:column_heading}
                    &#x3C;/th>
                {if:elseif st:is_last_row}
                    &#x3C;td data-id="{st:column_id}">
                        &#x3C;span aria-hidden="true">{st:column_heading}: &#x3C;/span>&#x3C;i>{st:value}&#x3C;/i>
                    &#x3C;/td>
                {if:else}
                    &#x3C;td data-id="{st:column_id}">
                        &#x3C;span aria-hidden="true">{st:column_heading}: &#x3C;/span>{st:value}
                    &#x3C;/td>
                {/if}
            {/st:columns}
        &#x3C;/tr>
    {/simple_table_field}
    &#x3C;/table>
{/exp:channel:entries}
</code></pre>

{% endtab %}

{% tab title="Twig" %}

```twig
{% for entry in exp.channel.entries({channel: 'grids', entry_id: 26611}) %}
    <table>
    {% for row in entry.simple_table_field %}
        <tr data-id="{{ row.row_id }}" class="{{ cycle(['odd', 'even'], loop.index0) }}>
        {% for column in row.columns %}
            {% if row.is_first_row %}
                <th data-id="{{ column.column_id }}">
                    {{ column.value }} or {{ column.column_heading }}
                </th>
            {% elseif row.is_last_row %}
                <td data-id="{{ column.column_id }}">
                    <span aria-hidden="true">{{ column.column_heading }}: </span><i>{{ column.value }}</i>
                </td>
            {% else %}
                <td data-id="{{ column.column_id }}">
                    {{ column.value }}
                </td>
            {% endif %}
        {% endfor %}
        </tr>
    {% endfor %}
    </table>
{% endfor %}
```

{% endtab %}
{% endtabs %}

### Simple Table (inside Grid)

```html
{grid_field}
    <table>
    {grid_field:simple_table_field}
        <tr class="{switch='odd|even'}">
            {columns}
                {if is_first_row}
                    <th data-id="{column_id}">
                        {value}
                    </th>
                {if:elseif is_last_row}
                    <td data-id="{column_id}">
                        <i>{value}</i>
                    </td>
                {if:else}
                    <td data-id="{column_id}">
                        {value}
                    </td>
                {/if}
            {/columns}
        </tr>
    {/grid_field:simple_table_field}
    </table>
{/grid_field}
```

### Simple Table (inside of Fluid)

```html

{fluid_field}
    {fluid_field:simple_table_field}
        <table>
            {content prefix="st:"}
            <tr>
                {st:columns}
                    {if is_first_row}
                        <th data-id="{st:column_id}">
                            {st:value}
                        </th>
                    {if:elseif is_last_row}
                        <td data-id="{st:column_id}">
                            <i>{st:value}</i>
                        </td>
                    {if:else}
                        <td data-id="{st:column_id}">
                            {st:value}
                        </td>
                    {/if}
                {/st:columns}
            </tr>
            {/content}
        </table>
    {/fluid_field:simple_table_field}
{/fluid_field}
```

### Simple Table (inside Bloqs)

```html
{bloqs_field}
    {block}
        {simple_table_field}
            <tr switch="{switch='odd|even'}">
                {columns}
                    {if is_first_row}
                        <th data-id="{column_id}">
                            {value}
                        </th>
                    {if:elseif is_last_row}
                        <td data-id="{column_id}">
                            <i>{value}</i>
                        </td>
                    {if:else}
                        <td data-id="{column_id}">
                            {value}
                        </td>
                    {/if}
                {/columns}
            </tr>
        {/simple_table_field}
    {/block}
{/bloqs_field}
```

### Simple Table (as a Pro Variable)

```html
{exp:pro_variables:pair var="lv_simple_table" prefix="st:"}
    <table>
        <tr data-id="{st:row_id}" class="{switch='odd|even'}">
            {st:columns}
                {if st:is_first_row}
                    <th data-id="{st:column_id}">
                        {st:value}
                    </th>
                {if:elseif st:is_last_row}
                    <td data-id="{st:column_id}">
                        <i>{st:value}</i>
                    </td>
                {if:else}
                    <td data-id="{st:column_id}">
                        {st:value}
                    </td>
                {/if}
            {/st:columns}
        </tr>
    </table>
{/exp:pro_variables:pair}
```

### Simple Grid (standalone)

Unlike Simple Table, Simple Grid does have named columns. The column labels or headings are defined in the control panel, thus there is no need for a `{column_heading}` variable. In this case the column names are `{product}` and `{price}`. Simple Grid operates very similarly to the native Grid field, but does not have variable modifiers such as `:sum` or `:average`.

{% hint style="warning" %}
Any tag pairs inside of a Simple Grid field need to be prefixed with the Simple Grid field name. For example:<br>

`{my_simple_grid_field}`\
&#x20;   `{my_simple_grid_field:my_file_field}`\
&#x20;       `{url}`\
&#x20;   `{/my_simple_grid_field:my_file_field}`  \
`{/my_simple_grid_field}`<br>

*Prefixing is not required when using Twig or Blade.*
{% endhint %}

{% tabs %}
{% tab title="Native Template" %}

```html
{exp:channel:entries channel="grids" entry_id="1"}
    {simple_grid_field}
    
        {!-- If you're using Heading Rows, wrapping it in a conditional may 
        be helpful. If not, you can ignore this conditional. --}
        
        {if heading_row}
            <h2>{heading_row}</h2>
        {if:else}
            {product}
            {price}
            {summary}
            
            {!-- Regardless of the column names you define, you'll also have 
            access to each of these variables while iterating the Grid rows --}
            
            {count}
            {row_count}
            {row_id}
            {total_rows}
            {total_columns}
            {index}
            {row_index}
            {is_first_row}
            {is_last_row}
        {/if}
        
    {/simple_grid_field}
{/exp:channel:entries}
```

{% endtab %}

{% tab title="Twig" %}

```twig
{% for entry in exp.channel.entries({channel: 'grids', entry_id: 1}) %}
    {% for row in entry.simple_grid_field %}
        
        {# If you're using Heading Rows, wrapping it in a conditional may be helpful.
        If not, you can ignore this conditional. #}
        
        {% if row.heading_row %}
            <h2>{{ row.heading_row }}</h2>
        {% else %}
        
            {# Each column in the Simple Grid field is accessible via it's short name. 
            In this example the Simple Grid field has 3 columns: Product, Price, and an RTE Summary field #}
            
            {{ row.product }}
            {{ row.price }}
            {{ row.summary | raw }}
            
            {# Regardless of the column names you define, you'll also have access 
            to each of these variables while iterating the Grid rows #}
            
            {{ row.count }}
            {{ row.row_count }}
            {{ row.row_id }}
            {{ row.total_rows }}
            {{ row.total_columns }}
            {{ row.index }}
            {{ row.row_index }}
            {{ row.is_first_row }}
            {{ row.is_last_row }}
            
        {% endif %}
        
    {% endfor %}
{% endfor %}
```

{% endtab %}
{% endtabs %}

### Simple Grid (inside Grid)

```html
{grid_field}
    {grid_field:total_rows}
    <table>
    {grid_field:simple_grid_field}
        <tr switch="{switch='odd|even'}" data-total-rows="{total_rows}">
            <th>{product}</th> <!-- This is a column name in the Simple Grid field -->
            <td>{price}</td> <!-- This is a column name in the Simple Grid field -->
        </tr>
    {/grid_field:simple_grid_field}
    </table>
{/grid_field}
```

### Simple Grid (as a Low Variable)

```html
{exp:low_variables:pair var="lv_grid_field"}
    <table>
        <tr switch="{switch='odd|even'}" data-total-rows="{total_rows}">
            <td>{product}</td>
            <td>{price}</td>
        </tr>
    </table>
{/exp:low_variables:pair}
```

## Date and Date with Timezone fields

Simple Grid contains a `Date` and `Date with Timezone` field. When using a `Date` field, the template variable is the name of the column as indicated above, e.g. `{my_date_column}`

However, when using the `Date with Timezone` field there are modifiers, e.g. `{my_date_column:date}` and `{my_date_column:timezone}`. You essentially get two template variables out of this single column.

## File fields

Using a File field in a SImple Grid is the same as using a standalone File field.

```html
<!-- As a tag pair -->
{simple_grid_field}
    {product}
    {price}
    {simple_grid_field:photo}
        <img src="{url}" />
        <!-- {path} and {file_name} variables also work here -->
    {/simple_grid_field:photo}
{/simple_grid_field}

<!-- As a single variable -->
{simple_grid_field}
    {product}
    {price}
    {photo}
    <!-- modifiers are also available: {photo:url} {photo:file_name} -->
{/simple_grid_field}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.boldminded.com/simple-grids-and-tables/docs/template-tags.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.