Logo for jsDocs.io

@ckeditor/ckeditor5-table

  • Version 41.3.1
  • Published
  • 1.72 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

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' );

method execute

execute: () => void;

  • Executes the command.

    execute

method refresh

refresh: () => void;

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' );

method execute

execute: () => void;

method refresh

refresh: () => void;

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' );

method execute

execute: () => void;

method refresh

refresh: () => void;

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 the forceValue 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 the forceValue 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 and tableCellBorderWidth - 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 [
    any,
    any,
    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 and tableBorderWidth - 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 'menuBar:insertTable' menu bar menu, * 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 and last column index contained in the given tableCells.

    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 and last 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 and last row index contained in the given tableCells.

    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 and last 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 = 2

    Parameter 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 | +---+---+---+ 5

    Parameter 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 = 2

    Parameter

    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 to 3 and 2 rows with a single cell will be added.

    Splitting a cell that already has a rowspan attribute set will distribute the cell rowspan 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 a rowspan=1 and cell "a" will have rowspan=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 to 3 and 2 cells will be added (2 columns will be created).

    Splitting a cell that already has a colspan attribute set will distribute the cell colspan 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 a colspan=a and cell "a" that will have colspan=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 and backgroundColors 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. The defaultProperties 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 and backgroundColors 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. The defaultProperties 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)

    Dependencies (2)

    Dev Dependencies (0)

    No dev dependencies.

    Peer Dependencies (0)

    No peer dependencies.

    Badge

    To add a badge like this onejsDocs.io badgeto 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
      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](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>