Contribute to this guideReport an issue

guideTables

The Table feature offers table creation and editing tools that help content authors bring tabular data into their documents.

# Demo

The ultimate table of coffee drinks:

Espresso Milk Water
Steamed Foam
Cappuccino yes yes yes no
Macchiato yes no yes no
Latte yes yes no no
Americano yes no no yes

# 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 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 document editor build. Read more about installing plugins if you want to add it to other editor builds.

# Common API

The Table plugin registers the following UI components:

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

And the following commands:

The 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 configure its content. Normally, it contains the table-related tools such as 'tableColumn', 'tableRow', and 'mergeTableCells' dropdowns.

# Contribute

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