@ckeditor/ckeditor5-table 45.0.0-alpha.0 → 45.0.0-alpha.10

package/lang/translations/tr.po

@@ -269,28 +269,28 @@ msgstr "Tablo"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "Tablo düzeni ekle"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "Tablo düzeni"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "Düzen tablosu"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "İçerik tablosu"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "Tablo türünü seç"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "Tablo türü"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "Tablo türü seçenekleri"

package/lang/translations/uk.po

@@ -269,28 +269,28 @@ msgstr "Таблиця"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "Вставити формат таблиці"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "Формат таблиці"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "Формат таблиці"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "Вміст таблиці"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "Вибрати тип таблиці"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "Тип таблиці"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "Опції типу таблиці"

package/lang/translations/vi.po

@@ -269,28 +269,28 @@ msgstr "Bảng"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "Chèn bố cục bảng"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "Bố cục bảng"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "Bảng bố cục"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "Bảng nội dung"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "Chọn loại bảng"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "Loại bảng"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "Tùy chọn loại bảng"

package/lang/translations/zh-cn.po

@@ -269,28 +269,28 @@ msgstr "表格"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "插入表格布局"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "表格布局"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "布局表格"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "内容表格"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "选择表格类型"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "表格类型"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "表格类型选项"

package/lang/translations/zh.po

@@ -269,28 +269,28 @@ msgstr "表格"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "插入表格版面配置"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "表格版面配置"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "版面配置表格"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "內容表格"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "選擇表格類型"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "表格類型"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "表格類型選項"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "45.0.0-alpha.0",
+  "version": "45.0.0-alpha.10",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,14 +13,14 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "45.0.0-alpha.0",
-    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.0",
-    "@ckeditor/ckeditor5-core": "45.0.0-alpha.0",
-    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.0",
-    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.0",
-    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.0",
-    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.0",
-    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.0",
+    "ckeditor5": "45.0.0-alpha.10",
+    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.10",
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.10",
+    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.10",
+    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.10",
+    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.10",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.10",
+    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.10",
     "es-toolkit": "1.32.0"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/converters/tableproperties.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/converters/tableproperties
  */
-import type { Conversion, ViewElement } from 'ckeditor5/src/engine.js';
+import type { Conversion, UpcastConversionData, ViewElement } from 'ckeditor5/src/engine.js';
 /**
  * Conversion helper for upcasting attributes using normalized styles.
  *
@@ -52,3 +52,7 @@ export declare function downcastTableAttribute(conversion: Conversion, options:
     modelAttribute: string;
     styleName: string;
 }): void;
+/**
+ * Returns the default value for table or table cell property adjusted for layout tables.
+ */
+export declare function getDefaultValueAdjusted(defaultValue: string, layoutTableDefault: string, data: UpcastConversionData<ViewElement>): string;

package/src/converters/tableproperties.js

@@ -2,6 +2,7 @@
  * @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
  */
+import { first } from 'ckeditor5/src/utils.js';
 /**
  * Conversion helper for upcasting attributes using normalized styles.
  *
@@ -22,13 +23,14 @@ export function upcastStyleToAttribute(conversion, options) {
         },
         model: {
             key: modelAttribute,
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
                 if (!shouldUpcast(viewElement)) {
                     return;
                 }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const normalized = viewElement.getNormalizedStyle(styleName);
                 const value = reduceBoxSides ? reduceBoxSidesValue(normalized) : normalized;
-                if (defaultValue !== value) {
+                if (localDefaultValue !== value) {
                     return value;
                 }
             }
@@ -77,6 +79,15 @@ export function upcastBorderStyles(conversion, viewElementName, modelAttributes,
             return;
         }
         const modelElement = [...data.modelRange.getItems({ shallow: true })].pop();
+        const tableElement = modelElement.findAncestor('table', { includeSelf: true });
+        let localDefaultBorder = defaultBorder;
+        if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
+            localDefaultBorder = {
+                style: 'none',
+                color: '',
+                width: ''
+            };
+        }
         conversionApi.consumable.consume(data.viewItem, matcherPattern);
         const normalizedBorder = {
             style: data.viewItem.getNormalizedStyle('border-style'),
@@ -88,13 +99,13 @@ export function upcastBorderStyles(conversion, viewElementName, modelAttributes,
             color: reduceBoxSidesValue(normalizedBorder.color),
             width: reduceBoxSidesValue(normalizedBorder.width)
         };
-        if (reducedBorder.style !== defaultBorder.style) {
+        if (reducedBorder.style !== localDefaultBorder.style) {
             conversionApi.writer.setAttribute(modelAttributes.style, reducedBorder.style, modelElement);
         }
-        if (reducedBorder.color !== defaultBorder.color) {
+        if (reducedBorder.color !== localDefaultBorder.color) {
             conversionApi.writer.setAttribute(modelAttributes.color, reducedBorder.color, modelElement);
         }
-        if (reducedBorder.width !== defaultBorder.width) {
+        if (reducedBorder.width !== localDefaultBorder.width) {
             conversionApi.writer.setAttribute(modelAttributes.width, reducedBorder.width, modelElement);
         }
     }));
@@ -137,6 +148,17 @@ export function downcastTableAttribute(conversion, options) {
         }
     }));
 }
+/**
+ * Returns the default value for table or table cell property adjusted for layout tables.
+ */
+export function getDefaultValueAdjusted(defaultValue, layoutTableDefault, data) {
+    const modelElement = data.modelRange && first(data.modelRange.getItems({ shallow: true }));
+    const tableElement = modelElement && modelElement.is('element') && modelElement.findAncestor('table', { includeSelf: true });
+    if (tableElement && tableElement.getAttribute('tableType') === 'layout') {
+        return layoutTableDefault;
+    }
+    return defaultValue;
+}
 /**
  * Reduces the full top, right, bottom, left object to a single string if all sides are equal.
  * Returns original style otherwise.

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

@@ -19,8 +19,18 @@ export default class TableCellPropertyCommand extends Command {
     readonly attributeName: string;
     /**
      * The default value for the attribute.
+     *
+     * @readonly
+     */
+    protected _defaultValue: string | undefined;
+    /**
+     * The default value for the attribute for the content table.
+     */
+    private readonly _defaultContentTableValue;
+    /**
+     * The default value for the attribute for the layout table.
      */
-    protected readonly _defaultValue: string;
+    private readonly _defaultLayoutTableValue;
     /**
      * Creates a new `TableCellPropertyCommand` instance.
      *

package/src/tablecellproperties/commands/tablecellpropertycommand.js

@@ -6,6 +6,7 @@
  * @module table/tablecellproperties/commands/tablecellpropertycommand
  */
 import { Command } from 'ckeditor5/src/core.js';
+import { getSelectionAffectedTable } from '../../utils/common.js';
 /**
  * The table cell attribute command.
  *
@@ -18,8 +19,18 @@ export default class TableCellPropertyCommand extends Command {
     attributeName;
     /**
      * The default value for the attribute.
+     *
+     * @readonly
      */
     _defaultValue;
+    /**
+     * The default value for the attribute for the content table.
+     */
+    _defaultContentTableValue;
+    /**
+     * The default value for the attribute for the layout table.
+     */
+    _defaultLayoutTableValue;
     /**
      * Creates a new `TableCellPropertyCommand` instance.
      *
@@ -30,15 +41,34 @@ export default class TableCellPropertyCommand extends Command {
     constructor(editor, attributeName, defaultValue) {
         super(editor);
         this.attributeName = attributeName;
-        this._defaultValue = defaultValue;
+        this._defaultContentTableValue = defaultValue;
+        // Hardcoded defaults for layout table.
+        switch (attributeName) {
+            case 'tableCellBorderStyle':
+                this._defaultLayoutTableValue = 'none';
+                break;
+            case 'tableCellHorizontalAlignment':
+                this._defaultLayoutTableValue = 'left';
+                break;
+            case 'tableCellVerticalAlignment':
+                this._defaultLayoutTableValue = 'middle';
+                break;
+            default:
+                this._defaultLayoutTableValue = undefined;
+        }
     }
     /**
      * @inheritDoc
      */
     refresh() {
         const editor = this.editor;
+        const selection = editor.model.document.selection;
         const tableUtils = this.editor.plugins.get('TableUtils');
-        const selectedTableCells = tableUtils.getSelectionAffectedTableCells(editor.model.document.selection);
+        const selectedTableCells = tableUtils.getSelectionAffectedTableCells(selection);
+        const table = getSelectionAffectedTable(selection);
+        this._defaultValue = !table || table.getAttribute('tableType') !== 'layout' ?
+            this._defaultContentTableValue :
+            this._defaultLayoutTableValue;
         this.isEnabled = !!selectedTableCells.length;
         this.value = this._getSingleValue(selectedTableCells);
     }

package/src/tablecellproperties/tablecellpropertiesediting.js

@@ -7,7 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { addBorderRules, addPaddingRules, addBackgroundRules } from 'ckeditor5/src/engine.js';
-import { downcastAttributeToStyle, upcastBorderStyles } from './../converters/tableproperties.js';
+import { downcastAttributeToStyle, getDefaultValueAdjusted, upcastBorderStyles } from '../converters/tableproperties.js';
 import TableEditing from './../tableediting.js';
 import TableCellWidthEditing from '../tablecellwidth/tablecellwidthediting.js';
 import TableCellPaddingCommand from './commands/tablecellpaddingcommand.js';
@@ -166,9 +166,10 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableCellHorizontalAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getStyle('text-align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     })
@@ -182,9 +183,10 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableCellHorizontalAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getAttribute('align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     });
@@ -222,9 +224,10 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableCellVerticalAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const align = viewElement.getStyle('vertical-align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     })
@@ -238,9 +241,10 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableCellVerticalAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const valign = viewElement.getAttribute('valign');
-                return valign === defaultValue ? null : valign;
+                return valign === localDefaultValue ? null : valign;
             }
         }
     });

package/src/tablecellproperties/tablecellpropertiesui.d.ts

@@ -18,7 +18,11 @@ export default class TableCellPropertiesUI extends Plugin {
     /**
      * The default table cell properties.
      */
-    private _defaultTableCellProperties;
+    private _defaultContentTableCellProperties;
+    /**
+     * The default layout table cell properties.
+     */
+    private _defaultLayoutTableCellProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -27,6 +31,14 @@ export default class TableCellPropertiesUI extends Plugin {
      * The cell properties form view displayed inside the balloon.
      */
     view?: TableCellPropertiesView | null;
+    /**
+     * The cell properties form view displayed inside the balloon (content table).
+     */
+    private _viewWithContentTableDefaults?;
+    /**
+     * The cell properties form view displayed inside the balloon (layout table).
+     */
+    private _viewWithLayoutTableDefaults?;
     /**
      * The batch used to undo all changes made by the form (which are live, as the user types)
      * when "Cancel" was pressed. Each time the view is shown, a new batch is created.

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -11,9 +11,9 @@ import { ButtonView, clickOutsideHandler, ContextualBalloon, getLocalizedColorOp
 import TableCellPropertiesView from './ui/tablecellpropertiesview.js';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, defaultColors, lengthFieldValidator, lineWidthFieldValidator } from '../utils/ui/table-properties.js';
 import { debounce } from 'es-toolkit/compat';
-import { getTableWidgetAncestor } from '../utils/ui/widget.js';
+import { getSelectionAffectedTableWidget, getTableWidgetAncestor } from '../utils/ui/widget.js';
 import { getBalloonCellPositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
-import { getNormalizedDefaultCellProperties } from '../utils/table-properties.js';
+import { getNormalizedDefaultCellProperties, getNormalizedDefaultProperties } from '../utils/table-properties.js';
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
 const propertyToCommandMap = {
@@ -37,7 +37,11 @@ export default class TableCellPropertiesUI extends Plugin {
     /**
      * The default table cell properties.
      */
-    _defaultTableCellProperties;
+    _defaultContentTableCellProperties;
+    /**
+     * The default layout table cell properties.
+     */
+    _defaultLayoutTableCellProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -46,6 +50,14 @@ export default class TableCellPropertiesUI extends Plugin {
      * The cell properties form view displayed inside the balloon.
      */
     view;
+    /**
+     * The cell properties form view displayed inside the balloon (content table).
+     */
+    _viewWithContentTableDefaults;
+    /**
+     * The cell properties form view displayed inside the balloon (layout table).
+     */
+    _viewWithLayoutTableDefaults;
     /**
      * The batch used to undo all changes made by the form (which are live, as the user types)
      * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
@@ -90,12 +102,17 @@ export default class TableCellPropertiesUI extends Plugin {
     init() {
         const editor = this.editor;
         const t = editor.t;
-        this._defaultTableCellProperties = getNormalizedDefaultCellProperties(editor.config.get('table.tableCellProperties.defaultProperties'), {
+        this._defaultContentTableCellProperties = getNormalizedDefaultCellProperties(editor.config.get('table.tableCellProperties.defaultProperties'), {
             includeVerticalAlignmentProperty: true,
             includeHorizontalAlignmentProperty: true,
             includePaddingProperty: true,
             isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
         });
+        this._defaultLayoutTableCellProperties = getNormalizedDefaultProperties(undefined, {
+            includeVerticalAlignmentProperty: true,
+            includeHorizontalAlignmentProperty: true,
+            isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
+        });
         this._balloon = editor.plugins.get(ContextualBalloon);
         this.view = null;
         this._isReady = false;
@@ -129,7 +146,7 @@ export default class TableCellPropertiesUI extends Plugin {
      *
      * @returns The cell properties form view instance.
      */
-    _createPropertiesView() {
+    _createPropertiesView(defaultTableCellProperties) {
         const editor = this.editor;
         const config = editor.config.get('table.tableCellProperties');
         const borderColorsConfig = normalizeColorOptions(config.borderColors);
@@ -140,7 +157,7 @@ export default class TableCellPropertiesUI extends Plugin {
         const view = new TableCellPropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableCellProperties: this._defaultTableCellProperties,
+            defaultTableCellProperties,
             colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
@@ -229,7 +246,10 @@ export default class TableCellPropertiesUI extends Plugin {
         const borderStyleCommand = commands.get('tableCellBorderStyle');
         Object.entries(propertyToCommandMap)
             .map(([property, commandName]) => {
-            const defaultValue = this._defaultTableCellProperties[property] || '';
+            const propertyKey = property;
+            const defaultValue = this.view === this._viewWithContentTableDefaults ?
+                this._defaultContentTableCellProperties[propertyKey] || '' :
+                this._defaultLayoutTableCellProperties[propertyKey] || '';
             return [
                 property,
                 commands.get(commandName).value || defaultValue
@@ -253,9 +273,16 @@ export default class TableCellPropertiesUI extends Plugin {
      */
     _showView() {
         const editor = this.editor;
-        if (!this.view) {
-            this.view = this._createPropertiesView();
+        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
+        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
+        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
+        if (useDefaults && !this._viewWithContentTableDefaults) {
+            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableCellProperties);
+        }
+        else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
+            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableCellProperties);
         }
+        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
         this.listenTo(editor.ui, 'update', () => {
             this._updateView();
         });

package/src/tablecolumnresize/tablecolumnresizeediting.d.ts

@@ -104,6 +104,34 @@ export default class TableColumnResizeEditing extends Plugin {
      * Registers listeners to handle resizing process.
      */
     private _registerResizingListeners;
+    /**
+     * Calculate and set `top` and `bottom` styles to the column resizer element to fit the height of the table.
+     *
+     * @param viewResizer The column resizer element.
+     */
+    private _recalculateResizerElement;
+    /**
+     * Remove `top` and `bottom` styles of the column resizer element.
+     *
+     * @param viewResizer The column resizer element.
+     */
+    private _resetResizerStyles;
+    /**
+     * Handles the `mouseover` event on column resizer element.
+     * Recalculates the `top` and `bottom` styles of the column resizer element to fit the height of the table.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param domEventData The data related to the DOM event.
+     */
+    private _onMouseOverHandler;
+    /**
+     * Handles the `mouseout` event on column resizer element.
+     * When resizing is not active, it resets the `top` and `bottom` styles of the column resizer element.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param domEventData The data related to the DOM event.
+     */
+    private _onMouseOutHandler;
     /**
      * Handles the `mousedown` event on column resizer element:
      *  * calculates the initial column pixel widths,