Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Taking your approach on designing things actually makes it fun, more natural, and overall easier.

— Dominik, Developer

Table Fieldtype

Creating tables can be a nuisance in a WYSIWYG editor. This fieldtype gives you a way to create flexible tabular data.

Table Fieldtype UI
The Table Fieldtype in action!

Data Structure

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

my_table:
-
cells:
- People
- Gift
-
cells:
- Kevin
- Kerosene
-
cells:
- Buzz
- Spider

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>
Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →