WYSIWYG - Easier header rows #793

New Issue

OVERLORD · 2026-02-04T22:18:24+03:00

OVERLORD commented

2026-02-04 22:18:24 +03:00

Originally created by @ssddanbrown on GitHub (Aug 23, 2018).

At the moment, to set a header on a table you have to click into the row > Click the table options in the top toolbar > Row > Row Properties > Change row type to header.

We should look to either make the first row, if more than one row, be a header or make it easier to set a header row.

Might be limited on TinyMCE control, Possibly hook into such an event like this:
https://github.com/tinymce/tinymce/blob/master/src/plugins/table/main/ts/api/Events.ts#L14

Might be tricky.

Originally created by @ssddanbrown on GitHub (Aug 23, 2018). At the moment, to set a header on a table you have to click into the row > Click the table options in the top toolbar > Row > Row Properties > Change row type to header. We should look to either make the first row, if more than one row, be a header or make it easier to set a header row. Might be limited on TinyMCE control, Possibly hook into such an event like this: https://github.com/tinymce/tinymce/blob/master/src/plugins/table/main/ts/api/Events.ts#L14 Might be tricky.

OVERLORD added the 🛠️ Enhancement 📝 WYSIWYG Editor labels 2026-02-04 22:18:24 +03:00

OVERLORD closed this issue

2026-02-04 22:18:26 +03:00

OVERLORD commented

2026-02-04 22:18:30 +03:00

@alfonsrv commented on GitHub (Jul 28, 2020):

Confluence solved this by having the first row be a header by default and then adding a dedicated menu row for then a table is currently selected.

@alfonsrv commented on GitHub (Jul 28, 2020): Confluence solved this by having the first row be a header by default and then adding a dedicated menu row for then a table is currently selected.

OVERLORD commented

2026-02-04 22:18:34 +03:00

@Roemer commented on GitHub (Jan 22, 2024):

I added a "hack" that adds a button for toggling row/column headers in the context menu of the table and at the end of the main toolbar (couldn't figure out a way to add it to the table menu of the main toolbar yet).
The hack is here: https://github.com/BookStackApp/hacks/issues/7

Edit: As an alternative, a second row similar to Confluence can be added. This would look like this:

and is done with this customization:

<script>
  window.addEventListener('editor-tinymce::pre-init', event => {
    const mceConfig = event.detail.config;
    mceConfig.toolbar = [
      mceConfig.toolbar,
      'table | tableinsertrowbefore tableinsertrowafter tabledeleterow | tablecutrow tablecopyrow tablepasterowbefore tablepasterowafter | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablemergecells tablesplitcells | tablerowheader tablecolheader | tablecellbackgroundcolor | tabledelete'
    ];
      
    mceConfig.table_toolbar = 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablerowheader tablecolheader';
  });
</script>

@Roemer commented on GitHub (Jan 22, 2024): I added a "hack" that adds a button for toggling row/column headers in the context menu of the table and at the end of the main toolbar (couldn't figure out a way to add it to the table menu of the main toolbar yet). The hack is here: https://github.com/BookStackApp/hacks/issues/7 Edit: As an alternative, a second row similar to Confluence can be added. This would look like this: ![image](https://github.com/BookStackApp/BookStack/assets/393641/8a84ea11-07e7-48de-bdfc-d6cf61aa5350) and is done with this customization: ```js <script> window.addEventListener('editor-tinymce::pre-init', event => { const mceConfig = event.detail.config; mceConfig.toolbar = [ mceConfig.toolbar, 'table | tableinsertrowbefore tableinsertrowafter tabledeleterow | tablecutrow tablecopyrow tablepasterowbefore tablepasterowafter | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablemergecells tablesplitcells | tablerowheader tablecolheader | tablecellbackgroundcolor | tabledelete' ]; mceConfig.table_toolbar = 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablerowheader tablecolheader'; }); </script> ```

OVERLORD commented

2026-02-04 22:18:38 +03:00

@ssddanbrown commented on GitHub (Feb 17, 2024):

Thanks for the input and sharing of hack/workaround @Roemer, this promoted me to put in a solution for the next release.
Within 8f1d8cef9e the header row toggle is dynamically shown as part of the existing table toolbar, when within the first row. Unlike your hack I havn't added the column header toggle, as I've not really seen much demand for header columns.

@ssddanbrown commented on GitHub (Feb 17, 2024): Thanks for the input and sharing of hack/workaround @Roemer, this promoted me to put in a solution for the next release. Within 8f1d8cef9e71a324b599f012622d7be8f8e1f09a the header row toggle is dynamically shown as part of the existing table toolbar, when within the first row. Unlike your hack I havn't added the column header toggle, as I've not really seen much demand for header columns.

OVERLORD commented

2026-02-04 22:18:41 +03:00

@platnub commented on GitHub (Mar 25, 2024):

Thanks for the input and sharing of hack/workaround @Roemer, this promoted me to put in a solution for the next release. Within 8f1d8ce the header row toggle is dynamically shown as part of the existing table toolbar, when within the first row. Unlike your hack I havn't added the column header toggle, as I've not really seen much demand for header columns.

Hello, column headers would be nice. Seems to me this would just be feature parity. Why have the feature for rows, but not columns? Even if there isn't much demand yet. It's the exact same thing just on a different axis.

If the feature is already written, and exists, why not implement it?

@platnub commented on GitHub (Mar 25, 2024): > Thanks for the input and sharing of hack/workaround @Roemer, this promoted me to put in a solution for the next release. Within [8f1d8ce](https://github.com/BookStackApp/BookStack/commit/8f1d8cef9e71a324b599f012622d7be8f8e1f09a) the header row toggle is dynamically shown as part of the existing table toolbar, when within the first row. Unlike your hack I havn't added the column header toggle, as I've not really seen much demand for header columns. Hello, column headers would be nice. Seems to me this would just be feature parity. Why have the feature for rows, but not columns? Even if there isn't much demand yet. It's the exact same thing just on a different axis. If the feature is already written, and exists, why not implement it?

OVERLORD commented

2026-02-04 22:18:44 +03:00

@cittadhammo commented on GitHub (Aug 6, 2024):

Yes column headers would be nice.

Also, the ability to customise table to create a layout like this would be nice (merging cells, coloured headers, align on page like images) :

@cittadhammo commented on GitHub (Aug 6, 2024): Yes column headers would be nice. Also, the ability to customise table to create a layout like this would be nice (merging cells, coloured headers, align on page like images) : ![image](https://github.com/user-attachments/assets/1e35d945-af39-4dd0-bfb6-558a023fd7cb)

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#793