Django Wagtail TableBlock not displaying correctly

Question

I'm new to django and programming and I've been trying to use Wagtail for my website.

I am currently stuck with the 'TableBlock'

I managed to set up the model and the block correctly but when the html is rendered, i'm not getting a table but rather a dictionary.

here is my code:

{% for block in page.table %}
{% if block.block_type == 'table_horaire' %}

    {% include_block block %}

{% else %}
    <p>This is not working</p>
{% endif %}

{% endfor %}

And this is what I get on the Html

{'data': [['Jour', 'Matin', 'Après-midi', None], ['Lundi', '9.00-12.00', '14.00-17.00', None], ['Mardi', '9.00-12.00', '14.00-17.00', None], ['Mercredi', '9.00-12.00', 'Fermé', None], ['Jeudi', '9.00-12.00', '14.00-17.00', None], ['Vendredi', '9.00-12.00', '14.00-17.00', None]], 'cell': [], 'first_row_is_table_header': True, 'first_col_is_header': False, 'table_caption': 'Horaires'}

here is my model

class HomePage(Page):


body = RichTextField(blank=True)

table = StreamField(
    [
        ('table_horaire', blocks.TableHoraire())
    ],
    null=True,
    blank = True,
)

content_panels = Page.content_panels + [
    FieldPanel('body', classname="full"),
    StreamFieldPanel('table')
]

and here is my block

from wagtail.core import blocks
from wagtail.contrib.table_block.blocks import TableBlock


new_table_options = {
    'minSpareRows': 0,
    'startRows': 6,
    'startCols': 4,
    'colHeaders': False,
    'rowHeaders': False,
    'contextMenu': True,
    'editor': 'text',
    'stretchH': 'all',
    'height': 216,
    'language': 'en',
    'renderer': 'text',
    'autoColumnSize': False,
}

class TableHoraire(blocks.StructBlock):
    """ Home Page Hour block """

table = TableBlock(table_options = new_table_options)

I've been reading the documentaition and I've been looking everywhere for similar problems but I couldn't get any asnwers.

Any Help would be appreciated.

Answer 1

This is a consequence of the fact that you've placed the TableBlock inside a StructBlock. The full details of this are quite tricky (and explained in detail in the Wagtail docs), but the short version is that when you access the individual fields of a StructBlock (which happens as part of the built-in rendering of StructBlock when you call {% include_block block %} on it), it only gives you the underlying data of that block (for example, a string for a CharBlock, or the data dictionary you saw for a TableBlock), not the complete block object that knows how to render that data as HTML.

A StructBlock with only one field in it doesn't really serve a useful purpose, so the more straightforward fix is to use TableBlock directly in your StreamField instead:

table = StreamField(
    [
        ('table_horaire', TableBlock(table_options=new_table_options))
    ],
    null=True,
    blank = True,
)

But if you need the StructBlock there for some other reason, you can access the table field within it as a complete renderable block by going through bound_blocks:

{% for block in page.table %}
    {% if block.block_type == 'table_horaire' %}
        {% include_block block.bound_blocks.table %}
    {% endif %}
{% endfor %}