@highcharts/grid-pro 2.3.0 → 2.3.1

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

@@ -883,14 +883,14 @@ export class Grid {
      */
     async renderViewport() {
         const viewportMeta = this.viewport?.getStateMeta();
-        const pagination = this.pagination;
-        const paginationPosition = pagination?.options?.position;
-        this.enabledColumns = await this.getEnabledColumnIDs();
         this.credits?.destroy();
         this.viewport?.destroy();
         delete this.viewport;
-        this.resetContentWrapper();
         fireEvent(this, 'beforeRenderViewport');
+        this.resetContentWrapper();
+        this.enabledColumns = await this.getEnabledColumnIDs();
+        const pagination = this.pagination;
+        const paginationPosition = pagination?.options?.position;
         this.renderCaption();
         // Render top pagination if enabled (before table)
         if (paginationPosition === 'top') {

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

@@ -224,7 +224,7 @@ class Pagination {
             return;
         }
         const { currentPage, currentPageSize, totalItems, totalPages } = this.controller;
-        const startItem = (currentPage - 1) * currentPageSize + 1;
+        const startItem = Math.min(Math.max(0, (currentPage - 1) * currentPageSize + 1), totalItems);
         const endItem = Math.min(currentPage * currentPageSize, totalItems);
         const pageInfoText = formatText(this.lang?.pageInfo ?? '', {
             start: startItem,
@@ -767,10 +767,10 @@ class Pagination {
      * Destroy the pagination instance.
      */
     destroy() {
-        const position = this.options?.position;
-        if (position === 'footer') {
-            // For footer position, remove the entire tfoot element.
-            this.paginationContainer?.parentElement?.parentElement?.remove();
+        // Fixed container removal when switching from custom to footer.
+        const tfoot = this.paginationContainer?.closest('tfoot');
+        if (tfoot) {
+            tfoot.remove();
         }
         else {
             this.contentWrapper?.remove();

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

@@ -40,7 +40,7 @@ declare class PaginationController {
      */
     get totalPages(): number;
     /**
-     * Clamps the current page to the total number of pages.
+     * Clamps the current page to the valid range [1, totalPages].
      */
     clampPage(): void;
     /**

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

@@ -64,13 +64,14 @@ class PaginationController {
         return this.currentPageSize > 0 ? Math.ceil(this.totalItems / this.currentPageSize) : 1;
     }
     /**
-     * Clamps the current page to the total number of pages.
+     * Clamps the current page to the valid range [1, totalPages].
      */
     clampPage() {
-        if (this.currentPage <= this.totalPages) {
+        const target = Math.max(1, Math.min(this.currentPage, this.totalPages || 1));
+        if (this.currentPage === target) {
             return;
         }
-        this.currentPage = this.totalPages;
+        this.currentPage = target;
         this.querying.shouldBeUpdated = true;
     }
     /**

package/es-modules/Grid/Core/Responsive/ResponsiveComposition.js

@@ -43,14 +43,36 @@ export function compose(GridClass) {
  */
 function initResizeObserver() {
     destroyResizeObserver.call(this);
-    if (!this.container) {
+    if (!this.container || !this.contentWrapper) {
         return;
     }
     this.activeRules = new Set();
+    // Synchronously evaluate responsive rules so the first render already
+    // uses the correct options (avoids a redundant second render).
+    if (!this.updatingResponsive) {
+        const rules = this.options?.responsive?.rules || [];
+        if (rules.length > 0) {
+            const { clientWidth: width, clientHeight: height } = this.container;
+            const fakeEntry = {
+                contentRect: { width, height }
+            };
+            const matchingRules = [];
+            for (const rule of rules) {
+                if (typeof rule._id === 'undefined') {
+                    rule._id = uniqueKey();
+                }
+                if (matchResponsiveRule.call(this, rule, fakeEntry)) {
+                    matchingRules.push(rule);
+                }
+            }
+            this.activeRules = new Set(matchingRules);
+            setResponsive.call(this, matchingRules, false);
+        }
+    }
     this.resizeObserver = new ResizeObserver((entries) => {
         onResize.call(this, entries[0]);
     });
-    this.resizeObserver.observe(this.container);
+    this.resizeObserver.observe(this.contentWrapper);
 }
 /**
  * Destroys the resize observer.
@@ -90,20 +112,28 @@ function matchResponsiveRule(rule, entry) {
  *
  * @param matchingRules
  * Active responsive rules.
+ *
+ * @param redraw
+ * Whether to redraw the grid. Default is `true`.
  */
-function setResponsive(matchingRules) {
+function setResponsive(matchingRules, redraw = true) {
     const ruleIds = matchingRules.map((rule) => rule._id);
     const ruleIdsString = (ruleIds.toString() || void 0);
     const currentRuleIds = this.currentResponsive?.ruleIds;
-    if (ruleIdsString === currentRuleIds) {
+    if (ruleIdsString === currentRuleIds || this.updatingResponsive) {
         return;
     }
+    this.updatingResponsive = true;
+    let lastUpdate;
     if (this.currentResponsive) {
         const undoOptions = this.currentResponsive.undoOptions;
         this.currentResponsive = void 0;
-        this.updatingResponsive = true;
-        void this.update(undoOptions, true);
-        this.updatingResponsive = false;
+        if (redraw) {
+            lastUpdate = this.update(undoOptions, true);
+        }
+        else {
+            this.update(undoOptions, false);
+        }
     }
     if (ruleIdsString) {
         const mergedOptions = merge(...matchingRules.map((rule) => rule.gridOptions));
@@ -120,10 +150,23 @@ function setResponsive(matchingRules) {
             mergedOptions,
             undoOptions
         };
-        if (!this.updatingResponsive) {
-            void this.update(mergedOptions, true);
+        if (redraw) {
+            lastUpdate = this.update(mergedOptions, true);
+        }
+        else {
+            this.update(mergedOptions, false);
         }
     }
+    // Keep the flag alive until the last queued update finishes so that
+    // ResizeObserver callbacks arriving in the meantime are ignored.
+    if (lastUpdate !== void 0) {
+        void lastUpdate.then(() => {
+            this.updatingResponsive = false;
+        });
+    }
+    else {
+        this.updatingResponsive = false;
+    }
 }
 /**
  * Builds undo options for columns by matching them by id.
@@ -203,7 +246,7 @@ function syncColumnIds(undoOptions, mergedOptions) {
  * The resize observer entry.
  */
 function onResize(entry) {
-    if (!this.activeRules) {
+    if (!this.activeRules || this.updatingResponsive) {
         return;
     }
     const rules = this.options?.responsive?.rules || [];

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

@@ -210,8 +210,22 @@ class RowsVirtualizer {
         // Render missing rows, drop out-of-range ones, and ensure last row.
         await this.renderRows(this.rowCursor);
         const rows = this.viewport.rows;
+        // For non-virtualized rows, re-order rows to match data order.
+        if (!this.viewport.virtualRows) {
+            let node = tbody.firstElementChild;
+            for (let i = 0, iEnd = rows.length; i < iEnd; ++i) {
+                if (node === rows[i].htmlElement) {
+                    node = node.nextElementSibling;
+                    continue;
+                }
+                // Mismatch found, so append the rest in the correct order.
+                for (let j = i; j < iEnd; ++j) {
+                    tbody.appendChild(rows[j].htmlElement);
+                }
+                break;
+            }
+        }
         for (let i = 0, iEnd = rows.length; i < iEnd; ++i) {
-            // Update row data so indices map to fresh provider values.
             await rows[i].update();
         }
         if (this.viewport.virtualRows && defined(oldScrollTop)) {

package/es-modules/Grid/Pro/Credits/CreditsProComposition.d.ts

@@ -13,7 +13,7 @@ declare module '../../Core/Options' {
         /**
          * Options for the credits label.
          *
-         * Try it: {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/grid-pro/credits | Credits options}
+         * Try it: {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/grid-pro/basic/credits | Credits options}
          */
         credits?: CreditsOptions;
     }

package/es-modules/Grid/Pro/Data/DataSourceHelper.js

@@ -34,9 +34,11 @@ const filterOperatorMap = {
     '<': 'lessThan',
     '<=': 'lessThanOrEqualTo',
     contains: 'contains',
+    notContains: 'doesNotContain',
     startsWith: 'beginsWith',
     endsWith: 'endsWith',
-    empty: 'empty'
+    empty: 'empty',
+    notEmpty: 'notEmpty'
 };
 /**
  * Recursively extracts filter conditions from the Grid's FilterCondition
@@ -56,21 +58,29 @@ function extractFilterConditions(condition, filterColumns = []) {
         return filterColumns;
     }
     if (condition.operator === 'and' || condition.operator === 'or') {
-        // Logical condition - extract from nested conditions
         if (condition.conditions) {
             for (const subCondition of condition.conditions) {
                 extractFilterConditions(subCondition, filterColumns);
             }
         }
     }
-    else if (condition.columnId) {
-        // Single condition
-        const mappedOperator = filterOperatorMap[condition.operator] || condition.operator;
-        filterColumns.push({
-            id: condition.columnId,
-            condition: mappedOperator,
-            value: condition.value
-        });
+    else if (condition.columnId || condition.condition?.columnId) {
+        const conditionToUse = condition.columnId ?
+            condition : condition.condition;
+        let key = conditionToUse.operator;
+        if (condition.operator === 'not') {
+            key = condition.operator +
+                conditionToUse.operator.charAt(0).toUpperCase() +
+                conditionToUse.operator.slice(1);
+        }
+        const mapped = filterOperatorMap[key] || conditionToUse.operator;
+        if (conditionToUse.columnId) {
+            filterColumns.push({
+                id: conditionToUse.columnId,
+                condition: mapped,
+                value: conditionToUse.value
+            });
+        }
     }
     return filterColumns;
 }

package/es-modules/Shared/Utilities.js

@@ -9,7 +9,6 @@
  * */
 import H from '../Core/Globals.js';
 const { doc, win } = H;
-/* eslint-disable valid-jsdoc */
 /**
  * Add an event listener.
  *
@@ -35,7 +34,6 @@ const { doc, win } = H;
  *         A callback function to remove the added event.
  */
 export function addEvent(el, type, fn, options = {}) {
-    /* eslint-enable valid-jsdoc */
     // Add hcEvents to either the prototype (in case we're running addEvent on a
     // class) or the instance. If hasOwnProperty('hcEvents') is false, it is
     // inherited down the prototype chain, in which case we need to set the
@@ -434,7 +432,6 @@ export function erase(arr, item) {
  *         Object a, the original object.
  */
 export function extend(a, b) {
-    /* eslint-enable valid-jsdoc */
     let n;
     if (!a) {
         a = {};
@@ -467,7 +464,6 @@ export function extendClass(parent, members) {
     extend(obj.prototype, members);
     return obj;
 }
-/* eslint-disable valid-jsdoc */
 /**
  * Fire an event that was registered with {@link Highcharts#addEvent}.
  *
@@ -491,7 +487,6 @@ export function extendClass(parent, members) {
  * @return {void}
  */
 export function fireEvent(el, type, eventArguments, defaultFunction) {
-    /* eslint-enable valid-jsdoc */
     eventArguments = eventArguments || {};
     if (doc?.createEvent &&
         (el.dispatchEvent ||
@@ -628,7 +623,7 @@ export function getMagnitude(num) {
  * @param {string} path
  * Path to the property, for example `custom.myValue`.
  *
- * @param {unknown} obj
+ * @param {unknown} parent
  * Instance containing the property on the specific path.
  *
  * @return {unknown}
@@ -1002,7 +997,6 @@ export function normalizeTickInterval(interval, multiples, magnitude, allowDecim
     retInterval = correctFloat(retInterval * magnitude, -Math.round(Math.log(0.001) / Math.LN10));
     return retInterval;
 }
-/* eslint-disable valid-jsdoc */
 /**
  * Iterate over object key pairs in an object.
  *
@@ -1021,7 +1015,6 @@ export function normalizeTickInterval(interval, multiples, magnitude, allowDecim
  *        The context.
  */
 export function objectEach(obj, fn, ctx) {
-    /* eslint-enable valid-jsdoc */
     for (const key in obj) {
         if (Object.hasOwnProperty.call(obj, key)) {
             fn.call(ctx || obj[key], obj[key], key, obj);
@@ -1077,7 +1070,7 @@ export function pad(number, length, padder) {
             .replace('-', '')
             .length).join(padder || '0') + number;
 }
-/* eslint-disable valid-jsdoc */
+/* eslint-disable jsdoc/check-param-names */
 /**
  * Return the first value that is not null or undefined.
  *
@@ -1099,6 +1092,7 @@ export function pick() {
         }
     }
 }
+/* eslint-enable jsdoc/check-param-names */
 /**
  * Shortcut for parseInt
  *
@@ -1187,7 +1181,6 @@ export function replaceNested(text, ...replacements) {
     } while (text !== previous);
     return text;
 }
-/* eslint-disable valid-jsdoc */
 /**
  * Remove an event that was added with {@link Highcharts#addEvent}.
  *
@@ -1207,7 +1200,6 @@ export function replaceNested(text, ...replacements) {
  * @return {void}
  */
 export function removeEvent(el, type, fn) {
-    /* eslint-enable valid-jsdoc */
     /** @internal */
     function removeOneEvent(type, fn) {
         const removeEventListener = el.removeEventListener;

package/es-modules/masters/grid-pro.src.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts Grid Pro v2.3.0 (2026-03-12)
+ * @license Highcharts Grid Pro v2.3.1 (2026-03-24)
  * @module grid/grid-pro
  *
  * (c) 2009-2026 Highsoft AS
@@ -112,11 +112,11 @@ declare const G: {
         helpers: Record<string, Function>;
         numberFormat: (this: Templating.Owner | void, number: number, decimals: number, decimalPoint?: string, thousandsSep?: string) => string;
     };
-    readonly version: "2.3.0";
+    readonly version: "2.3.1";
     readonly win: Window & typeof globalThis;
 };
 export { AST, CellContentPro, CellRenderer, CellRendererRegistry, Column, ColumnResizing, DataConnector, DataConverter, DataCursor, DataModifier, DataProviderRegistry, DataPool, DataTable, _Grid as Grid, HeaderCell, _Options as Options, Pagination, Popup, SvgIcons, Table, TableCell, Templating };
-export declare const classNamePrefix: string, defaultOptions: import("../Shared/Types").DeepPartial<_Options>, grid: typeof _Grid.grid, grids: (_Grid | undefined)[], isHighContrastModeActive: () => boolean, product: "Grid Pro", setOptions: typeof import("../Grid/Core/Defaults.js").setOptions, version: "2.3.0", win: Window & typeof globalThis;
+export declare const classNamePrefix: string, defaultOptions: import("../Shared/Types").DeepPartial<_Options>, grid: typeof _Grid.grid, grids: (_Grid | undefined)[], isHighContrastModeActive: () => boolean, product: "Grid Pro", setOptions: typeof import("../Grid/Core/Defaults.js").setOptions, version: "2.3.1", win: Window & typeof globalThis;
 declare namespace G {
     type Options = _Options;
 }

package/es-modules/masters/grid-pro.src.js

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: LicenseRef-Highcharts
 /**
- * @license Highcharts Grid Pro v2.3.0 (2026-03-12)
+ * @license Highcharts Grid Pro v2.3.1 (2026-03-24)
  * @module grid/grid-pro
  *
  * (c) 2009-2026 Highsoft AS

package/grid-pro.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts Grid Pro v2.3.0 (2026-03-12)
+ * @license Highcharts Grid Pro v2.3.1 (2026-03-24)
  * @module grid/grid-pro
  *
  * (c) 2009-2026 Highsoft AS
@@ -112,11 +112,11 @@ declare const G: {
         helpers: Record<string, Function>;
         numberFormat: (this: Templating.Owner | void, number: number, decimals: number, decimalPoint?: string, thousandsSep?: string) => string;
     };
-    readonly version: "2.3.0";
+    readonly version: "2.3.1";
     readonly win: Window & typeof globalThis;
 };
 export { AST, CellContentPro, CellRenderer, CellRendererRegistry, Column, ColumnResizing, DataConnector, DataConverter, DataCursor, DataModifier, DataProviderRegistry, DataPool, DataTable, _Grid as Grid, HeaderCell, _Options as Options, Pagination, Popup, SvgIcons, Table, TableCell, Templating };
-export declare const classNamePrefix: string, defaultOptions: import("./es-modules/Shared/Types").DeepPartial<_Options>, grid: typeof _Grid.grid, grids: (_Grid | undefined)[], isHighContrastModeActive: () => boolean, product: "Grid Pro", setOptions: typeof import("./es-modules/Grid/Core/Defaults.js").setOptions, version: "2.3.0", win: Window & typeof globalThis;
+export declare const classNamePrefix: string, defaultOptions: import("./es-modules/Shared/Types").DeepPartial<_Options>, grid: typeof _Grid.grid, grids: (_Grid | undefined)[], isHighContrastModeActive: () => boolean, product: "Grid Pro", setOptions: typeof import("./es-modules/Grid/Core/Defaults.js").setOptions, version: "2.3.1", win: Window & typeof globalThis;
 declare namespace G {
     type Options = _Options;
 }