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

guideTable 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

By default, the table column resize feature is not included in the predefined builds and must be installed separately.

To enable the table column resize feature in your editor, you need to have the @ckeditor/ckeditor5-table package installed (it is already present in the predefined builds):

npm install --save @ckeditor/ckeditor5-table

Then add the Table and TableColumnResize plugins to your plugin list and configure the table toolbar:

import { Table, TableColumnResize } from '@ckeditor/ckeditor5-table';

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.