@highcharts/grid-pro 2.1.1 → 2.3.0

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,21 @@ export interface PaginationOptions {
      * @default 10
      */
     pageSize?: number;
-
     /**
      * Position of the pagination container relative to the table.
      *
      * @default 'bottom'
      */
     position?: string;
-
+    /**
+     * Alignment of the pagination elements within the wrapper.
+     */
+    align?: 'left' | 'center' | 'right' | 'distributed';
     /**
      * Controls options for pagination UI elements.
      */
     controls?: PaginationControlsOptions;
 }
-
 /**
  * Page buttons configuration options.
  */
@@ -189,7 +157,6 @@ export interface PageButtonsOptions {
      * @default true
      */
     enabled?: boolean;
-
     /**
      * Maximum number of page number buttons to show before using ellipsis.
      *
@@ -197,7 +164,6 @@ export interface PageButtonsOptions {
      */
     count?: number;
 }
-
 /**
  * Page info configuration options.
  */
@@ -209,7 +175,6 @@ export interface PageInfoOptions {
      */
     enabled?: boolean;
 }
-
 /**
  * First/last page navigation buttons configuration options.
  */
@@ -221,7 +186,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
@@ -14,8 +14,7 @@
  * */
 'use strict';
 import FilterModifier from '../../../Data/Modifiers/FilterModifier.js';
-import U from '../../../Core/Utilities.js';
-const { isString } = U;
+import { isString } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Core/Querying/PaginationController.d.ts

@@ -23,7 +23,7 @@ declare class PaginationController {
     /**
      * The number of rows before pagination.
      */
-    private _totalItems?;
+    totalItemsCount?: number;
     /**
      * Constructs the PaginationController instance.
      *
@@ -32,7 +32,7 @@ declare class PaginationController {
      */
     constructor(querying: QueryingController);
     /**
-     * Total number of items (rows)
+     * Total number of items (rows before pagination).
      */
     get totalItems(): number;
     /**

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
@@ -52,10 +52,10 @@ class PaginationController {
     *
     * */
     /**
-     * Total number of items (rows)
+     * Total number of items (rows before pagination).
      */
     get totalItems() {
-        return this._totalItems ?? this.querying.grid.dataTable?.rowCount ?? 0;
+        return this.totalItemsCount ?? 0;
     }
     /**
      * Gets the total number of pages.
@@ -126,7 +126,7 @@ class PaginationController {
         // Calculate the start index (0-based)
         const start = (currentPage - 1) * pageSize;
         const end = Math.min(start + pageSize, rowsCountBeforePagination);
-        this._totalItems = rowsCountBeforePagination;
+        this.totalItemsCount = rowsCountBeforePagination;
         return new RangeModifier({
             start,
             end

package/es-modules/Grid/Core/Querying/QueryingController.d.ts

@@ -51,7 +51,7 @@ declare class QueryingController {
      */
     getGroupedModifiers(): DataModifier[];
     /**
-     * Apply all modifiers to the data table.
+     * Apply all modifiers to the data provider.
      */
     private modifyData;
 }

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

@@ -2,18 +2,17 @@
  *
  *  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
  *
  * */
 'use strict';
-import ChainModifier from '../../../Data/Modifiers/ChainModifier.js';
 import SortingController from './SortingController.js';
 import FilteringController from './FilteringController.js';
 import PaginationController from './PaginationController.js';
@@ -89,33 +88,10 @@ class QueryingController {
         return modifiers;
     }
     /**
-     * Apply all modifiers to the data table.
+     * Apply all modifiers to the data provider.
      */
     async modifyData() {
-        const originalDataTable = this.grid.dataTable;
-        if (!originalDataTable) {
-            return;
-        }
-        const groupedModifiers = this.getGroupedModifiers();
-        let interTable;
-        // Grouped modifiers
-        if (groupedModifiers.length > 0) {
-            const chainModifier = new ChainModifier({}, ...groupedModifiers);
-            const dataTableCopy = originalDataTable.clone();
-            await chainModifier.modify(dataTableCopy.getModified());
-            interTable = dataTableCopy.getModified();
-        }
-        else {
-            interTable = originalDataTable.getModified();
-        }
-        // Pagination modifier
-        const paginationModifier = this.pagination.createModifier(interTable.rowCount);
-        if (paginationModifier) {
-            interTable = interTable.clone();
-            await paginationModifier.modify(interTable);
-            interTable = interTable.getModified();
-        }
-        this.grid.presentationTable = interTable;
+        await this.grid.dataProvider?.applyQuery();
         this.shouldBeUpdated = false;
     }
 }

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/Responsive/ResponsiveComposition.d.ts

@@ -0,0 +1,53 @@
+import type { DeepPartial } from '../../../Shared/Types';
+import type Grid from '../../Core/Grid';
+import type { Options } from '../Options';
+import type { ResponsiveOptions, RuleOptions } from './ResponsiveOptions';
+/**
+ * Extends the grid classes with responsive options.
+ *
+ * @param GridClass
+ * The class to extend.
+ *
+ */
+export declare function compose(GridClass: typeof Grid): void;
+declare module '../Options' {
+    interface Options {
+        /**
+         * Allows setting a set of rules to apply for different screen or grid
+         * sizes. Each rule specifies additional grid options.
+         */
+        responsive?: ResponsiveOptions;
+    }
+}
+declare module '../Grid' {
+    export default interface Grid {
+        /**
+         * Tracks the ResizeObserver instance for the grid.
+         * @private
+         */
+        resizeObserver?: ResizeObserver;
+        /**
+         * Cache of currently active responsive rules.
+         * @private
+         */
+        activeRules?: Set<RuleOptions>;
+        /**
+         * Stores merged responsive options and undo data.
+         * @private
+         */
+        currentResponsive?: {
+            ruleIds?: string;
+            mergedOptions: DeepPartial<Options>;
+            undoOptions: DeepPartial<Options>;
+        };
+        /**
+         * Prevents recursive updates during responsive changes.
+         * @private
+         */
+        updatingResponsive?: boolean;
+    }
+}
+declare const _default: {
+    readonly compose: typeof compose;
+};
+export default _default;