handsontable 16.0.1 → 16.1.0-next-abd8f2e-20250904

package/dataMap/dataMap.js

@@ -12,6 +12,7 @@ var _object = require("../helpers/object");
 var _array = require("../helpers/array");
 var _number = require("../helpers/number");
 var _mixed = require("../helpers/mixed");
+var _valueAccessors = require("../utils/valueAccessors");
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -669,9 +670,18 @@ class DataMap {
     } else if (typeof prop === 'function') {
       value = prop(this.dataSource.slice(physicalRow, physicalRow + 1)[0]);
     }
+    const visualColumnIndex = this.propToCol(prop);
+    const physicalColumn = this.hot.toPhysicalColumn(visualColumnIndex);
+    if ((0, _number.isUnsignedNumber)(physicalRow) && (0, _number.isUnsignedNumber)(physicalColumn)) {
+      value = (0, _valueAccessors.getValueGetterValue)(value, this.metaManager.getCellMeta(physicalRow, physicalColumn, {
+        visualRow: row,
+        visualColumn: visualColumnIndex,
+        skipMetaExtension: true
+      }));
+    }
     if (this.hot.hasHook('modifyData')) {
       const valueHolder = (0, _object.createObjectPropListener)(value);
-      this.hot.runHooks('modifyData', row, this.propToCol(prop), valueHolder, 'get');
+      this.hot.runHooks('modifyData', row, visualColumnIndex, valueHolder, 'get');
       if (valueHolder.isTouched()) {
         value = valueHolder.value;
       }
@@ -682,7 +692,7 @@ class DataMap {
   /**
    * Returns single value from the data array (intended for clipboard copy to an external application).
    *
-   * @param {number} row Physical row index.
+   * @param {number} row Visual row index.
    * @param {number} prop The column property.
    * @returns {string}
    */
@@ -697,7 +707,7 @@ class DataMap {
    * Saves single value to the data array.
    *
    * @param {number} row Visual row index.
-   * @param {number} prop The column property.
+   * @param {number|string} prop The column property.
    * @param {string} value The value to set.
    */
   set(row, prop, value) {

package/dataMap/dataMap.mjs

@@ -10,8 +10,9 @@ import { stringify } from "../3rdparty/SheetClip/index.mjs";
 import { countFirstRowKeys } from "../helpers/data.mjs";
 import { createObjectPropListener, deepClone, deepExtend, deepObjectSize, duckSchema, hasOwnProperty, isObject, objectEach } from "../helpers/object.mjs";
 import { extendArray, to2dArray } from "../helpers/array.mjs";
-import { rangeEach } from "../helpers/number.mjs";
+import { rangeEach, isUnsignedNumber } from "../helpers/number.mjs";
 import { isDefined } from "../helpers/mixed.mjs";
+import { getValueGetterValue } from "../utils/valueAccessors.mjs";
 /*
 This class contains open-source contributions covered by the MIT license.
 
@@ -665,9 +666,18 @@ class DataMap {
     } else if (typeof prop === 'function') {
       value = prop(this.dataSource.slice(physicalRow, physicalRow + 1)[0]);
     }
+    const visualColumnIndex = this.propToCol(prop);
+    const physicalColumn = this.hot.toPhysicalColumn(visualColumnIndex);
+    if (isUnsignedNumber(physicalRow) && isUnsignedNumber(physicalColumn)) {
+      value = getValueGetterValue(value, this.metaManager.getCellMeta(physicalRow, physicalColumn, {
+        visualRow: row,
+        visualColumn: visualColumnIndex,
+        skipMetaExtension: true
+      }));
+    }
     if (this.hot.hasHook('modifyData')) {
       const valueHolder = createObjectPropListener(value);
-      this.hot.runHooks('modifyData', row, this.propToCol(prop), valueHolder, 'get');
+      this.hot.runHooks('modifyData', row, visualColumnIndex, valueHolder, 'get');
       if (valueHolder.isTouched()) {
         value = valueHolder.value;
       }
@@ -678,7 +688,7 @@ class DataMap {
   /**
    * Returns single value from the data array (intended for clipboard copy to an external application).
    *
-   * @param {number} row Physical row index.
+   * @param {number} row Visual row index.
    * @param {number} prop The column property.
    * @returns {string}
    */
@@ -693,7 +703,7 @@ class DataMap {
    * Saves single value to the data array.
    *
    * @param {number} row Visual row index.
-   * @param {number} prop The column property.
+   * @param {number|string} prop The column property.
    * @param {string} value The value to set.
    */
   set(row, prop, value) {

package/dataMap/dataSource.js

@@ -277,6 +277,22 @@ class DataSource {
     return result;
   }
 
+  /**
+   * Returns single value from the data array (intended for clipboard copy to an external application).
+   *
+   * @param {number} row Visual row index.
+   * @param {number} prop The column property.
+   * @since 16.1.0
+   * @returns {string}
+   */
+  getCopyable(row, prop) {
+    const visualColumn = this.propToCol(prop);
+    if (this.hot.getCellMeta(row, visualColumn).copyable) {
+      return this.getAtCell(this.hot.toPhysicalRow(row), visualColumn);
+    }
+    return '';
+  }
+
   /**
    * Count number of rows.
    *

package/dataMap/dataSource.mjs

@@ -274,6 +274,22 @@ class DataSource {
     return result;
   }
 
+  /**
+   * Returns single value from the data array (intended for clipboard copy to an external application).
+   *
+   * @param {number} row Visual row index.
+   * @param {number} prop The column property.
+   * @since 16.1.0
+   * @returns {string}
+   */
+  getCopyable(row, prop) {
+    const visualColumn = this.propToCol(prop);
+    if (this.hot.getCellMeta(row, visualColumn).copyable) {
+      return this.getAtCell(this.hot.toPhysicalRow(row), visualColumn);
+    }
+    return '';
+  }
+
   /**
    * Count number of rows.
    *

package/dataMap/metaManager/lazyFactoryMap.js

@@ -13,6 +13,7 @@ require("core-js/modules/es.set.union.v2.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 var _utils = require("./utils");
+var _number = require("../../helpers/number");
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -179,7 +180,7 @@ class LazyFactoryMap {
    * @returns {*}
    */
   obtain(key) {
-    (0, _utils.assert)(() => (0, _utils.isUnsignedNumber)(key), 'Expecting an unsigned number.');
+    (0, _utils.assert)(() => (0, _number.isUnsignedNumber)(key), 'Expecting an unsigned number.');
     const dataIndex = this._getStorageIndexByKey(key);
     let result;
     if (dataIndex >= 0) {
@@ -213,7 +214,7 @@ class LazyFactoryMap {
    */
   insert(key) {
     let amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-    (0, _utils.assert)(() => (0, _utils.isUnsignedNumber)(key) || (0, _utils.isNullish)(key), 'Expecting an unsigned number or null/undefined argument.');
+    (0, _utils.assert)(() => (0, _number.isUnsignedNumber)(key) || (0, _utils.isNullish)(key), 'Expecting an unsigned number or null/undefined argument.');
     const newIndexes = [];
     const dataLength = this.data.length;
     for (let i = 0; i < amount; i++) {
@@ -232,7 +233,7 @@ class LazyFactoryMap {
    */
   remove(key) {
     let amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-    (0, _utils.assert)(() => (0, _utils.isUnsignedNumber)(key) || (0, _utils.isNullish)(key), 'Expecting an unsigned number or null/undefined argument.');
+    (0, _utils.assert)(() => (0, _number.isUnsignedNumber)(key) || (0, _utils.isNullish)(key), 'Expecting an unsigned number or null/undefined argument.');
     const removed = this.index.splice((0, _utils.isNullish)(key) ? this.index.length - amount : key, amount);
     for (let i = 0; i < removed.length; i++) {
       const removedIndex = removed[i];

package/dataMap/metaManager/lazyFactoryMap.mjs

@@ -12,7 +12,8 @@ import "core-js/modules/esnext.iterator.filter.js";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { assert, isUnsignedNumber, isNullish } from "./utils.mjs";
+import { assert, isNullish } from "./utils.mjs";
+import { isUnsignedNumber } from "../../helpers/number.mjs";
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * @class LazyFactoryMap

package/dataMap/metaManager/metaLayers/cellMeta.js

@@ -3,10 +3,11 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
-var _object = require("../../../helpers/object");
 var _utils = require("../utils");
 var _lazyFactoryMap = _interopRequireDefault(require("../lazyFactoryMap"));
+var _object = require("../../../helpers/object");
 var _mixed = require("../../../helpers/mixed");
+var _number = require("../../../helpers/number");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -189,7 +190,7 @@ class CellMeta {
    * @returns {object[]}
    */
   getMetasAtRow(physicalRow) {
-    (0, _utils.assert)(() => (0, _utils.isUnsignedNumber)(physicalRow), 'Expecting an unsigned number.');
+    (0, _utils.assert)(() => (0, _number.isUnsignedNumber)(physicalRow), 'Expecting an unsigned number.');
     const rowsMeta = new Map(this.metas);
     return rowsMeta.has(physicalRow) ? Array.from(rowsMeta.get(physicalRow).values()) : [];
   }

package/dataMap/metaManager/metaLayers/cellMeta.mjs

@@ -3,10 +3,11 @@ import "core-js/modules/es.array.push.js";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { extend } from "../../../helpers/object.mjs";
-import { extendByMetaType, assert, isUnsignedNumber } from "../utils.mjs";
+import { extendByMetaType, assert } from "../utils.mjs";
 import LazyFactoryMap from "../lazyFactoryMap.mjs";
+import { extend } from "../../../helpers/object.mjs";
 import { isDefined } from "../../../helpers/mixed.mjs";
+import { isUnsignedNumber } from "../../../helpers/number.mjs";
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * @class CellMeta

package/dataMap/metaManager/metaSchema.js

@@ -1797,6 +1797,117 @@ var _default = () => {
      * ```
      */
     disableVisualSelection: false,
+    /**
+     * @description
+     * The `dialog` option configures the [`Dialog`](@/api/dialog.md) plugin.
+     *
+     * You can set the `dialog` option to one of the following:
+     *
+     * | Setting   | Description                                                                 |
+     * | --------- | --------------------------------------------------------------------------- |
+     * | `false`   | Disable the [`Dialog`](@/api/dialog.md) plugin                              |
+     * | `true`    | Enable the [`Dialog`](@/api/dialog.md) plugin with default options          |
+     *
+     * ##### dialog: Additional options
+     *
+     * | Option                   | Possible settings                                                                                                               | Description                             |
+     * | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------|
+     * | `content`                | A string, HTMLElement or DocumentFragment (default: `''`)                                                                       | The content of the dialog               |
+     * | `customClassName`        | A string (default: `''`)                                                                                                        | The custom class name of the dialog     |
+     * | `background`             | One of the options: `'solid'` or `'semi-transparent'` (default: `'solid'`)                                                      | The background of the dialog            |
+     * | `contentBackground`      | Boolean (default: `false`)                                                                                                      | Whether to show the content background  |
+     * | `animation`              | Boolean (default: `true`)                                                                                                       | Whether to show the animation           |
+     * | `closable`               | Boolean (default: `false`)                                                                                                      | Whether to make the dialog closable     |
+     * | `a11y`                   | Object with accessibility options (default: `{ role: 'dialog', ariaLabel: 'Dialog', ariaLabelledby: '', ariaDescribedby: '' }`) | Accessibility options for the dialog    |
+     *
+     * Read more:
+     * - [Plugins: `Dialog`](@/api/dialog.md)
+     *
+     * @since 16.1.0
+     * @memberof Options#
+     * @type {boolean|object}
+     * @default false
+     * @category Dialog
+     *
+     * @example
+     * ::: only-for javascript
+     * ```js
+     * // enable the Dialog plugin with default option
+     * dialog: true,
+     *
+     * // enable the Dialog plugin with custom configuration
+     * dialog: {
+     *   content: 'Dialog content',
+     *   customClassName: 'custom-dialog',
+     *   background: 'semi-transparent',
+     *   contentBackground: false,
+     *   animation: false,
+     *   closable: true,
+     *   a11y: {
+     *     role: 'dialog',
+     *     ariaLabel: 'Dialog',
+     *     ariaLabelledby: 'titleID',
+     *     ariaDescribedby: 'descriptionID',
+     *   }
+     * }
+     * ```
+     * :::
+     *
+     * ::: only-for react
+     * ```jsx
+     * // enable the Dialog plugin with default option
+     * <HotTable
+     *   dialog={true}
+     * />
+     *
+     * // enable the Dialog plugin with custom configuration
+     * <HotTable
+     *   dialog={{
+     *     content: 'Dialog content',
+     *     customClassName: 'custom-dialog',
+     *     background: 'semi-transparent',
+     *     contentBackground: false,
+     *     animation: false,
+     *     closable: true,
+     *     a11y: {
+     *       role: 'dialog',
+     *       ariaLabel: 'Dialog',
+     *       ariaLabelledby: 'titleID',
+     *       ariaDescribedby: 'descriptionID',
+     *     }
+     *   }
+     *   }}
+     * />
+     * ```
+     * :::
+     *
+     * ::: only-for angular
+     * ```ts
+     * settings = {
+     *   dialog: {
+     *     content: 'Dialog content',
+     *     customClassName: 'custom-dialog',
+     *     background: 'semi-transparent',
+     *     contentBackground: false,
+     *     animation: false,
+     *     closable: true,
+     *     a11y: {
+     *       role: 'dialog',
+     *       ariaLabel: 'Dialog',
+     *       ariaLabelledby: 'titleID',
+     *       ariaDescribedby: 'descriptionID',
+     *     }
+     *   }
+     * };
+     * ```
+     *
+     * ```html
+     * <hot-table [settings]="settings" />
+     * ```
+     * :::
+     *
+     */
+    dialog: false,
     /**
      * @description
      * The `dragToScroll` option configures the [`DragToScroll`](@/api/dragToScroll.md) plugin.
@@ -2520,6 +2631,28 @@ var _default = () => {
      * ```
      */
     hiddenRows: undefined,
+    /**
+     * The `initialState` option configures the grid's initial state.
+     * This object accepts any grid configuration option. In case of conflicts between
+     * `initialState` and table settings, the table settings take precedence.
+     * Note: The `initialState` option is ignored when passed to the
+     * [`updateSettings()`](@/api/core.md#updatesettings) method.
+     *
+     * @since 16.1.0
+     * @memberof Options#
+     * @type {object | undefined}
+     * @default undefined
+     * @category Core
+     *
+     * @example
+     * ```js
+     * initialState: {
+     *   // configure initial column order
+     *   manualColumnMove: [1, 0],
+     * },
+     * ```
+     */
+    initialState: undefined,
     /**
      * The `invalidCellClassName` option lets you add a CSS class name to cells
      * that were marked as `invalid` by the [cell validator](@/guides/cell-functions/cell-validator/cell-validator.md).
@@ -2818,6 +2951,50 @@ var _default = () => {
      * ```
      */
     locale: 'en-US',
+    /**
+     * @description
+     * The `loading` option configures the [`Loading`](@/api/loading.md) plugin.
+     *
+     * Loading plugin, automatically loads [`Dialog`](@/api/dialog.md) plugin.
+     *
+     * You can set the `loading` option to one of the following:
+     *
+     * | Setting   | Description                                                                 |
+     * | --------- | --------------------------------------------------------------------------- |
+     * | `false`   | Disable the [`Loading`](@/api/loading.md) plugin                           |
+     * | `true`    | Enable the [`Loading`](@/api/loading.md) plugin with default configuration |
+     * | An object | - Enable the [`Loading`](@/api/loading.md) plugin<br>- Apply custom configuration |
+     *
+     * If you set the `loading` option to an object, you can configure the following loading options:
+     *
+     * | Option        | Possible settings | Description                                               |
+     * | ------------- | ----------------- | --------------------------------------------------------- |
+     * | `icon`        | A string          | Custom loading icon to display (default: `<svg />`)       |
+     * | `title`       | A string          | Custom loading title to display (default: `'Loading...'`) |
+     * | `description` | A string          | Custom loading description to display (default: `''`)     |
+     *
+     * Read more:
+     * - [Plugins: `Loading`](@/api/loading.md)
+     * @since 16.1.0
+     * @memberof Options#
+     * @type {boolean|object}
+     * @default false
+     * @category Loading
+     *
+     * @example
+     * ```js
+     * // enable the `Loading` plugin with default configuration
+     * loading: true,
+     *
+     * // enable the `Loading` plugin with custom configuration
+     * loading: {
+     *   icon: 'A custom loading icon in SVG format',
+     *   title: 'Custom loading title',
+     *   description: 'Custom loading description',
+     * }
+     * ```
+     */
+    loading: false,
     /**
      * The `manualColumnFreeze` option configures the [`ManualColumnFreeze`](@/api/manualColumnFreeze.md) plugin.
      *
@@ -3485,6 +3662,48 @@ var _default = () => {
      * ```
      */
     outsideClickDeselects: true,
+    /**
+     * @description
+     * The `pagination` option configures the [`Pagination`](@/api/pagination.md) plugin.
+     *
+     * You can set the `pagination` option to one of the following:
+     *
+     * | Setting                          | Description                                                                                   |
+     * | -------------------------------- | --------------------------------------------------------------------------------------------- |
+     * | `false`                          | Disable the [`Pagination`](@/api/pagination.md) plugin                                            |
+     * | `true`                           | Enable the [`Pagination`](@/api/pagination.md) plugin                                             |
+     *
+     * ##### pagination: Additional options
+     *
+     * If you set the `pagination` option to an object, you can set the following `Pagination` plugin options:
+     *
+     * | Option                   | Possible settings                                  | Description                                                                                                                                                      |
+     * | ------------------------ | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+     * | `pageSize`               | A number or `auto` (default: `10`)                 | Sets the number of rows displayed per page. If `'auto'` is set, the page size will be calculated to match all rows to the currently set table's viewport height  |
+     * | `pageSizeList`           | An array (default: `['auto', 5, 10, 20, 50, 100]`) | Defines the selectable values for page size in the UI                                                                                                            |
+     * | `initialPage`            | A number (default: `1`)                            | Specifies which page to display on initial load                                                                                                                  |
+     * | `showPageSize`           | Boolean (default: `true`)                          | Controls visibility of the "page size" section                                                                                                                   |
+     * | `showCounter`            | Boolean (default: `true`)                          | Controls visibility of the "page counter" section (e.g., "1 - 10 of 50");                                                                                        |
+     * | `showNavigation`         | Boolean (default: `true`)                          | Controls visibility of the "page navigation" section                                                                                                             |
+     * | `uiContainer`            | An HTML element (default: `null`)                  | The container element where the pagination UI will be installed. If not provided, the pagination container will be injected below the root table element.        |
+     *
+     * Read more:
+     * - [Rows pagination](@/guides/rows/rows-pagination/rows-pagination.md)
+     * - [Plugins: `Pagination`](@/api/pagination.md)
+     *
+     * @since 16.1.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default undefined
+     * @category Pagination
+     *
+     * @example
+     * ```js
+     * // enable the `Pagination` plugin
+     * pagination: true,
+     * ```
+     */
+    pagination: undefined,
     /**
      * @description
      * The `persistentState` option configures the [`PersistentState`](@/api/persistentState.md) plugin.
@@ -3886,7 +4105,7 @@ var _default = () => {
     /**
      * The `rowHeights` option sets rows' heights, in pixels.
      *
-     * In the rendering process, the default row height is `classic: 23px`, `main: 29px`, `horizon: 37px` (in the classic theme: 22px + 1px of the row's bottom border) or whatever is defined in the used theme (based on the line height, vertical padding and cell borders).
+     * In the rendering process, the default row height is `classic (legacy): 23px`, `main: 29px`, `horizon: 37px` (in the classic (legacy) theme: 22px + 1px 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 default value, by setting the `rowHeights` option to one of the following:
      *
      * | Setting     | Description                                                                                         | Example                                                      |
@@ -4178,9 +4397,13 @@ var _default = () => {
      *
      * You can set the `source` option to one of the following:
      *
-     * - An array
+     * - An array of string values
+     * - An array of objects with `key` and `value` properties
      * - A function
      *
+     * Note: When defining the `source` option as an array of objects with `key` and `value` properties, the data format for that cell
+     * needs to be an object with `key` and `value` properties as well.
+     *
      * Read more:
      * - [Autocomplete cell type](@/guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md)
      * - [Dropdown cell type](@/guides/cell-types/dropdown-cell-type/dropdown-cell-type.md)
@@ -4196,7 +4419,7 @@ var _default = () => {
      *
      * @example
      * ```js
-     * // set `source` to an array
+     * // set `source` to an array of string values
      * columns: [{
      *   // set the `type` of each cell in this column to `autocomplete`
      *   type: 'autocomplete',
@@ -4204,6 +4427,20 @@ var _default = () => {
      *   source: ['A', 'B', 'C', 'D']
      * }],
      *
+     * // set `source` to an array of objects with `key` and `value` properties
+     * columns: [{
+     *   // set the `type` of each cell in this column to `autocomplete`
+     *   type: 'autocomplete',
+     *   // set options available in every `autocomplete` cell of this column
+     *   source: [{
+     *     key: 'A',
+     *     value: 'Label A'
+     *   }, {
+     *     key: 'B',
+     *     value: 'Label B'
+     *   }]
+     * }],
+     *
      * // set `source` to a function
      * columns: [{
      *   // set the `type` of each cell in this column to `autocomplete`
@@ -4391,7 +4628,7 @@ var _default = () => {
     /**
      * 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).
+     * If no `themeName` is provided, the table will use the classic (legacy) theme (if the correct CSS files are imported).
      *
      * Read more:
      * - [Themes](@/guides/styling/themes/themes.md)
@@ -4757,6 +4994,54 @@ var _default = () => {
      * ```
      */
     validator: undefined,
+    /**
+     * @description
+     * The `valueGetter` option configures a function that defines what value will be used when displaying the cell content.
+     * It can be used to modify the value of a cell before it is displayed (for example, for object-based data).
+     *
+     * @example
+     * ```js
+     * // use the `label` property of the value object with a fallback to the value itself
+     * valueGetter: (value, row, column, cellMeta) => {
+     *   return value?.label ?? value;
+     * }
+     * ```
+     *
+     * @memberof Options#
+     * @type {function(any, number, number): any}
+     * @param {*} value The value to be displayed in the cell.
+     * @param {number} row The visual row index of the cell.
+     * @param {number} column The visual column index of the cell.
+     * @param {object} cellMeta The cell meta object.
+     * @since 16.1.0
+     * @default undefined
+     * @category Core
+     */
+    valueGetter: undefined,
+    /**
+     * @description
+     * The `valueSetter` option configures a function that defines what value will be used when setting the cell content.
+     * It can be used to modify the value of a cell before it is saved (for example, for object-based data).
+     *
+     * @example
+     * ```js
+     * // Modify the value of a cell before it is saved
+     * valueSetter: (value, row, column, cellMeta) => {
+     *   return { id: value?.id ?? value, value: `${value?.value ?? value} at ${row}, ${column}` }
+     * },
+     * ```
+     *
+     * @memberof Options#
+     * @type {function(any, number, number): any}
+     * @param {*} value The value to be set to a cell.
+     * @param {number} row The visual row index of the cell.
+     * @param {number} column The visual column index of the cell.
+     * @param {object} cellMeta The cell meta object.
+     * @since 16.1.0
+     * @default undefined
+     * @category Core
+     */
+    valueSetter: undefined,
     /**
      * @description
      * The `viewportColumnRenderingOffset` option configures the number of columns