wagtail-tinytableblock 0.4.0

A Wagtail StreamField block powered by TinyMCE and its table plugin

A table block for Wagtail StreamField powered by TinyMCE

Links

• Documentation
• Changelog
• Contributing
• Discussions
• Security

TinyTableBlock is a StreamField block powered by TinyMCE and its table plugin.

Wagtail provides TableBlock and TypedTableBlock which are good options if you want basic tables with some cell merging capability or StreamField-powered cell, but they have their limitations:

• TableBlock is using an old version of handsontable. It doesn't support multi-row header, column headers, nor pasting complex tables.
• TypedTableBlock gets complex quickly depending on the types of blocks you add, and pasting is limited to single cells.

Wagtail TinyTableBlock (this package) provides the TinyMCE table editor which has improved copy/paste, multi-row and column headers, external link support and more. It does not currently support the Wagtail rich text data format for page and document links, nor does it support embedding images.

Installation

In your project's Django settings, add the app your INSTALLED_APPS list (at the end is fine):

INSTALLED_APPS = [
  # ...
  "wagtail_tinytableblock",
]

Add the TinyTableBlock model to your StreamField definition. For example

# yourapp/models.py
from wagtail.fields import StreamField
from wagtail.models import Page

from wagtail_tinytableblock.blocks import TinyTableBlock


class WonderfulPage(Page):
    body = StreamField([
        # ...
        ("table", TinyTableBlock()),
    ])

Finally, run Django's makemigrations and migrate commands to apply any model field changes to your project

$ python manage.py makemigrations
$ python manage.py migrate

Configuration

TinyTableBlock accepts an allow_links keyword argument which allows enabling the TinyMCE link plugin. Note: this currently only works with external URLs.

from wagtail.blocks import StreamBlock
from wagtail_tinytableblock.blocks import TinyTableBlock

class ContentBlocks(StreamBlock):
    table_block = TinyTableBlock(allow_links=True)

By default, we disable the TinyMCE contextual menu to allow the browser native one. If you want to use TinyMCE one, pass enable_context_menu=True:

from wagtail.blocks import StreamBlock
from wagtail_tinytableblock.blocks import TinyTableBlock

class ContentBlocks(StreamBlock):
    table_block = TinyTableBlock(enable_context_menu=True)

Data representation

The table data is saved as a JSON-serialized dictionary with the following keys:

{
   "headers": [],
   "rows": [],
   "html": the_sanitised_html
}

headers / rows are lists of lists with cell values. Each cell is a dictionary with the following keys

key	value notes
value	The cell value
type	"td" or "th"
rowspan	if set
colspan	if set
scope	if set
align	if set

Contributing

All contributions are welcome! See CONTRIBUTING.md

Supported versions:

• Python 3.12, 3.13
• Django 4.2, 5.1
• Wagtail 6.3 (LTS), 6.4