Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content
Browse apps
Install
Author
Storyblok GmbH
Last update
10/25/2020
Table
Easy to use field type to manage tables
Table

This app adds the field type "translatable-table".

Features

  • Add, move or delete rows and columns
  • Outputs structured JSON
  • Allows multi-line text
  • Works with translation export and import

Developer documentation

The table field type stores its information as structured JSON and you need to take care of the rendering of the HTML.

Following an example:

{
  "plugin": "translateable-table",
  "thead": [
    {
      "value": "Head1"
    },
    {
      "value": "Head2"
    }
  ],
  "tbody": [
    {
      "component": "_table_row",
      "body": [
        {
          "component": "_table_col",
          "value": "one"
        },
        {
          "component": "_table_col",
          "value": "two"
        }
      ]
    }
  ]
}

In a template language like Liquid you could write something like following to render the table:

<table>
  <thead>
    <tr>
      {% for th in content.thead %}
        <th>{{ th.value }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for tr in content.tbody %}
      <tr>
        {% for td in tr.body %}
          <td>{{ td.value }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>