@ckeditor/ckeditor5-table 47.3.0 → 47.4.0-alpha.1

package/src/tablecellproperties/commands/tablecellverticalalignmentcommand.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**

package/src/tablecellproperties/commands/tablecellverticalalignmentcommand.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { TableCellPropertyCommand } from './tablecellpropertycommand.js';

package/src/tablecellproperties/tablecellpropertiesediting.d.ts

@@ -1,10 +1,7 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-/**
- * @module table/tablecellproperties/tablecellpropertiesediting
- */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { TableEditing } from './../tableediting.js';
 import { TableCellWidthEditing } from '../tablecellwidth/tablecellwidthediting.js';

package/src/tablecellproperties/tablecellpropertiesediting.js

@@ -1,10 +1,11 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**
  * @module table/tablecellproperties/tablecellpropertiesediting
  */
+import { priorities } from 'ckeditor5/src/utils.js';
 import { Plugin } from 'ckeditor5/src/core.js';
 import { addBorderStylesRules, addPaddingStylesRules, addBackgroundStylesRules } from 'ckeditor5/src/engine.js';
 import { downcastAttributeToStyle, getDefaultValueAdjusted, upcastBorderStyles } from '../converters/tableproperties.js';
@@ -18,8 +19,11 @@ import { TableCellHorizontalAlignmentCommand } from './commands/tablecellhorizon
 import { TableCellBorderStyleCommand } from './commands/tablecellborderstylecommand.js';
 import { TableCellBorderColorCommand } from './commands/tablecellbordercolorcommand.js';
 import { TableCellBorderWidthCommand } from './commands/tablecellborderwidthcommand.js';
+import { TableCellTypeCommand, updateTablesHeadingAttributes } from './commands/tablecelltypecommand.js';
 import { getNormalizedDefaultCellProperties } from '../utils/table-properties.js';
 import { enableProperty } from '../utils/common.js';
+import { TableUtils } from '../tableutils.js';
+import { TableWalker } from '../tablewalker.js';
 const VALIGN_VALUES_REG_EXP = /^(top|middle|bottom)$/;
 const ALIGN_VALUES_REG_EXP = /^(left|center|right|justify)$/;
 /**
@@ -125,6 +129,10 @@ export class TableCellPropertiesEditing extends Plugin {
         editor.commands.add('tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand(editor, defaultTableCellProperties.horizontalAlignment));
         enableVerticalAlignmentProperty(schema, conversion, defaultTableCellProperties.verticalAlignment);
         editor.commands.add('tableCellVerticalAlignment', new TableCellVerticalAlignmentCommand(editor, defaultTableCellProperties.verticalAlignment));
+        if (editor.config.get('experimentalFlags.tableCellTypeSupport')) {
+            enableCellTypeProperty(editor);
+            editor.commands.add('tableCellType', new TableCellTypeCommand(editor));
+        }
     }
 }
 /**
@@ -290,3 +298,115 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
         }
     });
 }
+/**
+ * Enables the `tableCellType` attribute for table cells.
+ */
+function enableCellTypeProperty(editor) {
+    const { model, conversion, editing } = editor;
+    const { schema } = model;
+    const tableUtils = editor.plugins.get(TableUtils);
+    schema.extend('tableCell', {
+        allowAttributes: ['tableCellType']
+    });
+    schema.setAttributeProperties('tableCellType', {
+        isFormatting: true
+    });
+    // Do not allow setting `tableCellType` in layout tables.
+    schema.addAttributeCheck(context => {
+        const nearestTable = Array.from(context).reverse().find(item => item.name === 'table');
+        if (nearestTable?.getAttribute('tableType') === 'layout') {
+            return false;
+        }
+    }, 'tableCellType');
+    // Upcast conversion for td/th elements.
+    conversion.for('upcast').add(dispatcher => {
+        dispatcher.on('element:th', (evt, data, conversionApi) => {
+            const { writer } = conversionApi;
+            const { modelRange } = data;
+            const modelElement = modelRange?.start.nodeAfter;
+            if (modelElement?.is('element', 'tableCell')) {
+                writer.setAttribute('tableCellType', 'header', modelElement);
+            }
+        });
+        // Table type is examined after all other cell converters, on low priority, so
+        // we double check if there is any `th` left in the table. If so, the table is converted to a content table.
+        dispatcher.on('element:table', (evt, data, conversionApi) => {
+            const { writer } = conversionApi;
+            const { modelRange } = data;
+            const modelElement = modelRange?.start.nodeAfter;
+            if (modelElement?.is('element', 'table') && modelElement.getAttribute('tableType') === 'layout') {
+                for (const { cell } of new TableWalker(modelElement)) {
+                    if (cell.getAttribute('tableCellType') === 'header') {
+                        writer.setAttribute('tableType', 'content', modelElement);
+                        break;
+                    }
+                }
+            }
+        }, { priority: priorities.low - 1 });
+    });
+    // Registers a post-fixer that ensures the `headingRows` and `headingColumns` attributes
+    // are consistent with the `tableCellType` attribute of the cells. `tableCellType` has priority
+    // over `headingRows` and `headingColumns` and we use it to adjust the heading sections of the table.
+    model.document.registerPostFixer(writer => {
+        // 1. Collect all tables that need to be checked.
+        const changes = model.document.differ.getChanges();
+        const tablesToCheck = new Set();
+        for (const change of changes) {
+            // Check if headingRows or headingColumns changed.
+            if (change.type === 'attribute' && (change.attributeKey === 'headingRows' || change.attributeKey === 'headingColumns')) {
+                const table = change.range.start.nodeAfter;
+                if (table?.is('element', 'table') && table.root.rootName !== '$graveyard') {
+                    tablesToCheck.add(table);
+                }
+            }
+            // Check if tableCellType changed.
+            if (change.type === 'attribute' && change.attributeKey === 'tableCellType') {
+                const cell = change.range.start.nodeAfter;
+                if (cell?.is('element', 'tableCell') && cell.root.rootName !== '$graveyard') {
+                    const table = cell.findAncestor('table');
+                    if (table) {
+                        tablesToCheck.add(table);
+                    }
+                }
+            }
+            // Check if new headers were inserted.
+            if (change.type === 'insert' && change.position.nodeAfter) {
+                for (const { item } of model.createRangeOn(change.position.nodeAfter)) {
+                    if (item.is('element', 'tableCell') &&
+                        item.getAttribute('tableCellType') &&
+                        item.root.rootName !== '$graveyard') {
+                        const table = item.findAncestor('table');
+                        if (table) {
+                            tablesToCheck.add(table);
+                        }
+                    }
+                }
+            }
+        }
+        // 2. Update the attributes of the collected tables.
+        return updateTablesHeadingAttributes(tableUtils, writer, tablesToCheck);
+    });
+    // Refresh the table cells in the editing view when their `tableCellType` attribute changes.
+    model.document.on('change:data', () => {
+        const { differ } = model.document;
+        const cellsToReconvert = new Set();
+        for (const change of differ.getChanges()) {
+            // If the `tableCellType` attribute changed, the entire cell needs to be re-rendered.
+            if (change.type === 'attribute' && change.attributeKey === 'tableCellType') {
+                const tableCell = change.range.start.nodeAfter;
+                if (tableCell.is('element', 'tableCell')) {
+                    cellsToReconvert.add(tableCell);
+                }
+            }
+        }
+        // Reconvert table cells that had their `tableCellType` attribute changed.
+        for (const tableCell of cellsToReconvert) {
+            const viewElement = editing.mapper.toViewElement(tableCell);
+            const cellType = tableCell.getAttribute('tableCellType');
+            const expectedElementName = cellType === 'header' ? 'th' : 'td';
+            if (viewElement?.name !== expectedElementName) {
+                editing.reconvertItem(tableCell);
+            }
+        }
+    });
+}

package/src/tablecellproperties/tablecellpropertiesui.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**

package/src/tablecellproperties/tablecellpropertiesuiexperimental.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**

package/src/tablecellproperties/tablecellpropertiesuiexperimental.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**
@@ -26,7 +26,8 @@ const propertyToCommandMap = {
     padding: 'tableCellPadding',
     backgroundColor: 'tableCellBackgroundColor',
     horizontalAlignment: 'tableCellHorizontalAlignment',
-    verticalAlignment: 'tableCellVerticalAlignment'
+    verticalAlignment: 'tableCellVerticalAlignment',
+    cellType: 'tableCellType'
 };
 /**
  * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
@@ -125,8 +126,10 @@ export class TableCellPropertiesUIExperimental extends Plugin {
                 tooltip: true
             });
             this.listenTo(view, 'execute', () => this._showView());
-            const commands = Object.values(propertyToCommandMap)
-                .map(commandName => editor.commands.get(commandName));
+            const commands = (Object
+                .values(propertyToCommandMap)
+                .map(commandName => editor.commands.get(commandName))
+                .filter(val => !!val));
             view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled) => (areEnabled.some(isCommandEnabled => isCommandEnabled)));
             return view;
         });
@@ -155,11 +158,13 @@ export class TableCellPropertiesUIExperimental extends Plugin {
         const backgroundColorsConfig = normalizeColorOptions(config.backgroundColors);
         const localizedBackgroundColors = getLocalizedColorOptions(editor.locale, backgroundColorsConfig);
         const hasColorPicker = config.colorPicker !== false;
+        const isTableCellTypeSupported = !!editor.config.get('experimentalFlags.tableCellTypeSupport');
         const view = new TableCellPropertiesViewExperimental(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
             defaultTableCellProperties,
-            colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
+            colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false,
+            isTableCellTypeSupported
         });
         const t = editor.t;
         // Render the view so its #element is available for the clickOutsideHandler.
@@ -232,6 +237,11 @@ export class TableCellPropertiesUIExperimental extends Plugin {
         }));
         view.on('change:horizontalAlignment', this._getPropertyChangeCallback('tableCellHorizontalAlignment'));
         view.on('change:verticalAlignment', this._getPropertyChangeCallback('tableCellVerticalAlignment'));
+        const cellTypeCommand = editor.commands.get('tableCellType');
+        if (cellTypeCommand) {
+            view.cellTypeDropdown.bind('isEnabled').to(cellTypeCommand, 'isEnabled');
+            view.on('change:cellType', this._getPropertyChangeCallback('tableCellType'));
+        }
         return view;
     }
     /**
@@ -245,16 +255,28 @@ export class TableCellPropertiesUIExperimental extends Plugin {
     _fillViewFormFromCommandValues() {
         const commands = this.editor.commands;
         const borderStyleCommand = commands.get('tableCellBorderStyle');
-        Object.entries(propertyToCommandMap)
-            .map(([property, commandName]) => {
+        Object
+            .entries(propertyToCommandMap)
+            .flatMap(([property, commandName]) => {
+            const command = commands.get(commandName);
+            if (!command) {
+                return [];
+            }
             const propertyKey = property;
-            const defaultValue = this.view === this._viewWithContentTableDefaults ?
-                this._defaultContentTableCellProperties[propertyKey] || '' :
-                this._defaultLayoutTableCellProperties[propertyKey] || '';
-            return [
+            let defaultValue;
+            if (propertyKey === 'cellType') {
+                defaultValue = '';
+            }
+            else {
+                defaultValue = this.view === this._viewWithContentTableDefaults ?
+                    this._defaultContentTableCellProperties[propertyKey] || '' :
+                    this._defaultLayoutTableCellProperties[propertyKey] || '';
+            }
+            const entry = [
                 property,
-                commands.get(commandName).value || defaultValue
+                command.value || defaultValue
             ];
+            return [entry];
         })
             .forEach(([property, value]) => {
             // Do not set the `border-color` and `border-width` fields if `border-style:none`.

package/src/tablecellproperties/ui/tablecellpropertiesview.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**

package/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**

package/src/tablecellproperties/ui/tablecellpropertiesviewexperimental.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**
@@ -10,14 +10,15 @@ import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils
 import { type ColorInputView } from '../../ui/colorinputview.js';
 import type { TableCellPropertiesOptions } from '../../tableconfig.js';
 import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
-import '../../../theme/formrow.css';
-import '../../../theme/tableform.css';
-import '../../../theme/tablecellproperties.css';
+import '../../../theme/formrow-experimental.css';
+import '../../../theme/tableform-experimental.css';
+import '../../../theme/tablecellproperties-experimental.css';
 export interface TableCellPropertiesViewOptionsExperimental {
     borderColors: Array<NormalizedColorOption>;
     backgroundColors: Array<NormalizedColorOption>;
     defaultTableCellProperties: TableCellPropertiesOptions;
     colorPickerConfig: false | ColorPickerConfig;
+    isTableCellTypeSupported: boolean;
 }
 /**
  * The class representing a table cell properties form, allowing users to customize
@@ -87,6 +88,13 @@ export declare class TableCellPropertiesViewExperimental extends View {
      * @default ''
      */
     verticalAlignment: string;
+    /**
+     * The type of the table cell ('data' or 'header').
+     *
+     * @observable
+     * @default ''
+     */
+    cellType: string;
     /**
      * Options passed to the view. See {@link #constructor} to learn more.
      */
@@ -119,6 +127,10 @@ export declare class TableCellPropertiesViewExperimental extends View {
      * An input that allows specifying the table cell background color.
      */
     readonly backgroundInput: LabeledFieldView<ColorInputView>;
+    /**
+     * A dropdown that allows selecting the type of the table cell (data or header).
+     */
+    readonly cellTypeDropdown: LabeledFieldView<FocusableView>;
     /**
      * An input that allows specifying the table cell padding.
      */
@@ -167,6 +179,7 @@ export declare class TableCellPropertiesViewExperimental extends View {
      * @param options.backgroundColors A configuration of the background color palette used by the
      * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#backgroundInput}.
      * @param options.defaultTableCellProperties The default table cell properties.
+     * @param options.isTableCellTypeSupported A flag indicating whether the table cell type is supported.
      */
     constructor(locale: Locale, options: TableCellPropertiesViewOptionsExperimental);
     /**
@@ -195,6 +208,14 @@ export declare class TableCellPropertiesViewExperimental extends View {
      * * {@link #backgroundInput}.
      */
     private _createBackgroundFields;
+    /**
+     * Create cell type field.
+     *
+     * * {@link #cellTypeDropdown}.
+     *
+     * @internal
+     */
+    private _createCellTypeField;
     /**
      * Creates the following form fields:
      *
@@ -226,6 +247,10 @@ export declare class TableCellPropertiesViewExperimental extends View {
      * Creates a back button view that cancels the form.
      */
     private _createBackButton;
+    /**
+     * Creates the cell type dropdown definitions.
+     */
+    private _getCellTypeDefinitions;
     /**
      * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
      */
@@ -234,4 +259,8 @@ export declare class TableCellPropertiesViewExperimental extends View {
      * Provides localized labels for {@link #verticalAlignmentToolbar} buttons.
      */
     private get _verticalAlignmentLabels();
+    /**
+     * Provides localized labels for {@link #cellTypeDropdown}.
+     */
+    private get _cellTypeLabels();
 }

package/src/tablecellproperties/ui/tablecellpropertiesviewexperimental.js

@@ -1,20 +1,20 @@
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /**
  * @module table/tablecellproperties/ui/tablecellpropertiesviewexperimental
  */
 /* istanbul ignore file -- @preserve */
-import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
-import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils.js';
+import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, UIModel, View, ViewCollection } from 'ckeditor5/src/ui.js';
+import { Collection, KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils.js';
 import { IconAlignBottom, IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignMiddle, IconAlignRight, IconAlignTop, IconPreviousArrow } from 'ckeditor5/src/icons.js';
 import { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels, getLabeledColorInputCreator } from '../../utils/ui/table-propertiesexperimental.js';
 // eslint-disable-next-line ckeditor5-rules/ckeditor-imports
 import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
-import '../../../theme/formrow.css';
-import '../../../theme/tableform.css';
-import '../../../theme/tablecellproperties.css';
+import '../../../theme/formrow-experimental.css';
+import '../../../theme/tableform-experimental.css';
+import '../../../theme/tablecellproperties-experimental.css';
 /**
  * The class representing a table cell properties form, allowing users to customize
  * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
@@ -52,6 +52,10 @@ export class TableCellPropertiesViewExperimental extends View {
      * An input that allows specifying the table cell background color.
      */
     backgroundInput;
+    /**
+     * A dropdown that allows selecting the type of the table cell (data or header).
+     */
+    cellTypeDropdown;
     /**
      * An input that allows specifying the table cell padding.
      */
@@ -100,6 +104,7 @@ export class TableCellPropertiesViewExperimental extends View {
      * @param options.backgroundColors A configuration of the background color palette used by the
      * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#backgroundInput}.
      * @param options.defaultTableCellProperties The default table cell properties.
+     * @param options.isTableCellTypeSupported A flag indicating whether the table cell type is supported.
      */
     constructor(locale, options) {
         super(locale);
@@ -112,11 +117,13 @@ export class TableCellPropertiesViewExperimental extends View {
             width: '',
             height: '',
             horizontalAlignment: '',
-            verticalAlignment: ''
+            verticalAlignment: '',
+            cellType: ''
         });
         this.options = options;
         const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
         const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields();
+        const { cellTypeRowLabel, cellTypeDropdown } = this._createCellTypeField();
         const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
         const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
         this.focusTracker = new FocusTracker();
@@ -126,6 +133,7 @@ export class TableCellPropertiesViewExperimental extends View {
         this.borderWidthInput = borderWidthInput;
         this.borderColorInput = borderColorInput;
         this.backgroundInput = backgroundInput;
+        this.cellTypeDropdown = cellTypeDropdown;
         this.paddingInput = this._createPaddingField();
         this.widthInput = widthInput;
         this.heightInput = heightInput;
@@ -159,22 +167,48 @@ export class TableCellPropertiesViewExperimental extends View {
         // Border row.
         this.children.add(new FormRowView(locale, {
             labelView: borderRowLabel,
-            children: [
+            children: this.options.isTableCellTypeSupported ? [
+                borderRowLabel,
+                borderStyleDropdown,
+                borderWidthInput,
+                borderColorInput
+            ] : [
                 borderRowLabel,
                 borderStyleDropdown,
                 borderColorInput,
                 borderWidthInput
             ],
-            class: 'ck-table-form__border-row'
+            class: `ck-table-form__border-row${this.options.isTableCellTypeSupported ? ' ck-table-form__border-row_experimental' : ''}`
         }));
-        // Background.
+        // Background and cell type.
         this.children.add(new FormRowView(locale, {
-            labelView: backgroundRowLabel,
-            children: [
-                backgroundRowLabel,
-                backgroundInput
-            ],
-            class: 'ck-table-form__background-row'
+            children: this.options.isTableCellTypeSupported ? [
+                new FormRowView(locale, {
+                    labelView: cellTypeRowLabel,
+                    children: [
+                        cellTypeRowLabel,
+                        cellTypeDropdown
+                    ],
+                    class: 'ck-table-form__cell-type-row'
+                }),
+                new FormRowView(locale, {
+                    labelView: backgroundRowLabel,
+                    children: [
+                        backgroundRowLabel,
+                        backgroundInput
+                    ],
+                    class: 'ck-table-form__background-row'
+                })
+            ] : [
+                new FormRowView(locale, {
+                    labelView: backgroundRowLabel,
+                    children: [
+                        backgroundRowLabel,
+                        backgroundInput
+                    ],
+                    class: 'ck-table-form__background-row'
+                })
+            ]
         }));
         // Dimensions row and padding.
         this.children.add(new FormRowView(locale, {
@@ -224,7 +258,9 @@ export class TableCellPropertiesViewExperimental extends View {
                     'ck',
                     'ck-form',
                     'ck-table-form',
-                    'ck-table-cell-properties-form'
+                    'ck-table-cell-properties-form',
+                    'ck-table-cell-properties-form_experimental',
+                    this.options.isTableCellTypeSupported ? 'ck-table-cell-properties-form_experimental-no-cell-type' : ''
                 ],
                 // https://github.com/ckeditor/ckeditor5-link/issues/90
                 tabindex: '-1'
@@ -250,6 +286,7 @@ export class TableCellPropertiesViewExperimental extends View {
             this.borderStyleDropdown,
             this.borderColorInput,
             this.borderWidthInput,
+            this.cellTypeDropdown,
             this.backgroundInput,
             this.widthInput,
             this.heightInput,
@@ -408,6 +445,47 @@ export class TableCellPropertiesViewExperimental extends View {
             backgroundInput
         };
     }
+    /**
+     * Create cell type field.
+     *
+     * * {@link #cellTypeDropdown}.
+     *
+     * @internal
+     */
+    _createCellTypeField() {
+        const locale = this.locale;
+        const t = this.t;
+        const cellTypeRowLabel = new LabelView(locale);
+        cellTypeRowLabel.text = t('Cell type');
+        const cellTypeLabels = this._cellTypeLabels;
+        const cellTypeDropdown = new LabeledFieldView(locale, createLabeledDropdown);
+        cellTypeDropdown.set({
+            label: t('Cell type'),
+            class: 'ck-table-cell-properties-form__cell-type'
+        });
+        cellTypeDropdown.fieldView.buttonView.set({
+            ariaLabel: t('Cell type'),
+            ariaLabelledBy: undefined,
+            isOn: false,
+            withText: true,
+            tooltip: t('Cell type')
+        });
+        cellTypeDropdown.fieldView.buttonView.bind('label').to(this, 'cellType', value => {
+            return cellTypeLabels[value || 'data'];
+        });
+        cellTypeDropdown.fieldView.on('execute', evt => {
+            this.cellType = evt.source._cellTypeValue;
+        });
+        cellTypeDropdown.bind('isEmpty').to(this, 'cellType', value => !value);
+        addListToDropdown(cellTypeDropdown.fieldView, this._getCellTypeDefinitions(), {
+            role: 'menu',
+            ariaLabel: t('Cell type')
+        });
+        return {
+            cellTypeRowLabel,
+            cellTypeDropdown
+        };
+    }
     /**
      * Creates the following form fields:
      *
@@ -505,7 +583,8 @@ export class TableCellPropertiesViewExperimental extends View {
         horizontalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Horizontal text alignment toolbar')
+            ariaLabel: t('Horizontal text alignment toolbar'),
+            class: 'ck-table-cell-properties-form__horizontal-alignment-toolbar'
         });
         fillToolbar({
             view: this,
@@ -532,7 +611,8 @@ export class TableCellPropertiesViewExperimental extends View {
         verticalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Vertical text alignment toolbar')
+            ariaLabel: t('Vertical text alignment toolbar'),
+            class: 'ck-table-cell-properties-form__vertical-alignment-toolbar'
         });
         fillToolbar({
             view: this,
@@ -598,6 +678,27 @@ export class TableCellPropertiesViewExperimental extends View {
         backButton.delegate('execute').to(this, 'cancel');
         return backButton;
     }
+    /**
+     * Creates the cell type dropdown definitions.
+     */
+    _getCellTypeDefinitions() {
+        const itemDefinitions = new Collection();
+        const cellTypeLabels = this._cellTypeLabels;
+        for (const type of ['data', 'header']) {
+            const definition = {
+                type: 'button',
+                model: new UIModel({
+                    _cellTypeValue: type,
+                    label: cellTypeLabels[type],
+                    role: 'menuitemradio',
+                    withText: true
+                })
+            };
+            definition.model.bind('isOn').to(this, 'cellType', value => value === type);
+            itemDefinitions.add(definition);
+        }
+        return itemDefinitions;
+    }
     /**
      * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
      */
@@ -627,6 +728,16 @@ export class TableCellPropertiesViewExperimental extends View {
             bottom: t('Align cell text to the bottom')
         };
     }
+    /**
+     * Provides localized labels for {@link #cellTypeDropdown}.
+     */
+    get _cellTypeLabels() {
+        const t = this.t;
+        return {
+            data: t('Data cell'),
+            header: t('Header cell')
+        };
+    }
 }
 function isBorderStyleSet(value) {
     return value !== 'none';