CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

Table column resize

The TableColumnResize plugin lets you resize tables and individual table columns. It gives you complete control over column width.

# Demo

To resize a column, simply hover your pointer over the column edge until it gets highlighted. Drag the column edge until you achieve the desired size.

Dwarf planets of the Solar System

Name Region Orbital radius (AU) Orbital period (years) Number of moons
Ceres Asteroid belt 2.768 4.6 -
Orcus Kuiper belt 39.40 247.3 1
Pluto Kuiper belt 39.48 247.9 5
Haumea Kuiper belt 43.22 284.1 2
Quaoar Kuiper belt 43.69 288.8 1
Makemake Kuiper belt 45.56 307.5 1
Gonggong Scattered disc 67.38 553.1 1
Eris Scattered disc 67.78 558.0 1
Sedna detached 506.8 11,400 no data

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

The column resize feature is compatible with the Export to Word feature. The converter will respect the column width set in the editor and retain it in the created .DOCX file.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, Table, TableColumnResize } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Table, TableColumnResize, /* ... */ ],
        toolbar: [ 'insertTable', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Common API

The TableColumnResize plugin does not register UI components.

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-table.