@highcharts/grid-pro 2.1.1 → 2.3.0

package/es-modules/Grid/Core/Table/Cell.js

@@ -2,11 +2,11 @@
  *
  *  Grid Cell abstract class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
@@ -15,8 +15,7 @@
  * */
 'use strict';
 import Templating from '../../../Core/Templating.js';
-import U from '../../../Core/Utilities.js';
-const { fireEvent } = U;
+import { fireEvent } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Abstract Class of Cell
@@ -106,6 +105,8 @@ class Cell {
      *
      * @param e
      * Keyboard event object.
+     *
+     * @internal
      */
     onKeyDown(e) {
         const { row, column } = this;
@@ -183,9 +184,10 @@ class Cell {
     /**
      * Renders the cell by appending the HTML element to the row.
      */
-    render() {
+    async render() {
         this.row.htmlElement.appendChild(this.htmlElement);
         this.reflow();
+        return Promise.resolve();
     }
     /**
      * Reflows the cell dimensions.
@@ -233,6 +235,39 @@ class Cell {
         element.classList.add(...newClassName.split(/\s+/g));
         this.customClassName = newClassName;
     }
+    /**
+     * Sets custom inline styles from options and removes the previously applied
+     * custom styles to keep updates deterministic.
+     *
+     * @param styles
+     * A style object to apply.
+     */
+    setCustomStyles(styles) {
+        const elementStyle = this.htmlElement.style;
+        const getCSSPropertyName = (property) => (property.indexOf('-') > -1 ?
+            property :
+            property.replace(/[A-Z]/g, '-$&').toLowerCase());
+        if (this.customStyleProperties) {
+            for (const property of this.customStyleProperties) {
+                elementStyle.removeProperty(property);
+            }
+        }
+        if (!styles) {
+            delete this.customStyleProperties;
+            return;
+        }
+        const appliedProperties = [];
+        for (const key of Object.keys(styles)) {
+            const value = styles[key];
+            if (value === void 0 || value === null) {
+                continue;
+            }
+            const property = getCSSPropertyName(String(key));
+            elementStyle.setProperty(property, String(value));
+            appliedProperties.push(property);
+        }
+        this.customStyleProperties = appliedProperties;
+    }
     /**
      * Destroys the cell.
      */

package/es-modules/Grid/Core/Table/CellContent/CellContent.js

@@ -2,11 +2,11 @@
  *
  *  Cell Content abstract class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula

package/es-modules/Grid/Core/Table/CellContent/TextContent.js

@@ -2,11 +2,11 @@
  *
  *  Text Cell Content class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
@@ -17,8 +17,7 @@ import AST from '../../../../Core/Renderer/HTML/AST.js';
 import CellContent from './CellContent.js';
 import GridUtils from '../../GridUtils.js';
 const { setHTMLContent } = GridUtils;
-import Utils from '../../../../Core/Utilities.js';
-const { defined, isString } = Utils;
+import { defined } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -77,12 +76,8 @@ class TextContent extends CellContent {
         }
         else if (isDefaultFormat) {
             const formattedValue = formatter?.call(cell);
-            if (isString(formattedValue)) {
-                cellContent = formattedValue;
-            }
-            else {
-                cellContent = value + '';
-            }
+            cellContent = defined(formattedValue) ?
+                String(formattedValue) : value + '';
         }
         else if (isDefaultFormatter) {
             cellContent = format ? cell.format(format) : value + '';
@@ -97,7 +92,7 @@ class TextContent extends CellContent {
  * */
 TextContent.defaultFormatsForDataTypes = {
     string: '{value}',
-    number: '{value}',
+    number: '{value:,.f}',
     'boolean': '{value}',
     datetime: '{value:%Y-%m-%d %H:%M:%S}'
 };

package/es-modules/Grid/Core/Table/Column.d.ts

@@ -2,8 +2,8 @@ import type { IndividualColumnOptions } from '../Options';
 import type Cell from './Cell';
 import type CellContent from './CellContent/CellContent';
 import type HeaderCell from './Header/HeaderCell';
+import type { Column as DataTableColumn } from '../../../Data/DataTable';
 import Table from './Table.js';
-import DataTable from '../../../Data/DataTable.js';
 import ColumnSorting from './Actions/ColumnSorting';
 import ColumnFiltering from './Actions/ColumnFiltering/ColumnFiltering.js';
 import TableCell from './Body/TableCell';
@@ -18,7 +18,7 @@ export declare class Column {
     /**
      * Type of the data in the column.
      */
-    readonly dataType: ColumnDataType;
+    dataType: ColumnDataType;
     /**
      * The cells of the column.
      */
@@ -28,14 +28,16 @@ export declare class Column {
      */
     id: string;
     /**
-     * The data of the column.
+     * The data of the column. Shouldn't be used directly in all cases, because
+     * it's not guaranteed to be defined (e.g. when using the lazy loading,
+     * `RemoteDataProvider`).
      */
-    data?: DataTable.Column;
+    data?: DataTableColumn;
     /**
      * The options of the column as a proxy that provides merged access to
      * original options and defaults if not defined in the individual options.
      */
-    readonly options: NoIdColumnOptions;
+    options: NoIdColumnOptions;
     /**
      * The index of the column in the viewport.
      */
@@ -65,6 +67,10 @@ export declare class Column {
      * The index of the column.
      */
     constructor(viewport: Table, id: string, index: number);
+    /**
+     * Initializes the column data-related properties.
+     */
+    init(): Promise<void>;
     /**
      * Loads the data of the column from the viewport's data table.
      */

package/es-modules/Grid/Core/Table/Column.js

@@ -2,11 +2,11 @@
  *
  *  Grid Column class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
@@ -14,13 +14,12 @@
  *
  * */
 'use strict';
-import Utils from '../../../Core/Utilities.js';
 import ColumnFiltering from './Actions/ColumnFiltering/ColumnFiltering.js';
 import Templating from '../../../Core/Templating.js';
 import TextContent from './CellContent/TextContent.js';
 import Globals from '../Globals.js';
 import GridUtils from '../GridUtils.js';
-const { defined, fireEvent } = Utils;
+import { fireEvent } from '../../../Shared/Utilities.js';
 const { createOptionsProxy } = GridUtils;
 /* *
  *
@@ -50,6 +49,10 @@ export class Column {
      */
     constructor(viewport, id, index) {
         var _a;
+        /**
+         * Type of the data in the column.
+         */
+        this.dataType = 'string';
         /**
          * The cells of the column.
          */
@@ -58,8 +61,6 @@ export class Column {
         this.id = id;
         this.index = index;
         this.viewport = viewport;
-        this.loadData();
-        this.dataType = this.assumeDataType();
         // Populate column options map if not exists, to prepare option
         // references for each column.
         if (grid.options && !grid.columnOptionsMap?.[id]) {
@@ -74,18 +75,31 @@ export class Column {
         if (this.options.filtering?.enabled) {
             this.filtering = new ColumnFiltering(this);
         }
-        fireEvent(this, 'afterInit');
     }
     /* *
     *
     *  Methods
     *
     * */
+    /**
+     * Initializes the column data-related properties.
+     */
+    async init() {
+        this.loadData();
+        this.dataType = await this.assumeDataType();
+        fireEvent(this, 'afterInit');
+    }
     /**
      * Loads the data of the column from the viewport's data table.
      */
     loadData() {
-        this.data = this.viewport.dataTable.getColumn(this.id, true);
+        const dp = this.viewport.grid.dataProvider;
+        if (dp && 'getDataTable' in dp) {
+            this.data = dp.getDataTable(true)?.getColumn(this.id, true);
+        }
+        else {
+            delete this.data;
+        }
     }
     /**
      * Creates a cell content instance.
@@ -101,40 +115,15 @@ export class Column {
      * Assumes the data type of the column based on the options or data in the
      * column if not specified.
      */
-    assumeDataType() {
+    async assumeDataType() {
         const { grid } = this.viewport;
+        const dp = grid.dataProvider;
         const type = grid.columnOptionsMap?.[this.id]?.options.dataType ??
             grid.options?.columnDefaults?.dataType;
         if (type) {
             return type;
         }
-        if (!this.data) {
-            return 'string';
-        }
-        if (!Array.isArray(this.data)) {
-            // Typed array
-            return 'number';
-        }
-        for (let i = 0, iEnd = Math.min(this.data.length, 30); i < iEnd; ++i) {
-            if (!defined(this.data[i])) {
-                // If the data is null or undefined, we should look
-                // at the next value to determine the type.
-                continue;
-            }
-            switch (typeof this.data[i]) {
-                case 'number':
-                    return 'number';
-                case 'boolean':
-                    return 'boolean';
-                default:
-                    return 'string';
-            }
-        }
-        // eslint-disable-next-line no-console
-        console.warn(`Column "${this.id}" contains too few data points with ` +
-            'unambiguous types to correctly determine its dataType. It\'s ' +
-            'recommended to set the `dataType` option for it.');
-        return 'string';
+        return (await dp?.getColumnDataType(this.id)) ?? 'string';
     }
     /**
      * Registers a cell in the column.

package/es-modules/Grid/Core/Table/ColumnResizing/AdjacentResizingMode.js

@@ -2,11 +2,11 @@
  *
  *  Adjacent Resizing Mode class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula

package/es-modules/Grid/Core/Table/ColumnResizing/ColumnResizing.js

@@ -2,11 +2,11 @@
  *
  *  Column Resizing namespace
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula

package/es-modules/Grid/Core/Table/ColumnResizing/DistributedResizingMode.js

@@ -2,11 +2,11 @@
  *
  *  Distributed Resizing Mode class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula

package/es-modules/Grid/Core/Table/ColumnResizing/IndependentResizingMode.js

@@ -2,11 +2,11 @@
  *
  *  Independent Resizing Mode class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
@@ -42,15 +42,16 @@ class IndependentResizingMode extends ResizingMode {
         // Set the width of the resized column.
         const width = this.columnWidths[column.id] = Math.round(Math.max((resizer.columnStartWidth || 0) + diff, ResizingMode.getMinWidth(column)) * 10) / 10;
         this.columnWidthUnits[column.id] = 0; // Set to px
-        // Change width units of all columns on the right to px.
+        // Change width units of all columns to px.
         const vp = this.viewport;
-        const colIndex = column.index;
-        for (let i = colIndex; i < vp.columns.length; ++i) {
-            const rightCol = vp.columns[i];
-            const rcWidth = this.columnWidths[rightCol.id] =
-                rightCol.getWidth();
-            this.columnWidthUnits[rightCol.id] = 0; // Set to px
-            rightCol.setOptions({ width: rcWidth });
+        for (let i = 0; i < vp.columns.length; ++i) {
+            const col = vp.columns[i];
+            if (col.id === column.id) {
+                continue;
+            }
+            const colWidth = this.columnWidths[col.id] = col.getWidth();
+            this.columnWidthUnits[col.id] = 0; // Set to px
+            col.setOptions({ width: colWidth });
         }
         column.setOptions({ width });
     }

package/es-modules/Grid/Core/Table/ColumnResizing/ResizingMode.js

@@ -2,19 +2,18 @@
  *
  *  Resizing Mode abstract class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
  *
  * */
 'use strict';
-import U from '../../../../Core/Utilities.js';
-const { getStyle, defined } = U;
+import { defined, getStyle } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -86,7 +85,9 @@ class ResizingMode {
      */
     loadColumn(column) {
         const rawWidth = column.options.width;
-        if (!rawWidth) {
+        if (!defined(rawWidth) || rawWidth === 'auto') {
+            delete this.columnWidths[column.id];
+            delete this.columnWidthUnits[column.id];
             return;
         }
         let value;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ColumnToolbar.d.ts

@@ -1,3 +1,4 @@
+import type Grid from '../../../Grid';
 import type Toolbar from '../../../UI/Toolbar';
 import type Column from '../../Column';
 import ToolbarButton from '../../../UI/ToolbarButton.js';
@@ -10,6 +11,10 @@ declare class HeaderCellToolbar implements Toolbar {
      * The column that this toolbar belongs to.
      */
     column: Column;
+    /**
+     * Reference to the Grid instance for icon registry and options.
+     */
+    get grid(): Grid;
     buttons: ToolbarButton[];
     container?: HTMLDivElement;
     focusCursor: number;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ColumnToolbar.js

@@ -2,11 +2,11 @@
  *
  *  Grid Header Cell Toolbar class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
@@ -18,15 +18,20 @@ import Globals from '../../../Globals.js';
 import SortToolbarButton from './ToolbarButtons/SortToolbarButton.js';
 import FilterToolbarButton from './ToolbarButtons/FilterToolbarButton.js';
 import MenuToolbarButton from './ToolbarButtons/MenuToolbarButton.js';
-import U from '../../../../../Core/Utilities.js';
+import { getStyle } from '../../../../../Shared/Utilities.js';
 const { makeHTMLElement } = GridUtils;
-const { getStyle } = U;
 /* *
  *
  *  Class
  *
  * */
 class HeaderCellToolbar {
+    /**
+     * Reference to the Grid instance for icon registry and options.
+     */
+    get grid() {
+        return this.column.viewport.grid;
+    }
     /* *
      *
      *  Constructor
@@ -51,7 +56,9 @@ class HeaderCellToolbar {
      */
     renderFull() {
         const columnOptions = this.column.options;
-        if (columnOptions.sorting?.sortable) {
+        const sortingEnabled = columnOptions.sorting?.enabled ??
+            columnOptions.sorting?.sortable;
+        if (sortingEnabled) {
             new SortToolbarButton().add(this);
         }
         if (columnOptions.filtering?.enabled &&
@@ -61,7 +68,9 @@ class HeaderCellToolbar {
     }
     renderMinimized() {
         const columnOptions = this.column.options;
-        if (columnOptions.sorting?.sortable || (columnOptions.filtering?.enabled &&
+        const sortingEnabled = columnOptions.sorting?.enabled ??
+            columnOptions.sorting?.sortable;
+        if (sortingEnabled || (columnOptions.filtering?.enabled &&
             !columnOptions.filtering.inline)) {
             new MenuToolbarButton().add(this);
         }
@@ -127,6 +136,11 @@ class HeaderCellToolbar {
             }
         }
         if (!shouldBeMinimized) {
+            // Ensure we reset any "minimized only" header state. This can
+            // happen if the grid was initialized in a hidden container
+            // (e.g. display:none) where widths measure as 0. (#24002)
+            this.isMenuCentered = void 0;
+            this.column.header?.container?.classList.remove(Globals.getClassName('noWidth'));
             return;
         }
         const parent = this.column.header?.htmlElement;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/FilterPopup.js

@@ -2,11 +2,11 @@
  *
  *  Grid Filter Popup class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
@@ -14,8 +14,7 @@
  * */
 'use strict';
 import Popup from '../../../UI/Popup.js';
-import U from '../../../../../Core/Utilities.js';
-const { merge } = U;
+import { merge } from '../../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuButtons/FilterMenuButton.js

@@ -2,11 +2,11 @@
  *
  *  Grid Filter Context Menu Button class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
@@ -16,8 +16,7 @@
 import FilterPopup from '../FilterPopup.js';
 import StateHelpers from '../StateHelpers.js';
 import ContextMenuButton from '../../../../UI/ContextMenuButton.js';
-import U from '../../../../../../Core/Utilities.js';
-const { addEvent } = U;
+import { addEvent } from '../../../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuButtons/SortMenuButton.d.ts

@@ -4,8 +4,17 @@ import ContextMenuButton from '../../../../UI/ContextMenuButton.js';
 declare class SortMenuButton extends ContextMenuButton {
     contextMenu?: MenuPopup;
     private direction;
+    private baseLabel;
     constructor(langOptions: LangOptions, direction: typeof SortMenuButton.prototype.direction);
     protected refreshState(): void;
+    /**
+     * Updates the label to include the sort priority when multi-column
+     * sorting is active.
+     *
+     * @param column
+     * The column to get the priority from, or undefined to reset the label.
+     */
+    private updateLabelWithPriority;
     protected addEventListeners(): void;
     protected clickHandler(event: MouseEvent): void;
 }