CKEditor Responsive Table

This module is a CKEditor 5 plugin that adds a table button with some accessibility improvements over the default CKE table button. It also integrates with the Tabled plugin for making tables to be adaptable to different devices.

Features

This responsive table is accessible by default. The button provides controls to set the number of Rows and Columns. It also provides Headers options, Caption, and a Caption Visible? checkbox.

The main differences with the built-in table CKE button are:

• Caption is mandatory, you can choose to hide them or showing them but it needs to be present.
• Captions are always present for assistive technologies.
• Headers are mandatory, either by rows or rows and columns.
• Headers have a scope=column added when appropriate.

Once the table is inserted into the editor, there are controls for inserting, deleting, splitting, and merging columns and rows, as well toggling the caption visibility.

This plugin doesn't make any efforts on cleaning up or fixing copy and pasted tables, but it ensures that tables created through the table button to be accessible.

Post-Installation

• Configure text formats by navigating to Configuration > Content authoring > Text formats and editors, or visiting /admin/config/content/formats.
• Click Configure next to a text format that has CKEditor 5 enabled as the Text format that you'd like to add the responsive table functionality to.
• Drag the Responsive Table button from the Available Buttons area to the Active toolbar area.
• Click Save configuration.

Additional Requirements

Drupal 9.3 or greater.

Credits

Developed by:

• Elvis Moreta
• Javier Reartes
• Nikki Flores
• Andrew Berry