Template Tags
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"}
prefix=""backspace=""
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.
<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>
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.<table>
{simple_table_field prefix="st:"}
<tr data-id="{st:row_id}" switch="{switch='odd|even'}">
{st:columns}
{if st:is_first_row}
<th data-id="{st:column_id}">
{st:value} or {st:column_heading}
</th>
{if:elseif st:is_last_row}
<td data-id="{st:column_id}">
<span aria-hidden="true">{st:column_heading}: </span><i>{st:value}</i>
</td>
{if:else}
<td data-id="{st:column_id}">
<span aria-hidden="true">{st:column_heading}: </span>{st:value}
</td>
{/if}
{/st:columns}
</tr>
{/simple_table_field}
</table>
{grid_field}
<table>
{grid_field: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>
{/grid_field:simple_table_field}
</table>
{/grid_field}
{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}
{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}
{exp:low_variables:pair var="lv_simple_table" prefix="st:"}
<table>
<tr data-id="{st:row_id}" switch="{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:low_variables:pair}
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.<table>
{simple_grid_field}
<tr switch="{switch='odd|even'}" data-total-rows="{total_rows}">
<th><span aria-hidden="true">Product: </span>{product}</th> <!-- This is a column name in the Simple Grid field -->
<td><span aria-hidden="true">Price: </span>{price}</td> <!-- This is a column name in the Simple Grid field -->
</tr>
{/simple_grid_field}
</table>
{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}
{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}
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.Using a File field in a SImple Grid is the same as using a standalone File field.
<!-- As a tag pair -->
{simple_grid_field}
{product}
{price}
{photo}
<img src="{url}" />
<!-- {path} and {file_name} variables also work here -->
{/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}
Last modified 10mo ago