@ckeditor/ckeditor5-table

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;

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;

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;

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;

method execute

execute: () => void;

• Executes the command.

  execute

method refresh

refresh: () => void;

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [typeof Table];

method init

init: () => void;

method execute

execute: () => void;

method refresh

refresh: () => void;

method execute

execute: () => void;

method refresh

refresh: () => void;

constructor

constructor(editor: Editor);

method execute

execute: () => void;

method refresh

refresh: () => void;

constructor

constructor(editor: Editor);

method execute

execute: () => void;

method refresh

refresh: () => void;

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;

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;

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;

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
];

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.

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.

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.

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.

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.

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [
    typeof TableCaptionEditing,
    typeof TableCaptionUI
];

constructor

constructor(editor: Editor);

property pluginName

static readonly pluginName: string;

method init

init: () => void;

property pluginName

static readonly pluginName: string;

method init

init: () => void;

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.

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.

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.

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.

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.

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.

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.

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [
    typeof TableCellPropertiesEditing,
    typeof TableCellPropertiesUI
];

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [
    typeof TableEditing,
    typeof TableCellWidthEditing
];

method init

init: () => void;

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;

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.

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.

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [typeof TableEditing];

method init

init: () => void;

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;

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [
    typeof TableColumnResizeEditing,
    typeof TableCellWidthEditing
];

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;

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.

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.

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [typeof TableSelection, typeof TableUtils];

method init

init: () => void;

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [typeof TableSelection, typeof TableUtils];

method init

init: () => void;

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [
    typeof TablePropertiesEditing,
    typeof TablePropertiesUI
];

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [typeof TableEditing];

method init

init: () => void;

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;

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

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [any];

method afterInit

afterInit: () => void;

property pluginName

static readonly pluginName: string;

method init

init: () => void;

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 .