Browse apps
Install
Author
Storyblok GmbH
Last update
2019-04-16
Table
Easy to use field type to manage tables

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>