handsontable 0.0.0-next-9a52a6a-20241128 → 0.0.0-next-b3759c7-20241203

package/3rdparty/walkontable/src/utils/stylesHandler.mjs

@@ -0,0 +1,291 @@
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+import { addClass, hasClass, removeClass } from "../../../../helpers/dom/element.mjs";
+import { warn } from "../../../../helpers/console.mjs";
+const CLASSIC_THEME_DEFAULT_HEIGHT = 23;
+
+/**
+ * Handles the theme-related style operations.
+ */
+var _themeName = /*#__PURE__*/new WeakMap();
+var _rootElement = /*#__PURE__*/new WeakMap();
+var _rootComputedStyle = /*#__PURE__*/new WeakMap();
+var _rootDocument = /*#__PURE__*/new WeakMap();
+var _isClassicTheme = /*#__PURE__*/new WeakMap();
+var _cssVars = /*#__PURE__*/new WeakMap();
+var _computedStyles = /*#__PURE__*/new WeakMap();
+var _StylesHandler_brand = /*#__PURE__*/new WeakSet();
+export class StylesHandler {
+  /**
+   * Initializes a new instance of the `StylesHandler` class.
+   *
+   * @param {object} domBindings - The DOM bindings for the instance.
+   */
+  constructor(domBindings) {
+    /**
+     * Calculates the row height based on the current theme and CSS variables.
+     *
+     * @returns {number|null} The calculated row height, or `null` if any required CSS variable is not found.
+     */
+    _classPrivateMethodInitSpec(this, _StylesHandler_brand);
+    /**
+     * The name of the theme.
+     *
+     * @type {string|undefined}
+     */
+    _classPrivateFieldInitSpec(this, _themeName, void 0);
+    /**
+     * The instance's root element.
+     *
+     * @type {HTMLElement}
+     */
+    _classPrivateFieldInitSpec(this, _rootElement, void 0);
+    /**
+     * The computed style of the root element.
+     *
+     * @type {CSSStyleDeclaration}
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _rootComputedStyle, void 0);
+    /**
+     * The root document of the instance.
+     *
+     * @type {Document}
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _rootDocument, void 0);
+    /**
+     * `true` if the classic theme is enabled, `false` otherwise.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isClassicTheme, true);
+    /**
+     * An object to store CSS variable values.
+     *
+     * @type {object}
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _cssVars, {});
+    /**
+     * Stores the computed styles for various elements.
+     *
+     * @type {object} - An object containing the computed styles if a nested structore of `element: { [element type]: {property: value} }`.
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _computedStyles, {});
+    _classPrivateFieldSet(_rootElement, this, domBindings.rootTable.parentElement.parentElement);
+    _classPrivateFieldSet(_rootDocument, this, domBindings.rootDocument);
+  }
+
+  /**
+   * Gets the value indicating whether the classic theme is enabled.
+   *
+   * @returns {boolean} `true` if the classic theme is enabled, `false` otherwise.
+   */
+  isClassicTheme() {
+    return _classPrivateFieldGet(_isClassicTheme, this);
+  }
+
+  /**
+   * Retrieves the value of a specified CSS variable.
+   *
+   * @param {string} variableName - The name of the CSS variable to retrieve.
+   * @returns {number|null|undefined} The value of the specified CSS variable, or `undefined` if not found.
+   */
+  getCSSVariableValue(variableName) {
+    var _assertClassBrand$cal;
+    if (_classPrivateFieldGet(_isClassicTheme, this)) {
+      return null;
+    }
+    if (_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`]) {
+      return _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`];
+    }
+    const acquiredValue = (_assertClassBrand$cal = _assertClassBrand(_StylesHandler_brand, this, _getParsedNumericCSSValue).call(this, `--ht-${variableName}`)) !== null && _assertClassBrand$cal !== void 0 ? _assertClassBrand$cal : _assertClassBrand(_StylesHandler_brand, this, _getCSSValue).call(this, `--ht-${variableName}`);
+    if (acquiredValue !== null) {
+      _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`] = acquiredValue;
+      return acquiredValue;
+    }
+  }
+
+  /**
+   * Retrieves the computed style value for a specified CSS property of a `td` element.
+   *
+   * @param {string} cssProperty - The CSS property to retrieve the value for.
+   * @returns {number|string|undefined} The value of the specified CSS property, or `undefined` if not found.
+   */
+  getStyleForTD(cssProperty) {
+    var _classPrivateFieldGet2;
+    return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.td[cssProperty];
+  }
+
+  /**
+   * Calculates the row height based on the current theme and CSS variables.
+   *
+   * @returns {number} The calculated row height.
+   */
+  getDefaultRowHeight() {
+    if (_classPrivateFieldGet(_isClassicTheme, this)) {
+      return CLASSIC_THEME_DEFAULT_HEIGHT;
+    }
+    const calculatedRowHeight = _assertClassBrand(_StylesHandler_brand, this, _calculateRowHeight).call(this);
+    if (!calculatedRowHeight && hasClass(_classPrivateFieldGet(_rootElement, this), 'ht-wrapper')) {
+      warn(`The "${_classPrivateFieldGet(_themeName, this)}" theme is enabled, but its stylesheets are missing or not imported correctly. \
+Import the correct CSS files in order to use that theme.`);
+      _classPrivateFieldSet(_isClassicTheme, this, true);
+      this.useTheme();
+      return CLASSIC_THEME_DEFAULT_HEIGHT;
+    }
+    return calculatedRowHeight;
+  }
+
+  /**
+   * Checks if the cells are using the `border-box` box-sizing model.
+   *
+   * @returns {boolean}
+   */
+  areCellsBorderBox() {
+    return this.getStyleForTD('box-sizing') === 'border-box';
+  }
+
+  /**
+   * Applies the specified theme to the instance.
+   *
+   * @param {string|undefined|boolean} [themeName] - The name of the theme to apply.
+   */
+  useTheme(themeName) {
+    if (!themeName) {
+      _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
+      _classPrivateFieldSet(_isClassicTheme, this, true);
+      _classPrivateFieldSet(_themeName, this, themeName || undefined);
+      return;
+    }
+    if (themeName && themeName !== _classPrivateFieldGet(_themeName, this)) {
+      if (_classPrivateFieldGet(_themeName, this)) {
+        _assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
+      }
+      _classPrivateFieldSet(_themeName, this, themeName);
+      _classPrivateFieldSet(_isClassicTheme, this, false);
+      _assertClassBrand(_StylesHandler_brand, this, _applyClassNames).call(this);
+      _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
+    }
+  }
+
+  /**
+   * Gets the name of the theme.
+   *
+   * @returns {string|undefined}
+   */
+  getThemeName() {
+    return _classPrivateFieldGet(_themeName, this);
+  }
+
+  /**
+   * Removes the theme-related class names from the root element.
+   */
+  removeClassNames() {
+    if (hasClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this))) {
+      removeClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
+    }
+  }
+}
+function _calculateRowHeight() {
+  const lineHeightVarValue = this.getCSSVariableValue('line-height');
+  const verticalPaddingVarValue = this.getCSSVariableValue('cell-vertical-padding');
+  const bottomBorderWidth = Math.ceil(parseFloat(this.getStyleForTD('border-bottom-width')));
+  if (lineHeightVarValue === null || verticalPaddingVarValue === null || isNaN(bottomBorderWidth)) {
+    return null;
+  }
+  return lineHeightVarValue + 2 * verticalPaddingVarValue + bottomBorderWidth;
+}
+/**
+ * Applies the necessary class names to the root element.
+ */
+function _applyClassNames() {
+  removeClass(_classPrivateFieldGet(_rootElement, this), /ht-theme-.*/g);
+  addClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
+}
+/**
+ * Caches the computed style values for the root element and `td` element.
+ */
+function _cacheStylesheetValues() {
+  if (!this.isClassicTheme()) {
+    _classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
+  }
+  const stylesForTD = _assertClassBrand(_StylesHandler_brand, this, _getStylesForTD).call(this, ['box-sizing', 'border-bottom-width']);
+  _classPrivateFieldGet(_computedStyles, this).td = {
+    ..._classPrivateFieldGet(_computedStyles, this).td,
+    ...{
+      'box-sizing': stylesForTD['box-sizing'],
+      'border-bottom-width': stylesForTD['border-bottom-width']
+    }
+  };
+}
+/**
+ * Retrieves and processes the computed styles for a `td` element.
+ *
+ * This method creates a temporary table structure, appends it to the root element,
+ * retrieves the computed styles for the `td` element, and then removes the table
+ * from the DOM. The computed styles are passed to the provided callback function.
+ *
+ * @param {Array} cssProps - An array of CSS properties to retrieve.
+ * @returns {object} An object containing the requested computed styles for the `td` element.
+ * @private
+ */
+function _getStylesForTD(cssProps) {
+  const rootDocument = _classPrivateFieldGet(_rootDocument, this);
+  const rootElement = _classPrivateFieldGet(_rootElement, this);
+  const table = rootDocument.createElement('table');
+  const tbody = rootDocument.createElement('tbody');
+  const tr = rootDocument.createElement('tr');
+  // This needs not to be the first row in order to get "regular" vaules.
+  const tr2 = rootDocument.createElement('tr');
+  const td = rootDocument.createElement('td');
+  tr2.appendChild(td);
+  tbody.appendChild(tr);
+  tbody.appendChild(tr2);
+  table.appendChild(tbody);
+  rootElement.appendChild(table);
+  const computedStyle = getComputedStyle(td);
+  const returnObject = {};
+  cssProps.forEach(prop => {
+    returnObject[prop] = computedStyle.getPropertyValue(prop);
+  });
+  rootElement.removeChild(table);
+  return returnObject;
+}
+/**
+ * Parses the numeric value of a specified CSS property from the root element's computed style.
+ *
+ * @param {string} property - The CSS property to retrieve and parse.
+ * @returns {number|null} The parsed value of the CSS property or `null` if non-existent.
+ */
+function _getParsedNumericCSSValue(property) {
+  const parsedValue = Math.ceil(parseFloat(_assertClassBrand(_StylesHandler_brand, this, _getCSSValue).call(this, property)));
+  return Number.isNaN(parsedValue) ? null : parsedValue;
+}
+/**
+ * Retrieves the non-numeric value of a specified CSS property from the root element's computed style.
+ *
+ * @param {string} property - The CSS property to retrieve.
+ * @returns {string|null} The value of the specified CSS property or `null` if non-existent.
+ */
+function _getCSSValue(property) {
+  const acquiredValue = _classPrivateFieldGet(_rootComputedStyle, this).getPropertyValue(property);
+  return acquiredValue === '' ? null : acquiredValue;
+}
+/**
+ * Clears the cached values.
+ */
+function _clearCachedValues() {
+  _classPrivateFieldSet(_computedStyles, this, {});
+  _classPrivateFieldSet(_cssVars, this, {});
+  _classPrivateFieldSet(_isClassicTheme, this, true);
+}

package/3rdparty/walkontable/src/viewport.js

@@ -264,6 +264,7 @@ class Viewport {
       viewportHeight: height,
       scrollOffset: pos,
       totalRows: wtSettings.getSetting('totalRows'),
+      defaultRowHeight: this.instance.stylesHandler.getDefaultRowHeight(),
       rowHeightFn: sourceRow => wtTable.getRowHeight(sourceRow),
       overrideFn: wtSettings.getSettingPure('viewportRowCalculatorOverride'),
       horizontalScrollbarHeight: scrollbarHeight

package/3rdparty/walkontable/src/viewport.mjs

@@ -261,6 +261,7 @@ class Viewport {
       viewportHeight: height,
       scrollOffset: pos,
       totalRows: wtSettings.getSetting('totalRows'),
+      defaultRowHeight: this.instance.stylesHandler.getDefaultRowHeight(),
       rowHeightFn: sourceRow => wtTable.getRowHeight(sourceRow),
       overrideFn: wtSettings.getSettingPure('viewportRowCalculatorOverride'),
       horizontalScrollbarHeight: scrollbarHeight

package/base.js

@@ -45,8 +45,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "28/11/2024 10:03:40";
-Handsontable.version = "0.0.0-next-9a52a6a-20241128";
+Handsontable.buildDate = "03/12/2024 12:19:25";
+Handsontable.version = "0.0.0-next-b3759c7-20241203";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,

package/base.mjs

@@ -35,8 +35,8 @@ Handsontable.hooks = Hooks.getSingleton();
 Handsontable.CellCoords = CellCoords;
 Handsontable.CellRange = CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "28/11/2024 10:03:46";
-Handsontable.version = "0.0.0-next-9a52a6a-20241128";
+Handsontable.buildDate = "03/12/2024 12:19:30";
+Handsontable.version = "0.0.0-next-b3759c7-20241203";
 Handsontable.languages = {
   dictionaryKeys,
   getLanguageDictionary,

package/core/hooks/constants.js

@@ -872,6 +872,15 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
  * @param {string} [source] String that identifies source of hook call.
  */
 'afterSetSourceDataAtCell',
+/**
+ * Fired after a theme is enabled, changed, or disabled.
+ *
+ * @since 15.0.0
+ * @event Hooks#afterSetTheme
+ * @param {string|boolean|undefined} themeName The theme name.
+ * @param {boolean} firstRun `true` if it's the initial setting of the theme, `false` otherwise.
+ */
+'afterSetTheme',
 /**
  * Fired after calling the [`updateSettings`](@/api/core.md#updatesettings) method.
  *

package/core/hooks/constants.mjs

@@ -869,6 +869,15 @@ export const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-com
  * @param {string} [source] String that identifies source of hook call.
  */
 'afterSetSourceDataAtCell',
+/**
+ * Fired after a theme is enabled, changed, or disabled.
+ *
+ * @since 15.0.0
+ * @event Hooks#afterSetTheme
+ * @param {string|boolean|undefined} themeName The theme name.
+ * @param {boolean} firstRun `true` if it's the initial setting of the theme, `false` otherwise.
+ */
+'afterSetTheme',
 /**
  * Fired after calling the [`updateSettings`](@/api/core.md#updatesettings) method.
  *

package/core/hooks/index.d.ts

@@ -134,6 +134,7 @@ export interface Events {
   afterSetDataAtCell?: (changes: CellChange[], source?: ChangeSource) => void;
   afterSetDataAtRowProp?: (changes: CellChange[], source?: ChangeSource) => void;
   afterSetSourceDataAtCell?: (changes: CellChange[], source?: ChangeSource) => void;
+  afterSetTheme?: (themeName: string|boolean|undefined, firstRun: boolean) => void;
   afterSheetAdded?: (addedSheetDisplayName: string) => void;
   afterSheetRemoved?: (removedSheetDisplayName: string, changes: ExportedChange[]) => void;
   afterSheetRenamed?: (oldDisplayName: string, newDisplayName: string) => void;

package/core.d.ts

@@ -73,6 +73,7 @@ export default class Core {
   getCoords(element: Element | null): CellCoords;
   getCopyableData(row: number, column: number): string;
   getCopyableText(startRow: number, startColumn: number, endRow: number, endColumn: number): string;
+  getCurrentThemeName(): string | undefined;
   getData(row?: number, column?: number, row2?: number, column2?: number): CellValue[];
   getDataAtCell(row: number, column: number): CellValue;
   getDataAtCol(column: number): CellValue[];
@@ -179,6 +180,7 @@ export default class Core {
   unlisten(): void;
   updateData(data: CellValue[][] | RowObject[], source?: string): void;
   updateSettings(settings: GridSettings, init?: boolean): void;
+  useTheme(themeName: string|boolean|undefined): void;
   validateCell(value: any, cellProperties: CellProperties, callback: (valid: boolean) => void, source: string): void;
   validateCells(callback?: (valid: boolean) => void): void;
   validateColumns(columns: number[], callback?: (valid: boolean) => void): void;

package/core.js

@@ -47,6 +47,7 @@ var _index3 = require("./core/index");
 var _uniqueMap = require("./utils/dataStructures/uniqueMap");
 var _shortcuts = require("./shortcuts");
 var _shortcutContexts = require("./shortcutContexts");
+var _themes = require("./helpers/themes");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 let activeGuid = null;
 
@@ -234,6 +235,7 @@ function Core(rootElement, userSettings) {
   rootElement.insertBefore(this.container, rootElement.firstChild);
   if ((0, _rootInstance.isRootInstance)(this)) {
     (0, _mixed._injectProductInfo)(userSettings.licenseKey, rootElement);
+    (0, _element.addClass)(rootElement, 'ht-wrapper');
   }
   this.guid = `ht_${(0, _string.randomString)()}`; // this is the namespace for global events
 
@@ -946,7 +948,9 @@ function Core(rootElement, userSettings) {
                 // when 'value' is array and 'orgValue' is null, set 'orgValue' to
                 // an empty array so that the null value can be compared to 'value'
                 // as an empty value for the array context
-                if (Array.isArray(value) && orgValue === null) orgValue = [];
+                if (Array.isArray(value) && orgValue === null) {
+                  orgValue = [];
+                }
                 if (orgValue === null || typeof orgValue !== 'object') {
                   pushData = false;
                 } else {
@@ -1034,6 +1038,13 @@ function Core(rootElement, userSettings) {
     }
     this.updateSettings(tableMeta, true);
     this.view = new _tableView.default(this);
+    const themeName = tableMeta.themeName || (0, _themes.getThemeClassName)(instance.rootElement);
+
+    // Use the theme defined as a root element class or in the settings (in that order).
+    instance.useTheme(themeName);
+
+    // Add the theme class name to the license info element.
+    instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
     editorManager = _editorManager.default.getInstance(instance, tableMeta, selection);
     viewportScroller = (0, _index3.createViewportScroller)(instance);
     focusManager = new _focusManager.FocusManager(instance);
@@ -2387,6 +2398,19 @@ function Core(rootElement, userSettings) {
       if (instance.view) {
         instance.view._wt.wtViewport.resetHasOversizedColumnHeadersMarked();
         instance.view._wt.exportSettingsAsClassNames();
+        const currentThemeName = instance.getCurrentThemeName();
+        const themeNameOptionExists = (0, _object.hasOwnProperty)(settings, 'themeName');
+        if (currentThemeName && themeNameOptionExists) {
+          instance.view.getStylesHandler().removeClassNames();
+          instance.view.removeClassNameFromLicenseElement(currentThemeName);
+        }
+        const themeName = themeNameOptionExists && settings.themeName || (0, _themes.getThemeClassName)(instance.rootElement);
+
+        // Use the theme defined as a root element class or in the settings (in that order).
+        instance.useTheme(themeName);
+
+        // Add the theme class name to the license info element.
+        instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
       }
       instance.runHooks('afterUpdateSettings', settings);
     }
@@ -4576,6 +4600,31 @@ function Core(rootElement, userSettings) {
   };
   this.timeouts = [];
 
+  /**
+   * Use the theme specified by the provided name.
+   *
+   * @memberof Core#
+   * @function useTheme
+   * @since 15.0.0
+   * @param {string|boolean|undefined} themeName The name of the theme to use.
+   */
+  this.useTheme = themeName => {
+    this.view.getStylesHandler().useTheme(themeName);
+    this.runHooks('afterSetTheme', themeName, !!firstRun);
+  };
+
+  /**
+   * Gets the name of the currently used theme.
+   *
+   * @memberof Core#
+   * @function getCurrentThemeName
+   * @since 15.0.0
+   * @returns {string|undefined} The name of the currently used theme.
+   */
+  this.getCurrentThemeName = () => {
+    return this.view.getStylesHandler().getThemeName();
+  };
+
   /**
    * Sets timeout. Purpose of this method is to clear all known timeouts when `destroy` method is called.
    *

package/core.mjs

@@ -43,6 +43,7 @@ import { installFocusCatcher, createViewportScroller } from "./core/index.mjs";
 import { createUniqueMap } from "./utils/dataStructures/uniqueMap.mjs";
 import { createShortcutManager } from "./shortcuts/index.mjs";
 import { registerAllShortcutContexts } from "./shortcutContexts/index.mjs";
+import { getThemeClassName } from "./helpers/themes.mjs";
 let activeGuid = null;
 
 /**
@@ -229,6 +230,7 @@ export default function Core(rootElement, userSettings) {
   rootElement.insertBefore(this.container, rootElement.firstChild);
   if (isRootInstance(this)) {
     _injectProductInfo(userSettings.licenseKey, rootElement);
+    addClass(rootElement, 'ht-wrapper');
   }
   this.guid = `ht_${randomString()}`; // this is the namespace for global events
 
@@ -941,7 +943,9 @@ export default function Core(rootElement, userSettings) {
                 // when 'value' is array and 'orgValue' is null, set 'orgValue' to
                 // an empty array so that the null value can be compared to 'value'
                 // as an empty value for the array context
-                if (Array.isArray(value) && orgValue === null) orgValue = [];
+                if (Array.isArray(value) && orgValue === null) {
+                  orgValue = [];
+                }
                 if (orgValue === null || typeof orgValue !== 'object') {
                   pushData = false;
                 } else {
@@ -1029,6 +1033,13 @@ export default function Core(rootElement, userSettings) {
     }
     this.updateSettings(tableMeta, true);
     this.view = new TableView(this);
+    const themeName = tableMeta.themeName || getThemeClassName(instance.rootElement);
+
+    // Use the theme defined as a root element class or in the settings (in that order).
+    instance.useTheme(themeName);
+
+    // Add the theme class name to the license info element.
+    instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
     editorManager = EditorManager.getInstance(instance, tableMeta, selection);
     viewportScroller = createViewportScroller(instance);
     focusManager = new FocusManager(instance);
@@ -2382,6 +2393,19 @@ export default function Core(rootElement, userSettings) {
       if (instance.view) {
         instance.view._wt.wtViewport.resetHasOversizedColumnHeadersMarked();
         instance.view._wt.exportSettingsAsClassNames();
+        const currentThemeName = instance.getCurrentThemeName();
+        const themeNameOptionExists = hasOwnProperty(settings, 'themeName');
+        if (currentThemeName && themeNameOptionExists) {
+          instance.view.getStylesHandler().removeClassNames();
+          instance.view.removeClassNameFromLicenseElement(currentThemeName);
+        }
+        const themeName = themeNameOptionExists && settings.themeName || getThemeClassName(instance.rootElement);
+
+        // Use the theme defined as a root element class or in the settings (in that order).
+        instance.useTheme(themeName);
+
+        // Add the theme class name to the license info element.
+        instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
       }
       instance.runHooks('afterUpdateSettings', settings);
     }
@@ -4571,6 +4595,31 @@ export default function Core(rootElement, userSettings) {
   };
   this.timeouts = [];
 
+  /**
+   * Use the theme specified by the provided name.
+   *
+   * @memberof Core#
+   * @function useTheme
+   * @since 15.0.0
+   * @param {string|boolean|undefined} themeName The name of the theme to use.
+   */
+  this.useTheme = themeName => {
+    this.view.getStylesHandler().useTheme(themeName);
+    this.runHooks('afterSetTheme', themeName, !!firstRun);
+  };
+
+  /**
+   * Gets the name of the currently used theme.
+   *
+   * @memberof Core#
+   * @function getCurrentThemeName
+   * @since 15.0.0
+   * @returns {string|undefined} The name of the currently used theme.
+   */
+  this.getCurrentThemeName = () => {
+    return this.view.getStylesHandler().getThemeName();
+  };
+
   /**
    * Sets timeout. Purpose of this method is to clear all known timeouts when `destroy` method is called.
    *

package/dataMap/metaManager/metaSchema.js

@@ -3842,8 +3842,8 @@ var _default = () => {
     /**
      * The `rowHeights` option sets rows' heights, in pixels.
      *
-     * In the rendering process, the default row height is 23 px (22 px + 1 px of the row's bottom border).
-     * You can change it to equal or greater than 23px, by setting the `rowHeights` option to one of the following:
+     * In the rendering process, the default row height is 23 px (in the classic theme: 22 px + 1 px of the row's bottom border) or whatever is defined in the used theme (based on the line height, vertical padding and cell borders).
+     * You can change it to equal or greater than the defautl value, by setting the `rowHeights` option to one of the following:
      *
      * | Setting     | Description                                                                                         | Example                                                      |
      * | ----------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
@@ -3875,7 +3875,7 @@ var _default = () => {
      * // set the first (by visual index) row's height to 100
      * // set the second (by visual index) row's height to 120
      * // set the third (by visual index) row's height to `undefined`
-     * // set any other row's height to the default 23px
+     * // set any other row's height to the default height value
      * rowHeights: [100, 120, undefined],
      *
      * // set each row's height individually, using a function
@@ -4313,6 +4313,26 @@ var _default = () => {
      * ```
      */
     tableClassName: undefined,
+    /**
+     * The `themeName` option allows enabling a theme by that name.
+     *
+     * If no `themeName` is provided, the table will use the classic theme (if the correct CSS files are imported).
+     *
+     * Read more:
+     * - [Themes](@/guides/styling/themes/themes.md)
+     *
+     * @memberof Options#
+     * @type {string|boolean|undefined}
+     * @default undefined
+     * @category Core
+     * @since 15.0.0
+     *
+     * @example
+     * ```js
+     * themeName: 'ht-theme-name',
+     * ```
+     */
+    themeName: undefined,
     /**
      * The `tabMoves` option configures the action of the <kbd>**Tab**</kbd> key.
      *

package/dataMap/metaManager/metaSchema.mjs

@@ -3839,8 +3839,8 @@ export default () => {
     /**
      * The `rowHeights` option sets rows' heights, in pixels.
      *
-     * In the rendering process, the default row height is 23 px (22 px + 1 px of the row's bottom border).
-     * You can change it to equal or greater than 23px, by setting the `rowHeights` option to one of the following:
+     * In the rendering process, the default row height is 23 px (in the classic theme: 22 px + 1 px of the row's bottom border) or whatever is defined in the used theme (based on the line height, vertical padding and cell borders).
+     * You can change it to equal or greater than the defautl value, by setting the `rowHeights` option to one of the following:
      *
      * | Setting     | Description                                                                                         | Example                                                      |
      * | ----------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
@@ -3872,7 +3872,7 @@ export default () => {
      * // set the first (by visual index) row's height to 100
      * // set the second (by visual index) row's height to 120
      * // set the third (by visual index) row's height to `undefined`
-     * // set any other row's height to the default 23px
+     * // set any other row's height to the default height value
      * rowHeights: [100, 120, undefined],
      *
      * // set each row's height individually, using a function
@@ -4310,6 +4310,26 @@ export default () => {
      * ```
      */
     tableClassName: undefined,
+    /**
+     * The `themeName` option allows enabling a theme by that name.
+     *
+     * If no `themeName` is provided, the table will use the classic theme (if the correct CSS files are imported).
+     *
+     * Read more:
+     * - [Themes](@/guides/styling/themes/themes.md)
+     *
+     * @memberof Options#
+     * @type {string|boolean|undefined}
+     * @default undefined
+     * @category Core
+     * @since 15.0.0
+     *
+     * @example
+     * ```js
+     * themeName: 'ht-theme-name',
+     * ```
+     */
+    themeName: undefined,
     /**
      * The `tabMoves` option configures the action of the <kbd>**Tab**</kbd> key.
      *