Learn

Table

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

This fieldtype will let you create an infinite number of rows and columns, and you can reorder the rows by dragging and dropping them.

Fieldset

Simply give your field a type of table

my_table:
  type: table

How data is saved

The data in the screenshot above would be saved like so:

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

Outputting in your templates

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

{{ my_table|table }}

If you’d like more control, you can certainly roll your own templating.

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>

Wan’t 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>

This article was last updated on September 13th, 2016. Find an error? Please let us know!