handsontable 15.3.0-next-175012b-20250429 → 16.0.0-next-f486b48-20250702

package/dataMap/dataMap.mjs

@@ -382,31 +382,20 @@ class DataMap {
     }
     const dataSource = this.dataSource;
     const maxCols = this.tableMeta.maxCols;
-    const countSourceCols = this.hot.countSourceCols();
-    let columnIndex = index;
-    if (typeof columnIndex !== 'number' || columnIndex >= countSourceCols) {
-      columnIndex = countSourceCols;
-    }
-    const continueProcess = this.hot.runHooks('beforeCreateCol', columnIndex, amount, source);
-    if (continueProcess === false) {
+    const numberOfSourceCols = this.hot.countSourceCols();
+    const numberOfVisualCols = this.hot.countCols();
+    const numberOfSourceRows = this.hot.countSourceRows();
+    const visualColumnIndex = typeof index === 'number' && index <= numberOfSourceCols ? index : numberOfVisualCols;
+    if (this.hot.runHooks('beforeCreateCol', visualColumnIndex, amount, source) === false) {
       return {
         delta: 0
       };
     }
-    let physicalColumnIndex = countSourceCols;
-    if (columnIndex < this.hot.countCols()) {
-      physicalColumnIndex = this.hot.toPhysicalColumn(columnIndex);
-    }
-    const numberOfSourceRows = this.hot.countSourceRows();
-    let nrOfColumns = this.hot.countCols();
+    const physicalColumnIndex = visualColumnIndex < numberOfVisualCols ? this.hot.toPhysicalColumn(visualColumnIndex) : numberOfSourceCols;
+    const firstNewPhysicalColumnIndex = mode === 'end' ? Math.min(physicalColumnIndex + 1, numberOfSourceCols) : physicalColumnIndex;
     let numberOfCreatedCols = 0;
-    let currentIndex = physicalColumnIndex;
-    if (mode === 'end') {
-      currentIndex = Math.min(currentIndex + 1, countSourceCols);
-    }
-    const startPhysicalIndex = currentIndex;
-    while (numberOfCreatedCols < amount && nrOfColumns < maxCols) {
-      if (typeof columnIndex !== 'number' || columnIndex >= nrOfColumns) {
+    for (let col = firstNewPhysicalColumnIndex; numberOfCreatedCols < amount && numberOfVisualCols + numberOfCreatedCols < maxCols; col++) {
+      if (typeof visualColumnIndex !== 'number' || visualColumnIndex >= numberOfVisualCols + numberOfCreatedCols) {
         if (numberOfSourceRows > 0) {
           for (let row = 0; row < numberOfSourceRows; row += 1) {
             if (typeof dataSource[row] === 'undefined') {
@@ -419,29 +408,26 @@ class DataMap {
         }
       } else {
         for (let row = 0; row < numberOfSourceRows; row++) {
-          dataSource[row].splice(currentIndex, 0, null);
+          dataSource[row].splice(col, 0, null);
         }
       }
       numberOfCreatedCols += 1;
-      currentIndex += 1;
-      nrOfColumns += 1;
     }
-    this.hot.columnIndexMapper.insertIndexes(columnIndex, numberOfCreatedCols);
     if (numberOfCreatedCols > 0) {
       if (index === undefined || index === null) {
         // Creates the meta columns at the end of the columns collection without shifting the cells
         // that were defined out of the range of the dataset.
         this.metaManager.createColumn(null, numberOfCreatedCols);
       } else if (source !== 'auto') {
-        this.metaManager.createColumn(startPhysicalIndex, amount);
+        this.metaManager.createColumn(firstNewPhysicalColumnIndex, amount);
       }
     }
-    const newVisualColumnIndex = this.hot.toVisualColumn(startPhysicalIndex);
-    this.hot.runHooks('afterCreateCol', newVisualColumnIndex, numberOfCreatedCols, source);
+    this.hot.columnIndexMapper.insertIndexes(visualColumnIndex, numberOfCreatedCols, mode);
+    this.hot.runHooks('afterCreateCol', this.hot.toVisualColumn(firstNewPhysicalColumnIndex), numberOfCreatedCols, source);
     this.refreshDuckSchema();
     return {
       delta: numberOfCreatedCols,
-      startPhysicalIndex
+      startPhysicalIndex: firstNewPhysicalColumnIndex
     };
   }
 
@@ -681,7 +667,7 @@ class DataMap {
     }
     if (this.hot.hasHook('modifyData')) {
       const valueHolder = createObjectPropListener(value);
-      this.hot.runHooks('modifyData', physicalRow, this.propToCol(prop), valueHolder, 'get');
+      this.hot.runHooks('modifyData', row, this.propToCol(prop), valueHolder, 'get');
       if (valueHolder.isTouched()) {
         value = valueHolder.value;
       }
@@ -721,7 +707,7 @@ class DataMap {
 
     if (this.hot.hasHook('modifyData')) {
       const valueHolder = createObjectPropListener(newValue);
-      this.hot.runHooks('modifyData', physicalRow, this.propToCol(prop), valueHolder, 'set');
+      this.hot.runHooks('modifyData', row, this.propToCol(prop), valueHolder, 'set');
       if (valueHolder.isTouched()) {
         newValue = valueHolder.value;
       }

package/dataMap/metaManager/metaSchema.js

@@ -83,6 +83,33 @@ var _object = require("../../helpers/object");
  * ```
  * :::
  *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: [
+ *     ["A1", "B1", "C1", "D1", "E1"],
+ *     ["A2", "B2", "C2", "D2", "E2"],
+ *     ["A3", "B3", "C3", "D3", "E3"],
+ *     ["A4", "B4", "C4", "D4", "E4"],
+ *     ["A5", "B5", "C5", "D5", "E5"],
+ *   ],
+ *   width: 400,
+ *   height: 300,
+ *   colHeaders: true,
+ *   rowHeaders: true,
+ *   customBorders: true,
+ *   dropdownMenu: true,
+ *   multiColumnSorting: true,
+ *   filters: true,
+ *   manualRowMove: true,
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings" />
+ * ```
+ * :::
+ *
  * Depending on your needs, you can apply [configuration options](@/api/options.md) to different elements of your grid:
  * - [The entire grid](@/guides/getting-started/configuration-options/configuration-options.md#set-grid-options)
  * - [Individual columns](@/guides/getting-started/configuration-options/configuration-options.md#set-column-options)
@@ -4330,6 +4357,37 @@ var _default = () => {
      * ```
      */
     tableClassName: undefined,
+    /**
+     * The `textEllipsis` option configures whether the text content in the cells should be truncated with an ellipsis (three dots).
+     *
+     * You can set the `textEllipsis` option to one of the following:
+     *
+     * | Setting           | Description                                   |
+     * | ----------------- | --------------------------------------------- |
+     * | `false` (default) | Don't truncate text content with an ellipsis  |
+     * | `true`            | Truncate text content with an ellipsis        |
+     *
+     * @since 16.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * columns: [
+     *   {
+     *     // truncate text content with an ellipsis
+     *     textEllipsis: true,
+     *   },
+     *   {
+     *     // don't truncate text content with an ellipsis
+     *     textEllipsis: false,
+     *   }
+     * ],
+     * ```
+     */
+    textEllipsis: false,
     /**
      * The `themeName` option allows enabling a theme by that name.
      *

package/dataMap/metaManager/metaSchema.mjs

@@ -80,6 +80,33 @@ import { isObjectEqual } from "../../helpers/object.mjs";
  * ```
  * :::
  *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: [
+ *     ["A1", "B1", "C1", "D1", "E1"],
+ *     ["A2", "B2", "C2", "D2", "E2"],
+ *     ["A3", "B3", "C3", "D3", "E3"],
+ *     ["A4", "B4", "C4", "D4", "E4"],
+ *     ["A5", "B5", "C5", "D5", "E5"],
+ *   ],
+ *   width: 400,
+ *   height: 300,
+ *   colHeaders: true,
+ *   rowHeaders: true,
+ *   customBorders: true,
+ *   dropdownMenu: true,
+ *   multiColumnSorting: true,
+ *   filters: true,
+ *   manualRowMove: true,
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings" />
+ * ```
+ * :::
+ *
  * Depending on your needs, you can apply [configuration options](@/api/options.md) to different elements of your grid:
  * - [The entire grid](@/guides/getting-started/configuration-options/configuration-options.md#set-grid-options)
  * - [Individual columns](@/guides/getting-started/configuration-options/configuration-options.md#set-column-options)
@@ -4327,6 +4354,37 @@ export default () => {
      * ```
      */
     tableClassName: undefined,
+    /**
+     * The `textEllipsis` option configures whether the text content in the cells should be truncated with an ellipsis (three dots).
+     *
+     * You can set the `textEllipsis` option to one of the following:
+     *
+     * | Setting           | Description                                   |
+     * | ----------------- | --------------------------------------------- |
+     * | `false` (default) | Don't truncate text content with an ellipsis  |
+     * | `true`            | Truncate text content with an ellipsis        |
+     *
+     * @since 16.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * columns: [
+     *   {
+     *     // truncate text content with an ellipsis
+     *     textEllipsis: true,
+     *   },
+     *   {
+     *     // don't truncate text content with an ellipsis
+     *     textEllipsis: false,
+     *   }
+     * ],
+     * ```
+     */
+    textEllipsis: false,
     /**
      * The `themeName` option allows enabling a theme by that name.
      *

package/dist/handsontable.css

@@ -26,8 +26,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 15.3.0-next-175012b-20250429
- * Release date: 29/04/2025 (built at 29/04/2025 10:35:24)
+ * Version: 16.0.0-next-f486b48-20250702
+ * Release date: 09/07/2025 (built at 02/07/2025 09:19:08)
  */
 /**
  * Fix for bootstrap styles
@@ -293,6 +293,16 @@ innerBorderBottom - Property controlled by bottom overlay
   display: none !important;
 }
 
+.handsontable .wtBorder:nth-child(1),
+.handsontable .wtBorder:nth-child(3) {
+  z-index: 2;
+}
+
+.handsontable .wtBorder:nth-child(2),
+.handsontable .wtBorder:nth-child(4) {
+  z-index: 1;
+}
+
 /* A layer order of the selection types */
 .handsontable .wtBorder.current {
   z-index: 10;
@@ -422,7 +432,7 @@ innerBorderBottom - Property controlled by bottom overlay
   font-size: 10px;
 }
 
-.handsontable .htFocusCatcher {
+.ht-root-wrapper .htFocusCatcher {
   position: absolute;
   z-index: -1;
   opacity: 0;
@@ -433,6 +443,12 @@ innerBorderBottom - Property controlled by bottom overlay
   height: 0;
 }
 
+.handsontable .htTextEllipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 /* plugins */
 /* row + column resizer */
 .handsontable .manualColumnResizer {
@@ -699,15 +715,25 @@ TextRenderer placeholder value
  * Handsontable listbox theme
  */
 .handsontable.listbox {
+  border: 1px solid #ccc;
   margin: 0;
 }
 
+.handsontable.listbox.autocompleteEditor,
+.handsontable.listbox.dropdownEditor {
+  border-width: 0;
+}
+
 .handsontable.listbox .ht_master table {
-  border: 1px solid #ccc;
   border-collapse: separate;
   background: white;
 }
 
+.handsontable.listbox.autocompleteEditor .ht_master table,
+.handsontable.listbox.dropdownEditor .ht_master table {
+  border: 1px solid #ccc;
+}
+
 .handsontable.listbox th,
 .handsontable.listbox tr:first-child th,
 .handsontable.listbox tr:last-child th,

package/dist/handsontable.full.css

@@ -26,8 +26,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 15.3.0-next-175012b-20250429
- * Release date: 29/04/2025 (built at 29/04/2025 10:35:24)
+ * Version: 16.0.0-next-f486b48-20250702
+ * Release date: 09/07/2025 (built at 02/07/2025 09:19:08)
  */
 /**
  * Fix for bootstrap styles
@@ -293,6 +293,16 @@ innerBorderBottom - Property controlled by bottom overlay
   display: none !important;
 }
 
+.handsontable .wtBorder:nth-child(1),
+.handsontable .wtBorder:nth-child(3) {
+  z-index: 2;
+}
+
+.handsontable .wtBorder:nth-child(2),
+.handsontable .wtBorder:nth-child(4) {
+  z-index: 1;
+}
+
 /* A layer order of the selection types */
 .handsontable .wtBorder.current {
   z-index: 10;
@@ -422,7 +432,7 @@ innerBorderBottom - Property controlled by bottom overlay
   font-size: 10px;
 }
 
-.handsontable .htFocusCatcher {
+.ht-root-wrapper .htFocusCatcher {
   position: absolute;
   z-index: -1;
   opacity: 0;
@@ -433,6 +443,12 @@ innerBorderBottom - Property controlled by bottom overlay
   height: 0;
 }
 
+.handsontable .htTextEllipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 /* plugins */
 /* row + column resizer */
 .handsontable .manualColumnResizer {
@@ -699,15 +715,25 @@ TextRenderer placeholder value
  * Handsontable listbox theme
  */
 .handsontable.listbox {
+  border: 1px solid #ccc;
   margin: 0;
 }
 
+.handsontable.listbox.autocompleteEditor,
+.handsontable.listbox.dropdownEditor {
+  border-width: 0;
+}
+
 .handsontable.listbox .ht_master table {
-  border: 1px solid #ccc;
   border-collapse: separate;
   background: white;
 }
 
+.handsontable.listbox.autocompleteEditor .ht_master table,
+.handsontable.listbox.dropdownEditor .ht_master table {
+  border: 1px solid #ccc;
+}
+
 .handsontable.listbox th,
 .handsontable.listbox tr:first-child th,
 .handsontable.listbox tr:last-child th,