@highcharts/grid-pro 2.1.1 → 2.3.0

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

@@ -2,11 +2,11 @@
  *
  *  Grid Sort 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
@@ -15,8 +15,7 @@
 'use strict';
 import ContextMenuButton from '../../../../UI/ContextMenuButton.js';
 import StateHelpers from '../StateHelpers.js';
-import U from '../../../../../../Core/Utilities.js';
-const { addEvent } = U;
+import { addEvent } from '../../../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -29,9 +28,10 @@ class SortMenuButton extends ContextMenuButton {
      *
      * */
     constructor(langOptions, direction) {
-        super({ icon: direction === 'asc' ? 'sortAsc' : 'sortDesc' });
+        super({ icon: direction === 'asc' ? 'arrowUp' : 'arrowDown' });
         this.direction = direction;
-        this.options.label = langOptions[direction === 'asc' ? 'sortAscending' : 'sortDescending'];
+        this.baseLabel = langOptions[direction === 'asc' ? 'sortAscending' : 'sortDescending'] || '';
+        this.options.label = this.baseLabel;
     }
     /* *
      *
@@ -43,7 +43,35 @@ class SortMenuButton extends ContextMenuButton {
         if (!column) {
             return;
         }
-        this.setActive(StateHelpers.isSorted(column, this.direction));
+        const isSorted = StateHelpers.isSorted(column, this.direction);
+        this.setActive(isSorted);
+        // Update label with priority if multi-column sorting is active
+        this.updateLabelWithPriority(isSorted ? column : void 0);
+    }
+    /**
+     * 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.
+     */
+    updateLabelWithPriority(column) {
+        if (!column) {
+            this.setLabel(this.baseLabel);
+            return;
+        }
+        const { currentSortings } = column.viewport.grid.querying.sorting;
+        const sortings = currentSortings || [];
+        const sortIndex = sortings.findIndex((sorting) => sorting.columnId === column.id);
+        const priority = (sortings.length > 1 && sortIndex !== -1 ?
+            sortIndex + 1 :
+            void 0);
+        if (priority) {
+            this.setLabel(`${this.baseLabel} (${priority})`);
+        }
+        else {
+            this.setLabel(this.baseLabel);
+        }
     }
     addEventListeners() {
         super.addEventListeners();
@@ -60,7 +88,7 @@ class SortMenuButton extends ContextMenuButton {
         if (!sorting) {
             return;
         }
-        void sorting.setOrder(this.isActive ? null : this.direction);
+        void sorting.setOrder(this.isActive ? null : this.direction, !!event?.shiftKey);
     }
 }
 /* *

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

@@ -2,11 +2,11 @@
  *
  *  Grid Menu 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
@@ -44,7 +44,8 @@ class MenuPopup extends ContextMenu {
         const columnOptions = this.button.toolbar?.column.options || {};
         const filteringEnabled = (columnOptions.filtering?.enabled &&
             !columnOptions.filtering.inline);
-        const sortingEnabled = columnOptions.sorting?.sortable;
+        const sortingEnabled = columnOptions.sorting?.enabled ??
+            columnOptions.sorting?.sortable;
         this.addHeader(this.button.toolbar?.column.header?.value || '', lang.column);
         if (sortingEnabled) {
             new SortMenuButton(lang, 'desc').add(this);

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

@@ -2,11 +2,11 @@
  *
  *  Grid Header Cell State Helpers 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
@@ -44,13 +44,17 @@ export function isFiltered(column) {
  * only if the column is sorted in the provided order.
  */
 export function isSorted(column, order) {
-    const { currentSorting } = column.viewport.grid.querying.sorting || {};
-    if (currentSorting?.columnId !== column.id) {
+    const { currentSorting, currentSortings } = column.viewport.grid.querying.sorting || {};
+    const columnSorting = (currentSortings?.find((sorting) => sorting.columnId === column.id) ||
+        (currentSorting?.columnId === column.id ?
+            currentSorting :
+            void 0));
+    if (!columnSorting?.order) {
         return false;
     }
     return order ?
-        currentSorting?.order === order :
-        !!currentSorting?.order;
+        columnSorting.order === order :
+        !!columnSorting.order;
 }
 /* *
  *

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

@@ -2,11 +2,11 @@
  *
  *  Grid Filter Toolbar 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 ToolbarButton from '../../../../UI/ToolbarButton.js';
 import StateHelpers from '../StateHelpers.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/ToolbarButtons/MenuToolbarButton.js

@@ -2,11 +2,11 @@
  *
  *  Grid Menu Toolbar 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 ToolbarButton from '../../../../UI/ToolbarButton.js';
 import StateHelpers from '../StateHelpers.js';
 import MenuPopup from '../MenuPopup.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/ToolbarButtons/SortToolbarButton.d.ts

@@ -2,10 +2,13 @@ import type ColumnToolbar from '../ColumnToolbar.js';
 import ToolbarButton from '../../../../UI/ToolbarButton.js';
 declare class SortToolbarButton extends ToolbarButton {
     toolbar?: ColumnToolbar;
+    private sortPriorityIndicator?;
+    private getColumnLabel;
+    private updateA11yLabel;
     constructor();
     protected clickHandler(event: MouseEvent): void;
+    private renderSortPriorityIndicator;
     refreshState(): void;
     protected addEventListeners(): void;
-    protected renderActiveIndicator(): void;
 }
 export default SortToolbarButton;

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

@@ -2,11 +2,11 @@
  *
  *  Grid Sort Toolbar 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
@@ -14,15 +14,58 @@
  * */
 'use strict';
 import ToolbarButton from '../../../../UI/ToolbarButton.js';
+import GridUtils from '../../../../GridUtils.js';
 import StateHelpers from '../StateHelpers.js';
-import U from '../../../../../../Core/Utilities.js';
-const { addEvent } = U;
+import { addEvent } from '../../../../../../Shared/Utilities.js';
+const { formatText } = GridUtils;
 /* *
  *
  *  Class
  *
  * */
 class SortToolbarButton extends ToolbarButton {
+    getColumnLabel() {
+        const column = this.toolbar?.column;
+        const label = (column?.header?.headerContent?.textContent ||
+            column?.header?.value ||
+            column?.id ||
+            '').trim();
+        return label || column?.id || '';
+    }
+    updateA11yLabel(order, priority) {
+        const button = this.wrapper?.querySelector('button');
+        if (!button) {
+            return;
+        }
+        const column = this.toolbar?.column;
+        const lang = column?.viewport.grid.options?.lang;
+        const sortingLang = lang?.accessibility?.sorting;
+        const announcements = sortingLang?.announcements;
+        const columnLabel = this.getColumnLabel();
+        const labelParts = [];
+        if (columnLabel) {
+            labelParts.push(columnLabel);
+        }
+        let stateLabel;
+        if (order === 'asc') {
+            stateLabel = announcements?.ascending;
+        }
+        else if (order === 'desc') {
+            stateLabel = announcements?.descending;
+        }
+        else {
+            stateLabel = announcements?.none;
+        }
+        if (stateLabel) {
+            labelParts.push(stateLabel);
+        }
+        if (priority) {
+            labelParts.push(formatText(sortingLang?.priority ?? 'Priority {priority}.', { priority: String(priority) }));
+        }
+        if (labelParts.length) {
+            button.setAttribute('aria-label', labelParts.join(' '));
+        }
+    }
     /* *
      *
      *  Constructor
@@ -30,8 +73,7 @@ class SortToolbarButton extends ToolbarButton {
      * */
     constructor() {
         super({
-            icon: 'upDownArrows',
-            classNameKey: 'headerCellSortIcon',
+            icon: 'arrowUpDown',
             accessibility: {
                 ariaLabel: 'sort'
             }
@@ -44,21 +86,55 @@ class SortToolbarButton extends ToolbarButton {
      * */
     clickHandler(event) {
         super.clickHandler(event);
-        this.toolbar?.column.sorting?.toggle();
+        this.toolbar?.column.sorting?.toggle(event);
+    }
+    renderSortPriorityIndicator(priority) {
+        const wrapper = this.wrapper;
+        if (!wrapper) {
+            return;
+        }
+        const button = wrapper.querySelector('button');
+        if (!button) {
+            return;
+        }
+        if (!priority) {
+            this.sortPriorityIndicator?.remove();
+            delete this.sortPriorityIndicator;
+            return;
+        }
+        if (!this.sortPriorityIndicator) {
+            this.sortPriorityIndicator = document.createElement('span');
+        }
+        // Ensure the indicator is rendered to the right of the icon.
+        button.appendChild(this.sortPriorityIndicator);
+        this.sortPriorityIndicator.textContent = String(priority);
     }
     refreshState() {
         const column = this.toolbar?.column;
         if (!column) {
             return;
         }
-        if (!StateHelpers.isSorted(column)) {
+        const { currentSortings, currentSorting } = column.viewport.grid.querying.sorting;
+        const sortings = currentSortings || [];
+        const columnSorting = (sortings.find((sorting) => sorting.columnId === column.id) ||
+            (currentSorting?.columnId === column.id ?
+                currentSorting :
+                void 0));
+        if (!StateHelpers.isSorted(column) || !columnSorting?.order) {
             this.setActive(false);
-            this.setIcon('upDownArrows');
+            this.setIcon('arrowUpDown');
+            this.renderSortPriorityIndicator();
+            this.updateA11yLabel(null);
             return;
         }
-        const { currentSorting } = column.viewport.grid.querying.sorting;
         this.setActive(true);
-        this.setIcon(currentSorting?.order === 'asc' ? 'sortAsc' : 'sortDesc');
+        this.setIcon(columnSorting.order === 'asc' ? 'arrowUp' : 'arrowDown');
+        const sortIndex = sortings.findIndex((sorting) => sorting.columnId === column.id);
+        const priority = (sortings.length > 1 && sortIndex !== -1 ?
+            sortIndex + 1 :
+            void 0);
+        this.renderSortPriorityIndicator(priority);
+        this.updateA11yLabel(columnSorting.order, priority);
     }
     addEventListeners() {
         super.addEventListeners();
@@ -69,9 +145,6 @@ class SortToolbarButton extends ToolbarButton {
         // If this grid is currently sorted, update the state
         this.eventListenerDestroyers.push(addEvent(column.viewport.grid, 'afterSort', () => this.refreshState()));
     }
-    renderActiveIndicator() {
-        // Do nothing
-    }
 }
 /* *
  *

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

@@ -53,10 +53,15 @@ declare class HeaderCell extends Cell {
     /**
      * Render the cell container.
      */
-    render(): void;
+    render(): Promise<void>;
+    /**
+     * Returns merged header styles from defaults and current column options.
+     *
+     */
+    private getColumnStyles;
     reflow(): void;
-    protected onKeyDown(e: KeyboardEvent): void;
-    protected onClick(e: MouseEvent): void;
+    onKeyDown(e: KeyboardEvent): void;
+    onClick(e: MouseEvent): void;
     /**
      * Add sorting option to the column.
      */

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

@@ -2,11 +2,11 @@
  *
  *  Grid HeaderCell 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,13 +15,11 @@
  * */
 'use strict';
 import Cell from '../Cell.js';
-import GridUtils from '../../GridUtils.js';
+import { makeHTMLElement, setHTMLContent, createOptionsProxy, resolveStyleValue, mergeStyleValues } from '../../GridUtils.js';
 import ColumnSorting from '../Actions/ColumnSorting.js';
 import Globals from '../../Globals.js';
-import Utilities from '../../../../Core/Utilities.js';
 import ColumnToolbar from './ColumnToolbar/ColumnToolbar.js';
-const { makeHTMLElement, setHTMLContent, createOptionsProxy } = GridUtils;
-const { fireEvent, isString } = Utilities;
+import { fireEvent, isString } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -102,12 +100,14 @@ class HeaderCell extends Cell {
     /**
      * Render the cell container.
      */
-    render() {
+    async render() {
         const { column } = this;
         const options = createOptionsProxy(this.superColumnOptions, column?.options);
         const headerCellOptions = options.header || {};
-        if (headerCellOptions.formatter) {
-            this.value = headerCellOptions.formatter.call(this).toString();
+        const headerValue = column ?
+            headerCellOptions.formatter?.call(column) : void 0;
+        if (headerValue) {
+            this.value = headerValue.toString();
         }
         else if (isString(headerCellOptions.format)) {
             this.value = column ?
@@ -151,7 +151,25 @@ class HeaderCell extends Cell {
         this.htmlElement.classList[column?.dataType === 'number' ? 'add' : 'remove'](Globals.getClassName('rightAlign'));
         // Add custom class name from column options
         this.setCustomClassName(options.header?.className);
+        this.setCustomStyles(this.getColumnStyles());
         fireEvent(this, 'afterRender', { column });
+        return Promise.resolve();
+    }
+    /**
+     * Returns merged header styles from defaults and current column options.
+     *
+     */
+    getColumnStyles() {
+        const { column } = this;
+        if (!column) {
+            return resolveStyleValue(this.superColumnOptions.header?.style);
+        }
+        const { grid } = this.row.viewport;
+        const rawColumnOptions = grid.columnOptionsMap?.[column.id]?.options;
+        return {
+            ...mergeStyleValues(column, grid.options?.columnDefaults?.style, rawColumnOptions?.style),
+            ...mergeStyleValues(column, grid.options?.columnDefaults?.header?.style, rawColumnOptions?.header?.style)
+        };
     }
     reflow() {
         const th = this.htmlElement;
@@ -179,13 +197,16 @@ class HeaderCell extends Cell {
         super.onKeyDown(e);
     }
     onClick(e) {
-        const column = this.column;
-        if (!column || (e.target !== this.htmlElement &&
-            e.target !== column.header?.headerContent) || column.viewport.columnsResizer?.isResizing) {
+        if (!this.column ||
+            !this.htmlElement.contains(e.target) ||
+            this.column.viewport.columnsResizer?.isResizing) {
             return;
         }
-        if (column.options.sorting?.sortable) {
-            column.sorting?.toggle();
+        // Toggle sort only when clicking header text/area, not toolbar icons
+        if (!this.toolbar?.container?.contains(e.target) &&
+            (this.column.options.sorting?.enabled ??
+                this.column.options.sorting?.sortable)) {
+            this.column.sorting?.toggle(e);
         }
         fireEvent(this, 'click', {
             originalEvent: e,

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

@@ -2,11 +2,11 @@
  *
  *  Grid HeaderRow 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 Row from '../Row.js';
 import HeaderCell from './HeaderCell.js';
 import Globals from '../../Globals.js';
-import Utils from '../../../../Core/Utilities.js';
-const { isString } = Utils;
+import { isString } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -63,7 +62,7 @@ class HeaderRow extends Row {
      *
      * @internal
      */
-    renderContent(level) {
+    async renderContent(level) {
         const headerOpt = this.viewport.grid.options?.header;
         const vp = this.viewport;
         const enabledColumns = vp.grid.enabledColumns || [];
@@ -71,7 +70,7 @@ class HeaderRow extends Row {
         vp.theadElement?.appendChild(this.htmlElement);
         this.htmlElement.classList.add(Globals.getClassName('headerRow'));
         if (!headerOpt) {
-            super.render();
+            await super.render();
         }
         else {
             const columnsOnLevel = this.getColumnsAtLevel(headerOpt, level);
@@ -110,7 +109,7 @@ class HeaderRow extends Row {
                 if (dataColumn?.index === 0 && i === 0) {
                     headerCell.htmlElement.classList.add(Globals.getClassName('columnFirst'));
                 }
-                headerCell.render();
+                await headerCell.render();
                 if (columnId) {
                     headerCell.htmlElement.setAttribute('rowSpan', (this.viewport.header?.levels || 1) - level);
                 }

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

@@ -33,7 +33,7 @@ declare class TableHeader {
     /**
      * Renders the table head content.
      */
-    render(): void;
+    render(): Promise<void>;
     /**
      * Reflows the table head's content dimensions.
      */

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

@@ -2,11 +2,11 @@
  *
  *  Grid TableHeader 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
@@ -70,7 +70,7 @@ class TableHeader {
     /**
      * Renders the table head content.
      */
-    render() {
+    async render() {
         const vp = this.viewport;
         if (!vp.grid.enabledColumns) {
             return;
@@ -78,14 +78,14 @@ class TableHeader {
         // Render regular, multiple level rows.
         for (let i = 0, iEnd = this.levels; i < iEnd; i++) {
             const row = new HeaderRow(vp, i + 1); // Avoid indexing from 0
-            row.renderContent(i);
+            await row.renderContent(i);
             this.rows.push(row);
         }
         // Render an extra row for inline filtering.
         if (vp.columns.some((column) => (column.options.filtering?.enabled &&
             column.options.filtering.inline) || false)) {
             const row = new FilterRow(vp);
-            row.renderContent();
+            await row.renderContent();
             this.rows.push(row);
         }
     }

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

@@ -39,7 +39,7 @@ declare abstract class Row {
      * Renders the row's content. It does not attach the row element to the
      * viewport nor pushes the rows to the viewport.rows array.
      */
-    render(): void;
+    render(): Promise<void>;
     /**
      * Reflows the row's content dimensions.
      */

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

@@ -2,11 +2,11 @@
  *
  *  Grid Row 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
@@ -54,11 +54,11 @@ class Row {
      * Renders the row's content. It does not attach the row element to the
      * viewport nor pushes the rows to the viewport.rows array.
      */
-    render() {
+    async render() {
         const columns = this.viewport.columns;
         for (let i = 0, iEnd = columns.length; i < iEnd; i++) {
             const cell = this.createCell(columns[i]);
-            cell.render();
+            await cell.render();
         }
         this.rendered = true;
         if (this.viewport.virtualRows) {