'Add link in TableBlock cell

I'm using a TableBlock in a StreamField. Rendering the page, including the table, is fine. But is there anyway to allow the user to enter a link into a table cell? Simply adding a URL has it rendered as text (as I would expect).

Does this require a custom renderer?

wagtailwagtail-streamfield


Solution 1:[1]

Our content team had asked for this feature as well. However, it is not supported in the underlying library that TableBlock uses. We ended up creating a custom StreamField type to display lists of links, rather than trying to kluge links into TableBlock.

Solution 2:[2]

I got this problem as well. I know this problem it is been posted a long time ago but I thought to share my solution anyway. I was giving up but then I tried to implement markdown instead as FlipperPA mentioned. And I realised that after installing wagtail-markdown (please follow the instructions), I could tweak my template like this:

<!-- added this at the top of my template -->
{% load wagtailmarkdown %}
....
....
<!-- then in the table replace the word `linebreaksbr` with the word `markdown` -->
<table 
    class="info-list table table-responsive">
    {% if value.table.table_header %}
    <thead>
        <tr>
            {% for column in value.table.table_header %}
            {% with forloop.counter0 as col_index %}
            <th scope="col" {% cell_classname 0 col_index %}>
                {% if column.strip %}
                {% if html_renderer %}
                {{ column.strip|safe|markdown }}  <-- HERE it was {{ column.strip|safe|linebreaksbr }} -->
                {% else %}
                {{ column.strip|markdown }} <-- HERE it was {{ column.strip|linebreaksbr }} -->
                {% endif %}
                {% endif %}
            </th>
            {% endwith %}
            {% endfor %}
        </tr>
    </thead>
    {% endif %}
    <tbody>
        {% for row in value.table.data %}
        {% with forloop.counter0 as row_index %}
        <tr>
            {% for column in row %}
            {% with forloop.counter0 as col_index %}
            {% if first_col_is_header and forloop.first %}
            <th scope="row"
                {% cell_classname row_index col_index value.table.table_header %}>
                {% if column.strip %}
                {% if html_renderer %}
                {{ column.strip|safe|markdown }} <-- HERE it was {{ column.strip|safe|linebreaksbr }} -->
                {% else %}
                {{ column.strip|markdown }} <-- HERE it was {{ column.strip|linebreaksbr }} -->
                {% endif %}
                {% endif %}
            </th>
            {% else %}
            <td {% cell_classname row_index col_index value.table.table_header %}>
                {% if column.strip %}
                {% if html_renderer %} 
                {{ column.strip|safe|markdown }} <-- HERE it was {{ column.strip|safe|linebreaksbr }} -->
                {% else %}
                {% else %}
                {{ column.strip|markdown }} <-- HERE it was {{ column.strip|linebreaksbr }} -->
                {% endif %}
                {% endif %}
            </td>
            {% endif %}
            {% endwith %}
            {% endfor %}
        </tr>
        {% endwith %}
        {% endfor %}
    </tbody>
</table>

And it will render your TableBlock in html. I hope this would help in the future.

Solution 3:[3]

Actually, it is pretty easy if you are OK with fact that user has to paste whole HTML of the link, not only href value.

You just need to pass dict with custom rendered option in table_options kwarg of TableBlock. It should look something like this:

TableBlock(table_options={'renderer': 'html'})

Check the docs:

Wagtail and Handsontable

Tested on Wagtail 2.16

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 FlipperPA
Solution 2 ManuCiao
Solution 3 Ondra

Related Questions