Table Field

Allows for tables with any number of columns & rows with each column holding a specific type of content

Options#

  • Max Rows - The maximum number of rows that can be added to the table. Leave blank if you don't care.

  • Add columns – Columns are defined by 4 parts:

    • Column name – The name of the column as presented to the user.

    • Column handle – The handle of the column for use in templates.

    • Column type – The type of content the column should hold:

      • Plain Text – A plain text field.

      • Rich Text – A rich text field which allows HTML content.

      • Number – A number field.

    • Column required – Whether the column must be given a value.

  • Order columns – Order the columns as desired.

Use#

If you have set columns in the table as required and appropriate values have no been entered then errors will be shown when attempting to update the entry. The entry will not be update-able until the appropriate content has been entered.

If the field is set to required and no rows have been added to the table a error will be shown when attempting to update the entry, the entry will not be update-able until a row has been added to the table.

Template Use#

Access you table fields via the handle you set for the field. Each table field provides an array accessed via tableFieldHandle which contains the rows stored in the field, sorted in the order set by the content creator. Each row contains the columns sorted in the order set by the field options. The table field also provides an array accessed via tableHeadingHandle which contains the columns contained in the table, sorted in the order set by the field options.

The loops

<table>

    <thead>

        <tr>

            {% for td in entry.yourTableHandle.tableHeadingHandle %}

                <td>{{ td.name }}</td>

            {% endfor %}

       </tr>

    </thead>

    <tbody>

        {% for tr in entry.yourTableHandle.tableFieldHandle %}

            <tr>

                {% for td in tr %}

                    <td> {{ td.value }} </td>

                {% endfor %}

            </tr>

        {% endfor %}

     </tbody>

</table>

Table row columns properties

  • name - The name of the of the column.

  • handle - The handle of the column.

  • type - The type of content the column holds.

  • value - The value of the column.

These properties are available on the columns in both the tableFieldHandle array and the tableHeadingHandle array, with the exception of value which is only available on the rows in the tableFieldHandle.

Table methods

  • getTableHtml - Builds the table html element based on the current tables rows and columns automatically, returning the populated table html element including the thead and tbody html elements. You can pass an array of properties to the method to add attributes to the returned table element.
  • getTableHeadHtml - Builds the thead html element based on the current table columns, returning the populated thead html element. You can pass an array of properties to the method to add attributes to the returned thead element.
  • getTableBodyHtml - Builds the tbody html element based on the current table rows, returning the populated tbody html element. You can pass an array of properties to the method to add attributes to the returned tbody element.
  • getMaxRows - Return the max number of rows allowed in the table as set by the field options, or null if none were set.
  • getRowCount - Return the current number of rows in the table.

Example building a table using the methods.

<table>

    {{ entry.yourTableHandle.getTableHeadHtml({ 'font-weight' : 'bold' }) }}

    {{ entry.yourTableHandle.getTableBodyHtml }}

</table>

All at once

{{ entry.yourTableHandle.getTableHtml({ 'class' : 'my-table-class' }) }}