CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

TableConfig (table)

@ckeditor/ckeditor5-table/src/table

interface
See source

The configuration of the table feature. Used by the table feature in the @ckeditor/ckeditor5-table package.

ClassicEditor
	.create( editorElement, {
		table: ... // Table feature options.
	} )
	.then( ... )
	.catch( ... );

See all editor options.

Filtering

Properties

  • contentToolbar : Array.<String>

    Items to be placed in the table content toolbar. The TableToolbar plugin is required to make this toolbar work.

    See source

    Assuming that you use the TableUI feature, the following toolbar items will be available in ComponentFactory:

    • 'tableRow',
    • 'tableColumn',
    • 'mergeTableCells'.

    You can thus configure the toolbar like this:

    const tableConfig = {
	contentToolbar: [ 'tableRow', 'tableColumn', 'mergeTableCells' ]
};

    Of course, the same buttons can also be used in the main editor toolbar.

    Read more about configuring the toolbar in toolbar.

  • tableCellProperties : Object

    The configuration of the table cell properties user interface (balloon). It allows to define:

    See source

    • The color palette for the cell border color style field (tableCellProperties.borderColors),

    • The color palette for the cell background style field (tableCellProperties.backgroundColors).

      const tableConfig = {
	tableCellProperties: {
		borderColors: [
			{
				color: 'hsl(0, 0%, 90%)',
				label: 'Light grey'
			},
			// ...
		],
		backgroundColors: [
			{
				color: 'hsl(120, 75%, 60%)',
				label: 'Green'
			},
			// ...
		]
	}
};

    Note: The configurations do not impact the data loaded into the editor, i.e. they do not limit or filter the colors in the data. They are used only in the user interface allowing users to pick colors in a more convenient way.

    The default color palettes for the cell background and the cell border are the same (check out their content).

    Both color palette configurations must follow the table color configuration format.

    Read more about configuring the table feature in TableConfig.

  • tableProperties : Object

    The configuration of the table properties user interface (balloon). It allows to define:

    See source

    • The color palette for the table border color style field (tableProperties.borderColors),

    • The color palette for the table background style field (tableProperties.backgroundColors).

      const tableConfig = {
	tableProperties: {
		borderColors: [
			{
				color: 'hsl(0, 0%, 90%)',
				label: 'Light grey'
			},
			// ...
		],
		backgroundColors: [
			{
				color: 'hsl(120, 75%, 60%)',
				label: 'Green'
			},
			// ...
		]
	}
};

    Note: The configurations do not impact the data loaded into the editor, i.e. they do not limit or filter the colors in the data. They are used only in the user interface allowing users to pick colors in a more convenient way.

    The default color palettes for the table background and the table border are the same (check out their content).

    Both color palette configurations must follow the table color configuration format.

    Read more about configuring the table feature in TableConfig.

  • tableToolbar : Array.<String>

    Items to be placed in the table toolbar. The TableToolbar plugin is required to make this toolbar work.

    See source

    You can thus configure the toolbar like this:

    const tableConfig = {
	tableToolbar: [ 'blockQuote' ]
};

    Of course, the same buttons can also be used in the main editor toolbar.

    Read more about configuring the toolbar in toolbar.