handsontable 0.0.0-next-87b048b-20250409 → 0.0.0-next-d9b3885-20250415

package/plugins/exportFile/exportFile.mjs

@@ -81,6 +81,64 @@ export const PLUGIN_PRIORITY = 240;
  * });
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * import { AfterViewInit, Component, ViewChild } from "@angular/core";
+ * import {
+ *   GridSettings,
+ *   HotTableModule,
+ *   HotTableComponent,
+ * } from "@handsontable/angular-wrapper";
+ *
+ * `@Component`({
+ *   selector: "app-example",
+ *   standalone: true,
+ *   imports: [HotTableModule],
+ *   template: ` <div class="ht-theme-main">
+ *     <hot-table [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     data: this.getData(),
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access to plugin instance:
+ *     const hot = this.hotTable.hotInstance;
+ *     // Access to exportFile plugin instance
+ *     const exportPlugin = hot.getPlugin("exportFile");
+ *
+ *     // Export as a string
+ *     exportPlugin.exportAsString("csv");
+ *
+ *     // Export as a blob object
+ *     exportPlugin.exportAsBlob("csv");
+ *
+ *     // Export to downloadable file (named: MyFile.csv)
+ *     exportPlugin.downloadFile("csv", { filename: "MyFile" });
+ *
+ *     // Export as a string (with specified data range):
+ *     exportPlugin.exportAsString("csv", {
+ *       exportHiddenRows: true, // default false
+ *       exportHiddenColumns: true, // default false
+ *       columnHeaders: true, // default false
+ *       rowHeaders: true, // default false
+ *       columnDelimiter: ";", // default ','
+ *       range: [1, 1, 6, 6], // [startRow, endRow, startColumn, endColumn]
+ *     });
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 export class ExportFile extends BasePlugin {
   static get PLUGIN_KEY() {

package/plugins/filters/filters.js

@@ -78,6 +78,22 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   colHeaders: true,
+ *   rowHeaders: true,
+ *   dropdownMenu: true,
+ *   filters: true,
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _menuFocusNavigator = /*#__PURE__*/new WeakMap();
 var _dropdownMenuTraces = /*#__PURE__*/new WeakMap();
@@ -460,6 +476,64 @@ class Filters extends _base.BasePlugin {
    * ```
    * :::
    *
+   * ::: only-for angular
+   * ```ts
+   * import { AfterViewInit, Component, ViewChild } from "@angular/core";
+   * import {
+   *   GridSettings,
+   *   HotTableModule,
+   *   HotTableComponent,
+   * } from "@handsontable/angular-wrapper";
+   *
+   * `@Component`({
+   *   selector: "app-example",
+   *   standalone: true,
+   *   imports: [HotTableModule],
+   *   template: ` <div class="ht-theme-main">
+   *     <hot-table [settings]="gridSettings" />
+   *   </div>`,
+   * })
+   * export class ExampleComponent implements AfterViewInit {
+   *   `@ViewChild`(HotTableComponent, { static: false })
+   *   readonly hotTable!: HotTableComponent;
+   *
+   *   readonly gridSettings = <GridSettings>{
+   *     data: this.getData(),
+   *     filters: true,
+   *   };
+   *
+   *   ngAfterViewInit(): void {
+   *     // Access to filters plugin instance
+   *     const hot = this.hotTable.hotInstance;
+   *     const filtersPlugin = hot.getPlugin("filters");
+   *
+   *     // Add filter "Greater than" 95 to column at index 1
+   *     filtersPlugin.addCondition(1, "gt", [95]);
+   *     filtersPlugin.filter();
+   *
+   *     // Add filter "By value" to column at index 1
+   *     // In this case, all values that don't match will be filtered.
+   *     filtersPlugin.addCondition(1, "by_value", [["ing", "ed", "as", "on"]]);
+   *     filtersPlugin.filter();
+   *
+   *     // Add filter "Begins with" with value "de" AND "Not contains" with value "ing"
+   *     filtersPlugin.addCondition(1, "begins_with", ["de"], "conjunction");
+   *     filtersPlugin.addCondition(1, "not_contains", ["ing"], "conjunction");
+   *     filtersPlugin.filter();
+   *
+   *     // Add filter "Begins with" with value "de" OR "Not contains" with value "ing"
+   *     filtersPlugin.addCondition(1, "begins_with", ["de"], "disjunction");
+   *     filtersPlugin.addCondition(1, "not_contains", ["ing"], "disjunction");
+   *     filtersPlugin.filter();
+   *   }
+   *
+   *   private getData(): any[] {
+   *     // Get some data
+   *   }
+   * }
+   * ```
+   * :::
+   *
    * @param {number} column Visual column index.
    * @param {string} name Condition short name.
    * @param {Array} args Condition arguments.

package/plugins/filters/filters.mjs

@@ -72,6 +72,22 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   colHeaders: true,
+ *   rowHeaders: true,
+ *   dropdownMenu: true,
+ *   filters: true,
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _menuFocusNavigator = /*#__PURE__*/new WeakMap();
 var _dropdownMenuTraces = /*#__PURE__*/new WeakMap();
@@ -454,6 +470,64 @@ export class Filters extends BasePlugin {
    * ```
    * :::
    *
+   * ::: only-for angular
+   * ```ts
+   * import { AfterViewInit, Component, ViewChild } from "@angular/core";
+   * import {
+   *   GridSettings,
+   *   HotTableModule,
+   *   HotTableComponent,
+   * } from "@handsontable/angular-wrapper";
+   *
+   * `@Component`({
+   *   selector: "app-example",
+   *   standalone: true,
+   *   imports: [HotTableModule],
+   *   template: ` <div class="ht-theme-main">
+   *     <hot-table [settings]="gridSettings" />
+   *   </div>`,
+   * })
+   * export class ExampleComponent implements AfterViewInit {
+   *   `@ViewChild`(HotTableComponent, { static: false })
+   *   readonly hotTable!: HotTableComponent;
+   *
+   *   readonly gridSettings = <GridSettings>{
+   *     data: this.getData(),
+   *     filters: true,
+   *   };
+   *
+   *   ngAfterViewInit(): void {
+   *     // Access to filters plugin instance
+   *     const hot = this.hotTable.hotInstance;
+   *     const filtersPlugin = hot.getPlugin("filters");
+   *
+   *     // Add filter "Greater than" 95 to column at index 1
+   *     filtersPlugin.addCondition(1, "gt", [95]);
+   *     filtersPlugin.filter();
+   *
+   *     // Add filter "By value" to column at index 1
+   *     // In this case, all values that don't match will be filtered.
+   *     filtersPlugin.addCondition(1, "by_value", [["ing", "ed", "as", "on"]]);
+   *     filtersPlugin.filter();
+   *
+   *     // Add filter "Begins with" with value "de" AND "Not contains" with value "ing"
+   *     filtersPlugin.addCondition(1, "begins_with", ["de"], "conjunction");
+   *     filtersPlugin.addCondition(1, "not_contains", ["ing"], "conjunction");
+   *     filtersPlugin.filter();
+   *
+   *     // Add filter "Begins with" with value "de" OR "Not contains" with value "ing"
+   *     filtersPlugin.addCondition(1, "begins_with", ["de"], "disjunction");
+   *     filtersPlugin.addCondition(1, "not_contains", ["ing"], "disjunction");
+   *     filtersPlugin.filter();
+   *   }
+   *
+   *   private getData(): any[] {
+   *     // Get some data
+   *   }
+   * }
+   * ```
+   * :::
+   *
    * @param {number} column Visual column index.
    * @param {string} name Condition short name.
    * @param {Array} args Condition arguments.

package/plugins/hiddenColumns/hiddenColumns.js

@@ -141,6 +141,70 @@ const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 310;
  * hot.render();
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * import { AfterViewInit, Component, ViewChild } from "@angular/core";
+ * import {
+ *   GridSettings,
+ *   HotTableModule,
+ *   HotTableComponent,
+ * } from "@handsontable/angular-wrapper";
+ *
+ * `@Component`({
+ *   selector: "app-example",
+ *   standalone: true,
+ *   imports: [HotTableModule],
+ *   template: ` <div class="ht-theme-main">
+ *     <hot-table [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     data: this.getData(),
+ *     hiddenColumns: {
+ *       copyPasteEnabled: true,
+ *       indicators: true,
+ *       columns: [1, 2, 5],
+ *     },
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access the `HiddenColumns` plugin's instance
+ *     const hot = this.hotTable.hotInstance;
+ *     const hiddenColumnsPlugin = hot.getPlugin("hiddenColumns");
+ *
+ *     // Hide a single column
+ *     hiddenColumnsPlugin.hideColumn(1);
+ *
+ *     // Hide multiple columns
+ *     hiddenColumnsPlugin.hideColumn(1, 2, 9);
+ *
+ *     // Hide multiple columns as an array
+ *     hiddenColumnsPlugin.hideColumns([1, 2, 9]);
+ *
+ *     // Unhide a single column
+ *     hiddenColumnsPlugin.showColumn(1);
+ *
+ *     // Unhide multiple columns
+ *     hiddenColumnsPlugin.showColumn(1, 2, 9);
+ *
+ *     // Unhide multiple columns as an array
+ *     hiddenColumnsPlugin.showColumns([1, 2, 9]);
+ *
+ *     // To see your changes, re-render your Handsontable instance
+ *     hot.render();
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // Get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 var _hiddenColumnsMap = /*#__PURE__*/new WeakMap();
 var _HiddenColumns_brand = /*#__PURE__*/new WeakSet();

package/plugins/hiddenColumns/hiddenColumns.mjs

@@ -137,6 +137,70 @@ export const PLUGIN_PRIORITY = 310;
  * hot.render();
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * import { AfterViewInit, Component, ViewChild } from "@angular/core";
+ * import {
+ *   GridSettings,
+ *   HotTableModule,
+ *   HotTableComponent,
+ * } from "@handsontable/angular-wrapper";
+ *
+ * `@Component`({
+ *   selector: "app-example",
+ *   standalone: true,
+ *   imports: [HotTableModule],
+ *   template: ` <div class="ht-theme-main">
+ *     <hot-table [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     data: this.getData(),
+ *     hiddenColumns: {
+ *       copyPasteEnabled: true,
+ *       indicators: true,
+ *       columns: [1, 2, 5],
+ *     },
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access the `HiddenColumns` plugin's instance
+ *     const hot = this.hotTable.hotInstance;
+ *     const hiddenColumnsPlugin = hot.getPlugin("hiddenColumns");
+ *
+ *     // Hide a single column
+ *     hiddenColumnsPlugin.hideColumn(1);
+ *
+ *     // Hide multiple columns
+ *     hiddenColumnsPlugin.hideColumn(1, 2, 9);
+ *
+ *     // Hide multiple columns as an array
+ *     hiddenColumnsPlugin.hideColumns([1, 2, 9]);
+ *
+ *     // Unhide a single column
+ *     hiddenColumnsPlugin.showColumn(1);
+ *
+ *     // Unhide multiple columns
+ *     hiddenColumnsPlugin.showColumn(1, 2, 9);
+ *
+ *     // Unhide multiple columns as an array
+ *     hiddenColumnsPlugin.showColumns([1, 2, 9]);
+ *
+ *     // To see your changes, re-render your Handsontable instance
+ *     hot.render();
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // Get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 var _hiddenColumnsMap = /*#__PURE__*/new WeakMap();
 var _HiddenColumns_brand = /*#__PURE__*/new WeakSet();

package/plugins/hiddenRows/hiddenRows.js

@@ -141,6 +141,70 @@ const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 320;
  * hot.render();
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * import { AfterViewInit, Component, ViewChild } from "@angular/core";
+ * import {
+ *   GridSettings,
+ *   HotTableModule,
+ *   HotTableComponent,
+ * } from "@handsontable/angular-wrapper";
+ *
+ * `@Component`({
+ *   selector: "app-example",
+ *   standalone: true,
+ *   imports: [HotTableModule],
+ *   template: ` <div class="ht-theme-main">
+ *     <hot-table [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     data: this.getData(),
+ *     hiddenRows: {
+ *       copyPasteEnabled: true,
+ *       indicators: true,
+ *       rows: [1, 2, 5],
+ *     },
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access the `HiddenRows` plugin's instance
+ *     const hot = this.hotTable.hotInstance;
+ *     const hiddenRowsPlugin = hot.getPlugin("hiddenRows");
+ *
+ *     // Hide a single row
+ *     hiddenRowsPlugin.hideRow(1);
+ *
+ *     // Hide multiple rows
+ *     hiddenRowsPlugin.hideRow(1, 2, 9);
+ *
+ *     // Hide multiple rows as an array
+ *     hiddenRowsPlugin.hideRows([1, 2, 9]);
+ *
+ *     // Unhide a single row
+ *     hiddenRowsPlugin.showRow(1);
+ *
+ *     // Unhide multiple rows
+ *     hiddenRowsPlugin.showRow(1, 2, 9);
+ *
+ *     // Unhide multiple rows as an array
+ *     hiddenRowsPlugin.showRows([1, 2, 9]);
+ *
+ *     // To see your changes, re-render your Handsontable instance
+ *     hot.render();
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // Get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 var _hiddenRowsMap = /*#__PURE__*/new WeakMap();
 var _HiddenRows_brand = /*#__PURE__*/new WeakSet();

package/plugins/hiddenRows/hiddenRows.mjs

@@ -137,6 +137,70 @@ export const PLUGIN_PRIORITY = 320;
  * hot.render();
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * import { AfterViewInit, Component, ViewChild } from "@angular/core";
+ * import {
+ *   GridSettings,
+ *   HotTableModule,
+ *   HotTableComponent,
+ * } from "@handsontable/angular-wrapper";
+ *
+ * `@Component`({
+ *   selector: "app-example",
+ *   standalone: true,
+ *   imports: [HotTableModule],
+ *   template: ` <div class="ht-theme-main">
+ *     <hot-table [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     data: this.getData(),
+ *     hiddenRows: {
+ *       copyPasteEnabled: true,
+ *       indicators: true,
+ *       rows: [1, 2, 5],
+ *     },
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access the `HiddenRows` plugin's instance
+ *     const hot = this.hotTable.hotInstance;
+ *     const hiddenRowsPlugin = hot.getPlugin("hiddenRows");
+ *
+ *     // Hide a single row
+ *     hiddenRowsPlugin.hideRow(1);
+ *
+ *     // Hide multiple rows
+ *     hiddenRowsPlugin.hideRow(1, 2, 9);
+ *
+ *     // Hide multiple rows as an array
+ *     hiddenRowsPlugin.hideRows([1, 2, 9]);
+ *
+ *     // Unhide a single row
+ *     hiddenRowsPlugin.showRow(1);
+ *
+ *     // Unhide multiple rows
+ *     hiddenRowsPlugin.showRow(1, 2, 9);
+ *
+ *     // Unhide multiple rows as an array
+ *     hiddenRowsPlugin.showRows([1, 2, 9]);
+ *
+ *     // To see your changes, re-render your Handsontable instance
+ *     hot.render();
+ *   }
+ *
+ *   private getData(): any[] {
+ *     // Get some data
+ *   }
+ * }
+ * ```
+ * :::
  */
 var _hiddenRowsMap = /*#__PURE__*/new WeakMap();
 var _HiddenRows_brand = /*#__PURE__*/new WeakSet();

package/plugins/mergeCells/mergeCells.js

@@ -85,6 +85,24 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   // Enable plugin
+ *   mergeCells: [
+ *     { row: 0, col: 3, rowspan: 3, colspan: 3 },
+ *     { row: 2, col: 6, rowspan: 2, colspan: 2 },
+ *     { row: 4, col: 8, rowspan: 3, colspan: 3 },
+ *   ],
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _lastSelectedFocus = /*#__PURE__*/new WeakMap();
 var _lastFocusDelta = /*#__PURE__*/new WeakMap();

package/plugins/mergeCells/mergeCells.mjs

@@ -81,6 +81,24 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   // Enable plugin
+ *   mergeCells: [
+ *     { row: 0, col: 3, rowspan: 3, colspan: 3 },
+ *     { row: 2, col: 6, rowspan: 2, colspan: 2 },
+ *     { row: 4, col: 8, rowspan: 3, colspan: 3 },
+ *   ],
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _lastSelectedFocus = /*#__PURE__*/new WeakMap();
 var _lastFocusDelta = /*#__PURE__*/new WeakMap();

package/plugins/nestedHeaders/nestedHeaders.js

@@ -72,6 +72,31 @@ const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 280;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   nestedHeaders: [
+ *     ["A", { label: "B", colspan: 8, headerClassName: "htRight" }, "C"],
+ *     ["D", { label: "E", colspan: 4 }, { label: "F", colspan: 4 }, "G"],
+ *     [
+ *       "H",
+ *       { label: "I", colspan: 2 },
+ *       { label: "J", colspan: 2 },
+ *       { label: "K", colspan: 2 },
+ *       { label: "L", colspan: 2 },
+ *       "M",
+ *     ],
+ *     ["N", "O", "P", "Q", "R", "S", "T", "U", "V", "W"],
+ *   ],
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _stateManager = /*#__PURE__*/new WeakMap();
 var _hidingIndexMapObserver = /*#__PURE__*/new WeakMap();

package/plugins/nestedHeaders/nestedHeaders.mjs

@@ -68,6 +68,31 @@ export const PLUGIN_PRIORITY = 280;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   nestedHeaders: [
+ *     ["A", { label: "B", colspan: 8, headerClassName: "htRight" }, "C"],
+ *     ["D", { label: "E", colspan: 4 }, { label: "F", colspan: 4 }, "G"],
+ *     [
+ *       "H",
+ *       { label: "I", colspan: 2 },
+ *       { label: "J", colspan: 2 },
+ *       { label: "K", colspan: 2 },
+ *       { label: "L", colspan: 2 },
+ *       "M",
+ *     ],
+ *     ["N", "O", "P", "Q", "R", "S", "T", "U", "V", "W"],
+ *   ],
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 var _stateManager = /*#__PURE__*/new WeakMap();
 var _hidingIndexMapObserver = /*#__PURE__*/new WeakMap();

package/plugins/stretchColumns/stretchColumns.js

@@ -62,6 +62,19 @@ const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 155;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   stretchH: "all",
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 /* eslint-enable jsdoc/require-description-complete-sentence */
 var _stretchCalculator = /*#__PURE__*/new WeakMap();

package/plugins/stretchColumns/stretchColumns.mjs

@@ -59,6 +59,19 @@ export const PLUGIN_PRIORITY = 155;
  * />
  * ```
  * :::
+ *
+ * ::: only-for angular
+ * ```ts
+ * settings = {
+ *   data: getData(),
+ *   stretchH: "all",
+ * };
+ * ```
+ *
+ * ```html
+ * <hot-table [settings]="settings"></hot-table>
+ * ```
+ * :::
  */
 /* eslint-enable jsdoc/require-description-complete-sentence */
 var _stretchCalculator = /*#__PURE__*/new WeakMap();