@highcharts/grid-pro 2.1.1 → 2.3.0

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

@@ -1,5 +1,6 @@
 import type TableRow from './Body/TableRow';
-import DataTable from '../../../Data/DataTable.js';
+import type DataTable from '../../../Data/DataTable';
+import type { RowId } from '../Data/DataProvider';
 import ColumnResizingMode from './ColumnResizing/ResizingMode.js';
 import Column from './Column.js';
 import TableHeader from './Header/TableHeader.js';
@@ -13,14 +14,6 @@ declare class Table {
      * The data grid instance which the table (viewport) belongs to.
      */
     readonly grid: Grid;
-    /**
-     * The presentation version of the data table. It has applied modifiers
-     * and is ready to be rendered.
-     *
-     * If you want to modify the data table, you should use the original
-     * instance that is stored in the `grid.dataTable` property.
-     */
-    dataTable: DataTable;
     /**
      * The HTML element of the table.
      */
@@ -63,6 +56,10 @@ declare class Table {
      * The flag that indicates if the table rows are virtualized.
      */
     virtualRows: boolean;
+    /**
+     * Cell context menu instance (lazy created).
+     */
+    private cellContextMenu?;
     /**
      * Constructs a new data grid table.
      *
@@ -74,9 +71,17 @@ declare class Table {
      */
     constructor(grid: Grid, tableElement: HTMLTableElement);
     /**
-     * Initializes the data grid table.
+     * The presentation version of the data table. It has applied modifiers
+     * and is ready to be rendered.
+     *
+     * @deprecated Use `grid.dataProvider` instead.
+     */
+    get dataTable(): DataTable | undefined;
+    /**
+     * Initializes the table. Should be called after creation so that the table
+     * can be asynchronously initialized.
      */
-    private init;
+    init(): Promise<void>;
     /**
      * Sets the minimum height of the table body.
      */
@@ -115,6 +120,57 @@ declare class Table {
      * Handles the scroll event.
      */
     private onScroll;
+    /**
+     * Delegated click handler for cells.
+     * @param e Mouse event
+     */
+    private onCellClick;
+    /**
+     * Delegated double-click handler for cells.
+     * @param e Mouse event
+     */
+    private onCellDblClick;
+    /**
+     * Delegated context menu handler for cells.
+     * @param e Mouse event
+     */
+    private onCellContextMenu;
+    /**
+     * Delegated mousedown handler for cells.
+     * @param e Mouse event
+     */
+    private onCellMouseDown;
+    /**
+     * Delegated mouseover handler for cells.
+     * @param e Mouse event
+     */
+    private onCellMouseOver;
+    /**
+     * Delegated mouseout handler for cells.
+     * @param e Mouse event
+     */
+    private onCellMouseOut;
+    /**
+     * Delegated keydown handler for cells.
+     * @param e Keyboard event
+     */
+    private onCellKeyDown;
+    /**
+     * Opens a cell context menu if configured and enabled.
+     *
+     * @param tableCell
+     * The target cell.
+     *
+     * @param clientX
+     * The viewport X coordinate for anchoring.
+     *
+     * @param clientY
+     * The viewport Y coordinate for anchoring.
+     *
+     * @returns
+     * True if the menu was opened.
+     */
+    private openCellContextMenu;
     /**
      * Scrolls the table to the specified row.
      *
@@ -164,7 +220,7 @@ declare class Table {
      * @param id
      * The ID of the row.
      */
-    getRow(id: number): TableRow | undefined;
+    getRow(id: RowId): TableRow | undefined;
 }
 /**
  * Represents the metadata of the viewport state. It is used to save the

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

@@ -2,11 +2,11 @@
  *
  *  Grid Table Viewport 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,15 +15,15 @@
  * */
 'use strict';
 import GridUtils from '../GridUtils.js';
-import Utils from '../../../Core/Utilities.js';
 import ColumnResizing from './ColumnResizing/ColumnResizing.js';
 import Column from './Column.js';
 import TableHeader from './Header/TableHeader.js';
 import RowsVirtualizer from './Actions/RowsVirtualizer.js';
 import ColumnsResizer from './Actions/ColumnsResizer.js';
 import Globals from '../Globals.js';
+import { defined, fireEvent, getStyle } from '../../../Shared/Utilities.js';
+import CellContextMenu from './Body/CellContextMenu.js';
 const { makeHTMLElement } = GridUtils;
-const { fireEvent, getStyle, defined } = Utils;
 /* *
  *
  *  Class
@@ -56,6 +56,10 @@ class Table {
          * The visible rows of the table.
          */
         this.rows = [];
+        /**
+         * The flag that indicates if the table rows are virtualized.
+         */
+        this.virtualRows = true;
         /**
          * Handles the focus event on the table body.
          *
@@ -78,42 +82,126 @@ class Table {
          */
         this.onScroll = () => {
             if (this.virtualRows) {
-                this.rowsVirtualizer.scroll();
+                void this.rowsVirtualizer.scroll();
             }
             this.header?.scrollHorizontally(this.tbodyElement.scrollLeft);
         };
+        /**
+         * Delegated click handler for cells.
+         * @param e Mouse event
+         */
+        this.onCellClick = (e) => {
+            const cell = this.getCellFromElement(e.target);
+            if (cell) {
+                cell
+                    .onClick(e);
+            }
+        };
+        /**
+         * Delegated double-click handler for cells.
+         * @param e Mouse event
+         */
+        this.onCellDblClick = (e) => {
+            const cell = this.getCellFromElement(e.target);
+            if (cell && 'onDblClick' in cell) {
+                cell.onDblClick(e);
+            }
+        };
+        /**
+         * Delegated context menu handler for cells.
+         * @param e Mouse event
+         */
+        this.onCellContextMenu = (e) => {
+            const cell = this.getCellFromElement(e.target);
+            if (!cell || !('column' in cell) || !('row' in cell)) {
+                return;
+            }
+            const tableCell = cell;
+            if (this.openCellContextMenu(tableCell, e.clientX, e.clientY)) {
+                e.preventDefault();
+            }
+        };
+        /**
+         * Delegated mousedown handler for cells.
+         * @param e Mouse event
+         */
+        this.onCellMouseDown = (e) => {
+            const cell = this.getCellFromElement(e.target);
+            if (cell && 'onMouseDown' in cell) {
+                cell.onMouseDown(e);
+            }
+        };
+        /**
+         * Delegated mouseover handler for cells.
+         * @param e Mouse event
+         */
+        this.onCellMouseOver = (e) => {
+            const cell = this.getCellFromElement(e.target);
+            if (cell) {
+                cell.onMouseOver();
+            }
+        };
+        /**
+         * Delegated mouseout handler for cells.
+         * @param e Mouse event
+         */
+        this.onCellMouseOut = (e) => {
+            const cell = this.getCellFromElement(e.target);
+            if (cell) {
+                cell.onMouseOut();
+            }
+        };
+        /**
+         * Delegated keydown handler for cells.
+         * @param e Keyboard event
+         */
+        this.onCellKeyDown = (e) => {
+            const cell = this.getCellFromElement(e.target);
+            if (!cell) {
+                return;
+            }
+            // Disabled until meaningful functionality is ready.
+            // const isContextMenuKey = (
+            //     e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)
+            // );
+            // if (isContextMenuKey && 'column' in cell && 'row' in cell) {
+            //     const tableCell = cell as TableCell;
+            //     const rect = tableCell.htmlElement.getBoundingClientRect();
+            //     const opened = this.openCellContextMenu(
+            //         tableCell,
+            //         rect.left + 4,
+            //         rect.bottom - 2
+            //     );
+            //     if (opened) {
+            //         e.preventDefault();
+            //         e.stopPropagation();
+            //         return;
+            //     }
+            // }
+            cell.onKeyDown(e);
+        };
         this.grid = grid;
         this.tableElement = tableElement;
-        this.dataTable = this.grid.presentationTable;
-        const dgOptions = grid.options;
-        const customClassName = dgOptions?.rendering?.table?.className;
         this.columnResizing = ColumnResizing.initMode(this);
-        this.virtualRows = this.shouldVirtualizeRows();
-        if (dgOptions?.rendering?.header?.enabled) {
+        if (grid.options?.rendering?.header?.enabled) {
             this.theadElement = makeHTMLElement('thead', {}, tableElement);
         }
         this.tbodyElement = makeHTMLElement('tbody', {}, tableElement);
-        if (this.virtualRows) {
-            tableElement.classList.add(Globals.getClassName('virtualization'));
-        }
-        if (dgOptions?.rendering?.columns?.resizing?.enabled) {
-            this.columnsResizer = new ColumnsResizer(this);
-        }
-        if (customClassName) {
-            tableElement.classList.add(...customClassName.split(/\s+/g));
-        }
-        tableElement.classList.add(Globals.getClassName('scrollableContent'));
-        // Load columns
-        this.loadColumns();
-        // Virtualization
         this.rowsVirtualizer = new RowsVirtualizer(this);
-        // Init Table
-        this.init();
+        fireEvent(this, 'beforeInit');
         // Add event listeners
         this.resizeObserver = new ResizeObserver(this.onResize);
         this.resizeObserver.observe(tableElement);
         this.tbodyElement.addEventListener('scroll', this.onScroll);
         this.tbodyElement.addEventListener('focus', this.onTBodyFocus);
+        // Delegated cell events
+        this.tbodyElement.addEventListener('click', this.onCellClick);
+        this.tbodyElement.addEventListener('dblclick', this.onCellDblClick);
+        this.tbodyElement.addEventListener('contextmenu', this.onCellContextMenu);
+        this.tbodyElement.addEventListener('mousedown', this.onCellMouseDown);
+        this.tbodyElement.addEventListener('mouseover', this.onCellMouseOver);
+        this.tbodyElement.addEventListener('mouseout', this.onCellMouseOut);
+        this.tbodyElement.addEventListener('keydown', this.onCellKeyDown);
     }
     /* *
     *
@@ -121,21 +209,55 @@ class Table {
     *
     * */
     /**
-     * Initializes the data grid table.
+     * The presentation version of the data table. It has applied modifiers
+     * and is ready to be rendered.
+     *
+     * @deprecated Use `grid.dataProvider` instead.
      */
-    init() {
-        fireEvent(this, 'beforeInit');
-        this.setTbodyMinHeight();
-        // Load & render head
-        if (this.grid.options?.rendering?.header?.enabled) {
-            this.header = new TableHeader(this);
-            this.header.render();
+    get dataTable() {
+        const dp = this.grid.dataProvider;
+        if (dp && 'getDataTable' in dp) {
+            return dp.getDataTable(true);
+        }
+    }
+    /**
+     * Initializes the table. Should be called after creation so that the table
+     * can be asynchronously initialized.
+     */
+    async init() {
+        try {
+            this.grid.showLoading();
+            const { tableElement } = this;
+            const renderingOptions = this.grid.options?.rendering;
+            const customClassName = renderingOptions?.table?.className;
+            this.virtualRows = await this.shouldVirtualizeRows();
+            if (this.virtualRows) {
+                tableElement.classList.add(Globals.getClassName('virtualization'));
+            }
+            if (renderingOptions?.columns?.resizing?.enabled) {
+                this.columnsResizer = new ColumnsResizer(this);
+            }
+            if (customClassName) {
+                tableElement.classList.add(...customClassName.split(/\s+/g));
+            }
+            tableElement.classList.add(Globals.getClassName('scrollableContent'));
+            await this.loadColumns();
+            this.setTbodyMinHeight();
+            // Load & render head
+            if (this.grid.options?.rendering?.header?.enabled) {
+                this.header = new TableHeader(this);
+                await this.header.render();
+            }
+            // TODO(footer): Load & render footer
+            // this.footer = new TableFooter(this);
+            // this.footer.render();
+            await this.rowsVirtualizer.initialRender();
+        }
+        finally {
+            fireEvent(this, 'afterInit');
+            this.reflow();
+            this.grid.hideLoading();
         }
-        // TODO: Load & render footer
-        // this.footer = new TableFooter(this);
-        // this.footer.render();
-        this.rowsVirtualizer.initialRender();
-        fireEvent(this, 'afterInit');
     }
     /**
      * Sets the minimum height of the table body.
@@ -155,7 +277,7 @@ class Table {
      * @returns
      * Whether rows virtualization should be enabled.
      */
-    shouldVirtualizeRows() {
+    async shouldVirtualizeRows() {
         const { grid } = this;
         const rows = grid.userOptions.rendering?.rows;
         if (defined(rows?.virtualization)) {
@@ -163,7 +285,7 @@ class Table {
         }
         // Consider changing this to use the presentation table row count
         // instead of the original data table row count.
-        const rowCount = Number(grid.dataTable?.rowCount);
+        const rowCount = (await this.grid.dataProvider?.getRowCount()) ?? 0;
         const threshold = rows?.virtualizationThreshold ?? 50;
         if (grid.pagination) {
             return grid.querying.pagination.currentPageSize >= threshold;
@@ -173,7 +295,7 @@ class Table {
     /**
      * Loads the columns of the table.
      */
-    loadColumns() {
+    async loadColumns() {
         const { enabledColumns } = this.grid;
         if (!enabledColumns) {
             return;
@@ -181,7 +303,9 @@ class Table {
         let columnId;
         for (let i = 0, iEnd = enabledColumns.length; i < iEnd; ++i) {
             columnId = enabledColumns[i];
-            this.columns.push(new Column(this, columnId, i));
+            const column = new Column(this, columnId, i);
+            await column.init();
+            this.columns.push(column);
         }
         this.columnResizing.loadColumns();
     }
@@ -190,53 +314,52 @@ class Table {
      */
     async updateRows() {
         const vp = this;
-        let focusedRowId;
-        if (vp.focusCursor) {
-            focusedRowId = vp.dataTable.getOriginalRowIndex(vp.focusCursor[0]);
+        const { dataProvider: dp } = vp.grid;
+        if (!dp) {
+            return;
         }
         vp.grid.querying.pagination.clampPage();
-        // Update data
-        const oldRowsCount = (vp.rows[vp.rows.length - 1]?.index ?? -1) + 1;
-        await vp.grid.querying.proceed();
-        vp.dataTable = vp.grid.presentationTable;
-        for (const column of vp.columns) {
-            column.loadData();
-        }
-        // Update virtualization if needed
-        const shouldVirtualize = this.shouldVirtualizeRows();
-        let shouldRerender = false;
-        if (this.virtualRows !== shouldVirtualize) {
-            this.virtualRows = shouldVirtualize;
-            vp.tableElement.classList.toggle(Globals.getClassName('virtualization'), shouldVirtualize);
-            shouldRerender = true;
-        }
-        if (shouldRerender || oldRowsCount !== vp.dataTable.rowCount) {
-            // Rerender all rows
-            vp.rowsVirtualizer.rerender();
-        }
-        else {
-            // Update existing rows
-            for (let i = 0, iEnd = vp.rows.length; i < iEnd; ++i) {
-                vp.rows[i].update();
+        try {
+            this.grid.showLoading();
+            // Update data
+            const oldRowsCount = vp.rows.length > 0 ?
+                (vp.rows[vp.rows.length - 1]?.index ?? -1) + 1 :
+                0;
+            await vp.grid.querying.proceed();
+            for (const column of vp.columns) {
+                column.loadData();
             }
-        }
-        // Update the pagination controls
-        vp.grid.pagination?.updateControls();
-        vp.reflow();
-        // Scroll to the focused row
-        if (focusedRowId !== void 0 && vp.focusCursor) {
-            const newRowIndex = vp.dataTable.getLocalRowIndex(focusedRowId);
-            if (newRowIndex !== void 0) {
-                // Scroll to the focused row.
-                vp.scrollToRow(newRowIndex);
-                // Focus the cell that was focused before the update.
-                setTimeout(() => {
-                    if (!defined(vp.focusCursor?.[1])) {
-                        return;
-                    }
-                    vp.rows[newRowIndex - vp.rows[0].index]?.cells[vp.focusCursor[1]].htmlElement.focus();
-                });
+            // Update virtualization if needed
+            const shouldVirtualize = await this.shouldVirtualizeRows();
+            let shouldRerender = false;
+            if (this.virtualRows !== shouldVirtualize) {
+                this.virtualRows = shouldVirtualize;
+                vp.tableElement.classList.toggle(Globals.getClassName('virtualization'), shouldVirtualize);
+                shouldRerender = true;
+            }
+            const newRowCount = await dp.getRowCount();
+            if (shouldRerender) {
+                // Rerender all rows
+                await vp.rowsVirtualizer.rerender();
+            }
+            else if (oldRowsCount !== newRowCount) {
+                // Refresh rows without full teardown
+                await vp.rowsVirtualizer.refreshRows();
+            }
+            else {
+                // Update existing rows - create a snapshot to avoid issues
+                // if array changes during iteration
+                const rowsToUpdate = [...vp.rows];
+                for (let i = 0, iEnd = rowsToUpdate.length; i < iEnd; ++i) {
+                    await rowsToUpdate[i].update();
+                }
             }
+            // Update the pagination controls
+            vp.grid.pagination?.updateControls();
+            vp.reflow();
+        }
+        finally {
+            this.grid.hideLoading();
         }
         vp.grid.dirtyFlags.delete('rows');
     }
@@ -244,8 +367,6 @@ class Table {
      * Reflows the table's content dimensions.
      */
     reflow() {
-        // TODO: More `needsReflow` logic can be added in the future to avoid
-        // unnecessary reflows of the table parts.
         this.columnResizing.reflow();
         // Reflow the head
         this.header?.reflow();
@@ -259,6 +380,46 @@ class Table {
         });
         this.grid.dirtyFlags.delete('reflow');
     }
+    /**
+     * Opens a cell context menu if configured and enabled.
+     *
+     * @param tableCell
+     * The target cell.
+     *
+     * @param clientX
+     * The viewport X coordinate for anchoring.
+     *
+     * @param clientY
+     * The viewport Y coordinate for anchoring.
+     *
+     * @returns
+     * True if the menu was opened.
+     */
+    openCellContextMenu(tableCell, clientX, clientY) {
+        const options = tableCell.column?.options.cells?.contextMenu;
+        if (options?.enabled === false) {
+            return false;
+        }
+        const items = options?.items || [];
+        if (!items.length) {
+            return false; // Keep native browser menu
+        }
+        if (!this.cellContextMenu) {
+            this.cellContextMenu = new CellContextMenu(this.grid);
+        }
+        // Close any existing popups before opening a new menu.
+        // Copy to array to avoid mutation during iteration.
+        for (const popup of Array.from(this.grid.popups)) {
+            if (popup !== this.cellContextMenu) {
+                popup.hide();
+            }
+        }
+        if (this.cellContextMenu.isVisible) {
+            this.cellContextMenu.hide();
+        }
+        this.cellContextMenu.showAt(tableCell, clientX, clientY);
+        return true;
+    }
     /**
      * Scrolls the table to the specified row.
      *
@@ -309,17 +470,63 @@ class Table {
     getWidthFromRatio(ratio) {
         return this.tbodyElement.clientWidth * ratio;
     }
+    /**
+     * Finds a cell from a DOM element within the table body.
+     *
+     * @param element
+     * The DOM element to find the cell for (typically event.target).
+     *
+     * @returns
+     * The Cell instance or undefined if not found.
+     *
+     * @internal
+     */
+    getCellFromElement(element) {
+        if (!(element instanceof Element)) {
+            return;
+        }
+        const td = element.closest('td');
+        if (!td) {
+            return;
+        }
+        const tr = td.parentElement;
+        if (!tr) {
+            return;
+        }
+        const rowIndexAttr = tr.getAttribute('data-row-index');
+        if (rowIndexAttr === null) {
+            return;
+        }
+        const rowIndex = parseInt(rowIndexAttr, 10);
+        const firstRowIndex = this.rows[0]?.index ?? 0;
+        const row = this.rows[rowIndex - firstRowIndex];
+        if (!row) {
+            return;
+        }
+        // Find cell index by position in row
+        const cellIndex = Array.prototype.indexOf.call(tr.children, td);
+        return row.cells[cellIndex];
+    }
     /**
      * Destroys the grid table.
      */
     destroy() {
         this.tbodyElement.removeEventListener('focus', this.onTBodyFocus);
         this.tbodyElement.removeEventListener('scroll', this.onScroll);
+        this.tbodyElement.removeEventListener('click', this.onCellClick);
+        this.tbodyElement.removeEventListener('dblclick', this.onCellDblClick);
+        this.tbodyElement.removeEventListener('contextmenu', this.onCellContextMenu);
+        this.tbodyElement.removeEventListener('mousedown', this.onCellMouseDown);
+        this.tbodyElement.removeEventListener('mouseover', this.onCellMouseOver);
+        this.tbodyElement.removeEventListener('mouseout', this.onCellMouseOut);
+        this.tbodyElement.removeEventListener('keydown', this.onCellKeyDown);
         this.resizeObserver.disconnect();
         this.columnsResizer?.removeEventListeners();
         this.header?.destroy();
+        this.cellContextMenu?.hide();
+        delete this.cellContextMenu;
         for (let i = 0, iEnd = this.rows.length; i < iEnd; ++i) {
-            this.rows[i].destroy();
+            this.rows[i]?.destroy();
         }
         fireEvent(this, 'afterDestroy');
     }
@@ -389,9 +596,6 @@ class Table {
      * The ID of the row.
      */
     getRow(id) {
-        // TODO: Change `find` to a method using `vp.dataTable.getLocalRowIndex`
-        // and rows[presentationRowIndex - firstRowIndex]. Needs more testing,
-        // but it should be faster.
         return this.rows.find((row) => row.id === id);
     }
 }

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

@@ -2,11 +2,11 @@
  *
  *  Grid Button interface
  *
- *  (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/UI/ContextMenu.js

@@ -2,11 +2,11 @@
  *
  * Grid Context Menu 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