@highcharts/grid-pro 2.1.1 → 2.2.0

package/es-modules/Grid/Core/Options.d.ts

@@ -5,6 +5,7 @@ import type { ColumnDataType } from './Table/Column';
 import type DataTable from '../../Data/DataTable';
 import type DataTableOptions from '../../Data/DataTableOptions';
 import type Cell from './Table/Cell';
+import type Column from './Table/Column';
 import type { LangOptionsCore } from '../../Shared/LangOptionsCore';
 import type { Condition as ColumnFilteringCondition } from './Table/Actions/ColumnFiltering/FilteringTypes';
 /**
@@ -12,6 +13,11 @@ import type { Condition as ColumnFilteringCondition } from './Table/Actions/Colu
  * formatted cell's string.
  */
 export type CellFormatterCallback = (this: Cell) => string;
+/**
+ * Callback function to be called when a header event is triggered. Returns a
+ * formatted header's string.
+ */
+export type HeaderFormatterCallback = (this: Column) => string;
 /**
  * Column sorting order type.
  */
@@ -337,7 +343,7 @@ export interface ColumnHeaderOptions {
      * @return
      * A string to be set as a header cell's content.
      */
-    formatter?: CellFormatterCallback;
+    formatter?: HeaderFormatterCallback;
 }
 /**
  * Column sorting options available for applying to all columns at once.
@@ -355,6 +361,11 @@ export interface ColumnSortingOptions {
      *
      * @default true
      */
+    enabled?: boolean;
+    /**
+     * @deprecated
+     * Use `enabled` instead
+     */
     sortable?: boolean;
     /**
      * Custom compare function to sort the column values. It overrides the
@@ -384,6 +395,11 @@ export interface IndividualColumnSortingOptions extends ColumnSortingOptions {
      * @default null
      */
     order?: ColumnSortingOrder;
+    /**
+     * Priority of this column when multiple columns are sorted. Lower numbers
+     * have higher priority.
+     */
+    priority?: number;
 }
 /**
  * Column options that can be set for each column individually.

package/es-modules/Grid/Core/Options.js

@@ -2,11 +2,11 @@
  *
  *  Grid options
  *
- *  (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/Pagination/Pagination.js

@@ -2,11 +2,11 @@
  *
  *  Grid Pagination 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:
  *  - Sebastian Bochan

package/es-modules/Grid/Core/Pagination/PaginationOptions.d.ts

@@ -1,19 +1,3 @@
-/* *
- *
- *  (c) 2010-2024 Torstein Honsi
- *
- *  License: www.highcharts.com/license
- *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
- *
- * */
-
-/* *
- *
- *  Declarations
- *
- * */
-
 /**
  * Page size selector configuration options.
  */
@@ -24,7 +8,6 @@ export interface PageSizeSelectorOptions {
      * @default true
      */
     enabled?: boolean;
-
     /**
      * Available options for page size dropdown.
      *
@@ -32,7 +15,6 @@ export interface PageSizeSelectorOptions {
      */
     options?: Array<number>;
 }
-
 /**
  * Controls options for pagination UI elements.
  */
@@ -45,7 +27,6 @@ export interface PaginationControlsOptions {
      * @default { enabled: true, options: [10, 20, 50, 100] }
      */
     pageSizeSelector?: boolean | PageSizeSelectorOptions;
-
     /**
      * Whether to show the page information text
      * (e.g., "Showing 1 - 20 of 200").
@@ -53,21 +34,18 @@ export interface PaginationControlsOptions {
      * @default true
      */
     pageInfo?: boolean | PageInfoOptions;
-
     /**
      * Whether to show the first/last page controls buttons.
      *
      * @default true
      */
     firstLastButtons?: boolean | FirstLastButtonsOptions;
-
     /**
      * Whether to show the previous/next page controls buttons.
      *
      * @default true
      */
     previousNextButtons?: boolean | PreviousNextButtonsOptions;
-
     /**
      * Page number buttons configuration.
      *
@@ -75,7 +53,6 @@ export interface PaginationControlsOptions {
      */
     pageButtons?: boolean | PageButtonsOptions;
 }
-
 /**
  * Language options for pagination text values.
  */
@@ -87,42 +64,36 @@ export interface PaginationLangOptions {
      * @default "Showing {start} - {end} of {total} (Page {currentPage} of {totalPages})" // eslint-disable-line
      */
     pageInfo?: string;
-
     /**
      * Text for the page size label.
      *
      * @default "rows per page"
      */
     pageSizeLabel?: string;
-
     /**
      * Text for the first page button (accessibility).
      *
      * @default "First page"
      */
     firstPage?: string;
-
     /**
      * Text for the previous page button (accessibility).
      *
      * @default "Previous page"
      */
     previousPage?: string;
-
     /**
      * Text for the next page button (accessibility).
      *
      * @default "Next page"
      */
     nextPage?: string;
-
     /**
      * Text for the last page button (accessibility).
      *
      * @default "Last page"
      */
     lastPage?: string;
-
     /**
      * Text for page number button (accessibility).
      * Placeholder: {page}
@@ -130,7 +101,6 @@ export interface PaginationLangOptions {
      * @default "Page {page}"
      */
     pageNumber?: string;
-
     /**
      * Text for ellipsis (accessibility).
      *
@@ -138,7 +108,6 @@ export interface PaginationLangOptions {
      */
     ellipsis?: string;
 }
-
 /**
  * Pagination options.
  */
@@ -149,14 +118,12 @@ export interface PaginationOptions {
      * @default false
      */
     enabled?: boolean;
-
     /**
      * The current page number.
      *
      * @default 1
      */
     page?: number;
-
     /**
      * Initial number of items per page when the Grid is initialized.
      * This value will be used as the default page size if not specified
@@ -165,20 +132,17 @@ export interface PaginationOptions {
      * @default 10
      */
     pageSize?: number;
-
     /**
      * Position of the pagination container relative to the table.
      *
      * @default 'bottom'
      */
     position?: string;
-
     /**
      * Controls options for pagination UI elements.
      */
     controls?: PaginationControlsOptions;
 }
-
 /**
  * Page buttons configuration options.
  */
@@ -189,7 +153,6 @@ export interface PageButtonsOptions {
      * @default true
      */
     enabled?: boolean;
-
     /**
      * Maximum number of page number buttons to show before using ellipsis.
      *
@@ -197,7 +160,6 @@ export interface PageButtonsOptions {
      */
     count?: number;
 }
-
 /**
  * Page info configuration options.
  */
@@ -209,7 +171,6 @@ export interface PageInfoOptions {
      */
     enabled?: boolean;
 }
-
 /**
  * First/last page navigation buttons configuration options.
  */
@@ -221,7 +182,6 @@ export interface FirstLastButtonsOptions {
      */
     enabled?: boolean;
 }
-
 /**
  * Previous/next page navigation buttons configuration options.
  */

package/es-modules/Grid/Core/Pagination/PaginationOptions.js

@@ -0,0 +1,11 @@
+/* *
+ *
+ *  (c) 2010-2026 Highsoft AS
+ *  Author: Torstein Honsi
+ *
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
+ *
+ *
+ * */
+export {};

package/es-modules/Grid/Core/Querying/FilteringController.js

@@ -2,11 +2,11 @@
  *
  *  Grid Filtering Controller 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/Querying/PaginationController.js

@@ -2,11 +2,11 @@
  *
  *  Grid Pagination Controller 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:
  *  - Sebastian Bochan

package/es-modules/Grid/Core/Querying/QueryingController.js

@@ -2,11 +2,11 @@
  *
  *  Grid Querying Controller 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/Querying/SortingController.d.ts

@@ -13,6 +13,10 @@ declare class SortingController {
      * The current sorting options: column ID and sorting order.
      */
     currentSorting?: SortingState;
+    /**
+     * The current multi-column sorting options in priority order.
+     */
+    currentSortings?: SortingState[];
     /**
      * The modifier that is applied to the data table.
      */
@@ -36,6 +40,17 @@ declare class SortingController {
      * The column ID to sort by.
      */
     setSorting(order: ColumnSortingOrder, columnId?: string): void;
+    setSorting(sortings: SortingState[]): void;
+    /**
+     * Checks whether two sorting state arrays are equal.
+     *
+     * @param a
+     * First sorting state array.
+     *
+     * @param b
+     * Second sorting state array.
+     */
+    private static sortingsEqual;
     /**
      * Returns the sorting options from the data grid options.
      */

package/es-modules/Grid/Core/Querying/SortingController.js

@@ -2,11 +2,11 @@
  *
  *  Grid Sorting Controller 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
@@ -37,23 +37,24 @@ class SortingController {
     constructor(querying) {
         this.querying = querying;
     }
-    /* *
-    *
-    *  Functions
-    *
-    * */
-    /**
-     * Sets the sorting state. If the new sorting state is different than the
-     * current one, the `shouldBeUpdated` flag is set to `true`. If the
-     * same, the flag is set to `false`.
-     *
-     * @param order
-     * The sorting order.
-     *
-     * @param columnId
-     * The column ID to sort by.
-     */
-    setSorting(order, columnId) {
+    setSorting(orderOrSortings, columnId) {
+        if (Array.isArray(orderOrSortings)) {
+            const sortings = orderOrSortings
+                .filter((sorting) => !!(sorting.columnId && sorting.order))
+                .map((sorting) => ({
+                columnId: sorting.columnId,
+                order: sorting.order
+            }));
+            const currentSortings = this.currentSortings || [];
+            if (!SortingController.sortingsEqual(sortings, currentSortings)) {
+                this.querying.shouldBeUpdated = true;
+                this.currentSortings = sortings;
+                this.currentSorting = sortings[0] || { order: null };
+            }
+            this.modifier = this.createModifier();
+            return;
+        }
+        const order = orderOrSortings;
         if (this.currentSorting?.columnId !== columnId ||
             this.currentSorting?.order !== order) {
             this.querying.shouldBeUpdated = true;
@@ -61,69 +62,106 @@ class SortingController {
                 columnId,
                 order
             };
+            this.currentSortings = (order && columnId ?
+                [{ columnId, order }] :
+                []);
         }
         this.modifier = this.createModifier();
     }
+    /**
+     * Checks whether two sorting state arrays are equal.
+     *
+     * @param a
+     * First sorting state array.
+     *
+     * @param b
+     * Second sorting state array.
+     */
+    static sortingsEqual(a, b) {
+        if (a.length !== b.length) {
+            return false;
+        }
+        for (let i = 0, iEnd = a.length; i < iEnd; ++i) {
+            if (a[i].columnId !== b[i].columnId ||
+                a[i].order !== b[i].order) {
+                return false;
+            }
+        }
+        return true;
+    }
     /**
      * Returns the sorting options from the data grid options.
      */
     getSortingOptions() {
         const grid = this.querying.grid, { columnOptionsMap } = grid;
         if (!columnOptionsMap) {
-            return { order: null };
+            return [];
         }
         const columnIDs = Object.keys(columnOptionsMap);
-        let foundOrder = null;
-        let foundColumnId;
-        for (let i = columnIDs.length - 1; i > -1; --i) {
+        const sortings = [];
+        for (let i = 0, iEnd = columnIDs.length; i < iEnd; ++i) {
             const columnId = columnIDs[i];
             const columnOptions = columnOptionsMap[columnId]?.options || {};
             const order = columnOptions.sorting?.order;
             if (order) {
-                if (foundColumnId) {
-                    // eslint-disable-next-line no-console
-                    console.warn('Grid: Only one column can be sorted at a time. ' +
-                        'Data will be sorted only by the last found column ' +
-                        `with the sorting order defined in the options: "${foundColumnId}".`);
-                    break;
-                }
-                foundOrder = order;
-                foundColumnId = columnId;
+                sortings.push({
+                    columnId,
+                    order,
+                    priority: columnOptions.sorting?.priority,
+                    index: i
+                });
             }
         }
-        return {
-            columnId: foundColumnId,
-            order: foundOrder
-        };
+        if (sortings.some((sorting) => typeof sorting.priority === 'number')) {
+            sortings.sort((a, b) => {
+                const aPriority = (typeof a.priority === 'number' ?
+                    a.priority :
+                    Number.POSITIVE_INFINITY);
+                const bPriority = (typeof b.priority === 'number' ?
+                    b.priority :
+                    Number.POSITIVE_INFINITY);
+                if (aPriority !== bPriority) {
+                    return aPriority - bPriority;
+                }
+                return a.index - b.index;
+            });
+        }
+        else {
+            sortings.reverse();
+        }
+        return sortings.map((sorting) => ({
+            columnId: sorting.columnId,
+            order: sorting.order
+        }));
     }
     /**
      * Loads sorting options from the data grid options.
      */
     loadOptions() {
-        const stateFromOptions = this.getSortingOptions();
-        if (stateFromOptions.columnId !== this.currentSorting?.columnId ||
-            stateFromOptions.order !== this.currentSorting?.order) {
-            this.setSorting(stateFromOptions.order, stateFromOptions.columnId);
+        const sortingsFromOptions = this.getSortingOptions();
+        if (!SortingController.sortingsEqual(sortingsFromOptions, this.currentSortings || [])) {
+            this.setSorting(sortingsFromOptions);
         }
     }
     /**
      * Returns the sorting modifier based on the loaded sorting options.
      */
     createModifier() {
-        if (!this.currentSorting) {
-            return;
-        }
-        const { columnId, order } = this.currentSorting;
-        if (!order || !columnId) {
+        const sortings = (this.currentSortings ||
+            (this.currentSorting ? [this.currentSorting] : [])).filter((sorting) => !!(sorting.columnId && sorting.order));
+        if (!sortings.length) {
             return;
         }
         const grid = this.querying.grid;
+        const defaultCompare = grid.options?.columnDefaults?.sorting?.compare;
         return new SortModifier({
-            orderByColumn: columnId,
-            direction: order,
-            compare: grid.columnOptionsMap?.[columnId]?.options
-                ?.sorting?.compare ||
-                grid.options?.columnDefaults?.sorting?.compare
+            direction: sortings[0].order,
+            columns: sortings.map((sorting) => ({
+                column: sorting.columnId,
+                direction: sorting.order,
+                compare: grid.columnOptionsMap?.[sorting.columnId]
+                    ?.options?.sorting?.compare || defaultCompare
+            }))
         });
     }
 }

package/es-modules/Grid/Core/Table/Actions/ColumnFiltering/ColumnFiltering.js

@@ -2,11 +2,11 @@
  *
  *  Grid ColumnFiltering 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/Actions/ColumnFiltering/FilterCell.d.ts

@@ -8,7 +8,7 @@ declare class FilterCell extends HeaderCell {
     column: Column;
     constructor(row: Row, column: Column);
     render(): void;
-    protected onKeyDown(e: KeyboardEvent): void;
-    protected onClick(e: MouseEvent): void;
+    onKeyDown(e: KeyboardEvent): void;
+    onClick(e: MouseEvent): void;
 }
 export default FilterCell;

package/es-modules/Grid/Core/Table/Actions/ColumnFiltering/FilterCell.js

@@ -2,11 +2,11 @@
  *
  *  Grid Filter Cell 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/Actions/ColumnFiltering/FilterRow.js

@@ -2,11 +2,11 @@
  *
  *  Grid FilteringRow 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/Actions/ColumnFiltering/FilteringTypes.js

@@ -2,11 +2,11 @@
  *
  *  Grid Filtering Types and Constants
  *
- *  (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/Actions/ColumnSorting.d.ts

@@ -26,6 +26,10 @@ declare class ColumnSorting {
      * Adds attributes to the column header.
      */
     private addHeaderElementAttributes;
+    /**
+     * Refreshes the sorting-related header attributes and classes.
+     */
+    refreshHeaderAttributes(): void;
     /**
      * Updates the column options with the new sorting state.
      *
@@ -40,12 +44,18 @@ declare class ColumnSorting {
      * @param order
      * The order of sorting. It can be `'asc'`, `'desc'` or `null` if the
      * sorting should be disabled.
+     *
+     * @param additive
+     * Whether to add this sort to existing sorts or replace them.
      */
-    setOrder(order: ColumnSortingOrder): Promise<void>;
+    setOrder(order: ColumnSortingOrder, additive?: boolean): Promise<void>;
     /**
      * Toggle sorting order for the column in the order: asc -> desc -> none
+     *
+     * @param e
+     * Optional mouse or keyboard event.
      */
-    toggle: () => void;
+    toggle: (e?: MouseEvent | KeyboardEvent) => void;
 }
 export interface ColumnSortingEvent {
     target: Column;