table.md 5.1 KB


title: Tables

category: features

{@snippet features/build-table-source}

The {@link module:table/table~Table} feature offers table creation an editing tools that help content authors bring tabular data into their documents.

Demo

{@snippet features/table}

Installation

To add this feature to your editor install the @ckeditor/ckeditor5-table package

npm install --save @ckeditor/ckeditor5-table

then add 'Table' and 'TableToolbar' to your plugin list and the table toolbar configuration:

import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ Table, TableToolbar, ... ],
		toolbar: [ 'insertTable', ... ]
		table: {
			toolbar: [ 'tableColumn', 'tableRow', 'mergeCell' ]
		}
	} )
	.then( ... )
	.catch( ... );

Read more about {@link builds/guides/development/installing-plugins installing plugins}.

Common API

The {@link module:table/table~Table} plugin registers the following UI components:

  • The 'insertTable' dropdown,
  • The 'tableColumn' dropdown,
  • The 'tableRow' dropdown,
  • The 'mergeCell' dropdown,

and the following commands:

  • The {@link module:table/commands/inserttablecommand~InsertTableCommand 'inserttable'} command.

    To insert a table at the current selection, execute the command and specify the dimensions:

    editor.execute( 'insertTable', { rows: 20, columns: 5 } );
    
  • The {@link module:table/commands/insertcolumncommand~InsertColumnCommand} as 'insertColumnBefore' and 'insertColumnAfter' commands.

    To insert a column before or after the selected cell, execute one of the commands:

    editor.execute( 'insertColumnBefore' );
    

    or

    editor.execute( 'insertColumnAfter' );
    
  • The {@link module:table/commands/insertrowcommand~InsertRowCommand} as 'insertRowAbove'and 'insertRowBelow' commands.

    To insert a row below or above the selected cell, execute one of the commands:

    editor.execute( 'insertRowBelow' );
    

    or

    editor.execute( 'insertRowAbove' );
    
  • The {@link module:table/commands/removecolumncommand~RemoveColumnCommand 'removeColumn'} command.

    To remove the column containing the selected cell, execute the command:

    editor.execute( 'removeColumn' );
    
  • The {@link module:table/commands/removerowcommand~RemoveRowCommand 'removeRow'} command.

    To remove the row containing the selected cell, execute the command:

    editor.execute( 'removeRow' );
    
  • The {@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand 'setColumnHeader'} command.

    You can make the column containing the selected cell a header by executing:

    editor.execute( 'setColumnHeader' );
    

    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 following columns).

  • The {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand 'setRowHeader'} command.

    You can make the row containing the selected cell a header by executing:

    editor.execute( 'setRowHeader' );
    

    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 following rows).

  • The {@link module:table/commands/mergecellcommand~MergeCellCommand} as 'mergeCellRight', 'mergeCellLeft', 'mergeCellUp' and 'mergeCellDown' commands.

    To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction. E.g. to merge with a cell to the right:

    editor.execute( 'mergeCellRight' );
    

    Note: If a table cell has a different rowspan (for 'mergeCellRight' and 'mergeCellLeft') or colspan (for 'mergeCellUp' and 'mergeCellDown'), the command will be disabled.

  • The {@link module:table/commands/splitcellcommand~SplitCellCommand} as 'splitCellVertically' and 'splitCellHorizontally' commands.

    You can split any cell vertically or horizontally by executing this command. E.g. to split the selected table cell vertically:

    editor.execute( 'splitCellVertically' );
    

The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for the tables. The toolbar shows up when a table cell is selected, anchored to the table. It is possible to {@link module:table/table~TableConfig#toolbar configure} its content. Normally, it contains the table-related tools such as 'tableColumn', 'tableRow', and 'mergeCell' dropdowns.

Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-table.