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>