@highcharts/grid-pro 2.2.0 → 2.3.0

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

@@ -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,7 +82,7 @@ class Table {
          */
         this.onScroll = () => {
             if (this.virtualRows) {
-                this.rowsVirtualizer.scroll();
+                void this.rowsVirtualizer.scroll();
             }
             this.header?.scrollHorizontally(this.tbodyElement.scrollLeft);
         };
@@ -103,6 +107,20 @@ class Table {
                 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
@@ -139,37 +157,38 @@ class Table {
          */
         this.onCellKeyDown = (e) => {
             const cell = this.getCellFromElement(e.target);
-            if (cell) {
-                cell.onKeyDown(e);
+            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);
-        if (dgOptions?.rendering?.header?.enabled) {
+        if (grid.options?.rendering?.header?.enabled) {
             this.theadElement = makeHTMLElement('thead', {}, tableElement);
         }
         this.tbodyElement = makeHTMLElement('tbody', {}, tableElement);
-        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.virtualRows = this.shouldVirtualizeRows();
-        if (this.virtualRows) {
-            tableElement.classList.add(Globals.getClassName('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);
@@ -178,6 +197,7 @@ class Table {
         // 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);
@@ -189,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.
@@ -223,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)) {
@@ -231,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;
@@ -241,7 +295,7 @@ class Table {
     /**
      * Loads the columns of the table.
      */
-    loadColumns() {
+    async loadColumns() {
         const { enabledColumns } = this.grid;
         if (!enabledColumns) {
             return;
@@ -249,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();
     }
@@ -258,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');
     }
@@ -312,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();
@@ -327,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.
      *
@@ -422,6 +515,7 @@ class Table {
         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);
@@ -429,8 +523,10 @@ class Table {
         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');
     }
@@ -500,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/ContextMenuButton.d.ts

@@ -1,7 +1,6 @@
 import type ContextMenu from './ContextMenu';
 import type Button from './Button';
 import type Popup from './Popup';
-import { GridIconName } from './SvgIcons.js';
 import { ClassNameKey } from '../Globals.js';
 export declare class ContextMenuButton implements Button {
     /**
@@ -55,9 +54,9 @@ export declare class ContextMenuButton implements Button {
      * Sets the icon for the button.
      *
      * @param icon
-     * The icon to set.
+     * The icon to set (built-in name or custom name from rendering.icons).
      */
-    setIcon(icon?: GridIconName): void;
+    setIcon(icon?: string): void;
     setActive(active: boolean): void;
     setHighlighted(highlighted: boolean): void;
     /**
@@ -90,9 +89,9 @@ export interface ContextMenuButtonOptions {
      */
     label?: string;
     /**
-     * The icon for the button.
+     * The icon for the button (built-in name or custom from rendering.icons).
      */
-    icon?: GridIconName;
+    icon?: string;
     /**
      * A class name key applied to the `<li>` wrapper of the button.
      */
@@ -100,11 +99,11 @@ export interface ContextMenuButtonOptions {
     /**
      * The icon for the active state of the button.
      */
-    activeIcon?: GridIconName;
+    activeIcon?: string;
     /**
      * The icon for the highlighted state of the button.
      */
-    highlightedIcon?: GridIconName;
+    highlightedIcon?: string;
     /**
      * The tooltip string for the button.
      */

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

@@ -80,7 +80,8 @@ export class ContextMenuButton {
         buttonEl.setAttribute('tabindex', '-1');
         this.refreshState();
         if (cfg.chevron) {
-            chevronEl.appendChild(createGridIcon('chevronRight'));
+            const grid = this.contextMenu?.grid;
+            chevronEl.appendChild(createGridIcon('chevronRight', grid?.options?.rendering?.icons));
         }
         if (cfg.icon) {
             this.setIcon(cfg.icon);
@@ -104,14 +105,15 @@ export class ContextMenuButton {
      * Sets the icon for the button.
      *
      * @param icon
-     * The icon to set.
+     * The icon to set (built-in name or custom name from rendering.icons).
      */
     setIcon(icon) {
         this.icon?.remove();
         if (!icon) {
             return;
         }
-        this.icon = createGridIcon(icon);
+        const grid = this.contextMenu?.grid;
+        this.icon = createGridIcon(icon, grid?.options?.rendering?.icons);
         this.iconWrapper?.appendChild(this.icon);
     }
     setActive(active) {

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

@@ -15,9 +15,8 @@
 'use strict';
 import GridUtils from '../GridUtils.js';
 import Globals from '../Globals.js';
-import U from '../../../Core/Utilities.js';
+import { fireEvent } from '../../../Shared/Utilities.js';
 const { makeHTMLElement } = GridUtils;
-const { fireEvent } = U;
 /* *
  *
  *  Class
@@ -146,6 +145,7 @@ export class Popup {
             return;
         }
         const next = this.options.nextToAnchor || false;
+        const edgePadding = 8;
         const popupRect = this.container.getBoundingClientRect();
         const parentRect = wrapper.getBoundingClientRect();
         const anchorRect = anchorElement?.getBoundingClientRect() ?? parentRect;
@@ -153,24 +153,22 @@ export class Popup {
         let left = next ? anchorRect.right + 3 : anchorRect.left;
         // If popup's right side is after the parent's right side, shift popup
         // to the left of the anchor element.
-        if (left + popupRect.width > parentRect.width) {
+        if (left + popupRect.width > parentRect.right - edgePadding) {
             left = -popupRect.width + (next ? anchorRect.left + 4 : anchorRect.right);
         }
         // If popup's left side is before the parent's left side,
         // shift popup so it's aligned to parent's left.
-        if (left < parentRect.left) {
-            left = parentRect.left;
+        if (left < parentRect.left + edgePadding) {
+            left = parentRect.left + edgePadding;
         }
         // Apply positioning
         this.container.style.top = `${top - parentRect.top}px`;
         this.container.style.left = `${left - parentRect.left}px`;
         // If the content is too tall, constrain the container to the bottom
         // of the parent to enable content Y-scrolling.
-        const contentRect = this.content.getBoundingClientRect();
-        if (contentRect.height + contentRect.top - parentRect.top >
-            parentRect.height) {
+        if (top + popupRect.height > parentRect.bottom - edgePadding) {
             this.container.style.top = 'auto';
-            this.container.style.bottom = '0';
+            this.container.style.bottom = `${edgePadding}px`;
         }
         else {
             this.container.style.top = `${top - parentRect.top}px`;

package/es-modules/Grid/Core/UI/SvgIcons.d.ts

@@ -1,7 +1,16 @@
 /**
- * The name of the icon from SvgIcons registry
+ * The name of the icon from SvgIcons registry.
+ * Use these names wherever an icon is accepted (toolbar, menu, pagination).
+ * Can be overridden or extended via `rendering.icons`.
+ *
+ * Default icons available in the registry:
+ * - `filter`, `menu`, `checkmark`
+ * - `arrowUpDown`, `arrowUp`, `arrowDown`
+ * - `chevronLeft`, `chevronRight`, `doubleChevronLeft`, `doubleChevronRight`
+ * - `copy`, `clipboard`, `plus`, `trash`
+ * - `addRowAbove`, `addRowBelow`, `addColumnLeft`, `addColumnRight`
  */
-export type GridIconName = ('filter' | 'menu' | 'chevronRight' | 'checkmark' | 'upDownArrows' | 'sortAsc' | 'sortDesc');
+export type GridIconName = ('filter' | 'menu' | 'checkmark' | 'arrowUpDown' | 'arrowUp' | 'arrowDown' | 'chevronLeft' | 'chevronRight' | 'doubleChevronLeft' | 'doubleChevronRight' | 'copy' | 'clipboard' | 'plus' | 'trash' | 'addRowAbove' | 'addRowBelow' | 'addColumnLeft' | 'addColumnRight');
 /**
  * The registry of all Grid Svg icons with their SVG path data.
  */
@@ -32,20 +41,46 @@ export interface SVGDefinition {
     children?: PathDefinition[];
 }
 /**
- * Creates an SVG icon element from the SvgIcons registry.
+ * Value for an entry in the icon registry: either an SVG definition object
+ * or a raw SVG markup string (e.g. `'<svg>...</svg>'`).
+ */
+export type IconRegistryValue = SVGDefinition | string;
+/**
+ * Looks up an icon by name, checking custom icons first and then falling
+ * back to the built-in registry.
+ *
+ * @param name
+ * Icon name to look up.
+ *
+ * @param customIcons
+ * Optional map of icon names provided via `rendering.icons`.
+ *
+ * @returns
+ * Icon registry value (definition or raw SVG string), or `undefined` if
+ * neither a custom nor a built-in icon exists for the given name.
+ */
+export declare function getIconFromRegistry(name: string, customIcons?: Record<string, IconRegistryValue>): IconRegistryValue | undefined;
+/**
+ * Creates an SVG icon element from the SvgIcons registry or a custom
+ * registry. When `customIcons` is provided, `name` can be any registered
+ * name (built-in or custom). When omitted, only built-in `GridIconName`
+ * values are allowed. The SVG element always receives the default icon
+ * class name from `Globals`.
  *
  * @param name
- * The name of the icon from SvgIcons registry
+ * The name of the icon (built-in or from registry)
  *
- * @param className
- * CSS class name for the SVG element (default: 'hcg-icon')
+ * @param customIcons
+ * Optional custom icons map from `rendering.icons`. When provided, custom
+ * and override icons are used and arbitrary names are allowed.
  *
  * @returns
  * SVG element with the specified icon
  */
-export declare function createGridIcon(name: GridIconName, className?: string): SVGElement;
+export declare function createGridIcon(name: string, customIcons?: Record<string, IconRegistryValue>): SVGElement;
 declare const _default: {
     readonly createGridIcon: typeof createGridIcon;
+    readonly getIconFromRegistry: typeof getIconFromRegistry;
     readonly icons: Record<GridIconName, SVGDefinition>;
     readonly pathDefaults: Partial<PathDefinition>;
 };