title: Tables
{@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.
{@snippet features/table}
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, ... ],
toolbar: [ 'insertTable', ... ]
table: {
toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
}
} )
.then( ... )
.catch( ... );
The {@link module:table/table~Table} plugin registers the following UI components:
'insertTable' dropdown.'tableColumn' dropdown.'tableRow' dropdown.'mergeTableCells' dropdown.And the following commands:
'insertTable' command implemented by {@link module:table/commands/inserttablecommand~InsertTableCommand}.'insertTableColumnBefore' command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.'insertTableColumnAfter' command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.'insertTableRowAbove' command implemented by {@link module:table/commands/insertrowcommand~InsertRowCommand}.'insertTableRowBelow' command implemented by {@link module:table/commands/insertrowcommand~InsertRowCommand}.'removeTableColumn' command implemented by {@link module:table/commands/removecolumncommand~RemoveColumnCommand}.'removeTableRow' command implemented by {@link module:table/commands/removerowcommand~RemoveRowCommand}.'setTableColumnHeader' command implemented by {@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand}.'setTableRowHeader' command implemented by {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand}.'mergeTableCellRight' command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.'mergeTableCellLeft' command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.'mergeTableCellUp' command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.'mergeTableCellDown' command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.'splitTableCellVertically' command implemented by {@link module:table/commands/splitcellcommand~SplitCellCommand}.'splitTableCellHorizontally' command implemented by {@link module:table/commands/splitcellcommand~SplitCellCommand}.The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for tables. The toolbar shows up when a table cell is selected and is 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 'mergeTableCells' dropdowns.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-table.