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, Bold, ... ],
toolbar: [ 'insertTable', ... ],
table: {
contentToolbar: [ '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 two balloon toolbars for tables.
'tableColumn', 'tableRow', and 'mergeTableCells' dropdowns.The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-table.