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}
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 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( ... );
At the moment by default the table feature is available only in the {@link builds/guides/overview#document-editor document editor build}. Read more about {@link builds/guides/development/installing-plugins installing plugins} if you want to add it to other editor builds.
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.