TableBlock how to specify table CSS classes

Question

I am struggling to add CSS classes to Wagtail StreamField & TableBlock (http://docs.wagtail.io/en/v1.8.1/reference/contrib/table_block.html).

Is the way to go to define a filter and use something like:

{{ child|className:"table table-bordered" }}

where className is my custom filter?

score 11 · Accepted Answer · answered Feb 06 '17 at 16:42

11

No, this isn't currently possible with the standard rendering of a TableBlock - the template used internally to render the block has hard-coded <table> / <tr> / <td> tags with no class attributes. However, you could specify a custom template in your TableBlock declaration, which would give you full control over the HTML:

StreamField([
    # ...
    ('table', TableBlock(template='/path/to/custom/template.html')),
    # ...
])

answered Feb 06 '17 at 16:42

gasman

23,691
1
38
56

Thank you so much. Exactly what I was looking for – Dimitar Petrov Feb 07 '17 at 08:58
2

@gasman, thanks for help! A little addition - its better to overwrite this template https://github.com/wagtail/wagtail/blob/2af880025a65947955978ff494f8d1cae21ca7c3/wagtail/contrib/table_block/templates/table_block/blocks/table.html because the one you've linked doesnt respect caption – Alexey Trofimov Jul 30 '20 at 11:46

score -1 · Answer 2 · answered Feb 06 '17 at 16:17

I think it's a good idea. Last time I needed to do something similar I found this blogpost which gives you a practically copy-and-paste solution to your problem. Django templatetags might have changed since then, but not by much.

EDIT: From the comments, this seems to be more modular.

TableBlock how to specify table CSS classes

2 Answers2