Advanced Categories
Custom System Messages
DataGrab
Publisher
Reading Time PRo
Speedy
Template Tags

Variables

The following variables are available in both Simple Table and Simple Grid tag pairs.
1
{row_id}
2
{total_rows}
3
{total_columns}
4
{count}
5
{index}
6
{heading_row}
7
{is_first_row}
8
{is_last_row}
9
{switch="a|b"}
Copied!

Parameters

  • prefix=""
  • 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.
1
<table>
2
{simple_table_or_grid_field}
3
{if heading_row}
4
<tr switch="{switch='odd|even'}">
5
<th colspan="{total_columns}">{heading_row}</th>
6
</tr>
7
{if:else}
8
// render columns as noted in examples below
9
{/if}
10
{/simple_table_or_grid_field}
11
</table>
Copied!

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.
1
<table>
2
{simple_table_field prefix="st:"}
3
<tr data-id="{st:row_id}" switch="{switch='odd|even'}">
4
{st:columns}
5
{if st:is_first_row}
6
<th data-id="{st:column_id}">
7
{st:value} or {st:column_heading}
8
</th>
9
{if:elseif st:is_last_row}
10
<td data-id="{st:column_id}">
11
<span aria-hidden="true">{st:column_heading}: </span><i>{st:value}</i>
12
</td>
13
{if:else}
14
<td data-id="{st:column_id}">
15
<span aria-hidden="true">{st:column_heading}: </span>{st:value}
16
</td>
17
{/if}
18
{/st:columns}
19
</tr>
20
{/simple_table_field}
21
</table>
Copied!

Simple Table (inside Grid)

1
{grid_field}
2
<table>
3
{grid_field:simple_table_field}
4
<tr switch="{switch='odd|even'}">
5
{columns}
6
{if is_first_row}
7
<th data-id="{column_id}">
8
{value}
9
</th>
10
{if:elseif is_last_row}
11
<td data-id="{column_id}">
12
<i>{value}</i>
13
</td>
14
{if:else}
15
<td data-id="{column_id}">
16
{value}
17
</td>
18
{/if}
19
{/columns}
20
</tr>
21
{/grid_field:simple_table_field}
22
</table>
23
{/grid_field}
Copied!

Simple Table (inside of Fluid)

1
2
{fluid_field}
3
{fluid_field:simple_table_field}
4
<table>
5
{content prefix="st:"}
6
<tr>
7
{st:columns}
8
{if is_first_row}
9
<th data-id="{st:column_id}">
10
{st:value}
11
</th>
12
{if:elseif is_last_row}
13
<td data-id="{st:column_id}">
14
<i>{st:value}</i>
15
</td>
16
{if:else}
17
<td data-id="{st:column_id}">
18
{st:value}
19
</td>
20
{/if}
21
{/st:columns}
22
</tr>
23
{/content}
24
</table>
25
{/fluid_field:simple_table_field}
26
{/fluid_field}
Copied!

Simple Table (inside Bloqs)

1
{bloqs_field}
2
{block}
3
{simple_table_field}
4
<tr switch="{switch='odd|even'}">
5
{columns}
6
{if is_first_row}
7
<th data-id="{column_id}">
8
{value}
9
</th>
10
{if:elseif is_last_row}
11
<td data-id="{column_id}">
12
<i>{value}</i>
13
</td>
14
{if:else}
15
<td data-id="{column_id}">
16
{value}
17
</td>
18
{/if}
19
{/columns}
20
</tr>
21
{/simple_table_field}
22
{/block}
23
{/bloqs_field}
Copied!

Simple Table (as a Low Variable)

1
{exp:low_variables:pair var="lv_simple_table" prefix="st:"}
2
<table>
3
<tr data-id="{st:row_id}" switch="{switch='odd|even'}">
4
{st:columns}
5
{if st:is_first_row}
6
<th data-id="{st:column_id}">
7
{st:value}
8
</th>
9
{if:elseif st:is_last_row}
10
<td data-id="{st:column_id}">
11
<i>{st:value}</i>
12
</td>
13
{if:else}
14
<td data-id="{st:column_id}">
15
{st:value}
16
</td>
17
{/if}
18
{/st:columns}
19
</tr>
20
</table>
21
{/exp:low_variables:pair}
Copied!

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.
1
<table>
2
{simple_grid_field}
3
<tr switch="{switch='odd|even'}" data-total-rows="{total_rows}">
4
<th><span aria-hidden="true">Product: </span>{product}</th> <!-- This is a column name in the Simple Grid field -->
5
<td><span aria-hidden="true">Price: </span>{price}</td> <!-- This is a column name in the Simple Grid field -->
6
</tr>
7
{/simple_grid_field}
8
</table>
Copied!

Simple Grid (inside Grid)

1
{grid_field}
2
{grid_field:total_rows}
3
<table>
4
{grid_field:simple_grid_field}
5
<tr switch="{switch='odd|even'}" data-total-rows="{total_rows}">
6
<th>{product}</th> <!-- This is a column name in the Simple Grid field -->
7
<td>{price}</td> <!-- This is a column name in the Simple Grid field -->
8
</tr>
9
{/grid_field:simple_grid_field}
10
</table>
11
{/grid_field}
Copied!

Simple Grid (as a Low Variable)

1
{exp:low_variables:pair var="lv_grid_field"}
2
<table>
3
<tr switch="{switch='odd|even'}" data-total-rows="{total_rows}">
4
<td>{product}</td>
5
<td>{price}</td>
6
</tr>
7
</table>
8
{/exp:low_variables:pair}
Copied!

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.