@highcharts/grid-pro 2.1.1 → 2.2.0

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

@@ -2,11 +2,11 @@
  *
  *  Grid ColumnSorting 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
@@ -43,24 +43,35 @@ class ColumnSorting {
     constructor(column, headerCellElement) {
         /**
          * Toggle sorting order for the column in the order: asc -> desc -> none
+         *
+         * @param e
+         * Optional mouse or keyboard event.
          */
-        this.toggle = () => {
+        this.toggle = (e) => {
             const viewport = this.column.viewport;
             const querying = viewport.grid.querying;
             const sortingController = querying.sorting;
-            const currentOrder = (sortingController.currentSorting?.columnId === this.column.id ?
-                sortingController.currentSorting.order : null) || 'none';
+            const additive = !!e?.shiftKey;
+            const currentOrder = (additive ?
+                sortingController.currentSortings?.find((sorting) => sorting.columnId === this.column.id)?.order :
+                (sortingController.currentSorting?.columnId ===
+                    this.column.id ?
+                    sortingController.currentSorting.order :
+                    null)) || 'none';
             const consequents = {
                 none: 'asc',
                 asc: 'desc',
                 desc: null
             };
-            void this.setOrder(consequents[currentOrder]);
+            void this.setOrder(consequents[currentOrder], additive);
         };
         this.column = column;
         this.headerCellElement = headerCellElement;
         this.addHeaderElementAttributes();
-        if (column.options.sorting?.sortable) {
+        const sortingOptions = column.options.sorting;
+        const sortingEnabled = sortingOptions?.enabled ??
+            sortingOptions?.sortable;
+        if (sortingEnabled) {
             headerCellElement.classList.add(Globals.getClassName('columnSortable'));
         }
     }
@@ -76,19 +87,25 @@ class ColumnSorting {
         const col = this.column;
         const a11y = col.viewport.grid.accessibility;
         const sortingOptions = col.options.sorting;
-        const { currentSorting } = col.viewport.grid.querying.sorting;
+        const { currentSorting, currentSortings } = col.viewport.grid.querying.sorting;
         const sortedAscClassName = Globals.getClassName('columnSortedAsc');
         const sortedDescClassName = Globals.getClassName('columnSortedDesc');
         const el = this.headerCellElement;
-        if (currentSorting?.columnId !== col.id || !currentSorting?.order) {
+        const sortingEnabled = sortingOptions?.enabled ??
+            sortingOptions?.sortable;
+        const columnSorting = (currentSortings?.find((sorting) => sorting.columnId === col.id) ||
+            (currentSorting?.columnId === col.id ?
+                currentSorting :
+                void 0));
+        if (!columnSorting?.order) {
             el.classList.remove(sortedAscClassName);
             el.classList.remove(sortedDescClassName);
-            if (sortingOptions?.sortable) {
+            if (sortingEnabled) {
                 a11y?.setColumnSortState(el, 'none');
             }
             return;
         }
-        switch (currentSorting?.order) {
+        switch (columnSorting.order) {
             case 'asc':
                 el.classList.add(sortedAscClassName);
                 el.classList.remove(sortedDescClassName);
@@ -101,6 +118,12 @@ class ColumnSorting {
                 break;
         }
     }
+    /**
+     * Refreshes the sorting-related header attributes and classes.
+     */
+    refreshHeaderAttributes() {
+        this.addHeaderElementAttributes();
+    }
     /**
      * Updates the column options with the new sorting state.
      *
@@ -108,12 +131,24 @@ class ColumnSorting {
      * The column to update.
      */
     updateColumnOptions(col) {
-        const order = col.viewport.grid.querying.sorting.currentSorting?.order;
-        if (col.id === this.column.id && order) {
-            col.setOptions({ sorting: { order } });
+        const sortings = col.viewport.grid.querying.sorting.currentSortings || [];
+        const sortingIndex = sortings.findIndex((sorting) => sorting.columnId === col.id);
+        if (sortingIndex !== -1 && sortings[sortingIndex].order) {
+            const sorting = sortings[sortingIndex];
+            const sortingOptions = {
+                order: sorting.order
+            };
+            if (sortings.length > 1) {
+                sortingOptions.priority = sortingIndex + 1;
+            }
+            col.setOptions({ sorting: sortingOptions });
+            if (sortings.length < 2) {
+                delete col.options.sorting?.priority;
+            }
         }
         else {
             delete col.options.sorting?.order;
+            delete col.options.sorting?.priority;
             if (col.options.sorting &&
                 Object.keys(col.options.sorting).length < 1) {
                 delete col.options.sorting;
@@ -127,8 +162,11 @@ 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.
      */
-    async setOrder(order) {
+    async setOrder(order, additive = false) {
         const viewport = this.column.viewport;
         // Do not call sorting when cell is currently edited and validated.
         if (viewport.validator?.errorCell) {
@@ -143,11 +181,40 @@ class ColumnSorting {
                 order
             });
         });
-        sortingController.setSorting(order, this.column.id);
+        if (additive) {
+            const baseSortings = (sortingController.currentSortings ||
+                (sortingController.currentSorting?.columnId &&
+                    sortingController.currentSorting.order ?
+                    [sortingController.currentSorting] :
+                    [])).filter((sorting) => !!(sorting.columnId && sorting.order));
+            const sortings = baseSortings.slice();
+            const index = sortings.findIndex((sorting) => sorting.columnId === this.column.id);
+            if (!order) {
+                if (index !== -1) {
+                    sortings.splice(index, 1);
+                }
+            }
+            else {
+                const sorting = {
+                    columnId: this.column.id,
+                    order
+                };
+                if (index !== -1) {
+                    sortings[index] = sorting;
+                }
+                else {
+                    sortings.push(sorting);
+                }
+            }
+            sortingController.setSorting(sortings);
+        }
+        else {
+            sortingController.setSorting(order, this.column.id);
+        }
         await viewport.updateRows();
         for (const col of viewport.columns) {
             this.updateColumnOptions(col);
-            col.sorting?.addHeaderElementAttributes();
+            col.sorting?.refreshHeaderAttributes();
         }
         a11y?.userSortedColumn(order);
         [this.column, viewport.grid].forEach((source) => {

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

@@ -2,11 +2,11 @@
  *
  *  Grid Columns Resizer 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/RowsVirtualizer.d.ts

@@ -35,6 +35,19 @@ declare class RowsVirtualizer {
      * Rendering row settings.
      */
     rowSettings?: RowsSettings;
+    /**
+     * Reuse pool for rows that are currently out of viewport.
+     */
+    private readonly rowPool;
+    /**
+     * Maximum number of rows to keep in the reuse pool.
+     */
+    private static readonly MAX_POOL_SIZE;
+    /**
+     * Flag indicating if a scroll update is queued for the next animation
+     * frame.
+     */
+    private scrollQueued;
     /**
      * Constructs an instance of the rows virtualizer.
      *
@@ -56,6 +69,10 @@ declare class RowsVirtualizer {
      * is enabled.
      */
     scroll(): void;
+    /**
+     * Applies the scroll logic for virtualized rows.
+     */
+    private applyScroll;
     /**
      * Adjusts the visible row heights from the bottom of the viewport.
      */
@@ -78,9 +95,29 @@ declare class RowsVirtualizer {
      * Reflow the rendered rows content dimensions.
      */
     reflowRows(): void;
+    /**
+     * Gets a row from the pool or creates a new one for the given index.
+     *
+     * @param index
+     * The row index in the data table.
+     *
+     * @returns
+     * A TableRow instance ready for use.
+     */
+    private getOrCreateRow;
+    /**
+     * Adds a row to the reuse pool, or destroys it if the pool is full.
+     *
+     * @param row
+     * The row to pool.
+     */
+    private poolRow;
     /**
      * Returns the default height of a row. This method should be called only
      * once on initialization.
+     *
+     * @returns
+     * The default height of a row.
      */
     private getDefaultRowHeight;
 }

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

@@ -2,11 +2,11 @@
  *
  *  Grid Rows Renderer 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
@@ -45,6 +45,15 @@ class RowsVirtualizer {
          * flickering loops when scrolling to the last row.
          */
         this.preventScroll = false;
+        /**
+         * Reuse pool for rows that are currently out of viewport.
+         */
+        this.rowPool = [];
+        /**
+         * Flag indicating if a scroll update is queued for the next animation
+         * frame.
+         */
+        this.scrollQueued = false;
         this.rowSettings =
             viewport.grid.options?.rendering?.rows;
         this.viewport = viewport;
@@ -81,6 +90,12 @@ class RowsVirtualizer {
         let rows = this.viewport.rows;
         const oldScrollLeft = tbody.scrollLeft;
         let oldScrollTop;
+        if (this.rowPool.length) {
+            for (let i = this.rowPool.length - 1; i >= 0; --i) {
+                this.rowPool[i].destroy();
+            }
+            this.rowPool.length = 0;
+        }
         if (rows.length) {
             oldScrollTop = tbody.scrollTop;
             for (let i = 0, iEnd = rows.length; i < iEnd; ++i) {
@@ -107,6 +122,19 @@ class RowsVirtualizer {
      * is enabled.
      */
     scroll() {
+        if (this.scrollQueued) {
+            return;
+        }
+        this.scrollQueued = true;
+        requestAnimationFrame(() => {
+            this.scrollQueued = false;
+            this.applyScroll();
+        });
+    }
+    /**
+     * Applies the scroll logic for virtualized rows.
+     */
+    applyScroll() {
         const target = this.viewport.tbodyElement;
         const { defaultRowHeight: rowHeight } = this;
         const lastScrollTop = target.scrollTop;
@@ -195,36 +223,70 @@ class RowsVirtualizer {
         const to = Math.min(rowCursor + rowsPerPage + buffer, rows[rows.length - 1].index - 1);
         const alwaysLastRow = rows.pop();
         const tempRows = [];
-        // Remove rows that are out of the range except the last row.
-        for (let i = 0, iEnd = rows.length; i < iEnd; ++i) {
-            const row = rows[i];
-            const rowIndex = row.index;
-            if (rowIndex < from || rowIndex > to) {
-                row.destroy();
+        const currentFrom = rows[0]?.index;
+        const currentTo = rows[rows.length - 1]?.index;
+        const hasOverlap = (rows.length > 0 &&
+            currentFrom !== void 0 &&
+            currentTo !== void 0 &&
+            !(to < currentFrom || from > currentTo));
+        if (!hasOverlap) {
+            // Remove rows that are out of the range except the last row.
+            for (let i = 0, iEnd = rows.length; i < iEnd; ++i) {
+                const row = rows[i];
+                const rowIndex = row.index;
+                if (rowIndex < from || rowIndex > to) {
+                    this.poolRow(row);
+                }
+                else {
+                    tempRows.push(row);
+                }
             }
-            else {
-                tempRows.push(row);
+            rows = tempRows;
+            vp.rows = rows;
+            for (let i = from; i <= to; ++i) {
+                const row = rows[i - (rows[0]?.index || 0)];
+                // Recreate row when it is destroyed and it is in the range.
+                if (!row) {
+                    rows.push(this.getOrCreateRow(i));
+                }
             }
+            rows.sort((a, b) => a.index - b.index);
         }
-        rows = tempRows;
-        vp.rows = rows;
-        for (let i = from; i <= to; ++i) {
-            const row = rows[i - (rows[0]?.index || 0)];
-            // Recreate row when it is destroyed and it is in the range.
-            if (!row) {
-                const newRow = new TableRow(vp, i);
-                rows.push(newRow);
-                newRow.rendered = false;
-                if (isVirtualization) {
-                    newRow.setTranslateY(newRow.getDefaultTopOffset());
+        else {
+            // Remove rows outside the range from the start.
+            while (rows.length && rows[0].index < from) {
+                this.poolRow(rows.shift());
+            }
+            // Remove rows outside the range from the end.
+            while (rows.length && rows[rows.length - 1].index > to) {
+                this.poolRow(rows.pop());
+            }
+            if (!rows.length) {
+                for (let i = from; i <= to; ++i) {
+                    rows.push(this.getOrCreateRow(i));
+                }
+            }
+            else {
+                // Add rows before the current range.
+                for (let i = rows[0].index - 1; i >= from; --i) {
+                    rows.unshift(this.getOrCreateRow(i));
+                }
+                // Add rows after the current range.
+                for (let i = rows[rows.length - 1].index + 1; i <= to; ++i) {
+                    rows.push(this.getOrCreateRow(i));
                 }
             }
+            vp.rows = rows;
         }
-        rows.sort((a, b) => a.index - b.index);
         for (let i = 0, iEnd = rows.length; i < iEnd; ++i) {
-            if (!rows[i].rendered) {
-                vp.tbodyElement.insertBefore(rows[i].htmlElement, vp.tbodyElement.lastChild);
-                rows[i].render();
+            const row = rows[i];
+            if (!row.rendered) {
+                vp.tbodyElement.insertBefore(row.htmlElement, vp.tbodyElement.lastChild);
+                row.render();
+                continue;
+            }
+            if (!row.htmlElement.isConnected) {
+                vp.tbodyElement.insertBefore(row.htmlElement, vp.tbodyElement.lastChild);
             }
         }
         if (alwaysLastRow) {
@@ -322,9 +384,54 @@ class RowsVirtualizer {
         }
         this.adjustRowHeights();
     }
+    /**
+     * Gets a row from the pool or creates a new one for the given index.
+     *
+     * @param index
+     * The row index in the data table.
+     *
+     * @returns
+     * A TableRow instance ready for use.
+     */
+    getOrCreateRow(index) {
+        const vp = this.viewport;
+        const isVirtualization = vp.virtualRows;
+        const pooledRow = this.rowPool.pop();
+        if (pooledRow) {
+            pooledRow.reuse(index, false);
+            if (isVirtualization) {
+                pooledRow.setTranslateY(pooledRow.getDefaultTopOffset());
+            }
+            return pooledRow;
+        }
+        const newRow = new TableRow(vp, index);
+        newRow.rendered = false;
+        if (isVirtualization) {
+            newRow.setTranslateY(newRow.getDefaultTopOffset());
+        }
+        return newRow;
+    }
+    /**
+     * Adds a row to the reuse pool, or destroys it if the pool is full.
+     *
+     * @param row
+     * The row to pool.
+     */
+    poolRow(row) {
+        row.htmlElement.remove();
+        if (this.rowPool.length < RowsVirtualizer.MAX_POOL_SIZE) {
+            this.rowPool.push(row);
+        }
+        else {
+            row.destroy();
+        }
+    }
     /**
      * Returns the default height of a row. This method should be called only
      * once on initialization.
+     *
+     * @returns
+     * The default height of a row.
      */
     getDefaultRowHeight() {
         const vp = this.viewport;
@@ -338,6 +445,10 @@ class RowsVirtualizer {
         return defaultRowHeight;
     }
 }
+/**
+ * Maximum number of rows to keep in the reuse pool.
+ */
+RowsVirtualizer.MAX_POOL_SIZE = 100;
 /* *
  *
  *  Default Export

package/es-modules/Grid/Core/Table/Body/TableCell.d.ts

@@ -63,13 +63,20 @@ declare class TableCell extends Cell {
      * the cell's content.
      */
     private updateDataTable;
+    /**
+     * Initialize event listeners for table body cells.
+     *
+     * Most events (click, dblclick, keydown, mousedown, mouseover, mouseout)
+     * are delegated to Table for better performance with virtualization.
+     * Only focus/blur remain on individual cells for focus management.
+     */
     initEvents(): void;
     /**
      * Handles the focus event on the cell.
      */
     protected onFocus(): void;
-    protected onMouseOver(): void;
-    protected onMouseOut(): void;
+    onMouseOver(): void;
+    onMouseOut(): void;
     /**
      * Handles the double click event on the cell.
      *

package/es-modules/Grid/Core/Table/Body/TableCell.js

@@ -2,11 +2,11 @@
  *
  *  Grid 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
@@ -133,12 +133,19 @@ class TableCell extends Cell {
         await vp.updateRows();
         return true;
     }
+    /**
+     * Initialize event listeners for table body cells.
+     *
+     * Most events (click, dblclick, keydown, mousedown, mouseover, mouseout)
+     * are delegated to Table for better performance with virtualization.
+     * Only focus/blur remain on individual cells for focus management.
+     */
     initEvents() {
-        this.cellEvents.push(['dblclick', (e) => (this.onDblClick(e))]);
-        this.cellEvents.push(['mousedown', (e) => {
-                this.onMouseDown(e);
-            }]);
-        super.initEvents();
+        this.cellEvents.push(['blur', () => this.onBlur()]);
+        this.cellEvents.push(['focus', () => this.onFocus()]);
+        this.cellEvents.forEach((pair) => {
+            this.htmlElement.addEventListener(pair[0], pair[1]);
+        });
     }
     /**
      * Handles the focus event on the cell.

package/es-modules/Grid/Core/Table/Body/TableRow.d.ts

@@ -43,6 +43,16 @@ declare class TableRow extends Row {
      * table.
      */
     update(): void;
+    /**
+     * Reuses the row instance for a new index.
+     *
+     * @param index
+     * The index of the row in the data table.
+     *
+     * @param doReflow
+     * Whether to reflow the row after updating the cells.
+     */
+    reuse(index: number, doReflow?: boolean): void;
     /**
      * Adds or removes the hovered CSS class to the row element.
      *
@@ -66,6 +76,14 @@ declare class TableRow extends Row {
      * lifecycle.
      */
     updateRowAttributes(): void;
+    /**
+     * Updates the row parity class based on index.
+     */
+    private updateParityClass;
+    /**
+     * Updates the hovered and synced classes based on grid state.
+     */
+    private updateStateClasses;
     /**
      * Sets the vertical translation of the row. Used for virtual scrolling.
      *

package/es-modules/Grid/Core/Table/Body/TableRow.js

@@ -2,11 +2,11 @@
  *
  *  Grid TableRow 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
@@ -92,6 +92,35 @@ class TableRow extends Row {
         }
         this.reflow();
     }
+    /**
+     * Reuses the row instance for a new index.
+     *
+     * @param index
+     * The index of the row in the data table.
+     *
+     * @param doReflow
+     * Whether to reflow the row after updating the cells.
+     */
+    reuse(index, doReflow = true) {
+        if (this.index === index) {
+            this.update();
+            return;
+        }
+        this.index = index;
+        this.id = this.viewport.dataTable.getOriginalRowIndex(index);
+        this.htmlElement.setAttribute('data-row-index', index);
+        this.updateRowAttributes();
+        this.updateParityClass();
+        this.updateStateClasses();
+        this.loadData();
+        for (let i = 0, iEnd = this.cells.length; i < iEnd; ++i) {
+            const cell = this.cells[i];
+            void cell.setValue();
+        }
+        if (doReflow) {
+            this.reflow();
+        }
+    }
     /**
      * Adds or removes the hovered CSS class to the row element.
      *
@@ -127,13 +156,8 @@ class TableRow extends Row {
         el.setAttribute('data-row-index', idx);
         this.updateRowAttributes();
         // Indexing from 0, so rows with even index are odd.
-        el.classList.add(Globals.getClassName(idx % 2 ? 'rowEven' : 'rowOdd'));
-        if (this.viewport.grid.hoveredRowIndex === idx) {
-            el.classList.add(Globals.getClassName('hoveredRow'));
-        }
-        if (this.viewport.grid.syncedRowIndex === idx) {
-            el.classList.add(Globals.getClassName('syncedRow'));
-        }
+        this.updateParityClass();
+        this.updateStateClasses();
     }
     /**
      * Sets the row HTML element attributes that are updateable in the row
@@ -151,6 +175,28 @@ class TableRow extends Row {
         // Calculate levels of header, 1 to avoid indexing from 0
         a11y?.setRowIndex(el, idx + (vp.header?.rows.length ?? 0) + 1);
     }
+    /**
+     * Updates the row parity class based on index.
+     */
+    updateParityClass() {
+        const el = this.htmlElement;
+        el.classList.remove(Globals.getClassName('rowEven'), Globals.getClassName('rowOdd'));
+        // Indexing from 0, so rows with even index are odd.
+        el.classList.add(Globals.getClassName(this.index % 2 ? 'rowEven' : 'rowOdd'));
+    }
+    /**
+     * Updates the hovered and synced classes based on grid state.
+     */
+    updateStateClasses() {
+        const el = this.htmlElement;
+        el.classList.remove(Globals.getClassName('hoveredRow'), Globals.getClassName('syncedRow'));
+        if (this.viewport.grid.hoveredRowIndex === this.index) {
+            el.classList.add(Globals.getClassName('hoveredRow'));
+        }
+        if (this.viewport.grid.syncedRowIndex === this.index) {
+            el.classList.add(Globals.getClassName('syncedRow'));
+        }
+    }
     /**
      * Sets the vertical translation of the row. Used for virtual scrolling.
      *

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

@@ -52,13 +52,6 @@ declare abstract class Cell {
      * Handles the blur event on the cell.
      */
     protected onBlur(): void;
-    /**
-     * Handles user keydown on the cell.
-     *
-     * @param e
-     * Keyboard event object.
-     */
-    protected onKeyDown(e: KeyboardEvent): void;
     /**
      * Renders the cell by appending the HTML element to the row.
      */