Table Column Resize

Provides table column resizing for CKEditor 5 in Drupal 11 by integrating the
official CKEditor 5 TableColumnResize plugin bundled with Drupal core.

Column widths are persisted in the formatted HTML of text fields. No separate
database storage is used.

Requirements

• Drupal 11
• CKEditor 5 (provided by Drupal core)
• The core Table CKEditor 5 plugin enabled on the target text format
• CKEditor 5 47.x or later (as bundled with Drupal 11.4+)

Installation

This module is not yet published on Drupal.org. Install it manually or via
Composer path repository until a project page exists.

Manual installation:

1. Place the module in modules/contrib/table_column_resize or
   modules/custom_modules/table_column_resize.
2. Enable the module:

drush <span class="hljs-keyword">en</span> table_column_resize -<span class="hljs-built_in">y</span>
drush cr

After the module is published on Drupal.org, installation via Composer will be:

composer <span class="hljs-built_in">require</span> drupal/table_column_resize
drush en table_column_resize -y
drush <span class="hljs-literal">cr</span>

Configuration

1. Go to Configuration → Content authoring → Text formats and editors.
2. Edit the desired text format.
3. Ensure Table is enabled under CKEditor 5 plugins.
4. Enable Table column resize.
5. Under Enabled filters, enable:
   • Encode table column widths for storage
   • Restore table column width styles
6. Save the text format.

The Limit allowed HTML tags field is managed automatically by CKEditor 5 and
will include the required colgroup, col, and data-column-width elements
when the plugin is enabled.

Usage

1. Create or edit content that uses a CKEditor 5 formatted text field.
2. Insert a table with multiple columns.
3. Drag a column boundary to resize a column.
4. Save the content.
5. Re-open the content in edit mode and confirm the same column widths appear.
6. View the content on the frontend and confirm the same widths are rendered.

Technical implementation

CKEditor 5 integration

The module registers CKEditor 5 plugin table.TableColumnResize from Drupal
core's bundled core/ckeditor5.table library. Resizing is handled entirely
by CKEditor 5; this module does not implement a custom resize engine.

The plugin requires the core Table plugin (ckeditor5_table) to be enabled.

HTML representation

CKEditor 5 emits column widths using <colgroup> and <col> elements, for
example:

&lt;table <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ck-table-resized"</span>&gt;
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">colgroup</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">col</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 30%;"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">col</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 70%;"</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">colgroup</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Column 1<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Column 2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span></span>

Drupal filtering

Drupal's filter_html does not allow arbitrary style attributes. To persist
widths securely, the module converts validated width values to a
data-column-width attribute before filtering:

&lt;<span class="hljs-built_in">col</span> data-column-<span class="hljs-built_in">width</span>=<span class="hljs-string">"30%"</span>&gt;

Two filters implement the encode/restore pipeline:

Filter Weight Purpose Encode table column widths for storage -20 Converts inline styles to data-column-width before filter_html Restore table column width styles 0 Restores validated inline styles after filter_html for display

Entity presave normalization ensures stored field values use the safe
data-column-width representation.

Frontend rendering

The restore filter re-applies validated inline width styles and attaches a
small frontend library that sets table-layout: fixed on resized tables.

Security

• All editor HTML is treated as untrusted input.
• Width values are validated to allow only %, px, and pt numeric values.
• Values containing javascript:, expression(, URLs, or other unsafe
  content are rejected.
• filter_html remains enabled; this module does not bypass XSS protections.

Testing

Automated tests

.<span class="hljs-regexp">/vendor/</span>bin<span class="hljs-regexp">/phpunit web/m</span>odules<span class="hljs-regexp">/custom_modules/</span>table_column_resize<span class="hljs-regexp">/tests</span>

Test suites:

• tests/src/Unit — width validation and markup conversion
• tests/src/Kernel — plugin discovery and filter pipeline
• tests/src/Functional — module installation UI

Manual testing

1. Enable the module and configure a text format as described above.
2. Create a table with at least three columns.
3. Drag multiple column boundaries.
4. Save, reload the edit form, and inspect stored/rendered HTML.
5. Confirm widths match in the editor and on the frontend.

Development

Run PHP syntax checks:

php -l web<span class="hljs-regexp">/modules/</span>custom_modules<span class="hljs-regexp">/table_column_resize/</span>src<span class="hljs-regexp">/Plugin/</span>CKEditor5Plugin<span class="hljs-regexp">/TableColumnResize.php</span>

If Drupal Coder is available in the project:

phpcs <span class="hljs-comment">--standard=Drupal web/modules/custom_modules/table_column_resize</span>

Limitations

• TableColumnResize is marked as a premium CKEditor plugin upstream, but is
  bundled in Drupal core's OSS CKEditor build. Verify resize behavior after
  major Drupal core upgrades.
• Both encode and restore filters must be enabled on each text format.
• CKEditor's native upcast accepts % and pt widths; px widths are
  preserved through the Drupal filtering layer when present in editor output.

License

This project is licensed under the GNU General Public License version 2 or later.