Table scrolling

The TableScroll plugin keeps wide tables usable. Whenever a table would be wider than the space available to it, the table scrolls horizontally inside its own frame instead of squeezing its columns down to an unreadable width or breaking out of the page layout.

Demo

Try shrinking your browser window, or dragging the table below wider with the column resize handle – once the table no longer fits, it starts scrolling horizontally on its own. While dragging, the table’s edge snaps to exactly 100% of the available width and resists being dragged past it, making it easy to land on a table that fits its container exactly – a longer drag still lets it overflow on purpose.

This wide table does not fit the editor – scroll it horizontally to see all the columns.

Product	Q1	Q2	Q3	Q4	Region	Owner
Widget A	120	135	150	142	EMEA	J. Kowalski
Widget B	98	101	97	110	APAC	A. Nowak
Widget C	210	198	225	240	NA	M. Wiśniewska

Resize your browser window, or drag the table's own resize handle wider, to see it start and stop scrolling.

Installation

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

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

ClassicEditor
	.create( {
		licenseKey: '&lt;YOUR_LICENSE_KEY&gt;', // Or 'GPL'.
		plugins: [ Table, TableScroll, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

const { ClassicEditor, Table, TableScroll } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '&lt;YOUR_LICENSE_KEY&gt;',
		plugins: [ Table, TableScroll, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

Note

By default, this feature requires no configuration or additional UI – a content table starts and stops scrolling automatically, based on its own width and the space available to it. It works together with the table and column resize and table caption features. See below for how to also enable it for layout tables.

Configuring which tables can scroll

By default, only content tables become scrollable when they overflow their container. Layout tables are excluded by default, since letting a layout table grow past its container can easily break the intended page layout – dragging its column resize handle stops at the container’s edge instead of overflowing it.

To also allow layout tables to scroll (and to be resized past the container width), add 'layout' to config.table.tableScroll.tableTypes:

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '&lt;YOUR_LICENSE_KEY&gt;', // Or 'GPL'.
		plugins: [ Table, TableScroll, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
		table: {
			tableScroll: {
				tableTypes: [ 'content', 'layout' ]
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '&lt;YOUR_LICENSE_KEY&gt;',
		plugins: [ Table, TableScroll, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
		table: {
			tableScroll: {
				tableTypes: [ 'content', 'layout' ]
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

Note

A table nested inside another table never becomes scrollable, regardless of this configuration – scrolling only ever applies to a table sitting directly in the editing root.

Common API

The TableScroll plugin does not register any commands or UI components.

Note

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.

Known issues

This feature only affects the editing view – a table only ever scrolls while you are editing it, it never scrolls in the actual document data. Because of that, it does not carry over to the Export to Word and Export to PDF features: an overflowing table is exported at its full, intended width, and appears exactly as it would with the scrolling feature disabled.

Contribute

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