@ckeditor/ckeditor5-table
- Version 39.0.2
- Published
- 1.62 MB
- 2 dependencies
- GPL-2.0-or-later license
Install
npm i @ckeditor/ckeditor5-table
yarn add @ckeditor/ckeditor5-table
pnpm add @ckeditor/ckeditor5-table
Overview
Table feature for CKEditor 5.
Index
Classes
TableUtils
- createTable()
- getCellLocation()
- getColumnIndexes()
- getColumns()
- getRowIndexes()
- getRows()
- getSelectedTableCells()
- getSelectionAffectedTableCells()
- getTableCellsContainingSelection()
- init()
- insertColumns()
- insertRows()
- isSelectionRectangular()
- pluginName
- removeColumns()
- removeRows()
- sortRanges()
- splitCellHorizontally()
- splitCellVertically()
Interfaces
Classes
class InsertColumnCommand
class InsertColumnCommand extends Command {}
The insert column command.
The command is registered by as the
'insertTableColumnLeft'
and'insertTableColumnRight'
editor commands.To insert a column to the left of the selected cell, execute the following command:
editor.execute( 'insertTableColumnLeft' );To insert a column to the right of the selected cell, execute the following command:
editor.execute( 'insertTableColumnRight' );
constructor
constructor(editor: Editor, options?: { order?: 'left' | 'right' });
Creates a new
InsertColumnCommand
instance.Parameter editor
An editor on which this command will be used.
Parameter
options.order The order of insertion relative to the column in which the caret is located. Possible values:
"left"
and"right"
. Default value is "right".
property order
readonly order: 'left' | 'right';
The order of insertion relative to the column in which the caret is located.
method execute
execute: () => void;
Executes the command.
Depending on the command's value, it inserts a column to the
'left'
or'right'
of the column in which the selection is set.execute
method refresh
refresh: () => void;
class InsertRowCommand
class InsertRowCommand extends Command {}
The insert row command.
The command is registered by as the
'insertTableRowBelow'
and'insertTableRowAbove'
editor commands.To insert a row below the selected cell, execute the following command:
editor.execute( 'insertTableRowBelow' );To insert a row above the selected cell, execute the following command:
editor.execute( 'insertTableRowAbove' );
constructor
constructor(editor: Editor, options?: { order?: 'above' | 'below' });
Creates a new
InsertRowCommand
instance.Parameter editor
The editor on which this command will be used.
Parameter
options.order The order of insertion relative to the row in which the caret is located. Possible values:
"above"
and"below"
. Default value is "below"
property order
readonly order: 'above' | 'below';
The order of insertion relative to the row in which the caret is located.
method execute
execute: () => void;
Executes the command.
Depending on the command's value, it inserts a row
'below'
or'above'
the row in which selection is set.execute
method refresh
refresh: () => void;
class InsertTableCommand
class InsertTableCommand extends Command {}
The insert table command.
The command is registered by as the
'insertTable'
editor command.To insert a table at the current selection, execute the command and specify the dimensions:
editor.execute( 'insertTable', { rows: 20, columns: 5 } );
method execute
execute: (options?: { rows?: number; columns?: number; headingRows?: number; headingColumns?: number;}) => void;
Executes the command.
Inserts a table with the given number of rows and columns into the editor.
Parameter
options.rows The number of rows to create in the inserted table. Default value is 2.
Parameter
options.columns The number of columns to create in the inserted table. Default value is 2.
Parameter
options.headingRows The number of heading rows. If not provided it will default to table config.
Parameter
options.headingColumns The number of heading columns. If not provided it will default to table config. execute
method refresh
refresh: () => void;
class MergeCellCommand
class MergeCellCommand extends Command {}
The merge cell command.
The command is registered by as the
'mergeTableCellRight'
,'mergeTableCellLeft'
,'mergeTableCellUp'
and'mergeTableCellDown'
editor commands.To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction.
For example, to merge with a cell to the right:
editor.execute( 'mergeTableCellRight' );**Note**: If a table cell has a different [
rowspan
](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-rowspan) (for'mergeTableCellRight'
and'mergeTableCellLeft'
) or [colspan
](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-colspan) (for'mergeTableCellUp'
and'mergeTableCellDown'
), the command will be disabled.
constructor
constructor(editor: Editor, options: { direction: ArrowKeyCodeDirection });
Creates a new
MergeCellCommand
instance.Parameter editor
The editor on which this command will be used.
Parameter
options.direction Indicates which cell to merge with the currently selected one. Possible values are:
'left'
,'right'
,'up'
and'down'
.
property direction
readonly direction: ArrowKeyCodeDirection;
The direction that indicates which cell will be merged with the currently selected one.
property isHorizontal
readonly isHorizontal: boolean;
Whether the merge is horizontal (left/right) or vertical (up/down).
property value
value: any;
method execute
execute: () => void;
Executes the command.
Depending on the command's value, it will merge the cell that is to the
'left'
,'right'
,'up'
or'down'
.execute
method refresh
refresh: () => void;
class MergeCellsCommand
class MergeCellsCommand extends Command {}
The merge cells command.
The command is registered by as the
'mergeTableCells'
editor command.For example, to merge selected table cells:
editor.execute( 'mergeTableCells' );
class PlainTableOutput
class PlainTableOutput extends Plugin {}
The plain table output feature.
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [typeof Table];
method init
init: () => void;
class RemoveColumnCommand
class RemoveColumnCommand extends Command {}
The remove column command.
The command is registered by as the
'removeTableColumn'
editor command.To remove the column containing the selected cell, execute the command:
editor.execute( 'removeTableColumn' );
class RemoveRowCommand
class RemoveRowCommand extends Command {}
The remove row command.
The command is registered by as the
'removeTableRow'
editor command.To remove the row containing the selected cell, execute the command:
editor.execute( 'removeTableRow' );
class SelectColumnCommand
class SelectColumnCommand extends Command {}
The select column command.
The command is registered by as the
'selectTableColumn'
editor command.To select the columns containing the selected cells, execute the command:
editor.execute( 'selectTableColumn' );
constructor
constructor(editor: Editor);
method execute
execute: () => void;
method refresh
refresh: () => void;
class SelectRowCommand
class SelectRowCommand extends Command {}
The select row command.
The command is registered by as the
'selectTableRow'
editor command.To select the rows containing the selected cells, execute the command:
editor.execute( 'selectTableRow' );
constructor
constructor(editor: Editor);
method execute
execute: () => void;
method refresh
refresh: () => void;
class SetHeaderColumnCommand
class SetHeaderColumnCommand extends Command {}
The header column command.
The command is registered by as the
'setTableColumnHeader'
editor command.You can make the column containing the selected cell a [header](https://www.w3.org/TR/html50/tabular-data.html#the-th-element) by executing:
editor.execute( 'setTableColumnHeader' );**Note:** All preceding columns will also become headers. If the current column is already a header, executing this command will make it a regular column back again (including the following columns).
property value
value: boolean;
Flag indicating whether the command is active. The command is active when the is in a header column.
method execute
execute: (options?: { forceValue?: boolean }) => void;
Executes the command.
When the selection is in a non-header column, the command will set the
headingColumns
table attribute to cover that column.When the selection is already in a header column, it will set
headingColumns
so the heading section will end before that column.execute
Parameter
options.forceValue If set, the command will set (
true
) or unset (false
) the header columns according to theforceValue
parameter instead of the current model state.
method refresh
refresh: () => void;
class SetHeaderRowCommand
class SetHeaderRowCommand extends Command {}
The header row command.
The command is registered by as the
'setTableColumnHeader'
editor command.You can make the row containing the selected cell a [header](https://www.w3.org/TR/html50/tabular-data.html#the-th-element) by executing:
editor.execute( 'setTableRowHeader' );**Note:** All preceding rows will also become headers. If the current row is already a header, executing this command will make it a regular row back again (including the following rows).
property value
value: boolean;
Flag indicating whether the command is active. The command is active when the is in a header row.
method execute
execute: (options?: { forceValue?: boolean }) => void;
Executes the command.
When the selection is in a non-header row, the command will set the
headingRows
table attribute to cover that row.When the selection is already in a header row, it will set
headingRows
so the heading section will end before that row.execute
Parameter
options.forceValue If set, the command will set (
true
) or unset (false
) the header rows according to theforceValue
parameter instead of the current model state.
method refresh
refresh: () => void;
class SplitCellCommand
class SplitCellCommand extends Command {}
The split cell command.
The command is registered by as the
'splitTableCellVertically'
and'splitTableCellHorizontally'
editor commands.You can split any cell vertically or horizontally by executing this command. For example, to split the selected table cell vertically:
editor.execute( 'splitTableCellVertically' );
constructor
constructor( editor: Editor, options?: { direction?: 'horizontally' | 'vertically' });
Creates a new
SplitCellCommand
instance.Parameter editor
The editor on which this command will be used.
Parameter
options.direction Indicates whether the command should split cells
'horizontally'
or'vertically'
.
property direction
readonly direction: 'horizontally' | 'vertically';
The direction that indicates which cell will be split.
method execute
execute: () => void;
method refresh
refresh: () => void;
class Table
class Table extends Plugin {}
The table plugin.
For a detailed overview, check the .
This is a "glue" plugin that loads the following table features:
* , * , * , * , * , * .
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [ typeof TableEditing, typeof TableUI, typeof TableSelection, typeof TableMouse, typeof TableKeyboard, typeof TableClipboard, any];
class TableAlignmentCommand
class TableAlignmentCommand extends TablePropertyCommand {}
The table alignment command.
The command is registered by the as the
'tableAlignment'
editor command.To change the alignment of the selected table, execute the command:
editor.execute( 'tableAlignment', {value: 'right'} );
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableAlignmentCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value for the "alignment" attribute.
class TableBackgroundColorCommand
class TableBackgroundColorCommand extends TablePropertyCommand {}
The table background color command.
The command is registered by the as the
'tableBackgroundColor'
editor command.To change the background color of the selected table, execute the command:
editor.execute( 'tableBackgroundColor', {value: '#f00'} );
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableBackgroundColorCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableBorderColorCommand
class TableBorderColorCommand extends TablePropertyCommand {}
The table border color command.
The command is registered by the as the
'tableBorderColor'
editor command.To change the border color of the selected table, execute the command:
editor.execute( 'tableBorderColor', {value: '#f00'} );
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableBorderColorCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableBorderStyleCommand
class TableBorderStyleCommand extends TablePropertyCommand {}
The table style border command.
The command is registered by the as the
'tableBorderStyle'
editor command.To change the border style of the selected table, execute the command:
editor.execute( 'tableBorderStyle', {value: 'dashed'} );
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableBorderStyleCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableBorderWidthCommand
class TableBorderWidthCommand extends TablePropertyCommand {}
The table width border command.
The command is registered by the as the
'tableBorderWidth'
editor command.To change the border width of the selected table, execute the command:
editor.execute( 'tableBorderWidth', {value: '5px'} );**Note**: This command adds the default
'px'
unit to numeric values. Executing:editor.execute( 'tableBorderWidth', {value: '5'} );will set the
borderWidth
attribute to'5px'
in the model.
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableBorderWidthCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableCaption
class TableCaption extends Plugin {}
The table caption plugin.
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [ typeof TableCaptionEditing, typeof TableCaptionUI];
class TableCaptionEditing
class TableCaptionEditing extends Plugin {}
The table caption editing plugin.
constructor
constructor(editor: Editor);
property pluginName
static readonly pluginName: string;
method init
init: () => void;
class TableCaptionUI
class TableCaptionUI extends Plugin {}
The table caption UI plugin. It introduces the
'toggleTableCaption'
UI button.
property pluginName
static readonly pluginName: string;
method init
init: () => void;
class TableCellBackgroundColorCommand
class TableCellBackgroundColorCommand extends TableCellPropertyCommand {}
The table cell background color command.
The command is registered by the as the
'tableCellBackgroundColor'
editor command.To change the background color of selected cells, execute the command:
editor.execute( 'tableCellBackgroundColor', {value: '#f00'} );
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableCellBackgroundColorCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableCellBorderColorCommand
class TableCellBorderColorCommand extends TableCellPropertyCommand {}
The table cell border color command.
The command is registered by the as the
'tableCellBorderColor'
editor command.To change the border color of selected cells, execute the command:
editor.execute( 'tableCellBorderColor', {value: '#f00'} );
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableCellBorderColorCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableCellBorderStyleCommand
class TableCellBorderStyleCommand extends TableCellPropertyCommand {}
The table cell border style command.
The command is registered by the as the
'tableCellBorderStyle'
editor command.To change the border style of selected cells, execute the command:
editor.execute( 'tableCellBorderStyle', {value: 'dashed'} );
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableCellBorderStyleCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableCellBorderWidthCommand
class TableCellBorderWidthCommand extends TableCellPropertyCommand {}
The table cell border width command.
The command is registered by the as the
'tableCellBorderWidth'
editor command.To change the border width of selected cells, execute the command:
editor.execute( 'tableCellBorderWidth', {value: '5px'} );**Note**: This command adds the default
'px'
unit to numeric values. Executing:editor.execute( 'tableCellBorderWidth', {value: '5'} );will set the
borderWidth
attribute to'5px'
in the model.
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableCellBorderWidthCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableCellHeightCommand
class TableCellHeightCommand extends TableCellPropertyCommand {}
The table cell height command.
The command is registered by the as the
'tableCellHeight'
editor command.To change the height of selected cells, execute the command:
editor.execute( 'tableCellHeight', {value: '50px'} );**Note**: This command adds the default
'px'
unit to numeric values. Executing:editor.execute( 'tableCellHeight', {value: '50'} );will set the
height
attribute to'50px'
in the model.
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableCellHeightCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableCellHorizontalAlignmentCommand
class TableCellHorizontalAlignmentCommand extends TableCellPropertyCommand {}
The table cell horizontal alignment command.
The command is registered by the as the
'tableCellHorizontalAlignment'
editor command.To change the horizontal text alignment of selected cells, execute the command:
editor.execute( 'tableCellHorizontalAlignment', {value: 'right'} );
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableCellHorizontalAlignmentCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value for the "alignment" attribute.
class TableCellPaddingCommand
class TableCellPaddingCommand extends TableCellPropertyCommand {}
The table cell padding command.
The command is registered by the as the
'tableCellPadding'
editor command.To change the padding of selected cells, execute the command:
editor.execute( 'tableCellPadding', {value: '5px'} );**Note**: This command adds the default
'px'
unit to numeric values. Executing:editor.execute( 'tableCellPadding', {value: '5'} );will set the
padding
attribute to'5px'
in the model.
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableCellPaddingCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableCellProperties
class TableCellProperties extends Plugin {}
The table cell properties feature. Enables support for setting properties of table cells (size, border, background, etc.).
Read more in the section. See also the plugin.
This is a "glue" plugin that loads the and the .
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [ typeof TableCellPropertiesEditing, typeof TableCellPropertiesUI];
class TableCellPropertiesEditing
class TableCellPropertiesEditing extends Plugin {}
The table cell properties editing feature.
Introduces table cell model attributes and their conversion:
- border:
tableCellBorderStyle
,tableCellBorderColor
andtableCellBorderWidth
- background color:tableCellBackgroundColor
- cell padding:tableCellPadding
- horizontal and vertical alignment:tableCellHorizontalAlignment
,tableCellVerticalAlignment
- cell width and height:tableCellWidth
,tableCellHeight
It also registers commands used to manipulate the above attributes:
- border: the
'tableCellBorderStyle'
,'tableCellBorderColor'
and'tableCellBorderWidth'
commands - background color: the'tableCellBackgroundColor'
command - cell padding: the'tableCellPadding'
command - horizontal and vertical alignment: the'tableCellHorizontalAlignment'
and'tableCellVerticalAlignment'
commands - width and height: the'tableCellWidth'
and'tableCellHeight'
commands
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [ typeof TableEditing, typeof TableCellWidthEditing];
method init
init: () => void;
class TableCellPropertiesUI
class TableCellPropertiesUI extends Plugin {}
The table cell properties UI plugin. It introduces the
'tableCellProperties'
button that opens a form allowing to specify the visual styling of a table cell.It uses the .
constructor
constructor(editor: Editor);
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [any];
property view
view?: TableCellPropertiesView;
The cell properties form view displayed inside the balloon.
method destroy
destroy: () => void;
method init
init: () => void;
class TableCellVerticalAlignmentCommand
class TableCellVerticalAlignmentCommand extends TableCellPropertyCommand {}
The table cell vertical alignment command.
The command is registered by the as the
'tableCellVerticalAlignment'
editor command.To change the vertical text alignment of selected cells, execute the command:
editor.execute( 'tableCellVerticalAlignment', {value: 'top'} );The following values, corresponding to the [
vertical-align
CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align), are allowed:*
'top'
*'bottom'
The
'middle'
value is the default one so there is no need to set it.
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableCellVerticalAlignmentCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value for the "alignment" attribute.
class TableCellWidthCommand
class TableCellWidthCommand extends TableCellPropertyCommand {}
The table cell width command.
The command is registered by the as the
'tableCellWidth'
editor command.To change the width of selected cells, execute the command:
editor.execute( 'tableCellWidth', {value: '50px'} );**Note**: This command adds a default
'px'
unit to numeric values. Executing:editor.execute( 'tableCellWidth', {value: '50'} );will set the
width
attribute to'50px'
in the model.
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableCellWidthCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableCellWidthEditing
class TableCellWidthEditing extends Plugin {}
The table cell width editing feature.
Introduces
tableCellWidth
table cell model attribute alongside with its converters and a command.
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [typeof TableEditing];
method init
init: () => void;
class TableClipboard
class TableClipboard extends Plugin {}
This plugin adds support for copying/cutting/pasting fragments of tables. It is loaded automatically by the plugin.
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [typeof TableSelection, typeof TableUtils];
method getTableIfOnlyTableInContent
getTableIfOnlyTableInContent: ( content: DocumentFragment | Item, model: Model) => Element | null;
Extracts the table for pasting into a table.
Parameter content
The content to insert.
Parameter model
The editor model.
method init
init: () => void;
class TableColumnResize
class TableColumnResize extends Plugin {}
The table column resize feature.
It provides the possibility to set the width of each column in a table using a resize handler.
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [ typeof TableColumnResizeEditing, typeof TableCellWidthEditing];
class TableColumnResizeEditing
class TableColumnResizeEditing extends Plugin {}
The table column resize editing plugin.
constructor
constructor(editor: Editor);
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [typeof TableEditing, typeof TableUtils];
method destroy
destroy: () => void;
method getColumnGroupElement
getColumnGroupElement: (element: Element) => Element | undefined;
Returns a 'tableColumnGroup' element from the 'table'.
Parameter element
A 'table' or 'tableColumnGroup' element.
Returns
A 'tableColumnGroup' element.
method getTableColumnElements
getTableColumnElements: (element: Element) => Array<Element>;
Returns an array of 'tableColumn' elements.
Parameter element
A 'table' or 'tableColumnGroup' element.
Returns
An array of 'tableColumn' elements.
method getTableColumnsWidths
getTableColumnsWidths: (element: Element) => Array<string>;
Returns an array of table column widths.
Parameter element
A 'table' or 'tableColumnGroup' element.
Returns
An array of table column widths.
method init
init: () => void;
class TableEditing
class TableEditing extends Plugin {}
The table editing feature.
constructor
constructor(editor: Editor);
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [typeof TableUtils];
method init
init: () => void;
method registerAdditionalSlot
registerAdditionalSlot: (slotHandler: AdditionalSlot) => void;
Registers downcast handler for the additional table slot.
class TableHeightCommand
class TableHeightCommand extends TablePropertyCommand {}
The table height command.
The command is registered by the as the
'tableHeight'
editor command.To change the height of the selected table, execute the command:
editor.execute( 'tableHeight', {value: '500px'} );**Note**: This command adds the default
'px'
unit to numeric values. Executing:editor.execute( 'tableHeight', {value: '50'} );will set the
height
attribute to'50px'
in the model.
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableHeightCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class TableKeyboard
class TableKeyboard extends Plugin {}
This plugin enables keyboard navigation for tables. It is loaded automatically by the plugin.
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [typeof TableSelection, typeof TableUtils];
method init
init: () => void;
class TableMouse
class TableMouse extends Plugin {}
This plugin enables a table cells' selection with the mouse. It is loaded automatically by the plugin.
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [typeof TableSelection, typeof TableUtils];
method init
init: () => void;
class TableProperties
class TableProperties extends Plugin {}
The table properties feature. Enables support for setting properties of tables (size, border, background, etc.).
Read more in the section. See also the plugin.
This is a "glue" plugin that loads the and the .
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [ typeof TablePropertiesEditing, typeof TablePropertiesUI];
class TablePropertiesEditing
class TablePropertiesEditing extends Plugin {}
The table properties editing feature.
Introduces table's model attributes and their conversion:
- border:
tableBorderStyle
,tableBorderColor
andtableBorderWidth
- background color:tableBackgroundColor
- horizontal alignment:tableAlignment
- width & height:tableWidth
&tableHeight
It also registers commands used to manipulate the above attributes:
- border:
'tableBorderStyle'
,'tableBorderColor'
and'tableBorderWidth'
commands - background color:'tableBackgroundColor'
- horizontal alignment:'tableAlignment'
- width & height:'tableWidth'
&'tableHeight'
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [typeof TableEditing];
method init
init: () => void;
class TablePropertiesUI
class TablePropertiesUI extends Plugin {}
The table properties UI plugin. It introduces the
'tableProperties'
button that opens a form allowing to specify visual styling of an entire table.It uses the .
constructor
constructor(editor: Editor);
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [any];
property view
view: TablePropertiesView;
The properties form view displayed inside the balloon.
method destroy
destroy: () => void;
method init
init: () => void;
class TableSelection
class TableSelection extends Plugin {}
This plugin enables the advanced table cells, rows and columns selection. It is loaded automatically by the plugin.
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [typeof TableUtils, typeof TableUtils];
method getAnchorCell
getAnchorCell: () => Element | null;
Returns the anchor cell from the current selection.
method getFocusCell
getFocusCell: () => Element | null;
Returns the focus cell from the current selection.
method getSelectedTableCells
getSelectedTableCells: () => Array<Element> | null;
Returns the currently selected table cells or
null
if it is not a table cells selection.
method getSelectionAsFragment
getSelectionAsFragment: () => DocumentFragment | null;
Returns the selected table fragment as a document fragment.
method init
init: () => void;
method setCellSelection
setCellSelection: (anchorCell: Element, targetCell: Element) => void;
Sets the model selection based on given anchor and target cells (can be the same cell). Takes care of setting the backward flag.
const modelRoot = editor.model.document.getRoot();const firstCell = modelRoot.getNodeByPath( [ 0, 0, 0 ] );const lastCell = modelRoot.getNodeByPath( [ 0, 0, 1 ] );const tableSelection = editor.plugins.get( 'TableSelection' );tableSelection.setCellSelection( firstCell, lastCell );
class TableToolbar
class TableToolbar extends Plugin {}
The table toolbar class. It creates toolbars for the table feature and its content (for now only for the table cell content).
The table toolbar shows up when a table widget is selected. Its components (e.g. buttons) are created based on the .
Table content toolbar shows up when the selection is inside the content of a table. It creates its component based on the .
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: readonly [any];
method afterInit
afterInit: () => void;
class TableUI
class TableUI extends Plugin {}
The table UI plugin. It introduces:
* The
'insertTable'
dropdown, * The'tableColumn'
dropdown, * The'tableRow'
dropdown, * The'mergeTableCells'
split button.The
'tableColumn'
,'tableRow'
and'mergeTableCells'
dropdowns work best with .
property pluginName
static readonly pluginName: string;
method init
init: () => void;
class TableUtils
class TableUtils extends Plugin {}
The table utilities plugin.
property pluginName
static readonly pluginName: string;
method createTable
createTable: ( writer: Writer, options: { rows?: number; columns?: number; headingRows?: number; headingColumns?: number; }) => Element;
Creates an empty table with a proper structure. The table needs to be inserted into the model, for example, by using the function.
model.change( ( writer ) => {// Create a table of 2 rows and 7 columns:const table = tableUtils.createTable( writer, { rows: 2, columns: 7 } );// Insert a table to the model at the best position taking the current selection:model.insertContent( table );}Parameter writer
The model writer.
Parameter
options.rows The number of rows to create. Default value is 2.
Parameter
options.columns The number of columns to create. Default value is 2.
Parameter
options.headingRows The number of heading rows. Default value is 0.
Parameter
options.headingColumns The number of heading columns. Default value is 0.
Returns
The created table element.
method getCellLocation
getCellLocation: (tableCell: Element) => { row: number; column: number };
Returns the table cell location as an object with table row and table column indexes.
For instance, in the table below:
0 1 2 3 +---+---+---+---+ 0 | a | b | c | + + +---+ 1 | | | d | +---+---+ +---+ 2 | e | | f | +---+---+---+---+
the method will return:
const cellA = table.getNodeByPath( [ 0, 0 ] );editor.plugins.get( 'TableUtils' ).getCellLocation( cellA );// will return { row: 0, column: 0 }const cellD = table.getNodeByPath( [ 1, 0 ] );editor.plugins.get( 'TableUtils' ).getCellLocation( cellD );// will return { row: 1, column: 3 }Returns
Returns a
{row, column}
object.
method getColumnIndexes
getColumnIndexes: (tableCells: Array<Element>) => IndexesObject;
Returns an object with the
first
andlast
column index contained in the giventableCells
.const selectedTableCells = getSelectedTableCells( editor.model.document.selection );const { first, last } = getColumnIndexes( selectedTableCells );console.log( `Selected columns: ${ first } to ${ last }` );Returns
Returns an object with the
first
andlast
table column indexes.
method getColumns
getColumns: (table: Element) => number;
Returns the number of columns for a given table.
editor.plugins.get( 'TableUtils' ).getColumns( table );Parameter table
The table to analyze.
method getRowIndexes
getRowIndexes: (tableCells: Array<Element>) => IndexesObject;
Returns an object with the
first
andlast
row index contained in the giventableCells
.const selectedTableCells = getSelectedTableCells( editor.model.document.selection );const { first, last } = getRowIndexes( selectedTableCells );console.log( `Selected rows: ${ first } to ${ last }` );Returns
Returns an object with the
first
andlast
table row indexes.
method getRows
getRows: (table: Element) => number;
Returns the number of rows for a given table. Any other element present in the table model is omitted.
editor.plugins.get( 'TableUtils' ).getRows( table );Parameter table
The table to analyze.
method getSelectedTableCells
getSelectedTableCells: ( selection: Selection | DocumentSelection) => Array<Element>;
Returns all model table cells that are fully selected (from the outside) within the provided model selection's ranges.
To obtain the cells selected from the inside, use .
method getSelectionAffectedTableCells
getSelectionAffectedTableCells: ( selection: Selection | DocumentSelection) => Array<Element>;
Returns all model table cells that are either completely selected by selection ranges or host selection range inside them.
Combines and .
method getTableCellsContainingSelection
getTableCellsContainingSelection: ( selection: Selection | DocumentSelection) => Array<Element>;
Returns all model table cells that the provided model selection's ranges inside.
To obtain the cells selected from the outside, use .
method init
init: () => void;
method insertColumns
insertColumns: ( table: Element, options?: { at?: number; columns?: number }) => void;
Inserts columns into a table.
editor.plugins.get( 'TableUtils' ).insertColumns( table, { at: 1, columns: 2 } );Assuming the table on the left, the above code will transform it to the table on the right:
0 1 2 3 0 1 2 3 4 5 +---+---+---+ +---+---+---+---+---+ | a | b | | a | b | + +---+ + +---+ | | c | | | c | +---+---+---+ will give: +---+---+---+---+---+ | d | e | f | | d | | | e | f | +---+ +---+ +---+---+---+ +---+ | g | | h | | g | | | | h | +---+---+---+ +---+---+---+---+---+ | i | | i | +---+---+---+ +---+---+---+---+---+ ^---- insert here,
at
= 1,columns
= 2Parameter table
The table model element where the columns will be inserted.
Parameter
options.at The column index at which the columns will be inserted. Default value is 0.
Parameter
options.columns The number of columns to insert. Default value is 1.
method insertRows
insertRows: ( table: Element, options?: { at?: number; rows?: number; copyStructureFromAbove?: boolean }) => void;
Inserts rows into a table.
editor.plugins.get( 'TableUtils' ).insertRows( table, { at: 1, rows: 2 } );Assuming the table on the left, the above code will transform it to the table on the right:
row index 0 +---+---+---+
at
= 1, +---+---+---+ 0 | a | b | c |rows
= 2, | a | b | c | 1 + +---+---+ <-- insert here + +---+---+ 1 | | d | e | | | | | 2 + +---+---+ will give: + +---+---+ 2 | | f | g | | | | | 3 +---+---+---+ + +---+---+ 3 | | d | e | + +---+---+ 4 + + f | g | +---+---+---+ 5Parameter table
The table model element where the rows will be inserted.
Parameter
options.at The row index at which the rows will be inserted. Default value is 0.
Parameter
options.rows The number of rows to insert. Default value is 1.
Parameter
options.copyStructureFromAbove The flag for copying row structure. Note that the row structure will not be copied if this option is not provided.
method isSelectionRectangular
isSelectionRectangular: (selectedTableCells: Array<Element>) => boolean;
Checks if the selection contains cells that do not exceed rectangular selection.
In a table below:
┌───┬───┬───┬───┐ │ a │ b │ c │ d │ ├───┴───┼───┤ │ │ e │ f │ │ │ ├───┼───┤ │ │ g │ h │ └───────┴───┴───┘
Valid selections are these which create a solid rectangle (without gaps), such as: - a, b (two horizontal cells) - c, f (two vertical cells) - a, b, e (cell "e" spans over four cells) - c, d, f (cell d spans over a cell in the row below)
While an invalid selection would be: - a, c (the unselected cell "b" creates a gap) - f, g, h (cell "d" spans over a cell from the row of "f" cell - thus creates a gap)
method removeColumns
removeColumns: ( table: Element, options: { at: number; columns?: number }) => void;
Removes columns from the given
table
.This method re-calculates the table geometry including the
colspan
attribute of table cells overlapping removed columns and table headings values.editor.plugins.get( 'TableUtils' ).removeColumns( table, { at: 1, columns: 2 } );Executing the above code in the context of the table on the left will transform its structure as presented on the right:
0 1 2 3 4 0 1 2 ┌───────────────┬───┐ ┌───────┬───┐ │ a │ b │ │ a │ b │ │ ├───┤ │ ├───┤ │ │ c │ │ │ c │ ├───┬───┬───┬───┼───┤ will give: ├───┬───┼───┤ │ d │ e │ f │ g │ h │ │ d │ g │ h │ ├───┼───┼───┤ ├───┤ ├───┤ ├───┤ │ i │ j │ k │ │ l │ │ i │ │ l │ ├───┴───┴───┴───┴───┤ ├───┴───┴───┤ │ m │ │ m │ └───────────────────┘ └───────────┘ ^---- remove from here,
at
= 1,columns
= 2Parameter
options.at The row index at which the removing columns will start.
Parameter
options.columns The number of columns to remove.
method removeRows
removeRows: (table: Element, options: { at: number; rows?: number }) => void;
Removes rows from the given
table
.This method re-calculates the table geometry including
rowspan
attribute of table cells overlapping removed rows and table headings values.editor.plugins.get( 'TableUtils' ).removeRows( table, { at: 1, rows: 2 } );Executing the above code in the context of the table on the left will transform its structure as presented on the right:
row index ┌───┬───┬───┐
at
= 1 ┌───┬───┬───┐ 0 │ a │ b │ c │rows
= 2 │ a │ b │ c │ 0 │ ├───┼───┤ │ ├───┼───┤ 1 │ │ d │ e │ <-- remove from here │ │ d │ g │ 1 │ │ ├───┤ will give: ├───┼───┼───┤ 2 │ │ │ f │ │ h │ i │ j │ 2 │ │ ├───┤ └───┴───┴───┘ 3 │ │ │ g │ ├───┼───┼───┤ 4 │ h │ i │ j │ └───┴───┴───┘Parameter
options.at The row index at which the removing rows will start.
Parameter
options.rows The number of rows to remove. Default value is 1.
method sortRanges
sortRanges: (ranges: Iterable<Range>) => Array<Range>;
Returns array of sorted ranges.
method splitCellHorizontally
splitCellHorizontally: (tableCell: Element, numberOfCells?: number) => void;
Divides a table cell horizontally into several ones.
The cell will be visually split into more cells by updating rowspans of other cells in the row and inserting rows with a single cell below.
If in the table below cell "b" is split into 3 cells:
+---+---+---+ | a | b | c | +---+---+---+ | d | e | f | +---+---+---+
It will result in the table below:
+---+---+---+ | a | b | c | + +---+ + | | | | + +---+ + | | | | +---+---+---+ | d | e | f | +---+---+---+
So cells "a" and "b" will get their
rowspan
updated to3
and 2 rows with a single cell will be added.Splitting a cell that already has a
rowspan
attribute set will distribute the cellrowspan
evenly and the remainder will be left to the original cell:+---+---+---+ | a | b | c | + +---+---+ | | d | e | + +---+---+ | | f | g | + +---+---+ | | h | i | +---+---+---+
Splitting cell "a" with
rowspan=4
into 3 cells will create 2 cells with arowspan=1
and cell "a" will haverowspan=2
:+---+---+---+ | a | b | c | + +---+---+ | | d | e | +---+---+---+ | | f | g | +---+---+---+ | | h | i | +---+---+---+
method splitCellVertically
splitCellVertically: (tableCell: Element, numberOfCells?: number) => void;
Divides a table cell vertically into several ones.
The cell will be visually split into more cells by updating colspans of other cells in a column and inserting cells (columns) after that cell.
In the table below, if cell "a" is split into 3 cells:
+---+---+---+ | a | b | c | +---+---+---+ | d | e | f | +---+---+---+
it will result in the table below:
+---+---+---+---+---+ | a | | | b | c | +---+---+---+---+---+ | d | e | f | +---+---+---+---+---+
So cell "d" will get its
colspan
updated to3
and 2 cells will be added (2 columns will be created).Splitting a cell that already has a
colspan
attribute set will distribute the cellcolspan
evenly and the remainder will be left to the original cell:+---+---+---+ | a | +---+---+---+ | b | c | d | +---+---+---+
Splitting cell "a" with
colspan=3
into 2 cells will create 1 cell with acolspan=a
and cell "a" that will havecolspan=2
:+---+---+---+ | a | | +---+---+---+ | b | c | d | +---+---+---+
class TableWidthCommand
class TableWidthCommand extends TablePropertyCommand {}
The table width command.
The command is registered by the as the
'tableWidth'
editor command.To change the width of the selected table, execute the command:
editor.execute( 'tableWidth', {value: '400px'} );**Note**: This command adds the default
'px'
unit to numeric values. Executing:editor.execute( 'tableWidth', {value: '50'} );will set the
width
attribute to'50px'
in the model.
constructor
constructor(editor: Editor, defaultValue: string);
Creates a new
TableWidthCommand
instance.Parameter editor
An editor in which this command will be used.
Parameter defaultValue
The default value of the attribute.
class ToggleTableCaptionCommand
class ToggleTableCaptionCommand extends Command {}
The toggle table caption command.
This command is registered by as the
'toggleTableCaption'
editor command.Executing this command:
* either adds or removes the table caption of a selected table (depending on whether the caption is present or not), * removes the table caption if the selection is anchored in one.
// Toggle the presence of the caption.editor.execute( 'toggleTableCaption' );**Note**: You can move the selection to the caption right away as it shows up upon executing this command by using the
focusCaptionOnShow
option:editor.execute( 'toggleTableCaption', { focusCaptionOnShow: true } );
property value
value: boolean;
method execute
execute: ({ focusCaptionOnShow }?: { focusCaptionOnShow?: boolean }) => void;
Executes the command.
editor.execute( 'toggleTableCaption' );Parameter options
Options for the executed command.
Parameter
options.focusCaptionOnShow When true and the caption shows up, the selection will be moved into it straight away. execute
method refresh
refresh: () => void;
Interfaces
interface TableConfig
interface TableConfig {}
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 .
property contentToolbar
contentToolbar?: Array<ToolbarConfigItem>;
Items to be placed in the table content toolbar. The plugin is required to make this toolbar work.
Assuming that you use the feature, the following toolbar items will be available in :
*
'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 .
Read more about configuring the toolbar in .
property defaultHeadings
defaultHeadings?: { rows?: number; columns?: number;};
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).
property tableCellProperties
tableCellProperties?: TableCellPropertiesConfig;
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 ().
Both color palette configurations must follow the .
Read more about configuring the table feature in .
property tableProperties
tableProperties?: TablePropertiesConfig;
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 ().
Both color palette configurations must follow the .
Read more about configuring the table feature in .
property tableToolbar
tableToolbar?: Array<ToolbarConfigItem>;
Items to be placed in the table toolbar. The 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 .
Read more about configuring the toolbar in .
Package Files (53)
- src/commands/insertcolumncommand.d.ts
- src/commands/insertrowcommand.d.ts
- src/commands/inserttablecommand.d.ts
- src/commands/mergecellcommand.d.ts
- src/commands/mergecellscommand.d.ts
- src/commands/removecolumncommand.d.ts
- src/commands/removerowcommand.d.ts
- src/commands/selectcolumncommand.d.ts
- src/commands/selectrowcommand.d.ts
- src/commands/setheadercolumncommand.d.ts
- src/commands/setheaderrowcommand.d.ts
- src/commands/splitcellcommand.d.ts
- src/index.d.ts
- src/plaintableoutput.d.ts
- src/table.d.ts
- src/tablecaption.d.ts
- src/tablecaption/tablecaptionediting.d.ts
- src/tablecaption/tablecaptionui.d.ts
- src/tablecaption/toggletablecaptioncommand.d.ts
- src/tablecellproperties.d.ts
- src/tablecellproperties/commands/tablecellbackgroundcolorcommand.d.ts
- src/tablecellproperties/commands/tablecellbordercolorcommand.d.ts
- src/tablecellproperties/commands/tablecellborderstylecommand.d.ts
- src/tablecellproperties/commands/tablecellborderwidthcommand.d.ts
- src/tablecellproperties/commands/tablecellheightcommand.d.ts
- src/tablecellproperties/commands/tablecellhorizontalalignmentcommand.d.ts
- src/tablecellproperties/commands/tablecellpaddingcommand.d.ts
- src/tablecellproperties/commands/tablecellverticalalignmentcommand.d.ts
- src/tablecellproperties/tablecellpropertiesediting.d.ts
- src/tablecellproperties/tablecellpropertiesui.d.ts
- src/tablecellwidth/commands/tablecellwidthcommand.d.ts
- src/tablecellwidth/tablecellwidthediting.d.ts
- src/tableclipboard.d.ts
- src/tablecolumnresize.d.ts
- src/tablecolumnresize/tablecolumnresizeediting.d.ts
- src/tableconfig.d.ts
- src/tableediting.d.ts
- src/tablekeyboard.d.ts
- src/tablemouse.d.ts
- src/tableproperties.d.ts
- src/tableproperties/commands/tablealignmentcommand.d.ts
- src/tableproperties/commands/tablebackgroundcolorcommand.d.ts
- src/tableproperties/commands/tablebordercolorcommand.d.ts
- src/tableproperties/commands/tableborderstylecommand.d.ts
- src/tableproperties/commands/tableborderwidthcommand.d.ts
- src/tableproperties/commands/tableheightcommand.d.ts
- src/tableproperties/commands/tablewidthcommand.d.ts
- src/tableproperties/tablepropertiesediting.d.ts
- src/tableproperties/tablepropertiesui.d.ts
- src/tableselection.d.ts
- src/tabletoolbar.d.ts
- src/tableui.d.ts
- src/tableutils.d.ts
Dependencies (2)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ckeditor/ckeditor5-table
.
- Markdown[](https://www.jsdocs.io/package/@ckeditor/ckeditor5-table)
- HTML<a href="https://www.jsdocs.io/package/@ckeditor/ckeditor5-table"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 7345 ms. - Missing or incorrect documentation? Open an issue for this package.