@ckeditor/ckeditor5-table 0.0.0-nightly-20251215.0 → 0.0.0-nightly-20251216.0

package/dist/index.js

@@ -4,7 +4,7 @@
  */
 import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { toWidgetEditable, toWidget, Widget, isWidget, WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget/dist/index.js';
-import { first, global, CKEditorError, KeystrokeHandler, FocusTracker, Collection, getLocalizedArrowKeyCodeDirection, Rect, DomEmitterMixin, toUnit } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { first, global, CKEditorError, KeystrokeHandler, FocusTracker, Collection, getLocalizedArrowKeyCodeDirection, Rect, priorities, DomEmitterMixin, toUnit } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 import { IconTable, IconTableColumn, IconTableRow, IconTableMergeCell, IconCheck, IconCancel, IconAlignBottom, IconAlignMiddle, IconAlignTop, IconAlignJustify, IconAlignRight, IconAlignCenter, IconAlignLeft, IconTableCellProperties, IconTableLayout, IconTableProperties, IconObjectInlineRight, IconObjectCenter, IconObjectInlineLeft, IconCaption, IconPreviousArrow, IconObjectRight, IconObjectLeft } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import { View, addKeyboardHandlingForGrid, ButtonView, createDropdown, MenuBarMenuView, SwitchButtonView, SplitButtonView, addListToDropdown, UIModel, ViewCollection, FocusCycler, InputTextView, ColorSelectorView, FormHeaderView, FormRowView, submitHandler, LabelView, LabeledFieldView, createLabeledDropdown, createLabeledInputText, ToolbarView, BalloonPanelView, ContextualBalloon, normalizeColorOptions, getLocalizedColorOptions, clickOutsideHandler, DropdownButtonView } from '@ckeditor/ckeditor5-ui/dist/index.js';
@@ -503,82 +503,6 @@ const downcastTableAlignmentConfig = {
     }
 };
 
-/**
- * A common method to update the numeric value. If a value is the default one, it will be unset.
- *
- * @internal
- * @param key An attribute key.
- * @param value The new attribute value.
- * @param item A model item on which the attribute will be set.
- * @param defaultValue The default attribute value. If a value is lower or equal, it will be unset.
- */ function updateNumericAttribute(key, value, item, writer, defaultValue = 1) {
-    if (value !== undefined && value !== null && defaultValue !== undefined && defaultValue !== null && value > defaultValue) {
-        writer.setAttribute(key, value, item);
-    } else {
-        writer.removeAttribute(key, item);
-    }
-}
-/**
- * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
- *
- * @internal
- * @param writer The model writer.
- * @param insertPosition The position at which the table cell should be inserted.
- * @param attributes The element attributes.
- * @returns Created table cell.
- */ function createEmptyTableCell(writer, insertPosition, attributes = {}) {
-    const tableCell = writer.createElement('tableCell', attributes);
-    writer.insertElement('paragraph', tableCell);
-    writer.insert(tableCell, insertPosition);
-    return tableCell;
-}
-/**
- * Checks if a table cell belongs to the heading column section.
- *
- * @internal
- */ function isHeadingColumnCell(tableUtils, tableCell) {
-    const table = tableCell.parent.parent;
-    const headingColumns = parseInt(table.getAttribute('headingColumns') || '0');
-    const { column } = tableUtils.getCellLocation(tableCell);
-    return !!headingColumns && column < headingColumns;
-}
-/**
- * Enables conversion for an attribute for simple view-model mappings.
- *
- * @internal
- * @param options.defaultValue The default value for the specified `modelAttribute`.
- */ function enableProperty$1(schema, conversion, options) {
-    const { modelAttribute } = options;
-    schema.extend('tableCell', {
-        allowAttributes: [
-            modelAttribute
-        ]
-    });
-    schema.setAttributeProperties(modelAttribute, {
-        isFormatting: true
-    });
-    upcastStyleToAttribute(conversion, {
-        viewElement: /^(td|th)$/,
-        ...options
-    });
-    downcastAttributeToStyle(conversion, {
-        modelElement: 'tableCell',
-        ...options
-    });
-}
-/**
- * Depending on the position of the selection we either return the table under cursor or look for the table higher in the hierarchy.
- *
- * @internal
- */ function getSelectionAffectedTable(selection) {
-    const selectedElement = selection.getSelectedElement();
-    // Is the command triggered from the `tableToolbar`?
-    if (selectedElement && selectedElement.is('element', 'table')) {
-        return selectedElement;
-    }
-    return selection.getFirstPosition().findAncestor('table');
-}
-
 /**
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -1017,6 +941,122 @@ const downcastTableAlignmentConfig = {
  // @if CK_DEBUG //		} );
  // @if CK_DEBUG // }
 
+/**
+ * A common method to update the numeric value. If a value is the default one, it will be unset.
+ *
+ * @internal
+ * @param key An attribute key.
+ * @param value The new attribute value.
+ * @param item A model item on which the attribute will be set.
+ * @param defaultValue The default attribute value. If a value is lower or equal, it will be unset.
+ */ function updateNumericAttribute(key, value, item, writer, defaultValue = 1) {
+    if (value !== undefined && value !== null && defaultValue !== undefined && defaultValue !== null && value > defaultValue) {
+        writer.setAttribute(key, value, item);
+    } else {
+        writer.removeAttribute(key, item);
+    }
+}
+/**
+ * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
+ *
+ * @internal
+ * @param writer The model writer.
+ * @param insertPosition The position at which the table cell should be inserted.
+ * @param attributes The element attributes.
+ * @returns Created table cell.
+ */ function createEmptyTableCell(writer, insertPosition, attributes = {}) {
+    const tableCell = writer.createElement('tableCell', attributes);
+    writer.insertElement('paragraph', tableCell);
+    writer.insert(tableCell, insertPosition);
+    return tableCell;
+}
+/**
+ * Checks if a table cell belongs to the heading column section.
+ *
+ * @internal
+ */ function isHeadingColumnCell(tableUtils, tableCell) {
+    const table = tableCell.parent.parent;
+    const headingColumns = parseInt(table.getAttribute('headingColumns') || '0');
+    const { column } = tableUtils.getCellLocation(tableCell);
+    return !!headingColumns && column < headingColumns;
+}
+/**
+ * Enables conversion for an attribute for simple view-model mappings.
+ *
+ * @internal
+ * @param options.defaultValue The default value for the specified `modelAttribute`.
+ */ function enableProperty$1(schema, conversion, options) {
+    const { modelAttribute } = options;
+    schema.extend('tableCell', {
+        allowAttributes: [
+            modelAttribute
+        ]
+    });
+    schema.setAttributeProperties(modelAttribute, {
+        isFormatting: true
+    });
+    upcastStyleToAttribute(conversion, {
+        viewElement: /^(td|th)$/,
+        ...options
+    });
+    downcastAttributeToStyle(conversion, {
+        modelElement: 'tableCell',
+        ...options
+    });
+}
+/**
+ * Depending on the position of the selection we either return the table under cursor or look for the table higher in the hierarchy.
+ *
+ * @internal
+ */ function getSelectionAffectedTable(selection) {
+    const selectedElement = selection.getSelectedElement();
+    // Is the command triggered from the `tableToolbar`?
+    if (selectedElement && selectedElement.is('element', 'table')) {
+        return selectedElement;
+    }
+    return selection.getFirstPosition().findAncestor('table');
+}
+/**
+ * Groups table cells by their parent table.
+ *
+ * @internal
+ */ function groupCellsByTable(tableCells) {
+    const tableMap = new Map();
+    for (const tableCell of tableCells){
+        const table = tableCell.findAncestor('table');
+        if (!tableMap.has(table)) {
+            tableMap.set(table, []);
+        }
+        tableMap.get(table).push(tableCell);
+    }
+    return tableMap;
+}
+/**
+ * Checks if all cells in a given row or column are header cells.
+ *
+ * @internal
+ */ function isEntireCellsLineHeader({ table, row, column }) {
+    const tableWalker = new TableWalker(table, {
+        row,
+        column
+    });
+    for (const { cell } of tableWalker){
+        const cellType = cell.getAttribute('tableCellType');
+        if (cellType !== 'header') {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Checks whether the `tableCellType` attribute is enabled in the editor schema and the experimental flag is set.
+ *
+ * @internal
+ */ function isTableCellTypeEnabled(editor) {
+    const { model, config } = editor;
+    return model.schema.checkAttribute('tableCell', 'tableCellType') && config.get('experimentalFlags.tableCellTypeSupport') === true;
+}
+
 /**
  * Returns a cropped table according to given dimensions.
 
@@ -1642,9 +1682,12 @@ const downcastTableAlignmentConfig = {
  * headingRows    - The number of rows that go as table headers.
  * headingColumns - The maximum number of row headings.
  * rows           - Sorted `<tr>` elements as they should go into the model - ie. if `<thead>` is inserted after `<tbody>` in the view.
+ *
+ * @param viewTable The view table element.
+ * @returns The table metadata.
  */ function scanTable(viewTable) {
-    let headingRows = 0;
     let headingColumns = undefined;
+    let shouldAccumulateHeadingRows = true;
     // The `<tbody>` and `<thead>` sections in the DOM do not have to be in order `<thead>` -> `<tbody>` and there might be more than one
     // of them.
     // As the model does not have these sections, rows from different sections must be sorted.
@@ -1670,6 +1713,7 @@ const downcastTableAlignmentConfig = {
         }
         // Save the first `<thead>` in the table as table header - all other ones will be converted to table body rows.
         if (tableChild.name === 'thead' && !firstTheadElement) {
+            shouldAccumulateHeadingRows = true;
             firstTheadElement = tableChild;
         }
         // There might be some extra empty text nodes between the `<tr>`s.
@@ -1684,11 +1728,13 @@ const downcastTableAlignmentConfig = {
             // This case is problematic because it's not clear if this row should be a heading row or not, as it may be result
             // of the cell span from the previous row.
             // Issue: https://github.com/ckeditor/ckeditor5/issues/17556
-            (maxPrevColumns === null || trColumns.length === maxPrevColumns) && trColumns.every((e)=>e.is('element', 'th'))) {
-                headingRows++;
+            (maxPrevColumns === null || trColumns.length === maxPrevColumns) && trColumns.every((e)=>e.is('element', 'th')) && // If there is at least one "normal" table row between heading rows, then stop accumulating heading rows.
+            shouldAccumulateHeadingRows) {
                 headRows.push(tr);
+                shouldAccumulateHeadingRows = true;
             } else {
                 bodyRows.push(tr);
+                shouldAccumulateHeadingRows = false;
             }
             // We use the maximum number of columns to avoid false positives when detecting
             // multiple rows with single column within `rowspan`. Without it the last row of `rowspan=3`
@@ -1708,12 +1754,12 @@ const downcastTableAlignmentConfig = {
             index += 1;
         }
         // Update headingColumns.
-        if (!headingColumns || index < headingColumns) {
+        if (headingColumns === undefined || index < headingColumns) {
             headingColumns = index;
         }
     }
     return {
-        headingRows,
+        headingRows: headRows.length,
         headingColumns: headingColumns || 0,
         rows: [
             ...headRows,
@@ -2017,9 +2063,17 @@ const downcastTableAlignmentConfig = {
  *
  * @internal
  * @param options.asWidget If set to `true`, the downcast conversion will produce a widget.
+ * @param options.cellTypeEnabled If returns `true`, the downcast conversion will use the `tableCellType` attribute to determine cell type.
  * @returns Element creator.
- */ function downcastCell(options = {}) {
+ */ function downcastCell(options) {
     return (tableCell, { writer })=>{
+        // If the table cell type feature is enabled, then we can simply check the cell type attribute.
+        if (options.cellTypeEnabled?.()) {
+            const cellElementName = tableCell.getAttribute('tableCellType') === 'header' ? 'th' : 'td';
+            return createCellElement(writer, cellElementName);
+        }
+        // If the table cell type feature is not enabled, we should iterate through the table structure
+        // to determine whether the cell is in the heading section.
         const tableRow = tableCell.parent;
         const table = tableRow.parent;
         const rowIndex = table.getChildIndex(tableRow);
@@ -2033,15 +2087,17 @@ const downcastTableAlignmentConfig = {
         for (const tableSlot of tableWalker){
             if (tableSlot.cell == tableCell) {
                 const isHeading = tableSlot.row < headingRows || tableSlot.column < headingColumns;
-                const cellElementName = isHeading ? 'th' : 'td';
-                result = options.asWidget ? toWidgetEditable(writer.createEditableElement(cellElementName), writer, {
-                    withAriaRole: false
-                }) : writer.createContainerElement(cellElementName);
+                result = createCellElement(writer, isHeading ? 'th' : 'td');
                 break;
             }
         }
         return result;
     };
+    function createCellElement(writer, name) {
+        return options.asWidget ? toWidgetEditable(writer.createEditableElement(name), writer, {
+            withAriaRole: false
+        }) : writer.createContainerElement(name);
+    }
 }
 /**
  * Overrides paragraph inside table cell conversion.
@@ -2885,7 +2941,7 @@ const downcastTableAlignmentConfig = {
                     splitHorizontally(cell, headingRowsToSet, writer);
                 }
             }
-            updateNumericAttribute('headingRows', headingRowsToSet, table, writer, 0);
+            tableUtils.setHeadingRowsCount(writer, table, headingRowsToSet);
         });
     }
     /**
@@ -2955,7 +3011,7 @@ const downcastTableAlignmentConfig = {
                     splitVertically(cell, column, headingColumnsToSet, writer);
                 }
             }
-            updateNumericAttribute('headingColumns', headingColumnsToSet, table, writer, 0);
+            tableUtils.setHeadingColumnsCount(writer, table, headingColumnsToSet);
         });
     }
 }
@@ -3413,10 +3469,10 @@ const downcastTableAlignmentConfig = {
         const columns = options.columns || 2;
         createEmptyRows(writer, table, 0, rows, columns);
         if (options.headingRows) {
-            updateNumericAttribute('headingRows', Math.min(options.headingRows, rows), table, writer, 0);
+            this.setHeadingRowsCount(writer, table, Math.min(options.headingRows, rows));
         }
         if (options.headingColumns) {
-            updateNumericAttribute('headingColumns', Math.min(options.headingColumns, columns), table, writer, 0);
+            this.setHeadingColumnsCount(writer, table, Math.min(options.headingColumns, columns));
         }
         return table;
     }
@@ -3453,6 +3509,7 @@ const downcastTableAlignmentConfig = {
         const rowsToInsert = options.rows || 1;
         const isCopyStructure = options.copyStructureFromAbove !== undefined;
         const copyStructureFrom = options.copyStructureFromAbove ? insertAt - 1 : insertAt;
+        const cellTypeEnabled = isTableCellTypeEnabled(this.editor);
         const rows = this.getRows(table);
         const columns = this.getColumns(table);
         if (insertAt > rows) {
@@ -3465,14 +3522,29 @@ const downcastTableAlignmentConfig = {
             });
         }
         model.change((writer)=>{
-            const headingRows = table.getAttribute('headingRows') || 0;
+            let headingRows = table.getAttribute('headingRows') || 0;
+            const headingColumns = table.getAttribute('headingColumns') || 0;
             // Inserting rows inside heading section requires to update `headingRows` attribute as the heading section will grow.
             if (headingRows > insertAt) {
-                updateNumericAttribute('headingRows', headingRows + rowsToInsert, table, writer, 0);
+                headingRows += rowsToInsert;
+                this.setHeadingRowsCount(writer, table, headingRows, {
+                    shallow: true
+                });
             }
             // Inserting at the end or at the beginning of a table doesn't require to calculate anything special.
             if (!isCopyStructure && (insertAt === 0 || insertAt === rows)) {
-                createEmptyRows(writer, table, insertAt, rowsToInsert, columns);
+                const rows = createEmptyRows(writer, table, insertAt, rowsToInsert, columns);
+                if (cellTypeEnabled) {
+                    for(let rowOffset = 0; rowOffset < rows.length; rowOffset++){
+                        const row = rows[rowOffset];
+                        for(let columnIndex = 0; columnIndex < columns; columnIndex++){
+                            const cell = row[columnIndex];
+                            if (insertAt + rowOffset < headingRows || columnIndex < headingColumns) {
+                                writer.setAttribute('tableCellType', 'header', cell);
+                            }
+                        }
+                    }
+                }
                 return;
             }
             // Iterate over all the rows above the inserted rows in order to check for the row-spanned cells.
@@ -3504,9 +3576,13 @@ const downcastTableAlignmentConfig = {
                     const insertPosition = writer.createPositionAt(tableRow, 'end');
                     // Insert the empty cell only if this slot is not row-spanned from any other cell.
                     if (colspan > 0) {
-                        createEmptyTableCell(writer, insertPosition, colspan > 1 ? {
+                        const insertedCells = createEmptyTableCell(writer, insertPosition, colspan > 1 ? {
                             colspan
                         } : undefined);
+                        // If we insert row in heading section, set proper cell type.
+                        if (cellTypeEnabled && (insertAt + rowIndex < headingRows || cellIndex < headingColumns)) {
+                            writer.setAttribute('tableCellType', 'header', insertedCells);
+                        }
                     }
                     // Skip the col-spanned slots, there won't be any cells.
                     cellIndex += Math.abs(colspan) - 1;
@@ -3544,21 +3620,36 @@ const downcastTableAlignmentConfig = {
         const model = this.editor.model;
         const insertAt = options.at || 0;
         const columnsToInsert = options.columns || 1;
+        const cellTypeEnabled = isTableCellTypeEnabled(this.editor);
         model.change((writer)=>{
-            const headingColumns = table.getAttribute('headingColumns');
+            const headingRows = table.getAttribute('headingRows') || 0;
+            let headingColumns = table.getAttribute('headingColumns');
             // Inserting columns inside heading section requires to update `headingColumns` attribute as the heading section will grow.
             if (insertAt < headingColumns) {
-                writer.setAttribute('headingColumns', headingColumns + columnsToInsert, table);
+                headingColumns += columnsToInsert;
+                this.setHeadingColumnsCount(writer, table, headingColumns, {
+                    shallow: true
+                });
             }
             const tableColumns = this.getColumns(table);
             // Inserting at the end and at the beginning of a table doesn't require to calculate anything special.
             if (insertAt === 0 || tableColumns === insertAt) {
+                let rowIndex = 0;
                 for (const tableRow of table.getChildren()){
                     // Ignore non-row elements inside the table (e.g. caption).
                     if (!tableRow.is('element', 'tableRow')) {
                         continue;
                     }
-                    createCells(columnsToInsert, writer, writer.createPositionAt(tableRow, insertAt ? 'end' : 0));
+                    const insertedCells = createCells(columnsToInsert, writer, writer.createPositionAt(tableRow, insertAt ? 'end' : 0));
+                    if (cellTypeEnabled) {
+                        // If we insert column in heading section, set proper cell type.
+                        for(let columnOffset = 0; columnOffset < insertedCells.length; columnOffset++){
+                            if (insertAt + columnOffset < headingColumns || rowIndex < headingRows) {
+                                writer.setAttribute('tableCellType', 'header', insertedCells[columnOffset]);
+                            }
+                        }
+                    }
+                    rowIndex++;
                 }
                 return;
             }
@@ -3584,7 +3675,15 @@ const downcastTableAlignmentConfig = {
                 } else {
                     // It's either cell at this column index or spanned cell by a row-spanned cell from row above.
                     // In table above it's cell "e" and a spanned position from row below (empty cell between cells "g" and "h")
-                    createCells(columnsToInsert, writer, tableSlot.getPositionBefore());
+                    const insertedCells = createCells(columnsToInsert, writer, tableSlot.getPositionBefore());
+                    // If we insert column in heading section, set proper cell type.
+                    if (cellTypeEnabled) {
+                        for(let columnOffset = 0; columnOffset < insertedCells.length; columnOffset++){
+                            if (insertAt + columnOffset < headingColumns || row < headingRows) {
+                                writer.setAttribute('tableCellType', 'header', insertedCells[columnOffset]);
+                            }
+                        }
+                    }
                 }
             }
         });
@@ -3664,6 +3763,20 @@ const downcastTableAlignmentConfig = {
                 // because of cleaning empty rows and we only removed one of them.
                 removeEmptyRows(table, this);
             }
+            // 3. If next rows are entirely header, adjust heading rows count.
+            if (isTableCellTypeEnabled(this.editor)) {
+                let headingRows = table.getAttribute('headingRows') || 0;
+                const totalRows = this.getRows(table);
+                while(headingRows < totalRows && isEntireCellsLineHeader({
+                    table,
+                    row: headingRows
+                })){
+                    headingRows++;
+                }
+                this.setHeadingRowsCount(writer, table, headingRows, {
+                    shallow: true
+                });
+            }
         });
     }
     /**
@@ -3736,6 +3849,20 @@ const downcastTableAlignmentConfig = {
                 // because of cleaning empty columns and we only removed one of them.
                 removeEmptyColumns(table, this);
             }
+            // If next columns are entirely header, adjust heading columns count.
+            if (isTableCellTypeEnabled(this.editor)) {
+                let headingColumns = table.getAttribute('headingColumns') || 0;
+                const totalColumns = this.getColumns(table);
+                while(headingColumns < totalColumns && isEntireCellsLineHeader({
+                    table,
+                    column: headingColumns
+                })){
+                    headingColumns++;
+                }
+                this.setHeadingColumnsCount(writer, table, headingColumns, {
+                    shallow: true
+                });
+            }
         });
     }
     /**
@@ -4050,6 +4177,148 @@ const downcastTableAlignmentConfig = {
         }
         return cells;
     }
+    /**
+	 * Sets the number of heading rows for the given `table`.
+	 *
+	 * @param writer The model writer.
+	 * @param table The table model element.
+	 * @param headingRows The number of heading rows to set.
+	 * @param options Additional options.
+	 * @param options.shallow If set to `true` it will only update the `headingRows` attribute
+	 * without updating the cell types in the table. Default is `false`.
+	 * @param options.resetFormerHeadingCells If set to `true`, it will check if the rows that are no longer in the heading section
+	 * should be updated to body cells. Default is `true`.
+	 * @param options.autoExpand If set to `true`, it will check if the following rows look like a header and expand the heading section.
+	 * Default is `true`.
+	 */ setHeadingRowsCount(writer, table, headingRows, options = {}) {
+        const { shallow, resetFormerHeadingCells = true, autoExpand = true } = options;
+        const oldHeadingRows = table.getAttribute('headingRows') || 0;
+        if (headingRows === oldHeadingRows) {
+            return;
+        }
+        updateNumericAttribute('headingRows', headingRows, table, writer, 0);
+        if (shallow || !isTableCellTypeEnabled(this.editor)) {
+            return;
+        }
+        // Set header type to all cells in new heading rows.
+        for (const { cell, row, column } of new TableWalker(table, {
+            endRow: headingRows - 1
+        })){
+            updateTableCellType({
+                table,
+                writer,
+                cell,
+                row,
+                column
+            });
+        }
+        // If heading rows were reduced, set body type to all cells in rows that are no longer in heading section.
+        if (resetFormerHeadingCells && headingRows < oldHeadingRows) {
+            for(let row = headingRows; row < oldHeadingRows; row++){
+                // Handle edge case when some cells were already changed to body type manually,
+                // before changing heading rows count.
+                if (!isEntireCellsLineHeader({
+                    table,
+                    row
+                })) {
+                    break;
+                }
+                for (const { cell, row: cellRow, column } of new TableWalker(table, {
+                    row
+                })){
+                    updateTableCellType({
+                        table,
+                        writer,
+                        cell,
+                        row: cellRow,
+                        column
+                    });
+                }
+            }
+        }
+        // If following rows looks like header, expand heading rows to cover them.
+        if (autoExpand && headingRows > oldHeadingRows) {
+            const totalRows = this.getRows(table);
+            while(headingRows < totalRows && isEntireCellsLineHeader({
+                table,
+                row: headingRows
+            })){
+                headingRows++;
+            }
+            updateNumericAttribute('headingRows', headingRows, table, writer, 0);
+        }
+    }
+    /**
+	 * Sets the number of heading columns for the given `table`.
+	 *
+	 * @param writer The model writer to use.
+	 * @param table The table model element.
+	 * @param headingColumns The number of heading columns to set.
+	 * @param options Additional options.
+	 * @param options.shallow If set to `true` it will only update the `headingColumns` attribute
+	 * without updating the cell types in the table. Default is `false`.
+	 * @param options.resetFormerHeadingCells If set to `true`, it will check if the columns that are no longer in the heading section
+	 * should be updated to body cells. Default is `true`.
+	 * @param options.autoExpand If set to `true`, it will check if the following columns look like a header and expand the heading section.
+	 * Default is `true`.
+	 */ setHeadingColumnsCount(writer, table, headingColumns, options = {}) {
+        const { shallow, resetFormerHeadingCells = true, autoExpand = true } = options;
+        const oldHeadingColumns = table.getAttribute('headingColumns') || 0;
+        if (headingColumns === oldHeadingColumns) {
+            return;
+        }
+        updateNumericAttribute('headingColumns', headingColumns, table, writer, 0);
+        if (shallow || !isTableCellTypeEnabled(this.editor)) {
+            return;
+        }
+        // Set header type to all cells in new heading columns.
+        for (const { cell, row, column } of new TableWalker(table, {
+            endColumn: headingColumns - 1
+        })){
+            updateTableCellType({
+                table,
+                writer,
+                cell,
+                row,
+                column
+            });
+        }
+        // If heading columns were reduced, set body type to all cells in columns that are no longer in heading section.
+        if (resetFormerHeadingCells && headingColumns < oldHeadingColumns) {
+            for(let column = headingColumns; column < oldHeadingColumns; column++){
+                // Handle edge case when some cells were already changed to body type manually,
+                // before changing heading columns count.
+                if (!isEntireCellsLineHeader({
+                    table,
+                    column
+                })) {
+                    break;
+                }
+                for (const { cell, row, column: cellColumn } of new TableWalker(table, {
+                    column
+                })){
+                    updateTableCellType({
+                        table,
+                        writer,
+                        cell,
+                        row,
+                        column: cellColumn
+                    });
+                }
+            }
+        }
+        // If following columns looks like header, expand heading columns to cover them.
+        if (autoExpand && headingColumns > oldHeadingColumns) {
+            const totalColumns = this.getColumns(table);
+            while(headingColumns < totalColumns && isEntireCellsLineHeader({
+                table,
+                column: headingColumns
+            })){
+                headingColumns++;
+            }
+            updateNumericAttribute('headingColumns', headingColumns, table, writer, 0);
+        }
+    }
     /**
 	 * Returns all model table cells that the provided model selection's ranges
 	 * {@link module:engine/model/range~ModelRange#start} inside.
@@ -4228,20 +4497,27 @@ const downcastTableAlignmentConfig = {
  * @param rows The number of rows to create.
  * @param tableCellToInsert The number of cells to insert in each row.
  */ function createEmptyRows(writer, table, insertAt, rows, tableCellToInsert, attributes = {}) {
+    const insertedRows = [];
     for(let i = 0; i < rows; i++){
         const tableRow = writer.createElement('tableRow');
         writer.insert(tableRow, table, insertAt);
-        createCells(tableCellToInsert, writer, writer.createPositionAt(tableRow, 'end'), attributes);
+        insertedRows.push(createCells(tableCellToInsert, writer, writer.createPositionAt(tableRow, 'end'), attributes));
     }
+    return insertedRows;
 }
 /**
  * Creates cells at a given position.
  *
  * @param cells The number of cells to create
  */ function createCells(cells, writer, insertPosition, attributes = {}) {
+    const createdCells = [];
+    let currentPosition = insertPosition;
     for(let i = 0; i < cells; i++){
-        createEmptyTableCell(writer, insertPosition, attributes);
+        const cell = createEmptyTableCell(writer, currentPosition, attributes);
+        createdCells.push(cell);
+        currentPosition = writer.createPositionAfter(cell);
     }
+    return createdCells;
 }
 /**
  * Evenly distributes the span of a cell to a number of provided cells.
@@ -4390,6 +4666,18 @@ function compareRangeOrder(rangeA, rangeB) {
     const firstColumn = Math.min(...columnIndexes);
     return (lastRow - firstRow + 1) * (lastColumn - firstColumn + 1);
 }
+/**
+ * Updates the `tableCellType` attribute of a table cell based on its position in the table
+ * and the table's `headingRows` and `headingColumns` attributes.
+ */ function updateTableCellType({ writer, table, row, column, cell }) {
+    const headingRows = table.getAttribute('headingRows') || 0;
+    const headingColumns = table.getAttribute('headingColumns') || 0;
+    if (row >= headingRows && column >= headingColumns) {
+        writer.removeAttribute('tableCellType', cell);
+    } else {
+        writer.setAttribute('tableCellType', 'header', cell);
+    }
+}
 
 /**
  * The merge cells command.
@@ -5232,12 +5520,15 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
         conversion.for('editingDowncast').elementToElement({
             model: 'tableCell',
             view: downcastCell({
-                asWidget: true
+                asWidget: true,
+                cellTypeEnabled: ()=>isTableCellTypeEnabled(this.editor)
             })
         });
         conversion.for('dataDowncast').elementToElement({
             model: 'tableCell',
-            view: downcastCell()
+            view: downcastCell({
+                cellTypeEnabled: ()=>isTableCellTypeEnabled(this.editor)
+            })
         });
         // Duplicates code - needed to properly refresh paragraph inside a table cell.
         conversion.for('editingDowncast').elementToElement({
@@ -5322,7 +5613,11 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
         injectTableLayoutPostFixer(model);
         injectTableCellParagraphPostFixer(model);
         this.listenTo(model.document, 'change:data', ()=>{
-            tableHeadingsRefreshHandler(model, editor.editing);
+            // It's no longer needed to refresh table headings on every data change if table cell type feature is enabled.
+            // It's because headings rows / columns are updated based on cell types which triggers their own refresh handler.
+            if (!isTableCellTypeEnabled(editor)) {
+                tableHeadingsRefreshHandler(model, editor.editing);
+            }
             tableCellRefreshHandler(model, editor.editing);
         });
     }
@@ -9020,6 +9315,9 @@ const propertyToCommandMap$3 = {
         this._defaultContentTableValue = defaultValue;
         // Hardcoded defaults for layout table.
         switch(attributeName){
+            case 'tableCellType':
+                this._defaultLayoutTableValue = 'data';
+                break;
             case 'tableCellBorderStyle':
                 this._defaultLayoutTableValue = 'none';
                 break;
@@ -9065,6 +9363,11 @@ const propertyToCommandMap$3 = {
             } else {
                 tableCells.forEach((tableCell)=>writer.removeAttribute(this.attributeName, tableCell));
             }
+            this.fire('afterExecute', {
+                writer,
+                tableCells,
+                valueToSet
+            });
         });
     }
     /**
@@ -9484,6 +9787,168 @@ const propertyToCommandMap$3 = {
     }
 }
 
+/**
+ * The table cell type command.
+ *
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * the `'tableCellType'` editor command.
+ *
+ * To change the type of selected cells, execute the command:
+ *
+ * ```ts
+ * editor.execute( 'tableCellType', {
+ *   value: 'header'
+ * } );
+ * ```
+ *
+ * The `value` can be either `'header'` or `'data'`.
+ * It'll return `undefined` if multiple types are selected.
+ */ class TableCellTypeCommand extends TableCellPropertyCommand {
+    /**
+	 * Creates a new `TableCellTypeCommand` instance.
+	 *
+	 * @param editor An editor in which this command will be used.
+	 */ constructor(editor){
+        super(editor, 'tableCellType', 'data');
+        this.on('afterExecute', (_, data)=>{
+            const { writer, tableCells } = data;
+            const tableUtils = this.editor.plugins.get(TableUtils);
+            const tablesMap = groupCellsByTable(tableCells);
+            updateTablesHeadingAttributes(tableUtils, writer, tablesMap.keys());
+        });
+    }
+    /**
+	 * @inheritDoc
+	 */ refresh() {
+        super.refresh();
+        const table = getSelectionAffectedTable(this.editor.model.document.selection);
+        if (this.isEnabled && table && table.getAttribute('tableType') === 'layout') {
+            this.isEnabled = false;
+        }
+    }
+    /**
+	 * Returns the attribute value for a table cell.
+	 */ _getAttribute(tableCell) {
+        return tableCell?.getAttribute(this.attributeName) || 'data';
+    }
+}
+/**
+ * Updates the `headingRows` and `headingColumns` attributes of the given tables
+ * based on the `tableCellType` of their cells.
+ */ function updateTablesHeadingAttributes(tableUtils, writer, tables) {
+    let changed = false;
+    for (const table of tables){
+        let headingRows = table.getAttribute('headingRows') || 0;
+        let headingColumns = table.getAttribute('headingColumns') || 0;
+        // Prioritize the dimension that is already larger to prevent the other dimension from
+        // aggressively consuming "orphaned" header cells. In other words, if table has three
+        // heading columns (which fills entire table), we should not count all rows as heading rows.
+        // User might later add column to the right which should not be heading.
+        //
+        // The other example, in a 2x2 table where all cells are headers (e.g. due to concurrent edits),
+        // if headingColumns=0 and headingRows=0 (but all cells are headers):
+        // - Processing rows first would expand headingRows to 2 (covering all cells), leaving headingColumns at 0.
+        // - Processing columns first expands headingColumns to 2, leaving headingRows at 0.
+        //
+        // It should be good enough to resolve conflicts in most cases.
+        const processColumnsFirst = headingColumns > headingRows;
+        if (processColumnsFirst) {
+            const newHeadingColumns = getAdjustedHeadingSectionSize(tableUtils, table, 'column', headingColumns, headingRows);
+            if (newHeadingColumns !== headingColumns) {
+                tableUtils.setHeadingColumnsCount(writer, table, newHeadingColumns, {
+                    shallow: true
+                });
+                headingColumns = newHeadingColumns;
+                changed = true;
+            }
+        }
+        const newHeadingRows = getAdjustedHeadingSectionSize(tableUtils, table, 'row', headingRows, headingColumns);
+        if (newHeadingRows !== headingRows) {
+            tableUtils.setHeadingRowsCount(writer, table, newHeadingRows, {
+                shallow: true
+            });
+            headingRows = newHeadingRows;
+            changed = true;
+        }
+        if (!processColumnsFirst) {
+            const newHeadingColumns = getAdjustedHeadingSectionSize(tableUtils, table, 'column', headingColumns, headingRows);
+            if (newHeadingColumns !== headingColumns) {
+                tableUtils.setHeadingColumnsCount(writer, table, newHeadingColumns, {
+                    shallow: true
+                });
+                changed = true;
+            }
+        }
+    }
+    return changed;
+}
+/**
+ * Calculates the adjusted size of a heading section (rows or columns).
+ *
+ * The algorithm iterates through rows (or columns) to determine if they should be part of the heading section.
+ * A row/column is included if:
+ * 1. All its cells are of type 'header'.
+ * 2. AND it contains at least one header cell that is NOT already covered by the perpendicular heading section.
+ *
+ * This check prevents the algorithm from aggressively expanding the heading section when cells are already
+ * headers due to the other dimension.
+ *
+ * Consider a 2x2 table where all cells are headers:
+ *
+ * ```
+ *    C0  C1
+ *   +---+---+
+ * R0| H | H |
+ *   +---+---+
+ * R1| H | H |
+ *   +---+---+
+ * ```
+ *
+ * If `headingColumns=2`, both C0 and C1 are heading columns.
+ * If we want `headingRows=1` (only R0), the algorithm must NOT include R1, even though R1 consists of header cells.
+ * R1's cells are headers because of C0 and C1.
+ *
+ * Without this check, the algorithm would see that R1 is all headers and force `headingRows` to 2.
+ * This would prevent the user from reducing `headingRows` from 2 to 1 without converting R1 cells to 'data'
+ * (which would incorrectly break C0 and C1).
+ */ function getAdjustedHeadingSectionSize(tableUtils, table, mode, currentSize, perpendicularHeadingSize) {
+    const totalRowsOrColumns = mode === 'row' ? tableUtils.getRows(table) : tableUtils.getColumns(table);
+    let size = currentSize;
+    // Iterate through each row/column to check if all cells are headers.
+    for(let currentIndex = 0; currentIndex < totalRowsOrColumns; currentIndex++){
+        const walker = new TableWalker(table, {
+            [mode]: currentIndex
+        });
+        let allCellsAreHeaders = true;
+        let hasHeaderOutsidePerpendicularSection = false;
+        // Check each cell in the current row/column.
+        for (const { cell, row, column } of walker){
+            // If we find a non-header cell, this row/column can't be part of the heading section.
+            if (cell.getAttribute('tableCellType') !== 'header') {
+                allCellsAreHeaders = false;
+                break;
+            }
+            // Check if this header cell extends beyond the perpendicular heading section.
+            // E.g., when checking rows, see if the cell extends beyond headingColumns.
+            const perpendicularIndex = mode === 'row' ? column : row;
+            if (perpendicularIndex >= perpendicularHeadingSize) {
+                hasHeaderOutsidePerpendicularSection = true;
+            }
+        }
+        // If not all cells are headers, we can't extend the heading section any further.
+        if (!allCellsAreHeaders) {
+            // The section cannot extend beyond the last valid header row/column.
+            return Math.min(size, currentIndex);
+        }
+        // If there's a header extending beyond the perpendicular section,
+        // we must include this row/column in the heading section.
+        if (hasHeaderOutsidePerpendicularSection) {
+            size = Math.max(size, currentIndex + 1);
+        }
+    }
+    return Math.min(size, totalRowsOrColumns);
+}
+
 const VALIGN_VALUES_REG_EXP = /^(top|middle|bottom)$/;
 const ALIGN_VALUES_REG_EXP = /^(left|center|right|justify)$/;
 /**
@@ -9585,6 +10050,10 @@ const ALIGN_VALUES_REG_EXP = /^(left|center|right|justify)$/;
         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));
+        }
     }
 }
 /**
@@ -9771,6 +10240,112 @@ const ALIGN_VALUES_REG_EXP = /^(left|center|right|justify)$/;
         }
     });
 }
+/**
+ * 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
+    });
+    // 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);
+            }
+        }
+    });
+}
 
 /**
  * The table cell properties feature. Enables support for setting properties of table cells (size, border, background, etc.).
@@ -14469,6 +15044,9 @@ const propertyToCommandMap$1 = {
     /**
 	 * 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.
 	 */ paddingInput;
@@ -14507,6 +15085,7 @@ const propertyToCommandMap$1 = {
 	 * @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);
         this.set({
@@ -14518,11 +15097,13 @@ const propertyToCommandMap$1 = {
             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();
@@ -14532,6 +15113,7 @@ const propertyToCommandMap$1 = {
         this.borderWidthInput = borderWidthInput;
         this.borderColorInput = borderColorInput;
         this.backgroundInput = backgroundInput;
+        this.cellTypeDropdown = cellTypeDropdown;
         this.paddingInput = this._createPaddingField();
         this.widthInput = widthInput;
         this.heightInput = heightInput;
@@ -14565,22 +15147,48 @@ const propertyToCommandMap$1 = {
         // 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, {
@@ -14630,7 +15238,9 @@ const propertyToCommandMap$1 = {
                     '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'
@@ -14658,6 +15268,7 @@ const propertyToCommandMap$1 = {
             this.borderStyleDropdown,
             this.borderColorInput,
             this.borderWidthInput,
+            this.cellTypeDropdown,
             this.backgroundInput,
             this.widthInput,
             this.heightInput,
@@ -14812,6 +15423,46 @@ const propertyToCommandMap$1 = {
             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:
 	 *
@@ -14908,7 +15559,8 @@ const propertyToCommandMap$1 = {
         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,
@@ -14934,7 +15586,8 @@ const propertyToCommandMap$1 = {
         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,
@@ -14999,6 +15652,29 @@ const propertyToCommandMap$1 = {
         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.
 	 */ get _horizontalAlignmentLabels() {
@@ -15035,6 +15711,15 @@ const propertyToCommandMap$1 = {
             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';
@@ -15051,7 +15736,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
@@ -15138,7 +15824,7 @@ const propertyToCommandMap = {
                 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;
         });
@@ -15165,11 +15851,13 @@ const propertyToCommandMap = {
         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.
@@ -15244,6 +15932,11 @@ const propertyToCommandMap = {
         }));
         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;
     }
     /**
@@ -15256,12 +15949,24 @@ const propertyToCommandMap = {
 	 */ _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`.
@@ -15382,5 +16087,5 @@ const propertyToCommandMap = {
     }
 }
 
-export { InsertColumnCommand, InsertRowCommand, InsertTableCommand, InsertTableLayoutCommand, MergeCellCommand, MergeCellsCommand, PlainTableOutput, RemoveColumnCommand, RemoveRowCommand, SelectColumnCommand, SelectRowCommand, SetHeaderColumnCommand, SetHeaderRowCommand, SplitCellCommand, Table, TableAlignmentCommand, TableBackgroundColorCommand, TableBorderColorCommand, TableBorderStyleCommand, TableBorderWidthCommand, TableCaption, TableCaptionEditing, TableCaptionUI, TableCellBackgroundColorCommand, TableCellBorderColorCommand, TableCellBorderStyleCommand, TableCellBorderWidthCommand, TableCellHeightCommand, TableCellHorizontalAlignmentCommand, TableCellPaddingCommand, TableCellProperties, TableCellPropertiesEditing, TableCellPropertiesUI, TableCellPropertiesUIExperimental, TableCellPropertiesView, TableCellPropertiesViewExperimental, TableCellPropertyCommand, TableCellVerticalAlignmentCommand, TableCellWidthCommand, TableCellWidthEditing, TableClipboard, TableColumnResize, TableColumnResizeEditing, TableEditing, TableHeightCommand, TableKeyboard, TableLayout, TableLayoutEditing, TableLayoutUI, TableMouse, TableProperties, TablePropertiesEditing, TablePropertiesUI, TablePropertiesUIExperimental, TablePropertiesView, TablePropertiesViewExperimental, TablePropertyCommand, TableSelection, TableToolbar, TableTypeCommand, TableUI, TableUtils, TableWalker, TableWidthCommand, TableWidthsCommand, ToggleTableCaptionCommand, InsertTableView as _InsertTableView, COLUMN_MIN_WIDTH_AS_PERCENTAGE as _TABLE_COLUMN_MIN_WIDTH_AS_PERCENTAGE, COLUMN_MIN_WIDTH_IN_PIXELS as _TABLE_COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD as _TABLE_COLUMN_RESIZE_DISTANCE_THRESHOLD, COLUMN_WIDTH_PRECISION as _TABLE_COLUMN_WIDTH_PRECISION, defaultColors as _TABLE_DEFAULT_COLORS, ColorInputView as _TableColorInputView, MouseEventsObserver as _TableMouseEventsObserver, addDefaultUnitToNumericValue as _addDefaultUnitToNumericValue, adjustLastColumnIndex as _adjustLastTableColumnIndex, adjustLastRowIndex as _adjustLastTableRowIndex, clamp as _clamp, colorFieldValidator as _colorTableFieldValidator, convertParagraphInTableCell as _convertParagraphInTableCell, createEmptyTableCell as _createEmptyTableCell, createFilledArray as _createFilledArray, cropTableToDimensions as _cropTableToDimensions, downcastTable as _downcastTable, downcastTableAttribute as _downcastTableAttribute, downcastAttributeToStyle as _downcastTableAttributeToStyle, downcastCell as _downcastTableCell, downcastTableResizedClass as _downcastTableResizedClass, downcastRow as _downcastTableRow, enableProperty$1 as _enableTableCellProperty, ensureParagraphInTableCell as _ensureParagraphInTableCell, fillToolbar$1 as _fillTableOrCellToolbar, getBalloonCellPositionData as _getBalloonTableCellPositionData, getBalloonTablePositionData as _getBalloonTablePositionData, getBorderStyleLabels$1 as _getBorderTableStyleLabels, getChangedResizedTables as _getChangedResizedTables, getDefaultValueAdjusted as _getDefaultTableValueAdjusted, getDomCellOuterWidth as _getDomTableCellOuterWidth, getElementWidthInPixels as _getElementWidthInPixels, getHorizontallyOverlappingCells as _getHorizontallyOverlappingTableCells, getLabeledColorInputCreator$1 as _getLabeledTableColorInputCreator, getLocalizedColorErrorText as _getLocalizedTableColorErrorText, getLocalizedLengthErrorText as _getLocalizedTableLengthErrorText, getNormalizedDefaultProperties as _getNormalizedDefaultTableBaseProperties, getNormalizedDefaultCellProperties as _getNormalizedDefaultTableCellProperties, getNormalizedDefaultTableProperties as _getNormalizedDefaultTableProperties, getSelectedTableWidget as _getSelectedTableWidget, getSelectionAffectedTable as _getSelectionAffectedTable, getSelectionAffectedTableWidget as _getSelectionAffectedTableWidget, getSingleValue as _getTableBorderBoxSingleValue, getCaptionFromTableModelElement as _getTableCaptionFromModelElement, getCaptionFromModelSelection as _getTableCaptionFromModelSelection, getColumnEdgesIndexes as _getTableColumnEdgesIndexes, getTableColumnElements as _getTableColumnElements, getColumnGroupElement as _getTableColumnGroupElement, getColumnMinWidthAsPercentage as _getTableColumnMinWidthAsPercentage, getTableColumnsWidths as _getTableColumnsWidths, getBorderStyleDefinitions$1 as _getTableOrCellBorderStyleDefinitions, getTableWidgetAncestor as _getTableWidgetAncestor, getTableWidthInPixels as _getTableWidthInPixels, getVerticallyOverlappingCells as _getVerticallyOverlappingTableCells, injectTableCaptionPostFixer as _injectTableCaptionPostFixer, injectTableCellParagraphPostFixer as _injectTableCellParagraphPostFixer, injectTableLayoutPostFixer as _injectTableLayoutPostFixer, isSingleParagraphWithoutAttributes as _isSingleTableParagraphWithoutAttributes, isHeadingColumnCell as _isTableHeadingColumnCell, isTable as _isTableModelElement, lengthFieldValidator as _lengthTableFieldValidator, lineWidthFieldValidator as _lineWidthTableFieldValidator, matchTableCaptionViewElement as _matchTableCaptionViewElement, normalizeColumnWidths as _normalizeTableColumnWidths, removeEmptyColumns as _removeEmptyTableColumns, removeEmptyRows as _removeEmptyTableRows, removeEmptyRowsColumns as _removeEmptyTableRowsColumns, repositionContextualBalloon as _repositionTableContextualBalloon, skipEmptyTableRow as _skipEmptyTableRow, splitHorizontally as _splitTableCellHorizontally, splitVertically as _splitTableCellVertically, sumArray as _sumArray, tableCellRefreshHandler as _tableCellRefreshHandler, tableHeadingsRefreshHandler as _tableHeadingsRefreshHandler, toPrecision as _toPrecision, translateColSpanAttribute as _translateTableColspanAttribute, trimTableCellIfNeeded as _trimTableCellIfNeeded, upcastStyleToAttribute as _upcastNormalizedTableStyleToAttribute, upcastTable as _upcastTable, upcastBorderStyles as _upcastTableBorderStyles, upcastColgroupElement as _upcastTableColgroupElement, upcastTableFigure as _upcastTableFigure, updateColumnElements as _updateTableColumnElements, updateNumericAttribute as _updateTableNumericAttribute };
+export { InsertColumnCommand, InsertRowCommand, InsertTableCommand, InsertTableLayoutCommand, MergeCellCommand, MergeCellsCommand, PlainTableOutput, RemoveColumnCommand, RemoveRowCommand, SelectColumnCommand, SelectRowCommand, SetHeaderColumnCommand, SetHeaderRowCommand, SplitCellCommand, Table, TableAlignmentCommand, TableBackgroundColorCommand, TableBorderColorCommand, TableBorderStyleCommand, TableBorderWidthCommand, TableCaption, TableCaptionEditing, TableCaptionUI, TableCellBackgroundColorCommand, TableCellBorderColorCommand, TableCellBorderStyleCommand, TableCellBorderWidthCommand, TableCellHeightCommand, TableCellHorizontalAlignmentCommand, TableCellPaddingCommand, TableCellProperties, TableCellPropertiesEditing, TableCellPropertiesUI, TableCellPropertiesUIExperimental, TableCellPropertiesView, TableCellPropertiesViewExperimental, TableCellPropertyCommand, TableCellTypeCommand, TableCellVerticalAlignmentCommand, TableCellWidthCommand, TableCellWidthEditing, TableClipboard, TableColumnResize, TableColumnResizeEditing, TableEditing, TableHeightCommand, TableKeyboard, TableLayout, TableLayoutEditing, TableLayoutUI, TableMouse, TableProperties, TablePropertiesEditing, TablePropertiesUI, TablePropertiesUIExperimental, TablePropertiesView, TablePropertiesViewExperimental, TablePropertyCommand, TableSelection, TableToolbar, TableTypeCommand, TableUI, TableUtils, TableWalker, TableWidthCommand, TableWidthsCommand, ToggleTableCaptionCommand, InsertTableView as _InsertTableView, COLUMN_MIN_WIDTH_AS_PERCENTAGE as _TABLE_COLUMN_MIN_WIDTH_AS_PERCENTAGE, COLUMN_MIN_WIDTH_IN_PIXELS as _TABLE_COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD as _TABLE_COLUMN_RESIZE_DISTANCE_THRESHOLD, COLUMN_WIDTH_PRECISION as _TABLE_COLUMN_WIDTH_PRECISION, defaultColors as _TABLE_DEFAULT_COLORS, ColorInputView as _TableColorInputView, MouseEventsObserver as _TableMouseEventsObserver, addDefaultUnitToNumericValue as _addDefaultUnitToNumericValue, adjustLastColumnIndex as _adjustLastTableColumnIndex, adjustLastRowIndex as _adjustLastTableRowIndex, clamp as _clamp, colorFieldValidator as _colorTableFieldValidator, convertParagraphInTableCell as _convertParagraphInTableCell, createEmptyTableCell as _createEmptyTableCell, createFilledArray as _createFilledArray, cropTableToDimensions as _cropTableToDimensions, downcastTable as _downcastTable, downcastTableAttribute as _downcastTableAttribute, downcastAttributeToStyle as _downcastTableAttributeToStyle, downcastCell as _downcastTableCell, downcastTableResizedClass as _downcastTableResizedClass, downcastRow as _downcastTableRow, enableProperty$1 as _enableTableCellProperty, ensureParagraphInTableCell as _ensureParagraphInTableCell, fillToolbar$1 as _fillTableOrCellToolbar, getBalloonCellPositionData as _getBalloonTableCellPositionData, getBalloonTablePositionData as _getBalloonTablePositionData, getBorderStyleLabels$1 as _getBorderTableStyleLabels, getChangedResizedTables as _getChangedResizedTables, getDefaultValueAdjusted as _getDefaultTableValueAdjusted, getDomCellOuterWidth as _getDomTableCellOuterWidth, getElementWidthInPixels as _getElementWidthInPixels, getHorizontallyOverlappingCells as _getHorizontallyOverlappingTableCells, getLabeledColorInputCreator$1 as _getLabeledTableColorInputCreator, getLocalizedColorErrorText as _getLocalizedTableColorErrorText, getLocalizedLengthErrorText as _getLocalizedTableLengthErrorText, getNormalizedDefaultProperties as _getNormalizedDefaultTableBaseProperties, getNormalizedDefaultCellProperties as _getNormalizedDefaultTableCellProperties, getNormalizedDefaultTableProperties as _getNormalizedDefaultTableProperties, getSelectedTableWidget as _getSelectedTableWidget, getSelectionAffectedTable as _getSelectionAffectedTable, getSelectionAffectedTableWidget as _getSelectionAffectedTableWidget, getSingleValue as _getTableBorderBoxSingleValue, getCaptionFromTableModelElement as _getTableCaptionFromModelElement, getCaptionFromModelSelection as _getTableCaptionFromModelSelection, getColumnEdgesIndexes as _getTableColumnEdgesIndexes, getTableColumnElements as _getTableColumnElements, getColumnGroupElement as _getTableColumnGroupElement, getColumnMinWidthAsPercentage as _getTableColumnMinWidthAsPercentage, getTableColumnsWidths as _getTableColumnsWidths, getBorderStyleDefinitions$1 as _getTableOrCellBorderStyleDefinitions, getTableWidgetAncestor as _getTableWidgetAncestor, getTableWidthInPixels as _getTableWidthInPixels, getVerticallyOverlappingCells as _getVerticallyOverlappingTableCells, injectTableCaptionPostFixer as _injectTableCaptionPostFixer, injectTableCellParagraphPostFixer as _injectTableCellParagraphPostFixer, injectTableLayoutPostFixer as _injectTableLayoutPostFixer, isSingleParagraphWithoutAttributes as _isSingleTableParagraphWithoutAttributes, isHeadingColumnCell as _isTableHeadingColumnCell, isTable as _isTableModelElement, lengthFieldValidator as _lengthTableFieldValidator, lineWidthFieldValidator as _lineWidthTableFieldValidator, matchTableCaptionViewElement as _matchTableCaptionViewElement, normalizeColumnWidths as _normalizeTableColumnWidths, removeEmptyColumns as _removeEmptyTableColumns, removeEmptyRows as _removeEmptyTableRows, removeEmptyRowsColumns as _removeEmptyTableRowsColumns, repositionContextualBalloon as _repositionTableContextualBalloon, skipEmptyTableRow as _skipEmptyTableRow, splitHorizontally as _splitTableCellHorizontally, splitVertically as _splitTableCellVertically, sumArray as _sumArray, tableCellRefreshHandler as _tableCellRefreshHandler, tableHeadingsRefreshHandler as _tableHeadingsRefreshHandler, toPrecision as _toPrecision, translateColSpanAttribute as _translateTableColspanAttribute, trimTableCellIfNeeded as _trimTableCellIfNeeded, upcastStyleToAttribute as _upcastNormalizedTableStyleToAttribute, upcastTable as _upcastTable, upcastBorderStyles as _upcastTableBorderStyles, upcastColgroupElement as _upcastTableColgroupElement, upcastTableFigure as _upcastTableFigure, updateColumnElements as _updateTableColumnElements, updateNumericAttribute as _updateTableNumericAttribute };
 //# sourceMappingURL=index.js.map