Testing tiptap tables, toggleHeaderRow and thead

Questions
1

Hi all,

Hoping someone can drag me out of a rabbit hole…

When using the table extension for TipTap, you can toggle a header row on and off, but it looks like that is just changing the td’s into th’s inside the tbody.

Does anyone know if it’s possible to tweak it so that toggleHeaderRow generates a thead element and moves the header row into that?

Thanks!

2

Hi Mike, the quick answer is no, it isn’t possible with the current code/library.

Longer answer, for the RTE, we’re using Tiptap’s own TableHeader extension, (source code), which only changes a td to a th at cell level. The extension makes the assumption that the whole table contents is a tbody, and doesn’t attempt to change that structure. :confused:

Currently, the only way I can think of to achieve what you want is to develop a custom Tiptap extension and replace the Umbraco extension that wraps the existing one. Which may become a significant undertaking. :grimacing:

3

Understood - this is useful, thanks Lee!

4

Hi @leekelleher and @miketaylor

Just to follow up on this have you found a method for injection scope into the table mark up? As in:
<th scope="col">Col Title</th>
<th scope="row">Row Title</th>
Without that the tables that TipTap creates aren’t fully accessible for more see HTML table accessibility - Learn web development | MDN

5

Also one year later! Read that as this years dates :upside_down_face:

6

Hey all,
kind of a side shuffle in pointing out that some good work has gone into UmbHost.Tables to make it accessible and friendly to author. It’s not a direct answer to the TipTap question, but worth pointing out in the event the option saves some time (and further coalesces the community into adopting a new defacto table package :wink: )