Table

Creating tables can be a nuisance in a WYSIWYG editor, or even when handcrafting them in HTML, especially for less-code-savvy clients. This fieldtype gives you a way to create simple tabular data.


Preview

Table Fieldtype

Data Structure

Data from the Table fieldtype is saved in an array like this:

my_table:
  -
    cells:
      - One
      - Two
      - Three
  -
    cells:
      - Four
      - Five
      - Six
  -
    cells:
      - Seven
      - Eight
      - Nine

This data format makes it trivial when it comes time to render it templates.

Templating

This fieldtype comes with a handy table modifier, which will turn your data into a simple HTML <table>.

{{ my_table | table }}

Here’s the same thing that the modifier would have output, but we’re modifying the cells to use | markdown.

<table>
  {{ my_table }}
    <tr>
      {{ cells }}
        <td>{{ value | markdown }}</td>
      {{ /cells }}
    </tr>
  {{ /my_table }}
</table>

Want even more control? This example assumes you have a boolean field in your front-matter named first_row_headers which toggles whether or not to render the first row of the table in a <thead> with <th> tags.

<table>
  {{ my_table }}
    {{ if first && first_row_headers }}
      <thead>
        <tr>
          {{ cells }}
            <th>{{ value|markdown }}</th>
          {{ /cells }}
        </tr>
      </thead>
      <tbody>
    {{ /if }}
    {{ if !first && first_row_headers || !first_row_headers }}
      {{ if first }}
        <tbody>
      {{ /if }}
        <tr>
          {{ cells }}
            <td>{{ value|markdown }}</td>
          {{ /cells }}
        </tr>
      {{ if last }}
        </tbody>
      {{ /if }}
    {{ /if }}
  {{ /my_table }}
</table>

Settings

This fieldtype has no unique settings of its own, however it does respect all default settings.

Last modified on July 14, 2019