table.md 3.9 KB


title: Tables

category: features

{@snippet features/build-table-source}

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

Demo

{@snippet features/table}

Installation

This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom editor.

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

npm install --save @ckeditor/ckeditor5-table

Then add Table and TableToolbar plugins to your plugin list and configure the table toolbar:

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

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

Common API

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

  • The 'insertTable' dropdown.
  • The 'tableColumn' dropdown.
  • The 'tableRow' dropdown.
  • The 'mergeTableCells' dropdown.

And the following commands:

  • The 'insertTable' command implemented by {@link module:table/commands/inserttablecommand~InsertTableCommand}.
  • The 'insertTableColumnBefore' command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.
  • The 'insertTableColumnAfter' command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.
  • The 'insertTableRowAbove' command implemented by {@link module:table/commands/insertrowcommand~InsertRowCommand}.
  • The 'insertTableRowBelow' command implemented by {@link module:table/commands/insertrowcommand~InsertRowCommand}.
  • The 'removeTableColumn' command implemented by {@link module:table/commands/removecolumncommand~RemoveColumnCommand}.
  • The 'removeTableRow' command implemented by {@link module:table/commands/removerowcommand~RemoveRowCommand}.
  • The 'setTableColumnHeader' command implemented by {@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand}.
  • The 'setTableRowHeader' command implemented by {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand}.
  • The 'mergeTableCellRight' command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.
  • The 'mergeTableCellLeft' command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.
  • The 'mergeTableCellUp' command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.
  • The 'mergeTableCellDown' command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.
  • The 'splitTableCellVertically' command implemented by {@link module:table/commands/splitcellcommand~SplitCellCommand}.
  • The 'splitTableCellHorizontally' command implemented by {@link module:table/commands/splitcellcommand~SplitCellCommand}.

The {@link module:table/tabletoolbar~TableToolbar} plugin introduces two balloon toolbars for tables.

  • The content toolbar shows up when table cell is selected and is anchored to the table. It is possible to {@link module:table/table~TableConfig#contentToolbar configure} its content. Normally, it contains the table-related tools such as 'tableColumn', 'tableRow', and 'mergeTableCells' dropdowns.
  • The table toolbar shows up when the whole table is selected, for instance using the widget handler. It is possible to {@link module:table/table~TableConfig#tableToolbar configure} its content.

Contribute

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