Contribute to this guide

guideTables

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

# Demos

# Basic table features

The editor bellow shows the basic set of table features focusing on the structure and semantics. These features allow users to insert new tables into the content, add or remove columns and rows, define headers, and merge multiple cells. It is also worth noting that you will find them out–of–the–box in all ready–to–use editor builds.

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

Use the “Insert table” button in the toolbar to create new tables. Focus any cell in the table to display the toolbar with buttons that will help you further shape the structure of the table.

# Table and cell styling tools

In addition to the default table features described in the previous section, the editor below comes with some additional tools that will help you modify the look of tables and table cells, for instance, their border color and style, background color, padding, or text alignment.

Balance Sheet & Cash Flow Statement Information

 

 

Full Year (unaudited) 2019 (unaudited)
2017 2018 2019 Q1 Q2 Q3 Q4
Cash, Cash Equivalents  $44,626 $48,088 $58,717 $50,098 $54,432 $56,523 $58,717
Accounts Receivable $5,427 $6,769 $8,098 $6,526 $6,792 $7,083 $8,098
Property and Equipment, Net $9,603 $11,854 $16,524 $12,300 $12,912 $14,867 $16,524
Total Assets $72,574 $93,798 $110,920 $96,692 $101,182 $105,068 $110,920
Cash Flow from Operations $14,565 $16,619 $18,659 $3,633 $4,705 $5,083 $5,238

Put the caret anywhere inside the table and click the “Table properties” button in the toolbar to open a pop–up with multiple options that will allow you to shape the look of the entire table. If you click the “Cell properties” button, a similar interface will appear with styling options for individual table cells.

Learn more about configuring color palettes in the table styling pop–up interfaces.

By default, table styling tools are not included in the ready–to–use editor builds and must be installed separately. See the installation section to learn how to enable them in your editor.

# Table selection

The TableSelection plugin introduces support for the custom selection system for tables that lets you:

  • Select an arbitrary rectangular table fragment — a few cells from different rows, a column (or a few of them) or a row (or multiple rows).
  • Apply formatting or add a link to all selected cells at once.

The table selection plugin is loaded automatically by the Table plugin and can be tested in the demos above.

# Installation

# Basic table features

The basic table features are enabled by default in all builds. The installation instructions are for developers interested in building their own, custom rich text editor.

To add only the basic table features to your editor, install the @ckeditor/ckeditor5-table package:

npm install --save @ckeditor/ckeditor5-table

Then add the 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( ... );

# Table and cell styling tools

To enable not only the basic table features but also the rich table and cell styling tools in your editor, install the @ckeditor/ckeditor5-table package:

npm install --save @ckeditor/ckeditor5-table

Then add the Table, TableToolbar, TableProperties, and TableCellProperties 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';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Table, TableToolbar, TableProperties, TableCellProperties, Bold, ... ],
        toolbar: [ 'insertTable', ... ],
        table: {
            contentToolbar: [
                'tableColumn', 'tableRow', 'mergeTableCells',
                'tableProperties', 'tableCellProperties'
            ],

            // Configuration of the TableProperties plugin.
            tableProperties: {
                // ...
            },

            // Configuration of the TableCellProperties plugin.
            tableCellProperties: {
                // ...
            }
        }
    } )
    .then( ... )
    .catch( ... );

Learn more about configuring color palettes in the table and table cell property pop–ups.

Read more about installing plugins.

# Configuring styling tools

By default, table styling tools are not included in ready–to–use editor builds and must be installed separately. See the installation section to learn how to enable them in your editor.

Among other formatting options, table and cell styling tools allow users to create tables with colorful backgrounds and borders. These colors can be easily picked using color palettes in the “Table properties” and “Cell properties” pop–ups. To help users choose the right colors for the content, the color palettes can be pre–configured, like in the editor below:

A beautiful color palette

Red Pink Purple Deep Purple
Indigo Blue Light Blue Cyan
Teal Green Light Green Lime
Yellow Amber Orange Deep Orange
Brown Grey Blue Grey White

With the selection inside any table cell, use the “Table properties” and “Cell properties” buttons in the toolbar to inspect available styling and color options.

# Customizing color palettes

You can use these specific configuration options to define customized color palettes for background and border colors to match your document:

The above configurations do not impact the data loaded into the editor, i.e. they do not limit or filter the colors in the data. They are used only in the user interface allowing users to pick colors in a more convenient way.

For instance, to define the same color palette for all border and background configurations, use the following code snippet:

const customColorPalette = [
    {
        color: 'hsl(4, 90%, 58%)',
        label: 'Red'
    },
    {
        color: 'hsl(340, 82%, 52%)',
        label: 'Pink'
    },
    {
        color: 'hsl(291, 64%, 42%)',
        label: 'Purple'
    },
    {
        color: 'hsl(262, 52%, 47%)',
        label: 'Deep Purple'
    },
    {
        color: 'hsl(231, 48%, 48%)',
        label: 'Indigo'
    },
    {
        color: 'hsl(207, 90%, 54%)',
        label: 'Blue'
    },

    // ...
];

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Table, TableToolbar, TableProperties, TableCellProperties, Bold, ... ],
        toolbar: [ 'insertTable', ... ],
        table: {
            contentToolbar: [
                'tableColumn', 'tableRow', 'mergeTableCells',
                'tableProperties', 'tableCellProperties'
            ],

            // Set the palettes for tables.
            tableProperties: {
                borderColors: customColorPalette,
                backgroundColors: customColorPalette
            },

            // Set the palettes for table cells.
            tableCellProperties: {
                borderColors: customColorPalette,
                backgroundColors: customColorPalette
            }
        }
    } )
    .then( ... )
    .catch( ... );

# Block vs inline content in table cells

The table feature allows creating block content (like paragraphs, lists, headings, etc.) in table cells. However, if a table cell contains just one paragraph and this paragraph has no special attributes (like text alignment), the cell content is considered “inline” and the paragraph is not rendered.

This means that a table cell can be in two states: with inline content or with block content. The reason for this differentiation is that most tables contain only inline content (e.g. in the demo above) and it is common for “data tables” to not contain any block content. In such scenario, printing out <p> elements would be semantically incorrect and also unnecessary. There are, however, scenarios where the user wants to create, for example, a list inside the table and then support for block content is necessary, too.

“Rendering” here means the view layer. In the model a cell is always filled with at least a <paragraph>. This is because of consistency, as — since a cell always has some block content — the text is never directly inside <tableCell>. This also allows features like Enter support to work out of the box (since a <paragraph> exists in the model, it can be split despite the fact that it is not present in the view).

# Inline content

The following is the model representation of table cells with inline content only (a single <paragraph> inside):

<table>
    <tableRow>
        <tableCell>
            <paragraph>Foo</paragraph>
        </tableCell>
        <tableCell>
            <paragraph>Bar</paragraph>
        </tableCell>
    </tableRow>
</table>

The above model structure will be rendered to the data as:

<figure class="table">
    <table>
        <tbody>
            <tr>
                <td>Foo</td>
                <td>Bar</td>
            </tr>
        </tbody>
    </table>
</figure>

In the editing view (the editable container in which the user edits the content), additional <span> elements are created to compensate for the hidden <paragraph> elements:

<figure class="table">
    <table>
        <tbody>
            <tr>
                <td><span>Foo</span></td>
                <td><span>Bar</span></td>
            </tr>
        </tbody>
    </table>
</figure>

# Block content

If a table cell contains any other block content than a single <paragraph> with no attributes, these block elements will be rendered.

The following is a sample table with some block content (model representation):

<table>
    <tableRow>
        <tableCell>
            <paragraph>Foo</paragraph>
            <paragraph>Bar</paragraph>
        </tableCell>
        <tableCell>
            <heading1>Some title</heading1>
        </tableCell>
        <tableCell>
            <paragraph textAlign="right">Baz</paragraph>
        </tableCell>
    </tableRow>
</table>

The above model structure will be rendered to the data and to the editing view as:

<figure class="table">
    <table>
        <tbody>
            <tr>
                <td>
                    <p>Foo</p>
                    <p>Bar</p>
                </td>
                <td>
                    <h2>Some title</h2>
                </td>
                <td>
                    <p style="text-align: right;">Baz</p>
                </td>
            </tr>
        </tbody>
    </table>
</figure>

At the moment it is not possible to completely disallow block content in tables. See the discussion on GitHub about adding a configuration option that would enable that. Add a 👍 if you need this feature.

# Common API

# UI components

The table plugins register the following UI components:

Component name Registered by
The 'insertTable' dropdown Table
The 'tableColumn' dropdown
The 'tableRow' dropdown
The 'mergeTableCells' split button
The 'tableProperties' button TableProperties
The 'tableCellProperties' button TableCellProperties

# Toolbars

The TableToolbar plugin introduces two balloon toolbars for tables.

  • The content toolbar shows up when a table cell is selected and it is anchored to the table. It is possible to configure its content. Normally, the toolbar contains the table-related tools such as 'tableColumn' and 'tableRow' dropdowns and 'mergeTableCells' split button.
  • The table toolbar shows up when the whole table is selected, for instance using the widget handler. It is possible to configure its content.

# Editor commands

Command name Command class Belongs to (top–level plugin)
'insertTable' InsertTableCommand Table
'insertTableColumnLeft' InsertColumnCommand
'insertTableColumnRight' InsertColumnCommand
'insertTableRowAbove' InsertRowCommand
'insertTableRowBelow' InsertRowCommand
'removeTableColumn' RemoveColumnCommand
'removeTableRow' RemoveRowCommand
'selectTableColumn' SelectColumnCommand
'selectTableRow' SelectRowCommand
'setTableColumnHeader' SetHeaderColumnCommand
'setTableRowHeader' SetHeaderRowCommand
'mergeTableCellRight' MergeCellCommand
'mergeTableCellLeft' MergeCellCommand
'mergeTableCellUp' MergeCellCommand
'mergeTableCellDown' MergeCellCommand
'splitTableCellVertically' SplitCellCommand
'splitTableCellHorizontally' SplitCellCommand
'tableBorderColor' TableBorderColorCommand TableProperties
'tableBorderStyle' TableBorderStyleCommand
'tableBorderWidth' TableBorderWidthCommand
'tableAlignment' TableAlignmentCommand
'tableWidth' TableWidthCommand
'tableHeight' TableHeightCommand
'tableBackgroundColor' TableBackgroundColorCommand
'tableCellBorderStyle' TableCellBorderStyleCommand TableCellProperties
'tableCellBorderColor' TableCellBorderColorCommand
'tableCellBorderWidth' TableCellBorderWidthCommand
'tableCellHorizontalAlignment' TableCellHorizontalAlignmentCommand
'tableCellWidth' TableCellWidthCommand
'tableCellHeight' TableCellHeightCommand
'tableCellPadding' TableCellPaddingCommand
'tableCellBackgroundColor' TableCellBackgroundColorCommand
'tableCellVerticalAlignment' TableCellVerticalAlignmentCommand

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

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