@types/ckeditor__ckeditor5-table
- Version 33.0.0
- Published
- 112 kB
- 5 dependencies
- MIT license
Install
npm i @types/ckeditor__ckeditor5-table
yarn add @types/ckeditor__ckeditor5-table
pnpm add @types/ckeditor__ckeditor5-table
Overview
TypeScript definitions for @ckeditor/ckeditor5-table
Index
Classes
TableUtils
- createTable()
- createTableWalker()
- getCellLocation()
- getColumnIndexes()
- getColumns()
- getRowIndexes()
- getRows()
- getSelectedTableCells()
- getSelectionAffectedTableCells()
- getTableCellsContainingSelection()
- init()
- insertColumns()
- insertRows()
- isSelectionRectangular()
- pluginName
- removeColumns()
- removeRows()
- sortRanges()
- splitCellHorizontally()
- splitCellVertically()
Classes
class Table
class Table extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [ typeof TableEditing, typeof TableUI, typeof TableSelection, typeof TableMouse, typeof TableKeyboard, typeof TableClipboard, any];
class TableCaption
class TableCaption extends Plugin {}
The table caption plugin.
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [typeof TableCaptionEditing, typeof TableCaptionUI];
class TableCaptionEditing
class TableCaptionEditing extends Plugin {}
The table caption editing plugin.
property pluginName
static readonly pluginName: string;
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 TableCellProperties
class TableCellProperties extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [ typeof TableCellPropertiesEditing, typeof TableCellPropertiesUI];
class TableCellPropertiesEditing
class TableCellPropertiesEditing extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [typeof TableEditing];
method init
init: () => void;
class TableCellPropertiesUI
class TableCellPropertiesUI extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [any];
method destroy
destroy: () => void;
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: [typeof TableSelection, typeof TableUtils];
method getTableIfOnlyTableInContent
getTableIfOnlyTableInContent: ( content: DocumentFragment | Item, model: Model) => Element | null;
Extracts the table for pasting into a table.
method init
init: () => void;
class TableEditing
class TableEditing extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [typeof TableUtils];
method init
init: () => void;
class TableKeyboard
class TableKeyboard extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [typeof TableSelection, typeof TableUtils];
method init
init: () => void;
class TableMouse
class TableMouse extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [typeof TableSelection, typeof TableUtils];
method init
init: () => void;
class TableProperties
class TableProperties extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [ typeof TablePropertiesEditing, typeof TablePropertiesUI];
class TablePropertiesEditing
class TablePropertiesEditing extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [typeof TableEditing];
method init
init: () => void;
class TablePropertiesUI
class TablePropertiesUI extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [any];
method destroy
destroy: () => void;
method init
init: () => void;
class TableSelection
class TableSelection extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [typeof TableUtils];
method getAnchorCell
getAnchorCell: () => Element;
method getFocusCell
getFocusCell: () => Element;
method getSelectedTableCells
getSelectedTableCells: () => Element[] | null;
method getSelectionAsFragment
getSelectionAsFragment: () => DocumentFragment | null;
method init
init: () => void;
method setCellSelection
setCellSelection: (anchorCell: Element, targetCell: Element) => void;
class TableToolbar
class TableToolbar extends Plugin {}
property pluginName
static readonly pluginName: string;
property requires
static readonly requires: [any];
method afterInit
afterInit: () => void;
class TableUI
class TableUI extends Plugin {}
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; }) => ModelElement;
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 ); }
method createTableWalker
createTableWalker: ( table: ModelElement, options?: { row?: number; startRow?: number; endRow?: number; column?: number; startColumn?: number; endColumn?: number; includeAllSlots?: boolean; }) => TableWalker;
Creates an instance of the table walker.
The table walker iterates internally by traversing the table from row index = 0 and column index = 0. It walks row by row and column by column in order to output values defined in the options. By default it will output only the locations that are occupied by a cell. To include also spanned rows and columns, pass the
includeAllSlots
option.
method getCellLocation
getCellLocation: ( tableCell: ModelElement) => { row: number; column: number } | void;
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 }
method getColumnIndexes
getColumnIndexes: (tableCells: ModelElement[]) => { first: number; last: number;};
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 }
);
method getColumns
getColumns: (table: ModelElement) => number;
Returns the number of columns for a given table.
editor.plugins.get( 'TableUtils' ).getColumns( table );
method getRowIndexes
getRowIndexes: (tableCells: ModelElement[]) => { first: number; last: number };
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 }
);
method getRows
getRows: (table: ModelElement) => 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 );
method getSelectedTableCells
getSelectedTableCells: (selection: ModelSelection) => ModelElement[];
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: ModelSelection) => ModelElement[];
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: ModelSelection) => ModelElement[];
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: ModelElement, 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
method insertRows
insertRows: ( table: ModelElement, 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
method isSelectionRectangular
isSelectionRectangular: (selectedTableCells: ModelElement[]) => 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: ModelElement, 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
method removeRows
removeRows: ( table: ModelElement, 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 │ └───┴───┴───┘
method sortRanges
sortRanges: (ranges: Iterable<ModelRange>) => ModelRange[];
Returns array of sorted ranges.
method splitCellHorizontally
splitCellHorizontally: (tableCell: ModelElement, 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: ModelElement, 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 | +---+---+---+
Package Files (19)
- index.d.ts
- src/table.d.ts
- src/tablecaption.d.ts
- src/tablecaption/tablecaptionediting.d.ts
- src/tablecaption/tablecaptionui.d.ts
- src/tablecellproperties.d.ts
- src/tablecellproperties/tablecellpropertiesediting.d.ts
- src/tablecellproperties/tablecellpropertiesui.d.ts
- src/tableclipboard.d.ts
- src/tableediting.d.ts
- src/tablekeyboard.d.ts
- src/tablemouse.d.ts
- src/tableproperties.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 (5)
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/@types/ckeditor__ckeditor5-table
.
- Markdown[](https://www.jsdocs.io/package/@types/ckeditor__ckeditor5-table)
- HTML<a href="https://www.jsdocs.io/package/@types/ckeditor__ckeditor5-table"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 5985 ms. - Missing or incorrect documentation? Open an issue for this package.