Skip to content

torchbox/wagtail-tinytableblock

Repository files navigation

A table block for Wagtail StreamField powered by TinyMCE

License: BSD-3-Clause Ruff PyPI version Build status

Links

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 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)

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