TableConfig (table)
@ckeditor/ckeditor5-table/src/table
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>
module:table/table~TableConfig#contentToolbar
Items to be placed in the table content toolbar. The
TableToolbar
plugin is required to make this toolbar work.Assuming that you use the
TableUI
feature, the following toolbar items will be available inComponentFactory
:'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
. -
defaultHeadings : Object
module:table/table~TableConfig#defaultHeadings
Number of rows and columns to render by default as table heading when inserting new tables.
You can configure it like this:
const tableConfig = { defaultHeadings: { rows: 1, columns: 1 } };
Both rows and columns properties are optional defaulting to 0 (no heading).
-
tableCellProperties : Object
module:table/table~TableConfig#tableCellProperties
The configuration of the table cell properties user interface (balloon). It allows to define:
-
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' }, // ... ] } };
-
The default styles for table cells (
tableCellProperties.defaultProperties
):const tableConfig = { tableCellProperties: { defaultProperties: { horizontalAlignment: 'right', verticalAlignment: 'bottom', padding: '5px' } } }
Note: The
borderColors
andbackgroundColors
options 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. ThedefaultProperties
option does impact the data. Default values will not be kept in the editor model.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
module:table/table~TableConfig#tableProperties
The configuration of the table properties user interface (balloon). It allows to define:
-
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' }, // ... ] } };
-
The default styles for tables (
tableProperties.defaultProperties
):const tableConfig = { tableProperties: { defaultProperties: { borderStyle: 'dashed', borderColor: 'hsl(0, 0%, 90%)', borderWidth: '3px', alignment: 'left' } } }
Note: The
borderColors
andbackgroundColors
options 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. ThedefaultProperties
option does impact the data. Default values will not be kept in the editor model.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>
module:table/table~TableConfig#tableToolbar
Items to be placed in the table toolbar. The
TableToolbar
plugin is required to make this toolbar work.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
.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.